/* Insomnia. Everything scoped under .ins-*. */

.ins-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ins-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }

/* 2:37 am */
.ins-night { position: relative; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, #0E1230, #151A38); border: 1px solid var(--line); }
.ins-top { display: flex; align-items: center; justify-content: space-between; }
.ins-clock { font: 700 30px var(--mono); color: #FF9F7A; text-shadow: 0 0 14px rgba(255, 140, 100, .55); letter-spacing: 1px; }
.ins-heart { display: flex; align-items: center; gap: 6px; font: 600 13px var(--sans); color: var(--dim); }
.ins-heart b { font: 700 20px var(--mono); color: var(--text); }
.ins-heart i { width: 14px; height: 14px; background: #FF8FA3; clip-path: path('M7 13 L1.5 7.5 A3.3 3.3 0 0 1 7 2.8 A3.3 3.3 0 0 1 12.5 7.5 Z'); animation: ins-beat 1s ease-in-out infinite; }
@keyframes ins-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } }
.ins-night.jolt .ins-heart b, .ins-night.jolt .ins-clock { animation: ins-jolt .45s ease-out; }
@keyframes ins-jolt { 0% { transform: scale(1.18); } 100% { transform: none; } }
.ins-thinks { min-height: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transition: opacity .9s; }
.ins-thinks.fade { opacity: 0; }
.ins-bub { max-width: 82%; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: var(--raised); border: 1px solid var(--line-strong); font: 600 13.5px var(--sans); color: var(--text); animation: ins-in .35s ease-out both; }
@keyframes ins-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ins-bed { position: relative; display: flex; justify-content: center; }
.ins-bed img { height: 120px; width: auto; transition: filter 1.2s; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4)); }
.ins-z { position: absolute; right: 22%; top: 2px; font: 800 18px var(--serif); color: var(--violet-bright); opacity: 0; transition: opacity 1s; }
.ins-night.asleep .ins-bed img { filter: brightness(.62) drop-shadow(0 10px 16px rgba(0, 0, 0, .4)); }
.ins-night.asleep .ins-z { opacity: 1; }
.ins-meter { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; }
.ins-meter span { font: 700 13px var(--sans); color: var(--dim); }
.ins-mt { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ins-mt i { display: block; height: 100%; border-radius: 5px; background: var(--violet-bright); transition: width .35s; }
.ins-acts .choice:disabled { opacity: .45; }
.ins-stop { border-color: var(--violet-bright); }

/* which one has insomnia */
.ins-who { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.ins-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 64px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: opacity .3s, border-color .3s, background .3s; }
.ins-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(123, 92, 253, .25); color: var(--violet-bright); font: 800 17px var(--sans); }
.ins-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ins-tx b { font: 700 15px var(--sans); }
.ins-tx span { font: 500 13.5px/1.3 var(--sans); color: var(--dim); }
.ins-h { flex: none; font: 700 13px var(--mono); color: var(--violet-bright); }
.ins-card.right { border-color: var(--mint); background: rgba(63, 214, 154, .1); }
.ins-card.picked { border-color: var(--violet-bright); }
.ins-card.dim { opacity: .45; }

/* the recording */
.ins-rec { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.ins-row { display: flex; flex-direction: column; gap: 5px; }
.ins-row > span { font: 700 13px var(--sans); color: var(--text); }
.ins-tr { position: relative; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.ins-tr i { position: absolute; top: 0; bottom: 0; }
.ins-tr i.lt { background: var(--violet); }
.ins-tr i.aw { background: #C9B98F; }
.ins-tr.rec i { opacity: 0; transition: opacity .5s; }
.ins-tr.rec.on i { opacity: 1; }
.ins-tr.rec b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 16px var(--sans); color: var(--dim); transition: opacity .3s; }
.ins-tr.rec.on b { opacity: 0; }
.ins-ax { display: flex; justify-content: space-between; font: 600 12px var(--sans); color: var(--dim); }
.ins-key { display: flex; gap: 16px; justify-content: center; font: 600 12.5px var(--sans); color: var(--dim); }
.ins-key span { display: flex; align-items: center; gap: 6px; }
.ins-key i { width: 12px; height: 12px; border-radius: 3px; }
.ins-key i.lt { background: var(--violet); }
.ins-key i.aw { background: #C9B98F; }

/* the nap race */
.ins-race { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 330px; }
.ins-lane { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); transition: background .8s, border-color .5s; }
.ins-lane svg { width: 96px; height: auto; }
.ins-lane b { font: 700 14px var(--sans); color: var(--text); text-align: center; }
.ins-lane > span { font: 600 12.5px var(--sans); color: var(--dim); }
.ins-st { margin-top: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); font: 700 12.5px var(--sans); font-style: normal; color: var(--text); }
.ins-bf { fill: #8A6A4E; } .ins-pl { fill: #E8E6F2; } .ins-hd { fill: #E9B892; } .ins-bk { fill: #4B5BB8; } .ins-lg { stroke: #8A6A4E; stroke-width: 3; stroke-linecap: round; }
.ins-lane.out { background: #141634; border-color: var(--violet-bright); }
.ins-lane.out .ins-st { background: rgba(123, 92, 253, .3); color: var(--violet-bright); }
.ins-lane.up { border-color: #C9B98F; }
.ins-lane.up .ins-st { background: rgba(201, 185, 143, .2); color: #E4D6AE; }

/* how it sticks: a calendar of nights */
.ins-stick { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.ins-exam { position: relative; display: flex; height: 26px; border-radius: 8px; overflow: hidden; }
.ins-exam b { width: 25%; display: flex; align-items: center; justify-content: center; background: var(--gold); color: #2A1B00; font: 700 13px var(--sans); }
.ins-exam span { flex: 1; display: flex; align-items: center; padding-left: 10px; font: 700 13px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s; }
.ins-stick.ended .ins-exam span { opacity: 1; }
.ins-cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.ins-col { display: flex; flex-direction: column; gap: 4px; }
.ins-col i { height: 16px; border-radius: 4px; background: rgba(255, 255, 255, .06); transition: background .3s; }
.ins-col.on i { background: rgba(169, 155, 255, .18); }
.ins-col.on i.bad { background: var(--violet-bright); }
.ins-wax { display: flex; justify-content: space-between; }
.ins-key i { background: rgba(169, 155, 255, .18); }
.ins-key i.bad { background: var(--violet-bright); }
.ins-dread { align-self: flex-end; opacity: 0; transition: opacity .5s; animation: none; }
.ins-stick.dread .ins-dread { opacity: 1; }
.ins-av { background: none; width: 46px; height: 40px; }
.ins-face { width: 46px; height: auto; display: block; }

@media (max-height: 700px) {
  .ins-col i { height: 12px; }
  .ins-bed img { height: 92px; }
  .ins-thinks { min-height: 56px; }
  .ins-clock { font-size: 26px; }
  .ins-card { min-height: 56px; padding: 8px 10px; }
}