/* ============================================================================
   The app's parts on the website. Ported from hud/src/renderer/review/styles.css, review/growth.css and
   hud/styles.css; same values, same class names where they do not clash with the page. Colours, sizes, radii,
   durations and easings come only from brand.css (site/tests/pages.test.mjs fails on a raw colour here).
   App-generic names (.row, .panel, .tab, .chip, .line…) live under .app-frame or .hudc.
   Motion: a [data-demo] block gets .will-play from site.js, then .play when it scrolls into view. Without JS, or
   with reduced motion, everything is simply shown in its final state.
   ========================================================================== */

/* ------------------------------------------------------------ controls */
.ico { flex: none; display: block; }
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 var(--s3); border: 1px solid var(--hair); background: var(--surface);
  border-radius: var(--r-ctl); font: inherit; font-size: var(--fs-13); font-weight: 520; line-height: 1; cursor: pointer; color: var(--text);
  text-decoration: none; white-space: nowrap;
  transition: background var(--d1) var(--out), border-color var(--d1) var(--out), transform var(--d1) var(--out);
}
.btn .ico { color: var(--text2); }
.btn:hover { background: var(--hover); border-color: var(--hair-strong); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 560; }
.btn.primary .ico { color: currentColor; }
.btn.primary:hover { background: var(--accent-strong); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text2); }
.btn.ghost:hover { color: var(--text); background: var(--hover); }
.btn.small { height: 28px; padding: 0 10px; font-size: var(--fs-12); }
.btn.lg { height: 40px; padding: 0 var(--s4); font-size: var(--fs-14); border-radius: 10px; }
.btn.xl { height: 48px; padding: 0 22px; font-size: var(--fs-15); border-radius: 12px; gap: 8px; }
.btn.lg.ghost, .btn.xl.ghost { border-color: var(--hair-strong); color: var(--text); }
.btn.lg.ghost:hover, .btn.xl.ghost:hover { background: var(--hover); }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin: 0 1px;
  font: 500 11px/1 var(--ui); letter-spacing: 0;
  color: var(--text2); background: var(--surface);
  border: 1px solid var(--hair-strong); border-bottom-width: 1.5px; border-radius: var(--r-key);
  vertical-align: 1px;
}
.iconbtn { width: 32px; height: 32px; border-radius: var(--r-ctl); display: inline-grid; place-items: center; color: var(--text2); }
.trk { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text2); background: var(--hover); box-shadow: inset 0 0 0 1px var(--hair); white-space: nowrap; }
.gx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ts { display: inline-flex; align-items: center; border: 1px solid var(--hair); background: var(--surface); border-radius: 6px; font-size: var(--fs-12); font-weight: 520; padding: 2px 7px; color: var(--text2); font-variant-numeric: tabular-nums; }
.seg-ctl { display: inline-flex; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-ctl); padding: 2px; gap: 2px; width: fit-content; }
.seg-ctl button { appearance: none; border: 0; background: transparent; border-radius: 6px; padding: 4px 12px; font: inherit; font-size: var(--fs-13); font-weight: 520; cursor: pointer; color: var(--text2); font-variant-numeric: tabular-nums; transition: background var(--d1) var(--out), color var(--d1) var(--out); white-space: nowrap; }
.seg-ctl button:hover { color: var(--text); }
.seg-ctl button[aria-checked='true'], .seg-ctl button[aria-pressed='true'] { background: var(--selected); color: var(--text); }
.seg-ctl button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.rt-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--tint); color: var(--accent-text); }
.hint { font-size: var(--fs-13); color: var(--text3); }

/* ------------------------------------------------------------ the mark */
.mark { flex: none; display: block; }
.mark-dot { fill: var(--signal); }

/* ------------------------------------------------------------ grade glyphs */
.gg { flex: none; display: block; }
.gg-cut { fill: var(--surface); }
.gg-cut-stroke { stroke: var(--surface); fill: none; }
.t-pos, .gg-brilliant, .gg-great, .gg-good { color: var(--accent); }
.gg-routine { color: var(--text3); }
.t-neutral { color: var(--text2); }
.t-neg, .gg-inaccuracy, .gg-mistake, .gg-blunder { color: var(--neg); }
.t-miss, .gg-missed { color: var(--text2); }
.gtag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); font-weight: 620; letter-spacing: 0.01em; white-space: nowrap; }
.gtag.t-neutral { color: var(--text3); }
.gtag.t-miss { color: var(--text); }

/* the legend tile */
.grade-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gl-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-ctl); outline: none; transition: background var(--d1) var(--out); }
.gl-row:hover, .gl-row:focus-visible { background: var(--hover); }
.gl-row:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.gl-row .gtag { font-size: var(--fs-13); }
.gl-hint { font-size: var(--fs-12); color: var(--text2); text-wrap: wrap; }

/* ------------------------------------------------------------ accuracy ring */
.ring-wrap { position: relative; flex: none; }
.ring-88 { width: 88px; height: 88px; }
.ring-wrap svg { display: block; }
.ring-track { stroke: var(--hair); }
.ring-arc { stroke: var(--accent); }
.ring-arc.mid { stroke: var(--mid); }
.ring-arc.lo { stroke: var(--neg); }
.will-play:not(.play) .ring-arc { stroke-dashoffset: 238.76px; }
.play .ring-arc { animation: ring-draw var(--d4) var(--out) 160ms backwards; }
@keyframes ring-draw { from { stroke-dashoffset: 238.76px; } }
.ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring-text b { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ring-text span { margin-top: 4px; font-size: 10.5px; font-weight: 560; color: var(--text3); letter-spacing: 0.02em; }

/* ------------------------------------------------------------ position vs goal */
.pgraph-wrap { margin: var(--s2) 0 var(--s6); padding: 4px 0 2px; border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.pgraph { display: block; width: 100%; height: auto; overflow: visible; }
.pg-grid { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 4; }
.pg-axis { stroke: var(--hair-strong); stroke-width: 1; }
.pg-lane { stroke: var(--hair); stroke-width: 1; }
.pg-area.up { fill: var(--accent); opacity: 0.16; }
.pg-area.dn { fill: var(--neg); opacity: 0.13; }
.pg-line { stroke: var(--text); stroke-width: 1.75; stroke-linejoin: round; }
.pg-pt { fill: var(--text2); stroke: var(--surface); stroke-width: 2; }
.pg-mark { cursor: pointer; outline: none; }
.pg-mark-bg { fill: var(--surface); transition: fill var(--d1) var(--out); }
.pg-mark:hover .pg-mark-bg, .pg-mark:focus-visible .pg-mark-bg, .pg-mark.on .pg-mark-bg { fill: var(--hover); }
.pg-mark:focus-visible .pg-mark-bg { stroke: var(--focus); stroke-width: 2; }
.will-play:not(.play) .pg-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.will-play:not(.play) .pg-area, .will-play:not(.play) .pg-pt, .will-play:not(.play) .pg-mark { opacity: 0; }
.play .pg-line { stroke-dasharray: 1; animation: pg-draw 1100ms var(--out) 260ms backwards; }
.play .pg-area { animation: fade var(--d3) var(--out) 1100ms backwards; }
.play .pg-pt, .play .pg-mark { animation: fade var(--d2) var(--out) 900ms backwards; }
@keyframes pg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }

/* ------------------------------------------------------------ the Review tab */
.rv-head { display: flex; gap: var(--s6); align-items: flex-start; padding: var(--s6); border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--surface); }
.rv-score { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.rv-tally { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-12); font-weight: 560; }
.rv-tally span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.rv-goal-h { display: flex; align-items: center; gap: var(--s3); }
.rv-goal .k, .rv-lesson-k { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--text2); letter-spacing: 0.01em; }
.rv-goal-text { margin: 6px 0 0; font-size: var(--fs-18); font-weight: 560; line-height: 1.4; letter-spacing: -0.012em; }
.rv-goal-ev { margin: 4px 0 0; font-size: var(--fs-13); color: var(--text2); }
.rv-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rv-meta .grow { flex: 1; }
.rv-select { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 9px 0 10px; font-size: var(--fs-12); font-weight: 560; border-radius: 7px; color: var(--text2); background: var(--bg); border: 1px solid var(--hair-strong); }
.ico.rot { transform: rotate(90deg); color: var(--text3); }
.goal-glyph { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); font-weight: 560; color: var(--text2); white-space: nowrap; }
.goal-glyph i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.goal-glyph.g-achieved { color: var(--text); }
.goal-glyph.g-achieved i { background: var(--accent); box-shadow: none; }
.goal-glyph.g-partly i { background: conic-gradient(var(--accent) 0 50%, transparent 50% 100%); box-shadow: inset 0 0 0 1.5px var(--accent); }
.goal-glyph.g-missed i { box-shadow: inset 0 0 0 1.5px var(--neg); }
h3.sec, .group-label { font-size: var(--fs-12); font-weight: 560; letter-spacing: 0.01em; color: var(--text2); margin: var(--s8) 0 var(--s2); }
.rv-sec-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: var(--s8) 0 var(--s3); }
.rv-sec-h h3.sec { margin: 0; }
.rv-moments { display: flex; flex-direction: column; gap: var(--s2); }
.rv-moment { position: relative; padding: 14px var(--s4) 12px 18px; border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--surface); scroll-margin: var(--s8); transition: border-color var(--d2) var(--out), box-shadow var(--d2) var(--out); }
.rv-moment::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--hair-strong); }
.rv-moment.m-pos::before { background: var(--accent); }
.rv-moment.m-neg::before { background: var(--neg); }
.rv-moment.m-miss::before { background: repeating-linear-gradient(180deg, var(--text3) 0 4px, transparent 4px 7px); }
.rv-moment.hl { border-color: var(--hair-strong); box-shadow: 0 0 0 3px var(--tint); }
.rv-moment[hidden] { display: none; }
.rv-m-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rv-skillname { font-size: var(--fs-12); color: var(--text2); font-weight: 520; }
.rv-line, .rv-better { display: grid; grid-template-columns: 72px 1fr; gap: var(--s3); margin-top: 10px; font-size: var(--fs-15); line-height: 1.55; }
.rv-line .who, .rv-better .who { font-size: var(--fs-12); font-weight: 600; color: var(--text3); padding-top: 3px; display: inline-flex; align-items: flex-start; gap: 4px; }
.rv-line q, .rv-better q, .ds-msg q { quotes: '“' '”'; }
.rv-line.them q { color: var(--text2); }
.rv-why { margin: 6px 0 0 84px; font-size: var(--fs-13); color: var(--text2); }
.rv-better { padding: 10px var(--s3); border-radius: var(--r-ctl); background: var(--tint); line-height: 1.5; font-weight: 520; }
.rv-better .who { color: var(--accent-text); }
.rv-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0 84px; }
.rv-lesson { margin-top: var(--s8); padding: var(--s4) var(--s4) var(--s4) 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hair); box-shadow: inset 3px 0 0 var(--signal); }
.rv-lesson p { margin: 6px 0 0; font-size: var(--fs-18); font-weight: 560; line-height: 1.4; letter-spacing: -0.012em; }
.rv-foot { margin: var(--s4) 0 0; font-size: var(--fs-12); color: var(--text3); }
.will-play:not(.play) .rv-moment, .will-play:not(.play) .rv-head { opacity: 0; }
.play .rv-head { animation: rise var(--d3) var(--out) backwards; }
.play .rv-moment { animation: rise var(--d3) var(--out) backwards; }
.play .rv-moment:nth-child(1) { animation-delay: 380ms; }
.play .rv-moment:nth-child(2) { animation-delay: 430ms; }
.play .rv-moment:nth-child(3) { animation-delay: 480ms; }
.play .rv-moment:nth-child(4) { animation-delay: 530ms; }
.play .rv-moment:nth-child(5) { animation-delay: 580ms; }
.play .rv-moment:nth-child(6) { animation-delay: 630ms; }

/* the moment tile: the Stronger line arrives after the card */
.tile-moment { box-shadow: var(--pop-shadow); }
.will-play:not(.play) .tile-moment .rv-better { opacity: 0; transform: translateY(6px); }
.play .tile-moment .rv-better { animation: rise var(--d3) var(--spring) 700ms backwards; }

/* ------------------------------------------------------------ the Review window frame */
.app-frame {
  position: relative; display: grid; grid-template-columns: 296px minmax(0, 1fr); height: 720px; overflow: hidden;
  border: 1px solid var(--hair-strong); border-radius: 14px; background: var(--bg); color: var(--text);
  font-size: var(--fs-14); font-weight: 420; line-height: 1.5; text-align: left; box-shadow: var(--pop-shadow);
}
.af-chrome { position: absolute; left: 16px; top: 18px; display: flex; gap: 8px; z-index: 1; }
.af-chrome i { width: 12px; height: 12px; border-radius: 50%; background: var(--hair-strong); }
.af-side { display: flex; flex-direction: column; min-height: 0; background: var(--side); border-right: 1px solid var(--hair); }
.app-frame .side-top { height: 50px; flex: none; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--s4) 0 84px; }
.app-frame .wordmark { display: inline-flex; align-items: center; gap: 7px; font-weight: 620; font-size: var(--fs-14); letter-spacing: -0.03em; }
.app-frame .side-switch { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 2px; margin: 0 var(--s3) var(--s3); padding: 2px; border-radius: var(--r-ctl); background: var(--hover); }
.app-frame .sw { min-width: 0; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; padding: 5px 7px; white-space: nowrap; font-size: 12.5px; font-weight: 520; color: var(--text2); text-align: center; }
.app-frame .sw.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--hair); }
.app-frame .side-growth { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; }
.app-frame .sg-lvl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 11px; font-weight: 650; color: var(--on-accent); background: var(--accent); font-variant-numeric: tabular-nums; }
.app-frame .sg-xp { flex: 1; height: 4px; border-radius: 4px; background: var(--hair-strong); overflow: hidden; }
.app-frame .sg-xp i { display: block; width: 42%; height: 100%; background: var(--accent); border-radius: 4px; }
.app-frame .search { position: relative; margin: 0 var(--s3) var(--s3); }
.app-frame .search-ico { position: absolute; left: 11px; top: 10px; color: var(--text3); }
.app-frame .search-f { display: flex; align-items: center; height: 34px; border: 1px solid var(--hair); background: var(--surface); border-radius: var(--r-ctl); padding: 0 var(--s3) 0 34px; font-size: var(--fs-13); color: var(--text3); }
.af-ctas { padding: 0 var(--s3); }
.add-row { width: 100%; display: flex; align-items: center; gap: var(--s2); border: 1px dashed var(--hair-strong); color: var(--text2); border-radius: var(--r-card); padding: 9px var(--s3); margin: 0 0 var(--s2); font-size: var(--fs-13); font-weight: 520; }
.add-row .grow { flex: 1; }
.prep-cta { border-style: solid; border-color: var(--hair); background: var(--surface); color: var(--text); }
.prep-cta .ico { color: var(--signal); }
.app-frame .list { flex: 1; overflow: hidden; padding: 0 var(--s2) var(--s3); }
.app-frame .group-label { margin: 0; padding: var(--s4) var(--s3) 6px; }
.app-frame .row { display: flex; gap: var(--s3); align-items: center; min-height: 56px; padding: var(--s2) var(--s3); border-radius: var(--r-card); }
.app-frame .row + .row { margin-top: 2px; }
.app-frame .row.open { background: var(--selected); }
.app-frame .r-main { flex: 1; min-width: 0; }
.app-frame .r-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.app-frame .title { font-size: var(--fs-14); font-weight: 550; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-frame .m { display: flex; min-width: 0; font-size: var(--fs-12); color: var(--text2); white-space: nowrap; margin-top: 2px; }
.app-frame .m .att { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-frame .m .num { flex: none; white-space: pre; font-variant-numeric: tabular-nums; }
.app-frame .date { font-size: var(--fs-12); color: var(--text2); white-space: nowrap; }
.r-glyphs { display: inline-flex; align-items: center; gap: 6px; }
.acc-pill { display: inline-grid; place-items: center; min-width: 24px; height: 16px; padding: 0 5px; border-radius: 5px; font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text2); background: var(--hover); }
.acc-pill.hi { color: var(--on-accent); background: var(--accent); }
.acc-pill.mid { color: var(--text); background: color-mix(in srgb, var(--mid) 28%, transparent); }
.acc-pill.lo { color: var(--neg); background: var(--neg-tint); }
.glyph.props { display: inline-flex; align-items: center; gap: 3px; height: 16px; font-size: 11px; font-weight: 560; color: var(--text2); padding: 0 6px 0 4px; border-radius: 999px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--hair); font-variant-numeric: tabular-nums; }
.app-frame .sidefoot { flex: none; padding: var(--s2) var(--s2) var(--s2) var(--s4); display: flex; align-items: center; gap: var(--s2); border-top: 1px solid var(--hair); }
.app-frame .conn { flex: 1; display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-12); color: var(--text3); min-width: 0; }
.app-frame .conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); flex: none; }
.app-frame .conn .state { color: var(--text2); font-weight: 520; }
.app-frame .conn .count { margin-left: auto; margin-right: var(--s1); font-variant-numeric: tabular-nums; }

.af-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app-frame .mh { flex: none; padding: var(--s6) var(--s8) 0; border-bottom: 1px solid var(--hair); }
.af-title { font-size: var(--fs-26); line-height: 32px; font-weight: 600; letter-spacing: var(--track-head); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-frame .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; font-size: var(--fs-13); color: var(--text2); margin-top: var(--s1); font-variant-numeric: tabular-nums; }
.hq-label { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-12); color: var(--text2); box-shadow: inset 0 0 0 1px var(--hair); }
.hq-label .ico { color: var(--accent); }
.app-frame .tabs { display: flex; gap: var(--s6); margin-top: var(--s4); }
.app-frame .tab { position: relative; padding: var(--s2) 0 var(--s3); font-size: var(--fs-14); font-weight: 480; color: var(--text2); display: inline-flex; align-items: center; gap: 7px; }
.app-frame .tab.sel { color: var(--text); font-weight: 560; }
.app-frame .tab.sel::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
.app-frame .tab.sel::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.app-frame .panel { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s8) var(--s8) var(--s12); scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent; }
.app-frame .panel:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.app-frame .inner { max-width: var(--col); }
.app-frame .inner > h3.sec:first-of-type { margin-top: var(--s6); }

/* ------------------------------------------------------------ sheets: the drill and the import */
.ds-card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); border-radius: 16px; background: var(--surface); border: 1px solid var(--hair); box-shadow: var(--pop-shadow); text-align: left; }
.ds-head { display: flex; justify-content: space-between; gap: var(--s3); }
.ds-title { margin: 4px 0 0; font-size: var(--fs-18); font-weight: 600; letter-spacing: var(--track-head); }
.ds-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--text2); }
.ds-skill { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--hover); font-weight: 560; }
.ds-t { color: var(--text3); font-weight: 500; font-variant-numeric: tabular-nums; }
.ds-convo { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--hair); }
.ds-context { font-size: var(--fs-12); color: var(--text3); font-style: italic; }
.ds-msg { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); font-size: var(--fs-14); line-height: 1.5; }
.ds-msg .who { font-size: var(--fs-12); font-weight: 600; color: var(--text3); padding-top: 2px; }
.ds-msg.them:last-child span:last-child { color: var(--text); font-weight: 520; }
.ds-compose { display: flex; flex-direction: column; gap: var(--s2); }
.ds-compose-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.ds-input { min-height: 64px; padding: 10px 12px; border-radius: var(--r-ctl); border: 1px solid var(--accent); box-shadow: 0 0 0 3px var(--focus); background: var(--surface); font-size: var(--fs-14); line-height: 1.5; }
.ds-caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--text); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.imp-label { font-size: var(--fs-12); font-weight: 560; color: var(--text2); }
.imp-sub { margin: 4px 0 0; font-size: var(--fs-13); color: var(--text2); overflow-wrap: anywhere; }
.imp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.imp-who { display: flex; flex-direction: column; gap: 6px; }
.imp-opt { display: flex; align-items: flex-start; gap: var(--s3); padding: 10px var(--s3); border: 1px solid var(--hair); border-radius: var(--r-card); }
.imp-opt.on { border-color: color-mix(in srgb, var(--signal) 60%, transparent); background: var(--tint); }
.radio { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.radio.on { box-shadow: inset 0 0 0 4.5px var(--signal); }
.imp-opt-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.imp-opt-n { font-size: var(--fs-14); font-weight: 560; }
.imp-opt-c { font-weight: 400; color: var(--text3); font-size: var(--fs-12); }
.imp-opt-s { font-size: var(--fs-12); color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-actions { display: flex; justify-content: flex-end; gap: var(--s2); }

/* ------------------------------------------------------------ the HUD card over a call */
.call-stage { position: relative; display: grid; place-items: center; min-height: 340px; padding: var(--s6); border-radius: var(--r-card); background: var(--side); overflow: hidden; }
.call-grid { position: absolute; inset: var(--s3); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s2); filter: blur(1.5px); opacity: 0.75; }
.call-tile { position: relative; display: grid; place-items: center; border-radius: 10px; background: var(--hover); border: 1px solid var(--hair); }
.call-tile:first-child { grid-row: span 2; }
.call-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--selected); color: var(--text2); font-weight: 600; font-size: var(--fs-14); }
.call-name { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--text3); }
.hudc {
  position: relative; width: min(420px, 100%); border-radius: 16px; overflow: hidden;
  background: var(--hud-glass); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  box-shadow: var(--hud-shadow); color: var(--hud-t1); font-size: 13px; line-height: 1.4; text-align: left;
}
.hudc kbd { min-width: 18px; height: 18px; padding: 0 5px; margin: 0; border: 0; border-radius: 5px; background: var(--hud-key); color: var(--hud-t2); font-size: 10.5px; vertical-align: middle; }
.hudc .hd { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; color: var(--hud-t2); white-space: nowrap; font-size: 12px; }
.hudc .grip { width: 12px; height: 20px; flex: none; background: radial-gradient(circle, var(--hud-t3) 1px, transparent 1.5px) 1px 3px / 5px 5px; }
.hudc .st i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--hud-mint); box-shadow: 0 0 8px var(--hud-mint); }
.hudc .pchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--hud-chip); color: var(--hud-t2); font-size: 12px; font-weight: 500; }
.hudc .pchip.auto { background: transparent; box-shadow: inset 0 0 0 1px var(--hud-hair); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--hud-t3); }
.hudc .vad { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--hud-t3); }
.hudc .vad .dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.hudc .vad b { width: 5px; height: 5px; border-radius: 50%; background: var(--hud-t3); display: inline-block; }
.hudc .vad .who.on b { background: var(--hud-t1); animation: breathe 1.4s ease-in-out infinite; }
.hudc .vad b:nth-child(2) { animation-delay: 0.2s; }
.hudc .vad b:nth-child(3) { animation-delay: 0.4s; }
@keyframes breathe { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.05); } }
.hudc .cardwrap { display: block; }
.hudc .body { padding: 12px 16px 12px; border-top: 1px solid var(--hud-hair); }
.hudc .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; margin-bottom: 8px; }
.hudc .tag.speak.high { color: var(--hud-mint-ink); background: var(--hud-mint); }
.hudc .tag .ico { fill: currentColor; }
.hudc .line { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--hud-t1); }
.hudc .why { margin: 6px 0 0; font-size: 13px; color: var(--hud-t2); }
.hudc .chips { display: flex; gap: 6px; padding: 0 16px 12px; flex-wrap: wrap; }
.hudc .chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 999px; background: var(--hud-chip); font-size: 13px; font-weight: 500; color: var(--hud-t2); white-space: nowrap; }
.hudc .chip.primary { color: var(--hud-t1); }
.hud-progress { height: 3px; background: var(--hud-chip); }
.hud-progress i { display: block; width: 86%; height: 100%; background: var(--hud-mint); transform-origin: left; }
.hudc .ft { display: flex; gap: 10px; align-items: center; padding: 8px 12px 9px 16px; border-top: 1px solid var(--hud-hair); font-size: 11px; color: var(--hud-t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hudc .ft .sep { opacity: 0.5; }
.hudc .ft .pending { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hud-hair); color: var(--hud-t2); }
/* the loop (site.js): quiet pill → a card → quiet again */
.hudc.state-pill { width: auto; }
.hudc.state-pill .cardwrap { display: none; }
.hudc.state-card .cardwrap { animation: rise 160ms ease-out both; }
.play .hudc.state-card .hud-progress i { animation: drain 7s linear both; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0.12); } }

/* ------------------------------------------------------------ trails: compact (one line) and on a route page */
.trail.compact, .trail.mini { display: flex; flex-direction: column; gap: 8px; }
.tc-head { display: flex; align-items: baseline; gap: var(--s4); min-width: 0; }
.tc-owner { font-size: var(--fs-14); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tc-owner .ico { color: var(--accent-text); }
.tc-sub { font-size: 11px; font-weight: 560; color: var(--text3); font-variant-numeric: tabular-nums; }
.tc-row { list-style: none; margin: 0; padding: 4px; display: flex; align-items: center; min-width: 0; }
.tc-node { flex: none; display: grid; place-items: center; }
.tc-seg { flex: 1; min-width: 14px; max-width: 72px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--hair-strong) 0 2px, transparent 2px 7px); }
.tc-seg.on { background: var(--accent); }
.trail.mini .tc-seg { max-width: 40px; }
.trail.mini .tc-row { padding: 2px 0; }
.tc-next { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--fs-13); color: var(--text2); min-width: 0; }
.tc-next .ico { color: var(--accent); }
.tc-next-t { color: var(--text); font-weight: 560; }
.tc-steps { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-13); color: var(--text3); counter-reset: st; }
.tc-steps li { counter-increment: st; display: flex; gap: 8px; }
.tc-steps li::before { content: counter(st); width: 14px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.tc-steps li.done { color: var(--text2); text-decoration: line-through; text-decoration-color: var(--hair-strong); }
.tc-steps li.current { color: var(--text); font-weight: 560; }
.tn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--hair-strong); color: var(--text2); font-size: var(--fs-14); font-weight: 650; font-variant-numeric: tabular-nums; }
.tn.sm { width: 26px; height: 26px; font-size: 11px; box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.trail.mini .tn.sm { width: 20px; height: 20px; font-size: 10px; }
.tn-face { display: grid; place-items: center; line-height: 1; }
.tn.done { background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: var(--on-accent); box-shadow: 0 0 0 4px var(--tint); }
.tn.sm.done { box-shadow: 0 0 0 3px var(--tint); }
.tn.current { color: var(--text); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px var(--tint); animation: tn-pulse 2.8s var(--out) infinite; }
.tn.sm.current { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 3px var(--tint); animation-name: tn-pulse-sm; }
@keyframes tn-pulse { 50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 10px transparent; } }
@keyframes tn-pulse-sm { 50% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 8px transparent; } }
.will-play:not(.play) .tc-seg.on { transform: scaleX(0); }
.play .tc-seg.on { transform-origin: left; animation: seg-grow var(--d4) var(--out) 200ms backwards; }
@keyframes seg-grow { from { transform: scaleX(0); } }

/* the full path on a route page: nodes down the middle, labels either side */
.trail-v { list-style: none; margin: var(--s4) 0 0; padding: 0; position: relative; display: grid; gap: var(--s4); }
.trail-v::before { content: ''; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--hair-strong) 0 2px, transparent 2px 9px); }
.tv-step { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: var(--s4); position: relative; }
.tv-step + .tv-step { margin-top: -34px; }
.tv-step .tn { grid-column: 2; z-index: 1; }
.tv-step .tl { grid-column: 3; }
.tv-step.side-l .tl { grid-column: 1; grid-row: 1; text-align: right; align-items: flex-end; }
.tl { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px; max-width: 360px; }
.tv-step.side-l .tl { justify-self: end; }
.tl-t { font-size: var(--fs-15); font-weight: 600; line-height: 1.3; color: var(--text); }
.tl-d { font-size: var(--fs-13); color: var(--text2); line-height: 1.4; }
.tl code { align-self: inherit; margin-top: 2px; font-size: 11.5px; color: var(--text3); background: none; border: 0; padding: 0; }
.tv-step.side-l .tl code { align-self: flex-end; }

/* ------------------------------------------------------------ route cards and route pages (Growth › Routes) */
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }
.rt-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--surface); text-align: left; transition: border-color var(--d1) var(--out), transform var(--d2) var(--out); }
.rt-card:hover { border-color: var(--hair-strong); }
.rt-card[hidden] { display: none; }
.rt-card-h { display: flex; align-items: center; gap: var(--s2); }
.rt-title { margin: 0; font-size: var(--fs-15); font-weight: 600; letter-spacing: -0.01em; }
.rt-title a { text-decoration: none; }
.rt-title a:hover { text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.rt-sum { margin: 0; color: var(--text2); font-size: var(--fs-13); line-height: 1.45; }
.rt-meta { margin: 0; font-size: var(--fs-12); color: var(--text3); font-variant-numeric: tabular-nums; }
.rt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--hair); }
.rt-by { font-size: var(--fs-12); color: var(--text3); }
.rt-by a { color: var(--text2); }
.rt-acts { display: inline-flex; gap: 6px; }
.rt-verified { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.rt-chip { appearance: none; position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface); font: inherit; font-size: var(--fs-13); font-weight: 560; color: var(--text2); cursor: pointer; }
.rt-chip:hover { border-color: var(--hair-strong); color: var(--text); }
.rt-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rt-chip:has(input:checked), .rt-chip.on { background: var(--text); border-color: var(--text); color: var(--surface); }
.rt-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.rt-lens { margin: 0; font-size: var(--fs-15); line-height: 1.6; color: var(--text); max-width: 68ch; }
.rt-tracks { display: flex; flex-direction: column; }
.rt-track-row { display: grid; grid-template-columns: 1fr auto 120px; align-items: center; gap: var(--s3); padding: 12px 0; border-top: 1px solid var(--hair); }
.rt-track-row:first-child { border-top: 0; }
.rt-track-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-track-t b { font-size: var(--fs-14); font-weight: 600; }
.rt-track-t span { font-size: var(--fs-13); color: var(--text2); }
.band { position: relative; height: 8px; border-radius: 8px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--hair); min-width: 80px; }
.band .tick { position: absolute; top: 2px; bottom: 2px; width: 1px; background: var(--hair-strong); }
.band .t20 { left: 20%; } .band .t40 { left: 40%; } .band .t60 { left: 60%; } .band .t80 { left: 80%; }
.band.unrated { opacity: 0.6; }
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.ach { display: flex; flex-direction: column; gap: 6px; padding: var(--s4); border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--surface); }
.ach-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--hover); color: var(--text2); margin-bottom: 4px; }
.ach b { font-size: var(--fs-14); font-weight: 600; }
.ach span { font-size: var(--fs-13); color: var(--text2); }
.ach code { margin-top: auto; padding-top: 6px; font-size: 11.5px; color: var(--text3); background: none; border: 0; }
.rt-drills { display: flex; flex-direction: column; }
.rt-drill { display: grid; grid-template-columns: 130px 1fr auto; gap: var(--s3); align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hair); font-size: var(--fs-14); }
.rt-drill:first-child { border-top: 0; }
.rt-who { color: var(--text3); font-size: var(--fs-13); font-weight: 560; }
.rt-drill q { color: var(--text); quotes: '“' '”'; }

@media (max-width: 640px) {
  .tv-step + .tv-step { margin-top: 0; }
  .rt-drill { grid-template-columns: 1fr; gap: 2px; }
  .rt-track-row { grid-template-columns: 1fr auto; }
  .rt-track-row .band { grid-column: 1 / -1; }
  .trail-v::before { left: 20px; }
  .tv-step, .tv-step.side-l { grid-template-columns: 40px 1fr; }
  .tv-step .tn { grid-column: 1; }
  .tv-step .tl, .tv-step.side-l .tl { grid-column: 2; grid-row: 1; text-align: left; align-items: flex-start; justify-self: start; }
  .tv-step.side-l .tl code { align-self: flex-start; }
}