/* ============================================================
   assessment.css — shared styles for Regwolf readiness
   assessments (NIS2, AI Act, ISO 27001/SOC 2, GDPR).
   Pairs with regwolf.css + assessment-engine.js.
   ============================================================ */

/* ---------- floating pill nav (shared chrome) ---------- */
.nav-wrap{ position:fixed; z-index:80; top:18px; left:0; right:0; display:flex; justify-content:center;
  padding-inline:16px; pointer-events:none; }
.nav{ pointer-events:auto; width:min(1180px,100%);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:rgba(19,19,22,.62); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:11px 12px 11px 20px; transition:background .3s var(--ease); }
.nav.scrolled{ background:rgba(12,12,14,.86); }
.brand .wordmark{ font-family:var(--mono); font-weight:600; font-size:15px; letter-spacing:.04em; }
.brand .wordmark .sl{ color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:18px; }
.nav-links a{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mut); transition:color .2s var(--ease); white-space:nowrap; }
.nav-links a:hover,.nav-links a.active{ color:var(--fg); }
.nav-cta{ display:flex; align-items:center; gap:9px; }
.nav-cta .btn{ padding:11px 18px; font-size:12px; }
.burger{ display:none; width:42px; height:42px; border-radius:var(--r-pill); border:1px solid var(--line); background:transparent; align-items:center; justify-content:center; }
.burger span{ display:block; width:16px; height:1.6px; background:var(--fg); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:16px; height:1.6px; background:var(--fg); }
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }
@media (max-width:1024px){ .nav-links{ display:none; } .nav-cta .btn--ghost{ display:none; } .burger{ display:flex; } }

/* ---------- assessment shell ---------- */
.asmt{ min-height:100svh; padding:clamp(112px,14vw,150px) 0 clamp(60px,8vw,100px); position:relative; overflow:hidden; }
.asmt .glow{ position:absolute; right:-8%; top:-6%; width:min(720px,80vw); height:80%; z-index:0;
  background:radial-gradient(42% 48% at 70% 30%, oklch(0.645 0.182 36 / .18), transparent 70%); filter:blur(34px); pointer-events:none; }
.asmt .shell{ position:relative; z-index:1; max-width:920px; }

.view{ display:none; }
.view.active{ display:block; animation:vin .5s var(--ease); }
@keyframes vin{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .view.active{ animation:none; } }

/* intro */
.intro h1{ font-size:clamp(40px,4.8vw,74px); font-weight:500; letter-spacing:-0.04em; line-height:1.0; margin:22px 0 0; max-width:18ch; text-wrap:balance; }
.intro h1 em{ font-style:normal; color:var(--accent); }
.intro .lead{ color:var(--fg-mut); font-size:clamp(17px,1.5vw,21px); line-height:1.55; margin:24px 0 0; max-width:52ch; }
.intro-meta{ display:flex; gap:30px; flex-wrap:wrap; margin:38px 0 0; padding-top:30px; border-top:1px solid var(--line); }
.intro-meta .im{ display:flex; flex-direction:column; gap:6px; }
.intro-meta .im .n{ font-family:var(--mono); font-size:22px; font-weight:600; color:var(--fg); letter-spacing:-0.02em; }
.intro-meta .im .l{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mut); }
.intro-actions{ margin-top:38px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.intro-note{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--fg-dim); text-transform:uppercase; }
.intro-switch{ margin-top:30px; display:flex; gap:8px; flex-wrap:wrap; }
.intro-switch a{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mut);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 14px; transition:.2s var(--ease); }
.intro-switch a:hover{ color:var(--fg); border-color:var(--fg-mut); }
.intro-switch a.cur{ background:var(--fg); color:#0a0a0b; border-color:var(--fg); }

/* progress */
.asmt-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.step-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mut); }
.step-tag b{ color:var(--accent); font-weight:500; }
.pbar{ flex:1; min-width:160px; height:4px; border-radius:4px; background:var(--bg-3); overflow:hidden; }
.pbar i{ display:block; height:100%; width:0; background:var(--accent); border-radius:4px; transition:width .5s var(--ease); }

/* cards / forms */
.q-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3.4vw,44px); }
.q-card h2{ font-size:clamp(26px,3vw,38px); font-weight:500; letter-spacing:-0.03em; line-height:1.05; margin:0 0 8px; }
.q-card .dom-sub{ color:var(--fg-mut); font-size:15.5px; margin:0 0 30px; max-width:60ch; }
.dom-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.dom-eyebrow svg{ width:20px; height:20px; }

.q{ padding:22px 0; border-top:1px solid var(--line-2); }
.q:first-of-type{ border-top:0; padding-top:0; }
.q .qt{ font-size:17px; font-weight:500; letter-spacing:-0.01em; margin:0 0 4px; }
.q .qh{ color:var(--fg-dim); font-size:13.5px; margin:0 0 16px; }
.opts{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opt label{ display:flex; flex-direction:column; gap:4px; height:100%; padding:13px 14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-3); cursor:pointer; transition:border-color .18s var(--ease), background .18s var(--ease); }
.opt label .ol{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }
.opt label .od{ font-size:13.5px; font-weight:500; color:var(--fg); line-height:1.2; }
.opt input:hover + label{ border-color:var(--fg-mut); }
.opt input:checked + label{ border-color:var(--accent); background:oklch(0.645 0.182 36 / .12); }
.opt input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; }

/* scope form */
.scope-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px; }
.fld{ display:flex; flex-direction:column; gap:9px; }
.fld.full{ grid-column:1 / -1; }
.fld label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mut); }
.fld select,.fld input{ width:100%; font-family:var(--sans); font-size:15px; color:var(--fg); background:var(--bg-3);
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px; box-sizing:border-box; transition:border-color .18s var(--ease); }
.fld select{ -webkit-appearance:none; appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23998f7d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:16px; }
.fld select:focus,.fld input:focus{ outline:none; border-color:var(--accent); }
.fld select:required:invalid{ color:var(--fg-dim); }
.fld option{ color:#f4efe4; background:#1b1b1f; }

/* nav buttons */
.q-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:30px; }
.btn--back{ background:transparent; border:1px solid var(--line); color:var(--fg-mut); }
.btn--back:hover{ border-color:var(--fg-mut); color:var(--fg); }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* scope verdict banner */
.verdict{ display:flex; gap:16px; align-items:flex-start; padding:20px 22px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-3); margin-top:22px; }
.verdict .vi{ width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; }
.verdict .vi svg{ width:22px; height:22px; }
.verdict .vt{ font-weight:600; font-size:16px; margin:0 0 3px; }
.verdict .vd{ color:var(--fg-mut); font-size:13.5px; margin:0; line-height:1.5; }
.verdict.in{ border-color:oklch(0.645 0.182 36 / .5); background:oklch(0.645 0.182 36 / .08); }
.verdict.in .vi{ background:oklch(0.645 0.182 36 / .18); color:var(--accent-h); }
.verdict.out{ border-color:oklch(0.74 0.14 150 / .4); background:oklch(0.74 0.14 150 / .07); }
.verdict.out .vi{ background:oklch(0.74 0.14 150 / .16); color:oklch(0.78 0.13 150); }
.verdict.warn{ border-color:oklch(0.78 0.13 75 / .45); background:oklch(0.78 0.13 75 / .08); }
.verdict.warn .vi{ background:oklch(0.78 0.13 75 / .18); color:oklch(0.82 0.13 75); }

/* ---------- results ---------- */
.res-top{ display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,4vw,52px); align-items:center; }
.res-gauge{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.dial{ position:relative; width:240px; height:240px; }
.dial svg{ width:100%; height:100%; display:block; overflow:visible; }
.dial .track{ fill:none; stroke:var(--line); stroke-width:3.5; }
.dial .val{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; transition:stroke-dasharray 1.3s cubic-bezier(.22,.61,.36,1); }
.dial .tick{ stroke:var(--line); stroke-width:1.5; }
.dial .center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.dial .gnum{ font-family:var(--mono); font-weight:600; font-size:54px; letter-spacing:-0.03em; line-height:1; color:var(--fg); }
.dial .gnum small{ font-size:22px; color:var(--fg-mut); }
.dial .gtier{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.res-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.res-top h2{ font-size:clamp(28px,3.4vw,46px); font-weight:500; letter-spacing:-0.03em; line-height:1.02; margin:14px 0 14px; }
.res-top .res-lead{ color:var(--fg-mut); font-size:16px; line-height:1.55; margin:0; max-width:46ch; }

.res-domains{ margin-top:clamp(34px,4.5vw,56px); }
.res-domains h3,.res-gaps h3{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mut); margin:0 0 20px; font-weight:500; }
.dom-bars{ display:grid; grid-template-columns:1fr 1fr; gap:16px 34px; }
.dbar{ display:flex; flex-direction:column; gap:8px; }
.dbar .dh{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.dbar .dn{ font-size:14.5px; font-weight:500; }
.dbar .dp{ font-family:var(--mono); font-size:13px; color:var(--fg-mut); }
.dbar .track{ height:7px; border-radius:6px; background:var(--bg-3); overflow:hidden; }
.dbar .fill{ height:100%; width:0; border-radius:6px; transition:width 1s cubic-bezier(.22,.61,.36,1); }

.res-gaps{ margin-top:clamp(34px,4.5vw,52px); border-top:1px solid var(--line); padding-top:clamp(30px,4vw,44px); }
.gap-list{ display:grid; gap:12px; }
.gap{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-2); }
.gap .gnumdot{ font-family:var(--mono); font-size:12px; color:var(--accent); font-weight:600; flex:none; margin-top:1px; }
.gap .gtxt b{ font-weight:600; }
.gap .gtxt p{ margin:3px 0 0; color:var(--fg-mut); font-size:13.5px; line-height:1.5; }

/* report capture */
.report{ margin-top:clamp(34px,4.5vw,52px); border:1px solid var(--accent); border-radius:var(--r-lg);
  background:linear-gradient(180deg, oklch(0.645 0.182 36 / .09), transparent 60%); padding:clamp(28px,3.5vw,42px); }
.report .r-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-h); }
.report h3{ font-size:clamp(22px,2.4vw,30px); font-weight:500; letter-spacing:-0.02em; margin:12px 0 8px; }
.report p{ color:var(--fg-mut); font-size:15px; line-height:1.55; margin:0 0 22px; max-width:52ch; }
.report-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.report-form .ri{ flex:1; min-width:240px; display:flex; flex-direction:column; gap:7px; }
.report-form input{ width:100%; font-family:var(--sans); font-size:15px; color:var(--fg); background:var(--bg-3);
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px; box-sizing:border-box; }
.report-form input:focus{ outline:none; border-color:var(--accent); }
.report p.report-hint{ font-family:var(--mono); font-size:10.5px; line-height:1.6; letter-spacing:.04em; color:var(--fg-dim); margin:22px 0 0; max-width:none; }
.report.done{ text-align:center; }
.report.done .checkwrap{ width:60px; height:60px; margin:0 auto 18px; border-radius:50%; background:oklch(0.645 0.182 36 / .15); display:grid; place-items:center; }
.report.done .checkwrap svg{ width:30px; height:30px; }

.res-actions{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:760px){
  .opts{ grid-template-columns:1fr 1fr; }
  .scope-grid{ grid-template-columns:1fr; }
  .res-top{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .res-top .res-lead{ margin-inline:auto; }
  .dom-bars{ grid-template-columns:1fr; }
  .dial{ width:210px; height:210px; }
}

/* footer */
.foot{ background:var(--bg); border-top:1px solid var(--line); padding-block:clamp(48px,6vw,80px); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.foot-brand .wordmark{ font-family:var(--mono); font-weight:600; font-size:18px; letter-spacing:.04em; }
.foot-brand .wordmark .sl{ color:var(--accent); }
.foot-brand p{ color:var(--fg-mut); font-size:14px; max-width:30ch; margin:16px 0 0; }
.foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin:0 0 16px; font-weight:500; }
.foot-col a{ display:block; color:var(--fg-mut); font-size:14.5px; padding:5px 0; transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--fg); }
.foot-ticker{ margin-top:clamp(46px,6vw,72px); padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); }
@media (max-width:760px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-top{ grid-template-columns:1fr; } }