/* ============================================================
   VCRI Scorer — executive-demo polish pass
   Vanilla CSS only. No build step, no framework.
   ============================================================ */

:root {
  /* surfaces — cooler, deeper, more separation between layers */
  --bg:#0b0d12;
  --bg-soft:#0e1117;
  --panel:#151922;
  --panel2:#1b2029;
  --panel3:#222834;
  --border:#262c38;
  --border-soft:#1e2430;
  --hairline:rgba(255,255,255,0.06);

  /* text */
  --text:#eef1f6;
  --text-2:#c2c9d6;
  --muted:#8b93a5;
  --muted-2:#6b7385;

  /* brand + semantic */
  --accent:#5b8cff;
  --accent-ink:#0b0d12;
  --strong:#34d17e;
  --adequate:#5b8cff;
  --gap:#f5a524;
  --critical:#f25555;
  --strong-dim:rgba(52,209,126,0.12);
  --gap-dim:rgba(245,165,36,0.12);
  --critical-dim:rgba(242,85,85,0.12);

  /* type scale (1.25 ratio, base 13) */
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-base:13px;
  --fs-md:14px;
  --fs-lg:16px;
  --fs-xl:20px;

  --radius:14px;
  --radius-sm:9px;
  --radius-pill:999px;

  /* sticky offset for the left sidebar (approx header height — two-row layout) */
  --header-h:92px;

  --shadow-card:0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -16px rgba(0,0,0,0.7);
  --shadow-pop:0 12px 40px -12px rgba(0,0,0,0.65);

  --ease:cubic-bezier(.2,.7,.3,1);
}

* { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Inter",sans-serif;
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(91,140,255,0.07), transparent 60%),
    radial-gradient(1000px 500px at 0% 0%, rgba(52,209,126,0.04), transparent 55%),
    var(--bg);
  color:var(--text);
  font-size:var(--fs-base);
  line-height:1.5;
  letter-spacing:0.1px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------------- form controls (shared) ---------------- */
select, button, input {
  font:inherit;
  color:var(--text);
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 11px;
  transition:border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease);
}
input::placeholder { color:var(--muted-2); }
select { cursor:pointer; padding-right:28px; }
button { cursor:pointer; font-weight:600; }
button:hover { border-color:var(--accent); background:var(--panel3); }
select:focus-visible,
button:focus-visible,
input:focus-visible,
.rung:focus-visible,
.cell:focus-visible,
.sens-row:focus-visible {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(91,140,255,0.30);
}

/* ============================================================
   HEADER — two-row executive layout
   Row 1 (.head-brand): brand identity strip
   Row 2 (.head-controls): inputs left, grade panel right
   ============================================================ */
header {
  position:sticky; top:0; z-index:10;
  display:flex; flex-direction:column; gap:0;
  padding:0 20px;
  background:linear-gradient(180deg, rgba(11,13,18,0.96), rgba(11,13,18,0.88));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--hairline);
  box-shadow:0 8px 28px -20px rgba(0,0,0,0.9);
}

/* ---- Row 1: brand strip ---- */
.head-brand {
  display:flex; align-items:center; gap:12px;
  padding:8px 0 6px;
  border-bottom:1px solid var(--hairline);
}
.brand-logo {
  height:34px; width:auto; display:block;
  background:#f7f9fc; padding:2px 7px; border-radius:7px;
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 12px -8px rgba(0,0,0,0.7);
}
h1 {
  font-size:var(--fs-md);
  margin:0; font-weight:700; letter-spacing:-0.1px;
  white-space:nowrap;
  background:linear-gradient(180deg,#ffffff,#c8d2e6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.open-note {
  font-size:var(--fs-xs); color:var(--muted-2);
  border:1px solid var(--border-soft); border-radius:var(--radius-pill);
  padding:2px 9px; white-space:nowrap;
  margin-left:4px;
}
.fb-link {
  font-size:var(--fs-xs); color:var(--accent); text-decoration:none;
  border:1px solid var(--border-soft); border-radius:var(--radius-pill);
  padding:2px 10px; white-space:nowrap; transition:color .15s var(--ease), border-color .15s var(--ease);
}
.fb-link:hover { color:var(--text); border-color:var(--accent); }
.dl-link {
  font-size:var(--fs-xs); color:var(--gap); text-decoration:none;
  border:1px solid rgba(245,165,36,0.45); border-radius:var(--radius-pill);
  padding:2px 10px; white-space:nowrap; font-weight:600;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.dl-link:hover { color:var(--accent-ink); background:var(--gap); border-color:var(--gap); }
.foot-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.foot-note { color:var(--muted-2); font-size:var(--fs-xs); flex:1 1 100%; }
#foot {
  max-width:1280px; margin:0 auto; padding:18px 26px 44px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  color:var(--muted-2); font-size:var(--fs-xs); border-top:1px solid var(--hairline);
}

/* ---- Row 2: controls bar ---- */
.head-controls {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:7px 0 7px;
}
.head-inputs {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; min-width:0;
}
#subject { width:160px; font-weight:600; font-size:var(--fs-sm); }
#scope   { width:200px; font-size:var(--fs-sm); }
#risk-class { width:190px; font-size:var(--fs-sm); }
#rubric-select { width:190px; font-size:var(--fs-sm); }
button.ghost { background:transparent; color:var(--muted); border:1px solid var(--border-soft); font-size:var(--fs-sm); padding:8px 12px; white-space:nowrap; }
button.ghost:hover { color:var(--text); border-color:var(--accent); background:var(--panel2); }

/* ---- grade panel: the hero ---- */
.grade-panel {
  display:flex; align-items:center; gap:10px;
  padding:5px 8px 5px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  flex-shrink:0;
}
.grade-box { text-align:center; min-width:36px; }
.grade-letter {
  font-size:28px; font-weight:800; line-height:0.95;
  letter-spacing:-0.5px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px currentColor;
}
.grade-score {
  font-size:17px; font-weight:750; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.grade-sub {
  font-size:9px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.7px; margin-top:3px;
}
.grade-meta {
  font-size:var(--fs-xs); color:var(--muted); line-height:1.3;
  max-width:210px; align-self:center;
  border-left:1px solid var(--hairline); padding-left:10px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.grade-meta .hardfail { color:var(--critical); font-weight:600; }
.grade-meta .provisional-note { color:var(--gap); font-weight:600; }
/* an unfinished assessment's letter reads as not-yet-final */
.grade-letter.provisional { opacity:0.5; }

/* letter color (set by JS via .gX) */
.gA { color:var(--strong); }
.gB { color:var(--adequate); }
.gC { color:var(--gap); }
.gD { color:#fb923c; }
.gF { color:var(--critical); }

/* ---- export action cluster ---- */
.grade-actions {
  display:flex; align-items:center; gap:0;
  border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  align-self:center; flex-shrink:0;
}
.grade-actions button {
  padding:7px 11px; font-size:var(--fs-xs); font-weight:600;
  border:none; border-radius:0;
  border-right:1px solid var(--border);
}
.grade-actions button:last-child { border-right:none; }
#export-btn { color:var(--muted); }
#html-btn   { color:var(--muted); }
#export-btn:hover, #html-btn:hover { color:var(--text); }
button.primary {
  background:linear-gradient(180deg, #6f9bff, #4f7ef0);
  border-color:transparent; color:#fff;
  box-shadow:none;
}
button.primary:hover { background:linear-gradient(180deg, #7ea6ff, #5b8cff); border-color:transparent; }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
main { max-width:1280px; margin:0 auto; padding:14px 26px 96px; }

/* shared card surface */
#overview, #vcar, #sensitivities, .dim {
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}

/* ============================================================
   Two-column layout: persistent left sidebar + scrolling content
   ============================================================ */
.layout {
  display:grid;
  grid-template-columns:360px minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

/* left rail — sticks under the header; scrolls internally if too tall.
   header is ~58px; --header-h is a comfortable offset for sticky + max-height. */
.sidebar {
  position:sticky;
  top:calc(var(--header-h) + 14px);
  max-height:calc(100vh - var(--header-h) - 28px);
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:16px;
  /* scrollbar polish */
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
  /* room so the right edge of internal scrollbar doesn't clip card shadows */
  padding-right:2px;
}
.sidebar::-webkit-scrollbar { width:8px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--radius-pill); }
.sidebar::-webkit-scrollbar-track { background:transparent; }

/* right column — normal page flow so window-scroll + jumpTo() stay correct */
.content { min-width:0; }

/* ---------------- Overview heatmap ---------------- */
#overview {
  background:var(--panel);
  border:1px solid var(--border);
  padding:9px 14px; min-width:0;
}
.ov-head {
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
  font-size:var(--fs-base); flex-wrap:wrap;
  padding-bottom:5px; border-bottom:1px solid var(--hairline);
}
.ov-head strong { font-size:var(--fs-md); letter-spacing:-0.1px; }
.ov-stat { color:var(--muted); font-size:var(--fs-sm); }
.ov-stat b { color:var(--gap); font-weight:700; }
.ov-legend { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--muted); flex-wrap:wrap; }
.ov-legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
/* in the narrow sidebar the dim label stacks above its row of cells */
.ov-row { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:7px 0; }
.ov-dim {
  flex:none; max-width:100%; font-size:var(--fs-xs); color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ov-cells { display:flex; gap:4px; flex-wrap:wrap; }

.cell {
  width:20px; height:20px; border-radius:5px; border:1px solid rgba(0,0,0,0.25);
  padding:0; cursor:pointer; font-size:var(--fs-xs); font-weight:700;
  color:#0b0e13; display:flex; align-items:center; justify-content:center;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), outline-color .12s var(--ease);
  font-variant-numeric:tabular-nums;
}
.cell:hover { transform:translateY(-1px) scale(1.06); box-shadow:0 4px 12px -4px rgba(0,0,0,0.6); z-index:1; background:inherit; }
/* heatmap palette — slightly desaturated for legibility on dark */
.u,  .cell.u  { background:#333a47; color:var(--muted); border-color:rgba(255,255,255,0.04); }
.c0, .cell.c0 { background:#ef5a5a; }
.c2, .cell.c2 { background:#f3ab37; }
.c3, .cell.c3 { background:#6aa6ff; }
.c4, .cell.c4 { background:#3ad084; }
.cell.u:hover { background:#333a47; }

.sub.flash {
  background:rgba(91,140,255,0.16);
  box-shadow:0 0 0 1px rgba(91,140,255,0.35) inset;
  border-radius:var(--radius-sm);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}

/* ---------------- Dollar-at-Risk (VCAR) ---------------- */
#vcar {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(245,165,36,0.10), transparent 60%),
    var(--panel);
  border:1px solid var(--border);
  border-top:2px solid var(--gap);
  padding:9px 14px; width:auto;
  display:flex; flex-direction:column;
}
.vcar-head { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.vcar-head strong {
  color:var(--gap); font-size:var(--fs-md); letter-spacing:-0.1px;
  display:inline-flex; align-items:center;
}
.vcar-head label { font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; gap:7px; }
.vcar-head input { width:120px; padding:6px 9px; }
.vcar-note { font-size:10px; color:var(--muted-2); }
.vcar-empty { font-size:var(--fs-sm); color:var(--muted); line-height:1.5; }
#vcar-out { margin-top:6px; }

.vcar-headline {
  font-size:24px; font-weight:800; color:var(--gap);
  line-height:1.02; letter-spacing:-0.5px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(245,165,36,0.25);
  display:flex; flex-direction:column; gap:2px;
}
.vcar-label { font-size:var(--fs-xs); font-weight:500; color:var(--muted); letter-spacing:0.1px; }
.vcar-detail { font-size:var(--fs-sm); color:var(--text-2); margin-top:9px; line-height:1.55; }
.vcar-detail b { color:var(--strong); font-weight:700; }
.vcar-dim { margin-right:12px; color:var(--muted); white-space:nowrap; }
.vcar-dim b { color:var(--gap); }

/* ============================================================
   Rating Sensitivities (paid-layer preview)
   ============================================================ */
#radar {
  background:radial-gradient(120% 120% at 50% 0%, rgba(91,140,255,0.07), transparent 60%), var(--panel);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:12px 16px 14px; margin-bottom:0;
  display:flex; flex-direction:column; align-items:center;
}
.radar-head { align-self:stretch; display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:2px; flex-wrap:wrap; }
.radar-head strong { color:var(--accent); font-size:var(--fs-md); letter-spacing:-0.1px; }
.radar-sub { font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
.radar-svg { width:400px; max-width:100%; height:auto; }

#sensitivities {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(52,209,126,0.10), transparent 55%),
    var(--panel);
  border:1px solid var(--border);
  border-left:2px solid var(--strong);
  padding:14px 18px; margin-bottom:20px;
}
.sens-head { display:flex; align-items:baseline; gap:11px; margin-bottom:8px; }
.sens-head strong { color:var(--strong); font-size:var(--fs-md); letter-spacing:-0.1px; }
.sens-sub { font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; }
.sens-headline { font-size:var(--fs-base); color:var(--text-2); margin-bottom:12px; line-height:1.5; }
.sens-headline b { color:var(--strong); }
.sens-cap b { color:var(--critical); }
.sens-list { display:flex; flex-direction:column; gap:6px; }
.sens-row {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--panel2); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:9px 12px; color:var(--text); cursor:pointer; font-weight:500;
}
.sens-row:hover { border-color:var(--strong); background:var(--panel3); transform:translateX(2px); }
.sens-key {
  flex:none; font-size:var(--fs-xs); color:var(--muted); width:30px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.sens-title { flex:1; font-size:var(--fs-base); }
.sens-move { color:var(--muted); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.sens-dp {
  flex:none; font-weight:700; color:var(--strong); font-size:var(--fs-base);
  min-width:60px; text-align:right; font-variant-numeric:tabular-nums;
}
.sens-flag { flex:none; font-size:var(--fs-xs); padding:2px 9px; border-radius:var(--radius-pill); font-weight:600; white-space:nowrap; }
.sens-flag.cap { background:var(--critical); color:#fff; box-shadow:0 0 0 1px rgba(242,85,85,0.4); }
.sens-flag.up { border:1px solid var(--adequate); color:var(--adequate); }
.sens-flag.done { border:1px solid var(--border); color:var(--muted-2); }
.sens-flag.next-tag { background:var(--strong); color:var(--accent-ink); font-weight:700; }

/* current-level / check marker on the left of each row */
.sens-mark {
  flex:none; width:16px; text-align:center; font-size:var(--fs-xs); font-weight:700;
  color:var(--muted-2); font-variant-numeric:tabular-nums;
}
.sens-cur { color:var(--muted); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; margin-left:6px; }

/* maxed-out items check off and recede — but keep their place (no reorder) */
.sens-row.done { opacity:0.5; }
.sens-row.done .sens-mark { color:var(--strong); }

/* the single highest-leverage next move: color-highlighted IN PLACE (list never reorders) */
.sens-row.next {
  border-color:var(--strong);
  background:linear-gradient(90deg, var(--strong-dim), transparent 72%);
  box-shadow:inset 3px 0 0 var(--strong), 0 0 0 1px rgba(52,209,126,0.22);
}
.sens-row.next .sens-mark { color:var(--strong); }
.sens-row.next:hover { transform:none; background:linear-gradient(90deg, var(--strong-dim), var(--panel3) 82%); }

/* export kebab menu on the sensitivities header */
.sens-menu { position:relative; margin-left:auto; align-self:center; }
.sens-kebab {
  background:transparent; border:1px solid var(--border); color:var(--text-2);
  border-radius:8px; width:30px; height:26px; cursor:pointer; font-size:16px; line-height:1;
}
.sens-kebab:hover { border-color:var(--strong); color:var(--text); }
.sens-menu-pop {
  position:absolute; right:0; top:32px; z-index:30; min-width:200px;
  background:var(--panel3); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-pop); padding:5px; display:flex; flex-direction:column; gap:2px;
}
.sens-menu-pop[hidden] { display:none; }
.sens-menu-pop button {
  text-align:left; background:transparent; border:none; color:var(--text);
  padding:7px 11px; border-radius:7px; cursor:pointer; font-size:var(--fs-sm); white-space:nowrap;
}
.sens-menu-pop button:hover { background:var(--accent); color:var(--accent-ink); }

/* ============================================================
   Scored rubric: dimensions
   ============================================================ */
.dim {
  background:var(--panel);
  border:1px solid var(--border);
  margin-bottom:18px; overflow:hidden;
}
.dim-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  border-bottom:1px solid var(--hairline);
}
.dim-head .dim-name { font-weight:700; font-size:var(--fs-md); letter-spacing:-0.1px; }
.dim-head .dim-n {
  color:var(--muted); font-size:var(--fs-xs); margin-right:10px;
  text-transform:uppercase; letter-spacing:0.5px; font-weight:600;
}
.dim-head .dim-right { display:flex; align-items:center; gap:14px; font-size:var(--fs-sm); color:var(--muted); }
.dim-score {
  font-size:var(--fs-lg); font-weight:750; color:var(--text);
  min-width:46px; text-align:right; font-variant-numeric:tabular-nums;
}
.dim-state {
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.5px; font-weight:600;
  padding:3px 10px; border-radius:var(--radius-pill); border:1px solid var(--border);
}
.st-strong   { color:var(--strong);   border-color:var(--strong);   background:var(--strong-dim); }
.st-adequate { color:var(--adequate); border-color:var(--adequate); background:rgba(91,140,255,0.12); }
.st-gap      { color:var(--gap);      border-color:var(--gap);      background:var(--gap-dim); }
.st-critical { color:var(--critical); border-color:var(--critical); background:var(--critical-dim); }

/* sub-criteria */
.sub { padding:14px 18px; border-top:1px solid var(--hairline); }
.sub:first-child { border-top:none; }
.sub-title { font-size:var(--fs-md); margin-bottom:10px; font-weight:600; color:var(--text); }
.sub-key {
  color:var(--muted); font-size:var(--fs-xs); margin-right:8px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.sub-weight { font-size:var(--fs-xs); color:var(--muted-2); font-weight:400; }

/* the 0-5 ladder */
.ladder { display:flex; flex-direction:column; gap:4px; }
.rung {
  display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  padding:7px 10px; color:var(--muted); cursor:pointer; font-weight:400;
}
.rung:hover { background:var(--panel2); color:var(--text-2); border-color:var(--border-soft); }
.rung.sel {
  border-color:var(--accent);
  background:rgba(91,140,255,0.12);
  color:var(--text);
  box-shadow:0 0 0 1px rgba(91,140,255,0.25), 0 8px 22px -14px rgba(91,140,255,0.8);
}
.rung-n {
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--panel3); display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:700; margin-top:1px;
  font-variant-numeric:tabular-nums;
  transition:background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.rung:hover .rung-n { background:#2c3441; }
.rung.sel .rung-n { background:var(--accent); color:#fff; box-shadow:0 0 14px rgba(91,140,255,0.6); }
.rung-text { font-size:var(--fs-base); line-height:1.5; padding-top:1px; }

/* footer */
#foot { max-width:1280px; margin:0 auto; padding:0 26px 40px; color:var(--muted-2); font-size:var(--fs-xs); }

/* ---------------- responsive ---------------- */

/* collapse the two columns to a single stacked column */
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; gap:16px; }
  /* sidebar stacks above content and is no longer sticky */
  .sidebar {
    position:static;
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
  /* restore the wide single-column heatmap rows */
  .ov-row { flex-direction:row; align-items:center; gap:12px; margin:2px 0; }
  .ov-dim { width:200px; max-width:200px; }
}

@media (max-width:880px) {
  header { padding:0 16px; }
  .head-controls { flex-direction:column; align-items:stretch; gap:10px; }
  .head-inputs { flex-wrap:wrap; }
  #subject, #scope, #risk-class, #rubric-select { width:100%; min-width:0; }
  .grade-panel { justify-content:flex-start; flex-wrap:wrap; }
  .grade-meta { max-width:none; border-left:none; padding-left:0; border-top:1px solid var(--hairline); padding-top:6px; margin-top:4px; }
  .grade-actions { align-self:stretch; }
  .grade-actions button { flex:1; text-align:center; }
  #vcar { width:auto; }
  main { padding:18px 16px 80px; }
}

/* ---- Mobile header auto-collapse ----
   On small screens the stacked header (brand + inputs + grade panel + export
   buttons) grows tall enough to bury the page under the sticky bar. Once the
   user scrolls, app.js adds .collapsed: everything hides except a slim
   brand + live-grade strip. Scrolling back to top restores the full header. */
@media (max-width:880px) {
  header { transition:padding 0.15s ease; }
  header.collapsed .head-inputs,
  header.collapsed .grade-actions,
  header.collapsed .grade-meta,
  header.collapsed .open-note,
  header.collapsed .fb-link,
  header.collapsed .dl-link,
  header.collapsed .contribute { display:none; }
  header.collapsed .head-brand { border-bottom:none; padding:6px 0; }
  header.collapsed .brand-logo { height:24px; }
  header.collapsed .head-controls { flex-direction:row; align-items:center; gap:10px; position:absolute; right:16px; top:4px; }
  header.collapsed .grade-panel { flex-wrap:nowrap; gap:8px; }
  header.collapsed .grade-box { display:flex; align-items:baseline; gap:4px; }
  header.collapsed .grade-letter { font-size:20px; }
  header.collapsed .grade-score { font-size:14px; }
  header.collapsed .grade-sub { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; }
  .cell:hover, .sens-row:hover { transform:none; }
}

/* export-button group label — makes "this category" vs "all categories" explicit */
.exp-label { font-size:var(--fs-xs); color:var(--muted-2); align-self:center; margin-right:2px; white-space:nowrap; }

/* opt-in aggregate-research contribution (web build only) */
.contribute { flex:1 1 100%; margin-top:10px; padding-top:10px; border-top:1px solid var(--hairline); display:flex; flex-direction:column; gap:8px; color:var(--muted-2); font-size:var(--fs-xs); }
.contribute-consent { display:flex; align-items:flex-start; gap:8px; line-height:1.4; cursor:pointer; }
.contribute-consent input { margin-top:2px; flex:none; }
.contribute-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.contribute-actions a { color:var(--accent-ink); text-decoration:underline; cursor:pointer; }
#contribute-btn { padding:5px 12px; border:1px solid var(--gap); border-radius:6px; background:var(--gap); color:#fff; cursor:pointer; font-size:var(--fs-xs); }
#contribute-btn:disabled { opacity:.5; cursor:not-allowed; background:transparent; color:var(--muted-2); }
.contribute-status { color:var(--muted-2); }
.contribute-payload { max-height:220px; overflow:auto; background:#f6f8fa; border:1px solid var(--hairline); border-radius:6px; padding:10px; font-size:11px; line-height:1.4; white-space:pre; }