/* Sleep debt. Everything scoped under .sd-*. */

.sd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sd-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.sd-hero img { display: block; width: 260px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.sd-hero.wide img { width: 330px; }
.sd-tk { font: 600 12px var(--sans); fill: var(--dim); }

/* the reaction test */
.sd-pvt { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sd-screen { width: 100%; height: 150px; border-radius: 18px; background: #06070D; border: 2px solid var(--line); display: grid; place-items: center; position: relative; transition: border-color .1s; }
.sd-screen.on { border-color: var(--gold); }
.sd-screen.done { border-color: var(--mint); }
.sd-screen.slow { border-color: var(--red); }
.sd-ms { font: 700 52px var(--mono); color: var(--gold); letter-spacing: .02em; }
.sd-screen.done .sd-ms { color: var(--mint); }
.sd-screen.slow .sd-ms { color: var(--red); }
.sd-wait { position: absolute; font: 600 14px var(--sans); color: var(--dim); }
.sd-rds { display: flex; gap: 8px; }
.sd-rds i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); }
.sd-rds i.now { border-color: var(--gold); }
.sd-rds i.got { background: var(--mint); border-color: var(--mint); }
.sd-rds i.slow { background: var(--red); border-color: var(--red); }
.btn.sd-tap { min-height: 64px; font-size: 18px; }

/* your taps */
.sd-rt { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.sd-rt svg { display: block; width: 100%; height: auto; }
.sd-lz { fill: rgba(216, 85, 85, .12); }
.sd-lzt { font: 700 13px var(--sans); fill: var(--red); }
.sd-rax { stroke: var(--line-strong); stroke-width: 1.5; }
.sd-rl { stroke: var(--red); stroke-width: 2; stroke-dasharray: 4 3; }
.sd-dot { fill: var(--mint); }
.sd-dot.slow { fill: var(--red); }
.sd-avg { text-align: center; font: 600 15px var(--sans); color: var(--dim); }
.sd-avg b { color: var(--text); }

/* the groups */
.sd-groups { width: 100%; max-width: 330px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sd-groups div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); text-align: center; }
.sd-groups div.none { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; border-style: dashed; }
.sd-groups b { font: 700 22px var(--sans); color: var(--violet-bright); }
.sd-groups div.none b { color: var(--red); }
.sd-groups span { font: 600 13px var(--sans); color: var(--dim); }

/* the tab */
.sd-led { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.sd-led svg { display: block; width: 100%; height: auto; }
.sd-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; font: 600 12px var(--sans); color: var(--dim); }
.sd-key span { display: flex; align-items: center; gap: 5px; }
.sd-key i { width: 12px; height: 12px; border-radius: 3px; }
.k-sl, .sd-sl { background: var(--violet-bright); fill: var(--violet-bright); }
.k-aw, .sd-aw { background: rgba(255, 255, 255, .16); fill: rgba(255, 255, 255, .16); }
.k-ov, .sd-ov { background: var(--red); fill: var(--red); }
.sd-ov.drop { animation: sd-drop .5s ease-out; }
@keyframes sd-drop { from { opacity: 0; } to { opacity: 1; } }
.sd-rlab { font: 700 12px var(--sans); fill: var(--dim); }
.sd-tabbg { fill: rgba(216, 85, 85, .08); stroke: var(--line); }
.sd-tabfill { fill: var(--red); }
.sd-tabv { align-self: flex-end; display: flex; align-items: baseline; gap: 8px; font: 600 13px var(--sans); color: var(--dim); }
.sd-tabv b { font: 700 20px var(--sans); color: var(--red); min-width: 44px; text-align: right; }

/* lines */
.sd-plot { width: 100%; max-width: 340px; }
.sd-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.sd-pax { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.sd-ylab { font: 700 13px var(--sans); fill: var(--text); }
.sd-ln { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sd-ln.l8 { stroke: var(--mint); }
.sd-ln.l6 { stroke: var(--gold); }
.sd-ln.l4 { stroke: var(--red); }
.sd-lt { font: 700 13px var(--sans); }
.sd-lt.l8 { fill: var(--mint); }
.sd-lt.l6 { fill: var(--gold); }
.sd-lt.l4 { fill: var(--red); }

/* 6 h against 4 h */
.sd-vs { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 16px; }
.sd-vr { display: flex; flex-direction: column; gap: 8px; }
.sd-vr > span { font: 700 14px var(--sans); color: var(--text); }
.sd-pair { display: grid; grid-template-columns: 34px 1fr 52px; align-items: center; gap: 8px; }
.sd-pair em { font: 700 13px var(--sans); font-style: normal; color: var(--dim); }
.sd-pair i { height: 14px; border-radius: 999px; background: var(--red); width: var(--w); }
.sd-pair i.f { background: var(--violet-bright); }
.sd-pair i.q4 { width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.sd-vs.on .sd-pair i.q4 { width: var(--w); }
.sd-pair b { font: 700 15px var(--sans); color: var(--text); text-align: right; }
.sd-vr.q .sd-pair:last-child b { color: var(--gold); }

/* how big */
.sd-size { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 12px; }
.sd-sz { display: grid; grid-template-columns: 1fr 48px; gap: 6px 8px; align-items: center; }
.sd-sz span { grid-column: 1 / -1; font: 700 14px var(--sans); color: var(--text); }
.sd-sz i { height: 14px; border-radius: 999px; background: var(--red); width: var(--w); }
.sd-sz.dim i { background: var(--dim); }
.sd-sz b { font: 700 15px var(--sans); color: var(--text); text-align: right; }
.sd-res { display: flex; flex-direction: column; gap: 6px; }
.sd-res div { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--raised); border: 1.5px solid var(--gold); }
.sd-res em { font: 600 14px var(--sans); font-style: normal; color: var(--dim); }
.sd-res b { font: 700 14px var(--sans); color: var(--gold); }

/* slow payback */
.sd-slow { width: 100%; max-width: 330px; display: flex; align-items: center; gap: 10px; }
.sd-one { display: flex; flex-direction: column; align-items: center; padding: 14px 10px; border-radius: 14px; background: rgba(216, 85, 85, .12); border: 1.5px solid var(--red); }
.sd-one b { font: 700 20px var(--sans); color: var(--red); }
.sd-one span { font: 600 13px var(--sans); color: var(--dim); }
.sd-slow > i { font-style: normal; color: var(--dim); font-size: 22px; }
.sd-four { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-four span { text-align: center; padding: 10px 4px; border-radius: 10px; background: var(--raised); border: 1.5px solid var(--violet); font: 700 13px var(--sans); color: var(--text); }

@media (max-height: 700px) {
  .sd-hero img { max-height: 28vh; }
  .sd-screen { height: 120px; }
}