/*
  ADHDose article-motion.css
  Scroll-story components for Learn articles: data figures, wait-time
  charts, sequence rails. Pairs with article-motion.js; every component
  renders complete and static without JavaScript or with reduced motion.
*/

/* ── QUEUE FIGURE (per-100 dot field + headline count) ── */
.am-queue{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;margin:8px 0 36px;padding:30px 0 26px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.am-q-label{font-family:var(--mono);font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.13em;margin-bottom:10px;}
.am-q-num{font-family:var(--display);font-size:clamp(2.6rem,6vw,3.8rem);font-weight:800;letter-spacing:-0.03em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;}
.am-q-sub{font-size:.8125rem;color:var(--mid);line-height:1.7;margin-top:12px;max-width:34ch;}
.am-q-caption{font-family:var(--mono);font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.13em;margin-bottom:12px;}
.am-dotfield{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;width:min(200px,42vw);}
.am-dotfield span{display:block;aspect-ratio:1/1;border-radius:50%;}
.am-dotfield .d-long{background:rgba(245,166,35,.62);}
.am-dotfield .d-mid{background:var(--muted);opacity:.38;}
.am-dotfield .d-fast{background:var(--teal);}
.am-q-legend{display:flex;flex-direction:column;gap:5px;margin-top:14px;}
.am-q-legend span{font-family:var(--mono);font-size:.62rem;color:var(--muted);display:flex;align-items:center;gap:7px;}
.am-q-legend i{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.am-q-legend .d-long{background:rgba(245,166,35,.62);}
.am-q-legend .d-mid{background:var(--muted);opacity:.5;}
.am-q-legend .d-fast{background:var(--teal);}
.am-queue figcaption{grid-column:1 / -1;font-family:var(--mono);font-size:.6rem;color:var(--muted);opacity:.6;line-height:1.6;margin-top:4px;}

/* ── WAIT CHART (assessment + titration, to scale in weeks) ── */
.am-chart{margin:8px 0 36px;padding:26px 0 22px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.am-chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
.am-ch-title{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-0.01em;}
.am-ch-note{font-family:var(--mono);font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.am-row{margin-bottom:18px;}
.am-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px;}
.am-row-name{font-size:.875rem;font-weight:600;color:var(--text);}
.am-row-fig{font-family:var(--mono);font-size:.66rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;}
.am-track{display:flex;height:14px;border-radius:7px;overflow:hidden;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:20% 100%;}
.am-seg{display:block;height:100%;}
.am-seg.seg-assess{background:var(--teal);opacity:.9;border-radius:7px 0 0 7px;}
.am-seg.seg-assess:only-child{border-radius:7px;}
.am-seg.seg-titr{background:var(--am-violet,#6B5EA8);opacity:.85;border-radius:0 7px 7px 0;}
.am-seg.seg-range{background:linear-gradient(to right,var(--teal) 0%,var(--teal) 12%,var(--teal-md) 100%);opacity:.75;border-radius:7px;}
.am-seg.seg-nhs{background:linear-gradient(to right,rgba(245,166,35,.78) 60%,rgba(245,166,35,.15) 100%);border-radius:7px;}
.am-axis{display:flex;justify-content:space-between;margin-top:10px;}
.am-axis span{font-family:var(--mono);font-size:.58rem;color:var(--muted);opacity:.75;font-variant-numeric:tabular-nums;}
.am-ch-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;}
.am-ch-legend span{font-family:var(--mono);font-size:.62rem;color:var(--muted);display:flex;align-items:center;gap:7px;}
.am-ch-legend i{width:10px;height:6px;border-radius:3px;flex-shrink:0;}
.am-ch-legend .seg-assess{background:var(--teal);}
.am-ch-legend .seg-titr{background:var(--am-violet,#6B5EA8);}
.am-ch-legend .seg-nhs{background:rgba(245,166,35,.7);}
.am-chart figcaption{font-family:var(--mono);font-size:.6rem;color:var(--muted);opacity:.6;line-height:1.6;margin-top:14px;}

/* ── SEQUENCE RAIL (script steps, shared care stages) ── */
.am-flow{position:relative;padding-left:34px;}
.am-flow::before{content:'';position:absolute;left:9px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--border);}
.am-flow-line{position:absolute;left:9px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--teal);opacity:.65;}
.am-flow > .say-card,.am-flow > .track-card{position:relative;}
.am-flow > .say-card::before,.am-flow > .track-card::before{content:'';position:absolute;left:-29px;top:26px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--muted);transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);}
.am-flow > .lit::before{border-color:var(--teal);background:var(--teal-md);box-shadow:0 0 0 3px var(--teal-lo);}
.am-flow > .say-card,.am-flow > .track-card{transition:border-color .35s var(--ease);}
.am-flow > .lit{border-color:rgba(0,201,167,.22);}

/* ── FORK (shared care outcome) ── */
.am-fork{margin:6px 0 4px;display:flex;flex-direction:column;gap:9px;}
.am-fork-branch{display:flex;align-items:baseline;gap:10px;}
.fb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:relative;top:-1px;}
.fork-yes .fb-dot{background:var(--teal);}
.fork-no .fb-dot{background:var(--muted);opacity:.6;}
.fb-text{font-family:var(--mono);font-size:.68rem;color:var(--mid);line-height:1.7;}
.fork-no .fb-text{color:var(--muted);}

/* ── RESPONSIVE ── */
@media(max-width:760px){
  .am-queue{grid-template-columns:1fr;gap:26px;}
  .am-dotfield{width:min(200px,60vw);}
  .am-row-top{flex-direction:column;gap:2px;}
  .am-row-fig{text-align:left;}
  .am-axis span.ax-minor{display:none;}
}