/* ===================================================================
   ascent.css — the ASCENT design language layered over the app.
   Hardware-instrument look: chamfered cut-corner frames with a 1px
   gradient hairline, one acid accent that only means progress, cyan
   targets, mono telemetry labels, display-weight scores.

   Applied by re-styling existing class names (no markup changes) so
   all the JS keeps working. Loaded LAST so it wins.
   =================================================================== */

/* ---------- chamfer helpers ---------- */
:root { --cham: var(--chamfer, 12px); }

/* signature background: acid + cyan glows over faint scanlines */
body {
  background:
    radial-gradient(900px 520px at 10% -5%, rgba(201,255,77,.06), transparent 60%),
    radial-gradient(820px 600px at 96% 6%, rgba(77,232,255,.05), transparent 62%),
    var(--bg);
}
/* Scanline texture. It must sit ABOVE the content (design: z-index 3) so the
   CRT grain reads across panels too — behind the app it was invisible over
   every opaque card. pointer-events:none keeps it click-through, and modals /
   toasts live above it on higher layers. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px);
}
.app, .gate { position: relative; z-index: 1; }

/* ---------- type: display + mono voices ---------- */
h1, h2, h3, h4, h5, .hero__title, .dial__value, .stat__value,
.skillcard__score, .pointsjump__n, .bignum__n, .taskrow__score,
.scorecard .dial__value, .meter__num {
  font-family: var(--ff-disp);
  letter-spacing: -.03em;
}
h1 { letter-spacing: -.045em; }

/* mono, wide-tracked telemetry — SHORT labels only. Descriptive prose
   (card__sub, task blurbs, trait names) stays in the UI font so it can't
   overflow its container when tracked-out. */
.u-caps, .stat__label, .skillcard__name, .meter__scale,
.badge, .pill, .timer, .taskrow__code, .sidebar__group, .phase,
.ring-timer__mid, .dial__label, .fix__rank, .bignum__l, .pointsjump__cap,
.wordcount, .kbd, .segmented__opt, .lbhead, .kicker, .meta {
  font-family: var(--ff-mono);
}
.skillcard__name, .phase, .sidebar__group, .segmented__opt {
  text-transform: uppercase; letter-spacing: .09em; font-size: var(--fs-xs);
}
/* nav items stay in the UI font at sentence case (design .nl: 14px/500) —
   only the group headers above them are mono uppercase */
.navlink__label {
  font-family: var(--ff-sans); text-transform: none;
  letter-spacing: 0; font-size: 14px; font-weight: 500;
}
/* keep badges compact so they never spill past their cell */
.badge { letter-spacing: .05em; white-space: nowrap; }

/* ---------- "Focus here next" rows — flex so nothing overflows ---------- */
.focusrow {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--warn);
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition: background var(--t-fast), transform var(--t-fast);
}
.focusrow + .focusrow { margin-top: var(--s-2); }
.focusrow:hover { background: var(--hover); transform: translateX(2px); text-decoration: none; }
.focusrow__icon { flex: none; font-size: 1.15rem; width: 24px; text-align: center; }
.focusrow__body { flex: 1; min-width: 0; }
.focusrow__name { font-weight: 600; color: var(--text); }
.focusrow__meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .04em; margin-top: 2px; }
.focusrow__bar { flex: none; width: 110px; }
.focusrow__gap { flex: none; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--warn); letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; min-width: 56px; text-align: right; }
.focusrow__arrow { flex: none; color: var(--text-3); }
@media (max-width: 720px) { .focusrow__bar { display: none; } }

/* ---------- the frame: chamfer + 1px gradient hairline ---------- */
.card, .stat, .skillcard, .taskrow, .recorder, .player, .prompt,
.scorecard, .hero, .modal, .weakrow, .daycard, .bignum, .pointsjump,
.imgwrap, .picktext, .diff, .readaloud, .blanktext {
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  background: linear-gradient(150deg, var(--border-loud), var(--border) 34%, var(--frame-mid) 72%, var(--border-loud));
  clip-path: polygon(var(--cham) 0, 100% 0, 100% calc(100% - var(--cham)), calc(100% - var(--cham)) 100%, 0 100%, 0 var(--cham));
}
.card::before, .stat::before, .skillcard::before, .taskrow::before,
.recorder::before, .player::before, .prompt::before, .scorecard::before,
.hero::before, .modal::before, .weakrow::before, .daycard::before,
.bignum::before, .pointsjump::before, .imgwrap::before, .picktext::before,
.diff::before, .readaloud::before, .blanktext::before {
  content: ""; position: absolute; inset: 1px; z-index: 0;
  background: var(--surface);
  clip-path: polygon(calc(var(--cham) - 1px) 0, 100% 0, 100% calc(100% - var(--cham) + 1px), calc(100% - var(--cham) + 1px) 100%, 0 100%, 0 calc(var(--cham) - 1px));
}
/* lift real content above the inner panel */
.card > *, .stat > *, .skillcard > *, .taskrow > *, .recorder > *,
.player > *, .prompt > *, .scorecard > *, .hero > *, .weakrow > *,
.daycard > *, .bignum > *, .pointsjump > *, .imgwrap > *, .picktext > *,
.diff > *, .readaloud > *, .blanktext > *, .modal > * { position: relative; z-index: 1; }

.card--sunk { background: linear-gradient(150deg, var(--border), var(--border-soft) 40%, var(--border)); }
.card--sunk::before { background: var(--bg-sunk); }

/* raised / hover cards get an acid-tinged edge */
.card--link:hover, .skillcard--link:hover, .taskrow:hover, .usercard:hover {
  background: linear-gradient(150deg, var(--accent), rgba(201,255,77,.15) 30%, var(--border) 60%, rgba(77,232,255,.4));
  transform: translateY(-2px);
}

/* reference (cyan) + target surfaces */
.tip--info, .badge--info { }
.frame-cyan, .card.is-target {
  background: linear-gradient(150deg, var(--info), rgba(77,232,255,.15) 42%, var(--border)) !important;
}

/* ---------- buttons ---------- */
.btn {
  border: none;
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border-loud); }
.btn--primary, .btn--ok {
  background: var(--accent); color: var(--accent-text); font-weight: 700;
}
.btn--primary:hover, .btn--ok:hover { background: var(--accent-hov); box-shadow: 0 0 30px var(--accent-glow); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--border-loud); }
.btn--ghost:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: transparent; }
.btn--danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(255,92,122,.4); }
.btn--danger:hover { background: rgba(255,92,122,.1); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.btn--lg { clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); font-size: 12px; }
.btn--sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); font-size: 10px; }
.btn--icon { clip-path: none; }

/* ---------- chips / badges / pills ---------- */
.badge, .pill, .tag {
  border-radius: 0; border: none;
  font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .08em;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.pill { box-shadow: inset 0 0 0 1px var(--border-loud); }
.badge--ok, .badge--accent { background: rgba(201,255,77,.14); color: var(--accent); }
.badge--info { background: rgba(77,232,255,.13); color: var(--info); }
.badge--warn { background: rgba(255,180,84,.14); color: var(--warn); }
.badge--danger { background: rgba(255,92,122,.14); color: var(--danger); }

/* ---------- inputs ---------- */
.input, .select, .textarea, .blank, .blank-drop {
  border: none; border-radius: 0;
  background: var(--bg-sunk);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.input:focus, .select:focus, .textarea:focus {
  box-shadow: inset 0 0 0 1px var(--accent); background: var(--surface);
}
.textarea--compose { background: var(--surface); }

/* ---------- avatars / logo (chamfered squares) ---------- */
.avatar, .sidebar__logo, .gate__logo {
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.sidebar__logo, .gate__logo { background: var(--accent); color: var(--accent-text); }
.sidebar__logo svg, .gate__logo svg { display: block; width: 62%; height: 62%; }

/* ---------- nav ---------- */
.sidebar { background: var(--nav); }
.navlink { border-radius: 0; }
/* ASCENT SVG glyphs fill the icon slot and inherit the link colour */
.navlink__icon { width: 22px; height: 22px; opacity: 1; display: grid; place-items: center; }
.navlink__icon svg { display: block; width: 100%; height: 100%; }
/* active item is a SOLID acid block with inverted content (design .nl.on).
   Scoped under .sidebar and using the longhand so it cannot be out-cascaded
   by the base .navlink rules in components.css. */
.sidebar .navlink[aria-current="page"] {
  background-color: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}
.sidebar .navlink[aria-current="page"] .navlink__label { font-weight: 600; color: var(--accent-text); }
.sidebar .navlink[aria-current="page"] .navlink__icon { opacity: 1; color: var(--accent-text); }
.sidebar .navlink[aria-current="page"] .navlink__badge {
  background-color: var(--accent-text); color: var(--accent);
}
.navlink[aria-current="page"]::before { display: none; }
.navlink__badge--live { background: var(--accent); color: var(--accent-text); border-radius: 0;
  clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }

/* ---------- meters / bars: acid fill with glow, cyan target ---------- */
.bar__fill, .meter__fill, .trait__fill {
  background: linear-gradient(90deg, var(--acid-dim, #7E9E30), var(--accent)) !important;
  box-shadow: 0 0 14px var(--accent-glow);
  border-radius: 0;
}
.meter__goal { background: var(--info); opacity: .9; }
.meter__goal::after { color: var(--info); }
.bar, .meter__track, .trait__bar { border-radius: 0; background: var(--surface-3); }

/* ---------- score dial: display numeral, cyan target already via band ---------- */
.dial__value { font-weight: 800; }
/* the dial cap sits inside a fixed ring — design spec is 8.5px/.18em, and it
   must never grow wide enough to collide with the score or the ring itself */
.dial__label {
  text-transform: uppercase; letter-spacing: .18em;
  font-size: 8.5px; line-height: 1.2; margin-top: 6px;
  max-width: 88%; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* keep the mid stack clear of the stroke */
.dial__mid { padding: 0 14%; }

/* ---------- timers ---------- */
.timer { border-radius: 0; border: none; box-shadow: inset 0 0 0 1px var(--border-loud);
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  font-family: var(--ff-mono); }

/* ---------- phase strip ---------- */
.phase { border-radius: 0; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.phase--now { background: var(--accent); color: var(--accent-text); }
.phase--done { background: rgba(201,255,77,.12); color: var(--accent); }

/* ---------- mic button (chamfered instrument key) ---------- */
.mic-btn {
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background: var(--accent); color: var(--accent-text);
  box-shadow: 0 0 26px var(--accent-glow);
}
.mic-btn--rec { background: var(--danger); color: #fff; }

/* ---------- toasts / modal scrim (blueprint grid) ---------- */
.toast { border-radius: 0; border: none; box-shadow: inset 0 0 0 1px var(--border-loud);
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.scrim {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 26px),
    var(--scrim);
}

/* native controls (range slider, checkboxes, selects) track the accent */
input[type="range"], input[type="checkbox"], input[type="radio"], select, progress {
  accent-color: var(--accent);
}

/* ---------- segmented ---------- */
.segmented { border-radius: 0; border: none; box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); background: var(--surface-2); }
.segmented__opt { border-radius: 0; }
.segmented__opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); box-shadow: none; }

/* ---------- tips (keep left rule, square) ---------- */
.tip, .coach { border-radius: 0; }

/* ---------- points jump / hero numbers ---------- */
.pointsjump__n--goal { color: var(--accent); }
.hero { background: linear-gradient(150deg, var(--border-loud), var(--border) 34%, var(--frame-mid) 72%, var(--border-loud)); }
.hero::before { background:
  radial-gradient(1000px 200px at 0% 0%, rgba(201,255,77,.10), transparent 70%), var(--surface); }

/* ---------- word-diff feedback keeps semantic colors but square ---------- */
.w { border-radius: 3px; }
.w--hit { background: rgba(201,255,77,.18); }

/* ---------- reorder / chips ---------- */
.reorder__item, .chip { border-radius: 0; border: none; box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); background: var(--surface); }

/* ---------- gate ---------- */
.usercard { border-radius: 0; border: none;
  background: linear-gradient(150deg, var(--border-loud), var(--border) 40%, var(--border-loud));
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); position: relative; }
.usercard::before { content:""; position:absolute; inset:1px; background: var(--surface); z-index:0;
  clip-path: polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); }
.usercard > * { position: relative; z-index: 1; }

/* keep motion snappy per ASCENT spec */
:root { --t-fast: 120ms cubic-bezier(.2,.8,.2,1); --t-base: 220ms cubic-bezier(.2,.8,.2,1); }

/* ---------- narrator: "listen instead of reading" voice-over bar ---------- */
.narrator {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
  clip-path: polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  padding: var(--s-4);
}
.narrator__ctrl { display: flex; align-items: center; gap: var(--s-3); }
.narrator__play { flex: none; display: inline-flex; align-items: center; gap: 7px; }
.narrator__play.is-playing { background: var(--danger); color: #fff; }
.narrator__glyph { display: inline-grid; place-items: center; }
.narrator__glyph svg { display: block; }
.narrator__meter { flex: 1; min-width: 0; }
.narrator__cap {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3); margin-bottom: 6px;
}
.narrator__bar { height: 6px; }
.narrator__fill { background: linear-gradient(90deg, var(--accent-hov), var(--accent)); }
.narrator__time,
.narrator__speed {
  flex: none; font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--text-2); letter-spacing: .05em; white-space: nowrap;
}
.narrator__time { min-width: 38px; text-align: right; }

/* the script, highlighted as it is spoken */
.narrator__script {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-md); line-height: 1.75; color: var(--text-2);
  max-height: 15rem; overflow-y: auto;
}
.narrator__w { transition: color var(--t-fast), background var(--t-fast); }
.narrator__w.is-spoken { color: var(--text-3); }
.narrator__w.is-now {
  color: var(--accent-text); background: var(--accent);
  font-weight: 600; border-radius: 2px;
}
@media (max-width: 640px) {
  .narrator__ctrl { flex-wrap: wrap; }
  .narrator__meter { order: 3; flex-basis: 100%; }
}

/* ---------- Learn: skill tabs ---------- */
.learntabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2); margin-bottom: var(--s-5);
}
.learntab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--s-3) var(--s-2);
  background: var(--surface-2); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.learntab:hover { background: var(--hover); color: var(--text); }
.learntab__icon { display: grid; place-items: center; flex: none; }
.learntab__icon svg { display: block; }
.learntab__label {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
}
.learntab[aria-pressed="true"] {
  background: var(--surface); color: var(--skc, var(--accent));
  box-shadow: inset 0 -2px 0 var(--skc, var(--accent)), inset 0 0 0 1px var(--border-loud);
}
@media (max-width: 640px) {
  .learntabs { grid-template-columns: repeat(2, 1fr); }
  .learntab__label { font-size: 10px; }
}

/* ---------- Learn: emphasis cards ---------- */
.card--hero-accent {
  background: linear-gradient(150deg, var(--accent), var(--border) 45%, var(--border-loud)) !important;
}
.card--hero-accent::before {
  /* --accent-sunk is translucent, so composite it over an opaque panel or
     the acid frame gradient bleeds through and kills text contrast */
  background: linear-gradient(var(--accent-sunk), var(--accent-sunk)), var(--surface);
}
.card--danger-rail::before { box-shadow: inset 3px 0 0 var(--danger); }
.card--accent-rail::before { box-shadow: inset 3px 0 0 var(--accent); }

.kicker { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--accent); }

/* researched tactics block inside a task accordion */
.tacticbox {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--accent-sunk);
  box-shadow: inset 3px 0 0 var(--accent);
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.tacticbox ul { margin: 0; }

/* readable prose lists throughout Learn */
.u-reading { line-height: 1.7; }
.u-reading li + li { margin-top: var(--s-2); }

/* collapsed format primer */
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: " ▾"; color: var(--text-3); }
details.card[open] > summary::after { content: " ▴"; }

/* Learn accordion header: ASCENT glyph + name + skill badge */
.acc__icon { flex: none; display: grid; place-items: center; color: var(--text-3); }
.acc__icon svg { display: block; }
.acc--open .acc__icon { color: var(--accent); }

/* Pills can hold descriptive text (trait rubrics like "Content 0-4 (main
   ideas, paraphrased & synthesized)") — those must stay in the UI font, or
   mono-uppercase tracking makes them wider than their row. Badges stay mono
   because they are always short. */
.pill {
  font-family: var(--ff-sans);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-xs);
  line-height: 1.45;
  white-space: normal;
}

/* ---------- recorder: single level readout (replaces the 2nd volume bar) --- */
.levelcue {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
}
.levelcue__dot {
  width: 7px; height: 7px; flex: none;
  background: var(--text-3);
  clip-path: polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px);
}
.levelcue--ok   { color: var(--accent); }
.levelcue--ok   .levelcue__dot { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.levelcue--low  { color: var(--warn); }
.levelcue--low  .levelcue__dot { background: var(--warn); }
.levelcue--hot  { color: var(--danger); }
.levelcue--hot  .levelcue__dot { background: var(--danger); }
.recorder__skip { flex: none; }

/* ---------- between-question ready gate (mock / mixed sessions) ---------- */
.gate2 {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-8) var(--s-6);
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
  clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.gate2__kicker {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
}
.gate2__name {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: var(--fs-3xl);
}
.gate2__name svg { color: var(--accent); flex: none; }
.gate2__count { font-family: var(--ff-mono); color: var(--text-2); font-weight: 600; }

/* ---------- skill cards: per the design system's dashboard page ----------
   acid glyph, display score over /90, acid bar, mono footer. The card no
   longer tints itself per skill — acid is reserved for progress, and the only
   highlighted card is the one setting your band. */
.skillcard { padding: var(--s-5); }
.skillcard__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.skillcard__name {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
}
.skillcard__name svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.skillcard__score {
  font-family: var(--ff-disp); font-size: 2.75rem; font-weight: 800;
  letter-spacing: -.05em; line-height: .88;
  display: flex; align-items: baseline; gap: 7px; color: var(--text);
}
.skillcard__score small {
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 400;
  color: var(--text-3); letter-spacing: .04em;
}
.skillcard__score.is-empty { color: var(--text-3); }
.skillcard__foot {
  display: flex; justify-content: space-between; gap: var(--s-2);
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); margin-top: var(--s-3);
}
/* the band-setting skill gets the "lit" frame treatment */
.skillcard--lit { background: linear-gradient(150deg, var(--accent), var(--border) 40%, var(--border-loud)) !important; }

/* trend chip */
.delta {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--text-3); white-space: nowrap;
}
.delta--up { color: var(--accent); }
.delta--dn { color: var(--danger); }

/* radar legend */
.radarkey {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: flex-start; margin-top: var(--s-4);
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.radarkey__item { display: inline-flex; align-items: center; gap: 8px; }
.radarkey__line {
  display: inline-block; width: 16px; height: 0;
  border-top: 2px solid var(--info);
}
.radarkey__line--goal { border-top-style: dashed; border-color: var(--accent); }

/* ---------- sidebar brand wordmark (design .brand) ---------- */
.sidebar__wordmark b { font-family: var(--ff-disp); letter-spacing: -.02em; }
.sidebar__wordmark span {
  font-family: var(--ff-mono); font-size: 8.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-3);
}

/* ---------- mic button caption: says what the button is FOR ---------- */
.micwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.miccap {
  font-family: var(--ff-mono); font-size: 8.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); text-align: center; white-space: nowrap;
}
/* while recording the mic is the "finish now" control — make that obvious */
.miccap--live { color: var(--danger); font-weight: 600; }

/* ---------- "How to score top marks" coaching panel (practice only) ------- */
.tips {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--info);
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.tips__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); cursor: pointer; list-style: none;
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--info);
}
.tips__head::-webkit-details-marker { display: none; }
.tips__icon { display: grid; place-items: center; color: var(--info); flex: none; }
.tips__title { flex: 1; min-width: 0; }
.tips__toggle { flex: none; color: var(--text-3); }
.tips__toggle::before { content: "SHOW"; }
.tips[open] .tips__toggle::before { content: "HIDE"; }
.tips__body { padding: 0 var(--s-4) var(--s-4); }
.tips__list { margin: 0; padding-left: 1.2em; }
.tips__list li { margin-bottom: var(--s-3); line-height: 1.55; }
.tips__list li:last-child { margin-bottom: 0; }
.tips__warn {
  display: flex; gap: var(--s-3); margin-top: var(--s-4);
  padding: var(--s-3); background: var(--danger-bg);
  box-shadow: inset 3px 0 0 var(--danger);
  font-size: var(--fs-sm);
}
.tips__warnicon { color: var(--danger); flex: none; }
.tips__super {
  margin-top: var(--s-3); padding: var(--s-3);
  background: var(--accent-sunk); box-shadow: inset 3px 0 0 var(--accent);
  font-size: var(--fs-sm);
}
.tips__supercap {
  display: block; font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}

/* The hidden attribute is only a low-specificity UA rule, so any author
   `display` (e.g. .btn { display:inline-flex }) silently defeats it — which is
   why the Skip button stayed on screen during recording. */
[hidden] { display: none !important; }

/* Controls that must not be touched once the mic is live */
.is-locked, .btn.is-locked {
  opacity: .35; filter: grayscale(.6);
  pointer-events: none; cursor: not-allowed;
}

/* ---------- pronunciation watchlist ---------- */
.wordchips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wordchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s-3);
  background: var(--danger-bg);
  box-shadow: inset 2px 0 0 var(--danger);
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.wordchip__w { font-weight: 600; color: var(--text); }
.wordchip__n { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--danger); }
.patrow {
  padding: var(--s-3); background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--info);
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.patrow__top { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: 4px; flex-wrap: wrap; }

/* confidence note beside a skill meter — an estimate built on thin evidence
   must not look as authoritative as a well-evidenced one */
.meter__note {
  font-family: var(--ff-mono); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--warn); margin-right: var(--s-2);
}