/* sleep // DASH — additions on top of the shared // DASH stylesheet (app.css) */
:root {
  --ev-oa: #e0565b; --ev-ca: #7b5bd6; --ev-h: #d9822b; --ev-ua: #8a96a2; --ev-rera: #22a55a; --ev-csr: #157a96;
}

/* landing */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; padding: 10px 0 30px; }
.hero h1 { font-size: 44px; line-height: 1.08; letter-spacing: -.025em; margin-bottom: 14px; font-weight: 800; }
.hero h1 i { font-style: normal; color: var(--accent); }
.hero .lead { font-size: 17px; color: var(--ink-2); margin: 0 0 24px; max-width: 560px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-art { padding: 22px; }
.hero-art .ring { margin: 0 auto 14px; width: 132px; height: 132px; }
.hero-art .ring > div { width: 110px; height: 110px; }
.hero-art .ring .num { font-size: 34px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero h1 { font-size: 34px; } }
.eyebrow { font: 700 11px var(--sans); letter-spacing: .18em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; display: block; }
.section-h { text-align: center; margin: 46px 0 22px; }
.section-h h2 { font-size: 26px; letter-spacing: -.01em; }
.section-h p { color: var(--ink-2); margin: 6px auto 0; max-width: 620px; }
.feature { margin: 0; }
.feature .ico { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 18px; margin-bottom: 12px; }
.feature h3 { font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.feature p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.audience { display: flex; flex-direction: column; margin: 0; }
.audience ul { padding-left: 18px; color: var(--ink-2); margin: 8px 0 18px; flex: 1; }
.audience li { margin: 4px 0; }
.steps { counter-reset: s; }
.steps .card { margin: 0; position: relative; padding-top: 30px; }
.steps .card::before { counter-increment: s; content: counter(s); position: absolute; top: -14px; left: 24px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 13px var(--mono); }
.devices { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* score + bars (patient view) */
.score-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
@media (max-width: 700px) { .score-wrap { grid-template-columns: 1fr; } }
.ring.big { width: 180px; height: 180px; margin: 0 auto; }
.ring.big > div { width: 150px; height: 150px; }
.ring.big .num { font-size: 48px; }
.ring.big small { font-size: 11px; }
.meter { margin: 0 0 16px; }
.meter .row { margin-bottom: 4px; }
.meter b { font-size: 14px; }
.bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.nightnav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.nightnav select { width: auto; min-width: 220px; text-align: center; }

/* charts */
.chart { position: relative; height: 220px; }
.chart.sm { height: 120px; }
.chart.xs { height: 80px; }
.chart.flow { height: 190px; }
.wave { margin-top: 10px; }
.wave .label { margin: 0 0 2px; font-weight: 600; color: var(--ink-2); }
.ev-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); }
.ev-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ev-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.table.dense td { padding: 8px 10px; }
.table td.num-c, .table th.num-c { text-align: right; font-family: var(--mono); }
.table tr.link { cursor: pointer; }
.table tr.link:hover td { background: var(--bg-2); }
.v-ok { color: var(--ok); } .v-warn { color: var(--warn); } .v-bad { color: var(--bad); } .v-muted { color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }

/* upload */
.dropzone { border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 40px 20px; text-align: center; background: var(--bg-2); transition: border-color .15s, background .15s; }
.dropzone.hover { border-color: var(--accent); background: var(--accent-soft); }
.progress { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 14px 0 6px; }
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.upload-log { font: 12px/1.6 var(--mono); color: var(--ink-2); }

/* print: the clinician report */
@media print {
  .top, .foot, .noprint, .tabs { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; border-color: #ccc; }
  .wrap { max-width: none; }
}