/* ===========================================================================
 * RevenueBase product design system — applied to the assessment app.
 * Product surface: slate text ramp, DM Sans 14px, Fraunces serif page titles,
 * solid navy-800 primary + teal action/progress, square 0px corners,
 * navy-tinted canvas, hairline slate borders, 4% noise grain.
 * ======================================================================== */
:root{
  --navy-50:#f1f4f9;--navy-100:#dde6f1;--navy-150:#c1cfe0;--navy-200:#b5c8e0;--navy-300:#89a5cc;
  --navy-700:#1a4a6e;--navy-800:#0f537e;--navy-900:#0e1a2e;
  --amber-200:#ffe099;--amber-800:#704700;
  --teal-400:#2dc9c4;--teal-500:#00b5b0;--teal-600:#219f98;--teal-700:#107069;
  --slate-50:#f7f7f9;--slate-100:#ecedf0;--slate-200:#d2d5dc;--slate-300:#adb2bd;--slate-400:#868c9b;--slate-500:#626879;--slate-700:#2e323d;--slate-900:#13161d;
  --success:#2e7d32;--success-bg:#e6f3e6;--danger:#c62828;--danger-bg:#fae3e3;--warning:#bf7c00;--warning-bg:#fff8e6;
  --serif:"Fraunces",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--mono:"JetBrains Mono",Menlo,monospace;
  /* product light aliases */
  --app-bg:var(--navy-50);--surface:#ffffff;--surface-2:var(--slate-50);
  --heading:var(--slate-900);--text:var(--slate-700);--muted:var(--slate-400);
  --accent:var(--navy-800);--border:var(--slate-200);--field-border:var(--navy-300);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--text);
  background:var(--app-bg);-webkit-font-smoothing:antialiased;position:relative;}
/* 4% noise grain over the canvas — felt, not seen */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("bg-noise-light.webp");background-size:256px;opacity:.04;}
.wrap{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:28px 22px 96px;}

/* brand + headings */
.brand{margin-bottom:18px;}
.brand img{height:26px;width:auto;display:block;}
h1{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.12;letter-spacing:-.01em;color:var(--heading);}
h2{font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--heading);margin:0 0 6px;}
.sub{color:var(--muted);font-size:14px;}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.legend{font-size:12px;color:var(--muted);margin-top:6px;}

/* progress bar (teal action accent on navy track) */
.bar{height:4px;background:var(--navy-100);overflow:hidden;margin:14px 0 24px;}
.bar>i{display:block;height:100%;background:var(--teal-500);width:0;transition:width .3s;}

/* card / panel */
.card{background:var(--surface);border:1px solid var(--border);padding:24px;margin-top:18px;}

/* buttons — square, navy primary, white-secondary ghost */
button{font:500 15px/1 var(--sans);cursor:pointer;border:1px solid transparent;
  padding:12px 20px;background:var(--navy-800);color:#fff;}
button:hover{background:var(--navy-700);}
button.ghost{background:var(--surface);color:var(--accent);border-color:var(--field-border);}
button.ghost:hover{background:var(--surface-2);}
button:disabled{opacity:.45;cursor:not-allowed;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px;}

/* inputs */
input{font:400 14px var(--sans);background:var(--surface);border:1px solid var(--field-border);
  color:var(--heading);padding:11px 13px;width:100%;max-width:420px;}
input::placeholder{color:var(--muted);}
label,label.fld{display:block;font-size:13px;color:var(--text);margin:14px 0 6px;}

/* adjective chips (multi-select tags) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.chip{padding:8px 14px;border:1px solid var(--slate-300);background:var(--surface);color:var(--text);
  cursor:pointer;user-select:none;transition:.1s;}
.chip:hover{border-color:var(--navy-300);}
.chip.on{background:var(--navy-50);border-color:var(--navy-800);color:var(--accent);font-weight:500;}

/* question blocks + single-select option cards (SJT / cognitive) */
.q{margin:18px 0;padding-bottom:16px;border-bottom:1px solid var(--border);}
.q:last-child{border-bottom:none;}
.opt{display:block;border:1px solid var(--border);background:var(--surface);color:var(--text);
  padding:11px 14px;margin-top:8px;cursor:pointer;}
.opt:hover{border-color:var(--navy-300);}
.opt.on{border-color:var(--navy-800);background:var(--navy-50);color:var(--accent);font-weight:500;}

/* forced-choice preference pair */
.pf{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
.pf .opt{margin-top:0;text-align:center;}

/* likert (segmented control cells) */
.lik{padding:14px 0;border-bottom:1px solid var(--border);}
.lik:last-child{border-bottom:none;}
.lik-q{margin-bottom:10px;color:var(--heading);}
.lik-opts{display:flex;gap:0;border:1px solid var(--field-border);width:max-content;max-width:100%;}
.lik-opts .c{padding:9px 0;width:46px;text-align:center;font-size:13px;color:var(--muted);cursor:pointer;
  border-right:1px solid var(--field-border);transition:.1s;}
.lik-opts .c:last-child{border-right:none;}
.lik-opts .c:hover{background:var(--surface-2);}
.lik-opts .c.on{background:var(--navy-50);color:var(--accent);font-weight:600;}
.likleg{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:5px;}

/* cognitive countdown */
.timer{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;}
.timer.low{color:var(--danger);}

/* global elapsed timer chip (top-right) */
.elapsed{position:fixed;top:14px;right:16px;z-index:20;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.04em;color:var(--accent);background:var(--navy-50);
  border:1px solid var(--navy-200);padding:7px 12px;font-variant-numeric:tabular-nums;}
.elapsed::before{content:"\23F1  ";opacity:.7;}

/* completion / error states */
.result{display:flex;align-items:center;gap:11px;border:1px solid;padding:14px 16px;margin-top:4px;font-size:14px;}
.res-valid{background:var(--success-bg);border-color:#bfe0c0;color:var(--success);}
.res-invalid{background:var(--danger-bg);border-color:#f0c4c4;color:var(--danger);}

@media (max-width:520px){
  h1{font-size:26px;} .wrap{padding:20px 16px 80px;}
  .pf{grid-template-columns:1fr;}
}