/* Ethiq AI Assessment — design system
   Enterprise-grade restyle: neutral slate/graphite palette, one restrained accent,
   crisp 1px borders, quiet shadows, a 4/8px spacing grid, dense data surfaces.
   System font stack only — no webfont import, no brand colors, no logos.

   Type: the system font stack, deliberately. This file used to open with a CSS
   import of a Google Fonts stylesheet for Plus Jakarta Sans, which made every
   page load fetch from a third-party host — handing it the visitor's IP address
   and Referer, and forcing the Content-Security-Policy to allow that host in
   both style-src and font-src before it could be enforced at all. A self-hosted
   webfont closes both holes and is the right answer if the brand face matters;
   that is a typography decision, not a security one, so it is left to whoever
   owns the visual design. (A test asserts this file pulls nothing off-origin.) */

:root{
  /* --------------------------------------------------------------- graphite ink scale */
  --ink:#191d22; --ink-2:#3b434c; --muted:#4f5964; --muted-2:#667080;

  /* one restrained accent — a desaturated slate blue, deliberately far from any vendor
     brand hue (low saturation, mid-dark value). Used consistently for links, primary
     actions, focus rings and selected states — nowhere else. */
  --accent:#3c5872; --accent-2:#2b4258; --accent-soft:#eef2f5;

  /* a muted bronze, used sparingly and only for premium/upgrade cues — never a second
     primary accent. */
  --gold:#8a6d3f; --gold-soft:#6f5730;

  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#eef0f3; --surface-3:#e3e6ea;
  --border:#dde1e6; --border-2:#c7cdd4;

  /* dark graphite panel — report covers and the marketing hero band. Flat, not a
     brand gradient. */
  --panel:#20262e; --panel-2:#2a323b;
  --panel-ink:#f4f6f7; --panel-muted:#a9b3bd; --panel-border:rgba(255,255,255,.14);

  --ok:#2f7a4f; --ok-bg:#e7f3ea;
  --warn:#9a6416; --warn-bg:#faf1e0;
  --bad:#b3261e; --bad-bg:#fbeae9;
  --crit:#7a1f1a; --crit-bg:#f6dedc;
  --info:#3c5872; --info-bg:#eef2f5;

  --r-sm:4px; --r:6px; --r-lg:8px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(15,23,32,.05);
  --sh:0 2px 10px rgba(15,23,32,.08);
  --sh-lg:0 12px 28px rgba(15,23,32,.14);

  /* system stack only — no webfont, no brand typeface. */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.55; font-size:15px; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}
img{max-width:100%}
h1,h2,h3{line-height:1.25; margin:0 0 .4em; font-weight:700; letter-spacing:-.01em}
h1{font-size:clamp(24px,3.2vw,34px)}
h2{font-size:clamp(19px,2.1vw,24px)}
h3{font-size:16px; font-weight:600}
p{margin:0 0 1rem}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
.muted{color:var(--muted)}
.eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px}
.center{text-align:center}
.stack>*+*{margin-top:16px}
ul.points{margin:0 0 12px; padding-left:20px}
ul.points li{margin:4px 0}

/* ------------------------------------------------------- layout / spacing utilities */
.mx-auto{margin-left:auto; margin-right:auto}
.measure-sm{max-width:460px}
.measure-md{max-width:640px}
.measure-lg{max-width:680px}
.section--band{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section--band-top{background:var(--surface); border-top:1px solid var(--border)}

/* ---------------------------------------------------------------- top bar */
.topbar{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border)}
.topbar__in{display:flex; align-items:center; justify-content:space-between; height:56px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:16px}
.brand__mark{width:26px; height:26px; border-radius:var(--r-sm); background:var(--ink);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px}
.brand small{display:block; font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.02em; margin-top:-2px}
.nav{display:flex; align-items:center; gap:16px}
.nav a{color:var(--ink-2); font-weight:500; font-size:14px}
.nav a:hover{color:var(--accent)}
.nav .who{color:var(--muted); font-size:13.5px}
/* Sign out is a POST form, so the control is a button styled to read as a nav link. */
.nav__signout{display:flex}
.nav__link-btn{background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--ink-2); font-weight:500; font-size:14px}
.nav__link-btn:hover{color:var(--accent)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  font-weight:600; font-size:14.5px; line-height:1; padding:10px 18px; border-radius:var(--r);
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration:none; white-space:nowrap}
.btn:active{transform:translateY(1px)}
/* Inline icon SVGs carry no intrinsic size, so without this they stretch to fill the
   flex line and swamp the label. Applies to every icon() call inside a button. */
.btn svg{width:15px; height:15px; flex:0 0 auto}
.btn--lg svg{width:16px; height:16px}
.btn--primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-2); border-color:var(--accent-2); color:#fff}
.btn--gold{background:var(--gold); color:#fff; border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-soft); border-color:var(--gold-soft); color:#fff}
.btn--ghost{background:var(--surface); color:var(--ink); border-color:var(--border-2)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn--lg{padding:13px 24px; font-size:15px}
.btn--compact{padding:8px 14px; font-size:14px}
.btn--block{width:100%; justify-content:center}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------------------------------------------------------------- hero */
/* A flat graphite panel, not a brand-color gradient — restrained by design. */
.hero{background:var(--panel); color:var(--panel-ink); padding:56px 0 60px}
.hero .eyebrow{color:var(--panel-muted)}
.hero h1{color:#fff; max-width:16ch}
.hero p{color:var(--panel-muted); font-size:17px; max-width:56ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.hero .btn--ghost{background:transparent; color:#fff; border-color:var(--panel-border)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.4)}

/* ---------------------------------------------------------------- stats strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.stat{background:rgba(255,255,255,.04); border:1px solid var(--panel-border);
  border-radius:var(--r); padding:14px 16px}
.stat b{display:block; font-size:24px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px; color:var(--panel-muted); line-height:1.4}

/* generic section */
.section{padding:56px 0}
.section--tight{padding:40px 0}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}

/* ---------------------------------------------------------------- cards */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh-sm)}
.card--pad-lg{padding:28px}
.card--flag{border-color:var(--gold)}
.card__eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.card__eyebrow--gold{color:var(--gold)}
/* Sign-in and sign-up cards. Replaces an inline style="max-width:460px" that was on the
   login card: the CSP is moving from report-only to enforced, and a style attribute is
   exactly what that change stops allowing. */
.card--auth{max-width:460px; margin:0 auto}

/* ---------------------------------------------------------------- pillar cards */
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.pillar-card{position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh-sm); transition:box-shadow .15s ease, border-color .15s ease}
.pillar-card:not(.is-locked):hover{box-shadow:var(--sh); border-color:var(--border-2)}
.pillar-card__icon{width:40px; height:40px; border-radius:var(--r); background:var(--accent-soft);
  display:grid; place-items:center; color:var(--accent); margin-bottom:4px}
.pillar-card__icon svg{width:22px; height:22px}
.pillar-card h3{margin:0; font-size:18px}
.pillar-card .tag{color:var(--muted); font-size:13.5px; margin:0}
.pillar-card__foot{margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.pillar-card__status{font-size:13px; font-weight:600; color:var(--accent)}
.pillar-card.is-locked{background:var(--surface-2); border-style:dashed}
.pillar-card.is-locked .pillar-card__icon{background:#e4e7ec; color:var(--muted-2)}
.pillar-card.is-locked h3,.pillar-card.is-locked .tag{color:var(--muted-2)}
.lock-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--gold); background:#f4efe4; border:1px solid #e2d3ae; padding:4px 10px; border-radius:var(--r-pill)}
.lock-badge svg{width:13px; height:13px}

/* ---------------------------------------------------------------- badges / chips */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:var(--r-pill); border:1px solid var(--border-2); background:var(--surface-2); color:var(--ink-2)}
.badge{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px;
  padding:5px 11px; border-radius:var(--r-pill)}
/* maturity + risk semantic colors */
.tone--ok{color:var(--ok); background:var(--ok-bg); border:1px solid #c9e3d1}
.tone--warn{color:var(--warn); background:var(--warn-bg); border:1px solid #ecd6a8}
.tone--bad{color:var(--bad); background:var(--bad-bg); border:1px solid #edc4c1}
.tone--crit{color:#fff; background:var(--crit); border:1px solid var(--crit)}
.tone--info{color:var(--info); background:var(--info-bg); border:1px solid #d3dde3}

/* ---------------------------------------------------------------- forms / login */
/* .field's spacing is set once, below, alongside the profile-form rules — the two
   forms share the same class and must share the same rhythm. */
.field label{display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; color:var(--ink-2)}
.field input{width:100%; font-family:inherit; font-size:14.5px; padding:10px 13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-sm); transition:border-color .15s ease, box-shadow .15s ease}
.field input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.form-note{font-size:13px; color:var(--muted)}

/* ---------------------------------------------------------------- wizard */
.wizard{max-width:760px; margin:0 auto}
.progress{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.progress__track{flex:1; height:6px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden}
.progress__bar{height:100%; background:var(--accent); border-radius:var(--r-pill); transition:width .3s ease}
.progress__label{font-size:12.5px; font-weight:600; color:var(--accent); white-space:nowrap}
.step{display:none}
.step.is-active{display:block; animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.step__dim{color:var(--muted); font-size:14px; margin-bottom:2px}
.question{padding:18px 0; border-bottom:1px solid var(--border)}
.question:last-child{border-bottom:none}
.question__text{font-weight:600; font-size:15.5px; margin-bottom:4px}
.question__help{font-size:13px; color:var(--muted); margin-bottom:12px}
.question.is-missing .question__text{color:var(--bad)}
.question.is-missing .scale__opt label{border-color:#e3aca9}
.question.is-missing::after{content:"Please choose an option to continue"; display:block; margin-top:10px; font-size:12.5px; color:var(--bad); font-weight:600}
.question__flag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold); background:#f4efe4; padding:2px 8px; border-radius:var(--r-pill); margin-left:8px; vertical-align:middle}
.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.scale__opt{position:relative}
.scale__opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.scale__opt label{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  cursor:pointer; padding:10px 6px; border:1px solid var(--border-2); border-radius:var(--r-sm);
  background:var(--surface); transition:border-color .15s ease, background .15s ease; height:100%}
.scale__opt label b{font-size:17px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.scale__opt label span{font-size:11px; font-weight:500; color:var(--muted); line-height:1.25}
.scale__opt label:hover{border-color:var(--accent)}
.scale__opt input:checked+label{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.scale__opt input:checked+label b{color:var(--accent)}
.scale__opt input:checked+label span{color:var(--accent-2)}
.scale__opt input:focus-visible+label{outline:2px solid var(--accent); outline-offset:2px}
.wizard__nav{display:flex; justify-content:space-between; gap:12px; margin-top:24px}

/* ---------------------------------------------------------------- report */
/* Same flat graphite panel as .hero — one dark treatment, reused everywhere a
   report/cover needs a strong header band. */
.report-hero{background:var(--panel); color:var(--panel-ink); border-radius:var(--r-lg); padding:28px 32px; box-shadow:var(--sh)}
.report-hero .eyebrow{color:var(--panel-muted)}
.report-hero h1{color:#fff; margin:0 0 12px}
.report-hero__lede{color:var(--panel-muted); margin:0}
.report-hero__note{color:var(--panel-muted); font-size:13.5px; margin:16px 0 0}
.report-hero__note ul{margin:6px 0 0; padding-left:20px}
.report-badges{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 0}
.report-hero .badge{background:rgba(255,255,255,.12); color:#fff; border:1px solid var(--panel-border)}
.scorewrap{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.score-ring{--v:0; width:104px; height:104px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:conic-gradient(var(--panel-ink) calc(var(--v)*1%), rgba(255,255,255,.18) 0);}
.score-ring__in{width:82px; height:82px; border-radius:50%; background:var(--panel-2); display:grid; place-items:center; text-align:center; color:#fff}
.score-ring__in b{font-size:26px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.score-ring__in span{font-size:10.5px; opacity:.8}

.dim-row{display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border)}
.dim-row:last-child{border-bottom:none}
.dim-row__name{font-weight:600}
.dim-row__desc{grid-column:1/2; color:var(--muted); font-size:13px}
.bar{grid-column:1/-1; height:6px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; margin-top:2px}
.bar__fill{height:100%; border-radius:var(--r-pill)}
.fill--ok{background:var(--ok)} .fill--warn{background:var(--warn)} .fill--bad{background:var(--bad)} .fill--crit{background:var(--crit)} .fill--info{background:var(--info)}

.finding{padding:12px 0; border-bottom:1px solid var(--border); font-size:14px}
.finding:last-child{border-bottom:none}
.finding__head{display:flex; align-items:center; gap:10px; margin-bottom:4px}

.table{width:100%; border-collapse:collapse; font-size:13.5px}
.table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  padding:8px 10px; border-bottom:1px solid var(--border-2); background:var(--surface-2)}
.table td{padding:10px; border-bottom:1px solid var(--border); vertical-align:top}
.table tr:last-child td{border-bottom:none}
.prio{font-weight:700; font-size:11.5px; padding:3px 8px; border-radius:var(--r-pill)}
.prio--P1{color:#fff; background:var(--bad)} .prio--P2{color:var(--warn); background:var(--warn-bg); border:1px solid #ecd6a8} .prio--P3{color:var(--ink-2); background:var(--surface-2); border:1px solid var(--border-2)}

/* radar */
.radar-wrap{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.radar-wrap svg{flex:0 0 auto}
.radar-legend{font-size:13px; color:var(--muted); flex:1; min-width:220px}

/* dashboard (governance) */
.metric{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border)}
.metric:last-child{border-bottom:none}
.metric__t{font-weight:600; font-size:14px}
.metric__target{font-size:12px; color:var(--muted)}

/* ---------------------------------------------------------------- policies list */
.doc-list{display:grid; gap:12px}
.doc{display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh-sm)}
.doc__i{width:36px; height:36px; border-radius:var(--r-sm); background:var(--accent-soft); display:grid; place-items:center; color:var(--accent); flex:0 0 auto}
.doc__i svg{width:20px;height:20px}
.doc__main{flex:1; min-width:0}
.doc__main b{display:block; font-size:15px}
.doc__main span{font-size:12.5px; color:var(--muted)}

/* ---------------------------------------------------------------- pricing */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm); display:flex; flex-direction:column}
.plan--highlight{border:1px solid var(--accent); box-shadow:var(--sh); position:relative}
.plan--highlight::before{content:"Best value"; position:absolute; top:-11px; left:24px; background:var(--gold); color:#fff;
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill)}
.plan h3{font-size:20px; margin-bottom:2px}
.plan__price{font-size:34px; font-weight:700; color:var(--ink); margin:8px 0 0; font-variant-numeric:tabular-nums}
.plan__price span{font-size:14px; font-weight:500; color:var(--muted)}
.plan__features{list-style:none; padding:0; margin:16px 0 22px; display:grid; gap:9px}
.plan__features li{position:relative; padding-left:24px; font-size:14px}
.plan__features li::before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%;
  background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7a4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
.plan .btn{margin-top:auto}

/* ---------------------------------------------------------------- callouts / alerts */
.alert{padding:12px 16px; border-radius:var(--r); font-size:13.5px; border:1px solid; margin-bottom:16px}
.alert--info{background:var(--info-bg); border-color:#d3dde3; color:var(--accent-2)}
.alert--warn{background:var(--warn-bg); border-color:#ecd6a8; color:#7a4f10}
.callout-cta{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}

/* ---------------------------------------------------------------- footer */
.site-foot{margin-top:48px; border-top:1px solid var(--border); background:var(--surface)}
.site-foot__in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; flex-wrap:wrap; font-size:13px; color:var(--muted)}

/* ---------------------------------------------------------------- utilities */
.spread{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.row-gap{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* ---------------------------------------------------------------- a11y + responsive */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
@media (max-width:860px){
  .grid-2,.pillars,.plans{grid-template-columns:1fr}
  .grid-3,.stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .container{padding:0 16px}
  .stats,.grid-3{grid-template-columns:1fr}
  .scale{grid-template-columns:repeat(5,1fr); gap:5px}
  .scale__opt label{padding:9px 3px}
  .scale__opt label span{display:none}
  .nav{gap:12px}
  .nav a.hide-sm{display:none}
  .report-hero{padding:20px 18px}
}

/* =========================================================================
   NORTH release — board assurance dashboard, profile form, element scorecard,
   deliverable cards, critical-control board.
   ========================================================================= */

.container--narrow{max-width:760px}
.tiny{font-size:12px; line-height:1.45}
.small{font-size:13.5px; line-height:1.45}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.dash-actions{display:flex; flex-direction:column; align-items:flex-end; gap:8px}

/* ------------------------------------------------------------- profile form */
.field{margin-bottom:20px}
.field__label{display:block; font-weight:600; font-size:14.5px; margin-bottom:2px}
.field__help{margin:0 0 8px; font-size:12.5px; color:var(--muted)}
.input{width:100%; padding:10px 12px; border:1px solid var(--border-2); border-radius:var(--r-sm);
       font-family:var(--font); font-size:14.5px; color:var(--ink); background:var(--surface)}
.input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.choice-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
.choice-grid--pair{grid-template-columns:repeat(2,minmax(0,160px))}
.choice{position:relative; display:block; cursor:pointer}
.choice input{position:absolute; opacity:0; inset:0; cursor:pointer}
.choice span{display:block; padding:10px 12px; border:1px solid var(--border-2);
             border-radius:var(--r-sm); font-weight:500; font-size:13.5px; text-align:center;
             transition:border-color .15s, background .15s}
.choice span:hover{border-color:var(--accent)}
.choice input:checked+span{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-2); font-weight:600}
.choice input:focus-visible+span{outline:2px solid var(--accent); outline-offset:2px}

/* ------------------------------------------------- the five board-question tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
      padding:16px 16px 14px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:6px}
.tile__q{font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.02em}
.tile__v{font-size:30px; font-weight:700; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.tile__v small{font-size:14px; font-weight:600; color:var(--muted-2); margin-left:2px}
.tile__v--sm{font-size:22px}
.tile__sub{font-size:11.5px}

/* --------------------------------------------------------------- trend sparkline */
.trend{text-align:right; min-width:200px}
.trend__label{display:block; font-size:11.5px; margin-bottom:2px}

/* ------------------------------------------------------------ NORTH element rows */
.elements{display:flex; flex-direction:column; gap:14px}
.element{display:flex; flex-direction:column; gap:6px}
.element__head{display:flex; align-items:center; gap:12px}
.element__id{flex:1; min-width:0}
.element__id b{display:block; font-size:15px}
.element__tag{display:block; font-size:12px}
.element__letter{flex:none; width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center;
                 background:var(--ink); color:#fff; font-weight:700; font-size:14px}
.element__letter--lg{width:40px; height:40px; font-size:18px; border-radius:var(--r)}
.element__score{flex:none; display:flex; align-items:center; gap:8px; text-align:right}
.element__score b{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums}
.element__score small{color:var(--muted-2); font-size:11.5px; margin-right:4px}
.element-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:8px}

/* --------------------------------------------------------------- deliverables */
.deliverables{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px}
.deliverable{display:flex; flex-direction:column; gap:6px; padding:18px; background:var(--surface);
             border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
             color:var(--ink); transition:box-shadow .15s, border-color .15s}
.deliverable:hover{box-shadow:var(--sh); border-color:var(--accent); color:var(--ink)}
.deliverable__n{font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.06em; font-variant-numeric:tabular-nums}
.deliverable b{font-size:15px; line-height:1.3}
.deliverable .muted{font-size:13px}
.deliverable__go{margin-top:auto; padding-top:8px; font-weight:600; font-size:13px; color:var(--accent);
                 display:inline-flex; align-items:center; gap:5px}
.deliverable__go svg{width:14px; height:14px}
.deliverable--flag{border-color:var(--gold-soft); background:linear-gradient(180deg,#fbf8f2,#fff)}
.deliverable--flag .deliverable__n{color:var(--gold)}

/* ------------------------------------------------------- critical control board */
.ctrl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; margin-top:12px}
.ctrl{padding:12px 14px; border:1px solid var(--border); border-left-width:3px; border-radius:var(--r-sm);
      background:var(--surface-2)}
.ctrl .muted{font-size:12.5px}
.ctrl--in-place{border-left-color:var(--ok)}
.ctrl--partial{border-left-color:var(--warn)}
.ctrl--absent{border-left-color:var(--crit)}
.ctrl--unknown,.ctrl--not-assessed{border-left-color:var(--border-2)}

/* --------------------------------------------------------- question annotations */
.qa{margin:0}
.qa dt{font-weight:700; font-size:13.5px; color:var(--accent); margin-top:14px}
.qa dt:first-child{margin-top:0}
.qa dd{margin:4px 0 0}
.board-q{background:var(--surface-2); border-radius:var(--r-sm); padding:10px 12px; font-size:13.5px}
.subdomain{margin-top:24px; padding-top:16px; border-top:1px solid var(--border)}
.subdomain h3{margin-bottom:2px}
.subdomain__desc{font-size:13px; margin-bottom:12px}
.question__flag--high{background:var(--warn-bg); color:#7a4f10; border-color:#ecd6a8}
.question__flag--crit{background:var(--crit-bg); color:var(--crit); border-color:#e3c3c0}
.question__src{font-size:11px; color:var(--muted-2); margin-top:8px}
.scale__opt--dk label{border-style:dashed}
.scale__opt--dk input:checked+label{background:var(--surface-3); border-style:solid; border-color:var(--muted-2);
                                    box-shadow:inset 0 0 0 1px var(--muted-2)}
.scale__opt--dk input:checked+label b,.scale__opt--dk input:checked+label span{color:var(--ink-2)}

@media print{
  .topbar,.site-foot,.btn,.wizard__nav,.progress{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; border-color:#ccc; break-inside:avoid}
  .tile,.deliverable,.ctrl{break-inside:avoid}
  a{color:inherit}
}

@media (max-width:640px){
  .dash-actions{align-items:flex-start}
  .trend{text-align:left}
  .element__head{flex-wrap:wrap}
  .tile__v{font-size:26px}
}