/* VaultorNet — theme overrides on top of the Modernist design system. */

:root{
  --color-bg:#f4f5f2; --color-surface:#eaede7; --color-text:#1d221f;
  --color-divider: color-mix(in srgb, #1d221f 16%, transparent);
  --color-accent:#2f7a46; --color-accent-2:#2f7a46;
  --color-accent-100:#e6f2e9; --color-accent-200:#c9e3ce; --color-accent-300:#9fcda9;
  --color-accent-400:#6cb17c; --color-accent-500:#2f7a46; --color-accent-600:#266339;
  --color-accent-700:#1f4f2e; --color-accent-800:#163a21; --color-accent-900:#0f2818;
  --color-accent-2-100:#e6f2e9; --color-accent-2-200:#c9e3ce; --color-accent-2-300:#9fcda9;
  --color-accent-2-400:#6cb17c; --color-accent-2-500:#2f7a46; --color-accent-2-600:#266339;
  --color-accent-2-700:#1f4f2e; --color-accent-2-800:#163a21; --color-accent-2-900:#0f2818;
  --color-neutral-100:#f7f8f6; --color-neutral-200:#e3e6e0; --color-neutral-300:#cdd2c9;
  --color-neutral-400:#a9b0a4; --color-neutral-500:#848c80; --color-neutral-600:#666d62;
  --color-neutral-700:#4d5349; --color-neutral-800:#343a31; --color-neutral-900:#1d221f;
  --pf-warn-bg:#fdf3e2; --pf-warn-fg:#8a5712; --pf-warn-border:#d9a441;
  --pf-bad-bg:#fbeaea; --pf-bad-fg:#8c2b2b;
  --pf-good-bg:#e6f2e9; --pf-good-fg:#1f4f2e;
  --space-5:20px;
}

body{margin:0;background:var(--color-bg);color:var(--color-text);}

/* ---------------------------------------------------------------------
   Phase 15 (1) — the custom pointer is gone.

   Two rules used to live here: a gradient arrow painted on `html`, and the
   same arrow forced onto `*, *::before, *::after` with `!important`. The
   second one was the damaging half — it beat every `cursor:pointer`,
   `cursor:text` and `cursor:not-allowed` declared anywhere else in this
   file and in ds.css, so the pointer never changed shape. Nothing signalled
   what was clickable, text fields did not read as editable, and disabled
   buttons looked live.

   Deleting both restores the operating system's own cursors, and every
   `cursor:` rule already written elsewhere in the app starts working again
   without being touched.
--------------------------------------------------------------------- */

a{color:var(--color-accent-700);text-decoration:none;}
a:hover{color:var(--color-accent);text-decoration:underline;}
.pf-card{transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-spring);}
.pf-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
@media (prefers-reduced-motion: reduce){.pf-card:hover{transform:none;}}
@keyframes pfIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes pfScale{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
.pf-in{animation:pfIn .22s cubic-bezier(.16,1,.3,1);}

/* ---------------------------------------------------------------------
   Site-wide visual polish pass (items 6 & 10, Apple-style direction):
   green stays the primary accent everywhere. Blue/orange/red/purple are
   ADDED on top, each with one specific meaning (blue=informational,
   orange=needs attention, red=critical only, purple=AI-generated) rather
   than being decorative variety. Motion throughout uses a spring/
   overshoot easing curve instead of linear — that's the specific thing
   that gives it an Apple-like feel, not just "faster" or "slower".
--------------------------------------------------------------------- */
:root{
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --color-info-100:#e5eef9; --color-info-500:#3568b0; --color-info-700:#284f85;
  --color-warn2-100:#fff2e2; --color-warn2-500:#ff8a00; --color-warn2-700:#b35a00;
  --color-ai-100:#f0ecff; --color-ai-500:#7d5cff; --color-ai-700:#5f3fdb;
}
.btn{transition:transform .16s var(--ease-spring), box-shadow .16s ease, background-color .12s ease, filter .12s ease;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);}
.btn:active{transform:scale(.96);filter:brightness(0.97);}
@media (prefers-reduced-motion: reduce){.btn:hover,.btn:active{transform:none;}}

/* A small accent glyph in front of every card-kicker label, so a section
   heading reads as "labelled" rather than just smaller/colored text —
   consistent across every card in the app since card-kicker is a shared
   primitive, not a per-page style. */
.card-kicker, .pf-card .card-kicker{position:relative;padding-left:11px;}
.card-kicker::before, .pf-card .card-kicker::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--color-accent);}

/* Tag/pill palette: info (blue), a second warn tone for "needs attention"
   distinct from the existing amber, and an "ai" tone (purple) reserved
   specifically for anything AI-generated — a policy drafted by AI, a
   risk the engine derived, an evidence-triggered risk — so purple reads
   as a consistent signal across the whole app, not random decoration. */
.pf-pill-info, .tag-info{background:var(--color-info-100);color:var(--color-info-700);}
.pf-pill-attn, .tag-attn{background:var(--color-warn2-100);color:var(--color-warn2-700);}
.pf-pill-ai, .tag-ai{background:var(--color-ai-100);color:var(--color-ai-700);}

/* "AI-generated" marker — used wherever a policy/risk/insight was
   produced by the engine rather than entered by hand. */
.pf-ai-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:var(--color-ai-700);background:var(--color-ai-100);padding:3px 9px;border-radius:20px;}
.pf-ai-badge svg{flex-shrink:0;}

/* Gradient icon tiles (Apple app-icon style) — for section headers and
   empty states. One gradient per section, defined once, reused via a
   modifier class rather than inline styles wherever it's needed. */
.pf-tile{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 1px 1px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.12);
  transition:transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);}
.pf-tile:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 22px rgba(0,0,0,.16);}
.pf-tile svg{stroke:#fff;}
.pf-tile-compliance{background:linear-gradient(160deg,#41a568,#1f6b40);}
.pf-tile-risk{background:linear-gradient(160deg,#ff7a68,#d1372a);}
.pf-tile-vendor{background:linear-gradient(160deg,#3f9dff,#0a5fd6);}
.pf-tile-training{background:linear-gradient(160deg,#a688ff,#6a45e0);}
.pf-tile-phishing{background:linear-gradient(160deg,#ffb648,#e07f0a);}
.pf-tile-ai{background:linear-gradient(160deg,#2fd0c0,#0f8f82);}
@media (prefers-reduced-motion: reduce){.pf-tile:hover{transform:none;}}

/* Frosted glass surface — floating panels (chatbot, tour card, popovers)
   read as sitting above the page rather than another flat box. */
.pf-glass{
  background:color-mix(in srgb, var(--color-surface, #fff) 72%, transparent);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid color-mix(in srgb, #ffffff 55%, transparent);
}

/* Table rows and list rows get the same gentle hover as cards, so
   scanning a long table (evidence, training, activity log) feels as
   alive as the rest of the app. */
.table tbody tr{transition:background-color .12s ease;}
.table tbody tr:hover{background-color:var(--color-neutral-100);}
.pf-listrow, .pf-actrow{transition:background-color .12s ease;border-radius:8px;}
.pf-listrow:hover, .pf-actrow:hover{background-color:var(--color-neutral-100);}

/* Dashboard tiles that link through to the section they summarize (item
   5) — the whole tile is the click target (.pf-card already lifts on
   hover), this just makes that affordance legible and turns the card
   into a real, keyboard-reachable link instead of a dead end. */
a.pf-dashlink{display:block;position:relative;color:inherit;text-decoration:none;cursor:pointer;}
a.pf-dashlink:hover{text-decoration:none;}
.pf-dashlink-go{
  position:absolute; top:var(--space-3,14px); right:var(--space-3,14px);
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; color:var(--color-accent-700);
  opacity:0; transform:translateX(-4px);
  transition:opacity .18s var(--ease-out,ease), transform .18s var(--ease-out,ease);
  pointer-events:none;
}
a.pf-dashlink:hover .pf-dashlink-go, a.pf-dashlink:focus-visible .pf-dashlink-go{opacity:1;transform:translateX(0);}

/* ---------------------------------------------------------------------
   Item 3 — more color, motion and graphic texture on top of the existing
   accent/info/warn2/ai palette and .pf-tile-* gradients: a soft floating
   ambient glow for page headers, a small gradient icon chip for stat
   rows (phishing tile, etc.), and a shimmer sweep reused from .pf-tile.
   All decorative pieces are position:absolute/pointer-events:none and
   disabled under reduced-motion, so they never interfere with layout or
   accessibility.
--------------------------------------------------------------------- */
.pf-ambient-glow{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:340px; height:340px; filter:blur(70px); opacity:.28;
  background:radial-gradient(circle, var(--color-accent-300), transparent 70%);
  animation:pf-glow-float 9s var(--ease-out,ease) infinite alternate;
}
@keyframes pf-glow-float{from{transform:translate(0,0);}to{transform:translate(-18px,20px);}}
@media (prefers-reduced-motion: reduce){.pf-ambient-glow{animation:none;}}

.pf-stat-chip{
  width:34px; height:34px; border-radius:10px; flex-shrink:0; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
}
.pf-stat-chip.g-good{background:linear-gradient(155deg,#41a568,#1f6b40);}
.pf-stat-chip.g-info{background:linear-gradient(155deg,#3f9dff,#0a5fd6);}
.pf-stat-chip.g-warn{background:linear-gradient(155deg,#ffb648,#e07f0a);}
.pf-stat-chip.g-bad{background:linear-gradient(155deg,#ff7a68,#d1372a);}
.pf-stat-chip.g-ai{background:linear-gradient(155deg,#a688ff,#6a45e0);}

/* Reusable shimmer sweep — same visual language as .pf-tile, available
   as a standalone overlay for any gradient surface. */
.pf-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;}
.pf-sheen::after{
  content:''; position:absolute; top:-60%; left:-40%; width:60%; height:220%;
  background:linear-gradient(75deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 65%);
  transform:rotate(10deg) translateX(-40%); animation:pf-sheen-sweep 5s ease-in-out infinite;
}
@keyframes pf-sheen-sweep{0%{transform:rotate(10deg) translateX(-40%);}55%,100%{transform:rotate(10deg) translateX(320%);}}
@media (prefers-reduced-motion: reduce){.pf-sheen::after{animation:none;}}

/* A count badge that pulses gently while there is something waiting on
   the person — draws the eye once, then settles, rather than looping
   forever once noticed. */
.pf-pill-accent.pf-pill-pulse{animation:pf-pill-pulse 1.8s var(--ease-out,ease) 2;}
@keyframes pf-pill-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent);}50%{box-shadow:0 0 0 6px transparent;}}
@media (prefers-reduced-motion: reduce){.pf-pill-accent.pf-pill-pulse{animation:none;}}

/* Full audit export — build progress + contents preview (item 6). The
   step list is a paced "please wait" indicator (the export is one server
   request, so these aren't literal live sub-statuses) but completion is
   real: it's driven by the download-start cookie set right before the
   zip streams out — see initAuditExportProgress() in shared/app.js. */
.pf-export-progress{margin-top:var(--space-4);}
.pf-export-steps{display:flex;flex-direction:column;gap:7px;margin-bottom:10px;}
.pf-export-step{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--color-neutral-500);transition:color .2s ease;}
.pf-export-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--color-neutral-300);flex:none;transition:all .2s var(--ease-spring,ease);}
.pf-export-step.is-active{color:var(--color-text);font-weight:600;}
.pf-export-step.is-active .pf-export-dot{border-color:var(--color-accent);animation:pf-export-pulse 1s ease-in-out infinite;}
.pf-export-step.is-done{color:var(--color-accent-700);}
.pf-export-step.is-done .pf-export-dot{background:var(--color-accent);border-color:var(--color-accent);}
@keyframes pf-export-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-accent) 35%, transparent);}50%{box-shadow:0 0 0 5px transparent;}}
@media (prefers-reduced-motion: reduce){.pf-export-step.is-active .pf-export-dot{animation:none;}}
.pf-export-track{height:5px;border-radius:3px;background:var(--color-neutral-200);overflow:hidden;}
.pf-export-fill{height:100%;width:6%;border-radius:3px;background:linear-gradient(90deg,var(--color-accent-300),var(--color-accent));transition:width .4s var(--ease-out,ease);}
.pf-export-tree{margin-top:var(--space-4);font-size:12px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--color-neutral-100);border:1px solid var(--color-divider);border-radius:10px;padding:12px 14px;}
.pf-export-tree div{padding:1.5px 0;}
.pf-export-tree-new{color:var(--color-ai-700);font-weight:700;}

/* Stat numbers (data-countup targets) get a soft scale-in the first time
   they appear on screen, instead of snapping straight to their final
   value — a small "counted up to" flourish on dashboards and reports. */
@keyframes pfStatIn{from{opacity:0;transform:scale(.85);}60%{transform:scale(1.04);}to{opacity:1;transform:scale(1);}}
[data-countup]{display:inline-block;animation:pfStatIn .5s var(--ease-spring);}
@media (prefers-reduced-motion: reduce){[data-countup]{animation:none;}}

/* Size bump: the whole UI was designed to look right around 125% browser
   zoom; most people run Chrome at 100–110%, where it reads small. Rather
   than rewrite every hardcoded px value in this file, scale the one
   shared wrapper up so everything inside — type, spacing, icons — grows
   together, the same way browser zoom itself works. 1.13x ≈ 125/110, so
   the tool looks the same at 100% zoom as it used to at ~113%. */
.pf-shell{zoom:1.13;}
@supports not (zoom:1.13){
  .pf-shell{transform:scale(1.13);transform-origin:top center;width:88.5%;margin:0 auto;}
}

/* layout */
.pf-shell{min-height:100vh;display:flex;flex-direction:column;}
.pf-main{flex:1;max-width:1240px;width:100%;margin:0 auto;padding:var(--space-8) var(--space-6);box-sizing:border-box;}
.pf-tabs{padding:0 var(--space-6);border-bottom:2px solid var(--color-divider);display:flex;gap:var(--space-8);background:var(--color-neutral-100);flex-wrap:wrap;}
.pf-tab{background:none;border:0;cursor:pointer;font:inherit;font-size:14px;padding:var(--space-3) 0;
  border-bottom:2px solid transparent;margin-bottom:-2px;color:var(--color-text);opacity:.65;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.pf-tab:hover{opacity:1;text-decoration:none;}
.pf-tab.is-active{opacity:1;font-weight:600;border-bottom-color:var(--color-accent);color:var(--color-accent-700);}

[data-dropzone].is-dragover{border-color:var(--color-accent) !important;background:var(--color-neutral-100);}

/* ── Annex A · 93 controls grid (Risk Management > Annex A tab) ──────── */
.pf-annex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-3);}
.pf-annex-card{border:1px solid var(--color-divider);border-radius:10px;padding:var(--space-3) var(--space-4);
  background:var(--color-bg);}
.pf-annex-card .pf-annex-code{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--color-accent-700);}
.pf-annex-card .pf-annex-title{font-size:13.5px;font-weight:600;margin:3px 0 4px;line-height:1.35;}
.pf-annex-card .pf-annex-brief{font-size:12px;line-height:1.5;color:var(--color-neutral-600);margin:0 0 var(--space-3);}
.pf-annex-theme-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.55;
  margin:var(--space-6) 0 var(--space-3);}
.pf-annex-theme-head:first-child{margin-top:0;}

/* ── Task Management board ─────────────────────────────────────────── */
.pf-task-filterbar{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--space-5);}
.pf-task-filterbar .input, .pf-task-filterbar select{font-size:13px;padding:8px 12px;}
.pf-task-chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--color-divider);font-size:12.5px;font-weight:700;text-decoration:none;color:var(--color-text);
  background:var(--color-bg);}
.pf-task-chip:hover{text-decoration:none;background:var(--color-neutral-100);}
.pf-task-chip.is-active{background:var(--color-accent);color:#fff;border-color:var(--color-accent);}
.pf-task-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4);}
.pf-task-card{display:flex;flex-direction:column;gap:var(--space-2);}
.pf-task-card.is-done{opacity:.6;}
.pf-task-card .pf-task-title{font-size:14px;font-weight:700;line-height:1.35;}
.pf-task-card .pf-task-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  margin-top:auto;padding-top:var(--space-2);border-top:1px solid var(--color-divider);}
.pf-task-assignee{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.8;}
.pf-task-avatar{width:20px;height:20px;border-radius:50%;background:var(--color-accent);color:#fff;
  font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;}

.pf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);}
.pf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.pf-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);}
.pf-split{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--space-6);align-items:start;}
.pf-q-layout{display:grid;grid-template-columns:280px 1fr 260px;gap:var(--space-6);align-items:start;}
@media (max-width:1080px){
  .pf-grid-2,.pf-grid-3,.pf-grid-4,.pf-split,.pf-q-layout{grid-template-columns:1fr;}
}

/* Requirement 21 (rev.3): horizontal navbar styled like the original
   underline tabs, + off-canvas drawer for account/admin links.
   Deliberately NOT flex/float based for the main content column — the
   navbar and drawer both live outside `.pf-main`'s flow, so they can never
   push page content around, even if a stylesheet fails to load. */
.pf-body{display:block;flex:1;min-height:0;}

/* ---------- Section sidebar (Compliance: Risk register / Training / Phishing) ---------- */
.pf-body-with-sidebar{display:flex;align-items:flex-start;gap:0;max-width:1240px;margin:0 auto;width:100%;}
.pf-body-with-sidebar .pf-main{margin:0;max-width:none;}
.pf-section-sidebar{width:236px;flex:0 0 236px;padding:var(--space-6) var(--space-4) var(--space-8) var(--space-6);
  box-sizing:border-box;position:sticky;top:0;align-self:flex-start;}
.pf-section-sidebar-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:12px;letter-spacing:.08em;opacity:.55;margin-bottom:var(--space-3);padding-left:12px;}
.pf-section-sidebar-nav{display:flex;flex-direction:column;gap:3px;}
.pf-section-sidebar-link{display:block;padding:11px 14px;border-radius:10px;font-size:13.5px;font-weight:600;
  color:var(--color-text);text-decoration:none;line-height:1.35;transition:background .12s ease,color .12s ease;}
.pf-section-sidebar-link:hover{background:color-mix(in srgb, var(--color-text) 6%, transparent);text-decoration:none;}
.pf-section-sidebar-link.is-active{background:var(--color-accent);color:var(--color-bg);}
.pf-sidebar-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;vertical-align:middle;}
.pf-sidebar-dot-ok{background:var(--color-accent);}
.pf-sidebar-dot-info{background:var(--color-info-500,#3568b0);}
.pf-sidebar-dot-attn{background:var(--color-warn2-500,#ff8a00);}
.pf-sidebar-dot-bad{background:#b42318;}
.pf-sidebar-dot-ai{background:var(--color-ai-500,#7d5cff);}
.pf-section-sidebar-link.is-active .pf-sidebar-dot{background:#fff;}
@media (max-width: 900px){
  .pf-body-with-sidebar{flex-direction:column;}
  .pf-section-sidebar{width:100%;flex:none;position:static;padding:var(--space-4) var(--space-4) 0;}
  .pf-section-sidebar-nav{flex-direction:row;flex-wrap:wrap;}
}

.pf-navbar{padding:0 var(--space-6);border-bottom:2px solid var(--color-divider);display:flex;
  gap:var(--space-8);background:var(--color-neutral-100);flex-wrap:wrap;position:relative;z-index:20;}
.pf-navlink{background:none;border:0;cursor:pointer;font:inherit;font-size:14px;padding:var(--space-3) 0;
  border-bottom:2px solid transparent;margin-bottom:-2px;color:var(--color-text);opacity:.65;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;}
.pf-navlink:hover{opacity:1;text-decoration:none;}
.pf-navlink.is-active{opacity:1;font-weight:600;border-bottom-color:var(--color-accent);color:var(--color-accent-700);}
.pf-navdrop{position:relative;}
.pf-navdrop > summary{list-style:none;cursor:pointer;}
.pf-navdrop > summary::-webkit-details-marker{display:none;}
.pf-navdrop[open] > summary.pf-navlink{opacity:1;color:var(--color-accent-700);}
.pf-navdrop-panel{position:absolute;left:0;top:100%;z-index:60;min-width:200px;background:var(--color-bg);
  border:2px solid var(--color-divider);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;margin-top:6px;}
.pf-navdrop-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;
  border-radius:6px;font-size:14px;font-weight:500;color:var(--color-text);text-decoration:none;opacity:.85;}
.pf-navdrop-item:hover{background:color-mix(in srgb, var(--color-text) 6%, transparent);text-decoration:none;opacity:1;}
.pf-navdrop-item.is-active{color:var(--color-accent-700);font-weight:700;opacity:1;}

/* Off-canvas drawer: fixed, right-hand side, hidden by default via inline
   transform in the markup itself so it never depends on this stylesheet
   loading in time, and can never push page content around. */
.pf-drawer-toggle{background:none;border:0;cursor:pointer;padding:6px;color:var(--color-text);display:inline-flex;}
.pf-drawer{width:min(280px,82vw);background:var(--color-bg);z-index:80;
  box-shadow:var(--shadow-lg);transition:transform .18s ease;overflow-y:auto;box-sizing:border-box;
  border-left:2px solid var(--color-divider);}
.pf-drawer.is-open{transform:translateX(0) !important;}
.pf-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);
  border-bottom:2px solid var(--color-divider);}
.pf-drawer-close{background:none;border:0;cursor:pointer;padding:4px;color:var(--color-text);}
.pf-drawer .pf-sidebar-nav{padding:var(--space-3);}
.pf-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:70;
  opacity:0;visibility:hidden;transition:opacity .18s ease;pointer-events:none;}
.pf-drawer-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto;}

.pf-sidebar-nav{display:flex;flex-direction:column;gap:2px;}
.pf-navrow{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--color-text);text-decoration:none;}
.pf-navrow:hover{background:color-mix(in srgb, var(--color-text) 6%, transparent);text-decoration:none;}
.pf-navrow.is-active{background:var(--color-accent-100);color:var(--color-accent);}

@media (max-width:640px){
  .pf-hide-narrow{display:none;}
  .pf-navbar{padding:0 var(--space-4);gap:var(--space-5);}
}

.pf-table-scroll{width:100%;overflow-x:auto;}
@media (max-width:768px){
  .pf-main{padding:var(--space-6) var(--space-4);}
  .pf-tabs{gap:var(--space-4);padding:0 var(--space-4);overflow-x:auto;}
  .pf-foot{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .pf-login-formside{padding:var(--space-4);}
}
@media (max-width:480px){
  .pf-main{padding:var(--space-4) var(--space-3);}
}

/* pills */
.pf-pill{display:inline-flex;align-items:center;font-size:12px;padding:3px 10px;white-space:nowrap;}
.pf-pill-good{background:var(--pf-good-bg);color:var(--pf-good-fg);}
.pf-pill-warn{background:var(--pf-warn-bg);color:var(--pf-warn-fg);}
.pf-pill-bad{background:var(--pf-bad-bg);color:var(--pf-bad-fg);}
.pf-pill-neutral{background:var(--color-neutral-200);color:var(--color-neutral-800);}
.pf-pill-accent{background:var(--color-accent);color:#fff;}

/* progress bars */
.pf-bar{--fill:var(--color-accent);height:6px;background:var(--color-neutral-200);width:100%;
  border-radius:3px;overflow:hidden;}
.pf-bar > i{display:block;height:100%;background:var(--fill);}

/* section nav rows */
.pf-navrow{display:flex;align-items:center;gap:var(--space-2);width:100%;background:none;border:0;
  cursor:pointer;font:inherit;font-size:14px;padding:var(--space-2) var(--space-2);text-align:left;
  color:var(--color-text);text-decoration:none;}
.pf-navrow:hover{background:color-mix(in srgb, var(--color-text) 6%, transparent);text-decoration:none;}
.pf-navrow.is-active{background:var(--color-accent-100);color:var(--color-accent-800);font-weight:600;}
.pf-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--color-neutral-300);}
.pf-dot.d-done{background:var(--color-accent);}
.pf-dot.d-part{background:var(--pf-warn-border);}

/* banner */
.pf-banner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  background:var(--color-accent-100);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-6);
  font-size:13px;color:var(--color-accent-800);flex-wrap:wrap;}
.pf-alert{padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);font-size:14px;border-left:3px solid;
  animation:pf-alert-in .25s ease;}
@keyframes pf-alert-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.pf-alert-ok{background:var(--pf-good-bg);color:var(--pf-good-fg);border-color:var(--color-accent);}
.pf-alert-err{background:var(--pf-bad-bg);color:var(--pf-bad-fg);border-color:#8c2b2b;}
.pf-alert-warn{background:var(--pf-warn-bg);color:var(--pf-warn-fg);border-color:var(--pf-warn-border);}

/* AI panel */
.pf-ai{background:#2F7A46;color:#e6f2e9;padding:var(--space-5);}
.pf-ai .card-kicker{color:var(--color-accent-300);}
.pf-ai a{color:var(--color-accent-300);}
.pf-ai-out{white-space:pre-wrap;font-size:14px;line-height:1.6;max-height:340px;overflow:auto;
  background:rgba(255,255,255,.06);padding:var(--space-3);margin-top:var(--space-3);}
.pf-ai .input{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25);}
.pf-ai .input::placeholder{color:rgba(255,255,255,.5);}

.pf-doc{white-space:pre-wrap;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;
  line-height:1.65;background:var(--color-neutral-100);padding:var(--space-4);
  border:1px solid var(--color-divider);max-height:60vh;overflow:auto;}

/* login — split-screen: colored brand panel + plain form panel,
   per-portal color (accent teal for client, pro purple for consultant
   via .pf-login-brand-consultant). Apple-style (Option B) type: 600
   weight, tight tracking, pill buttons. Brand panel content is centered
   both ways with a short feature-bullet list underneath (approved
   "Option B" brand layout). */
.pf-login{min-height:100vh;display:flex;background:var(--color-bg);}
.pf-login-brand{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--space-8);color:#fff;background:var(--color-accent-700);}
.pf-login-brand-consultant{background:#3C3489;}
.pf-login-brand-icon{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5);}
.pf-login-brand h2{font-size:28px;font-weight:600;letter-spacing:-0.015em;margin:0 0 8px;
  font-family:-apple-system,BlinkMacSystemFont,var(--font-body);}
.pf-login-brand>p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);margin:0 0 var(--space-5);max-width:30ch;}
.pf-login-brand-features{display:flex;flex-direction:column;gap:10px;align-items:center;}
.pf-login-brand-feature{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.92);}
.pf-login-brand-feature svg{flex-shrink:0;}
.pf-login-formside{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-6);}
.pf-login-card{width:min(380px,100%);}
.pf-login-kicker{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--color-accent-700);
  background:var(--color-accent-100);padding:4px 12px;border-radius:999px;margin-bottom:var(--space-4);}
.pf-login-kicker-consultant{color:#3C3489;background:#EEEDFE;}
@media (min-width: 900px) { .pf-login-brand{display:flex;} }

.pf-foot{padding:var(--space-4) var(--space-6);border-top:2px solid var(--color-divider);
  font-size:12px;opacity:.55;display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}

.pf-muted{opacity:.6;font-size:13px;}
.pf-stack{display:flex;flex-direction:column;gap:var(--space-2);}
.pf-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.pf-between{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.pf-listrow{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);}
.pf-listrow:last-child{border-bottom:0;}

/* ── client topbar extras: target-date pill + Messages/Calendar icons ──
   Deliberately small and few — a rounded pill and two icon buttons,
   sized to match the existing 36px bell button next to them. */
.pf-topbar-extras{display:flex;align-items:center;gap:6px;}
.pf-target-pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 4px;
  border-radius:var(--radius-pill);background:var(--color-accent-100);color:var(--color-accent-800);
  font-size:12.5px;font-weight:700;text-decoration:none;border:1px solid var(--color-accent-200,transparent);}
.pf-target-pill:hover{background:var(--color-accent-200,var(--color-accent-100));text-decoration:none;}
.pf-target-pill-ring{width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;align-items:center;
  justify-content:center;background:var(--color-accent);color:#fff;}
.pf-target-pill-ring-bad{background:#b42318;}
.pf-target-pill-ring-warn{background:var(--pf-warn-fg,#9a6700);}
@media (max-width:640px){.pf-target-pill span.pf-hide-narrow{display:none;}}

/* Target-date popover (item 4) — tapping the pill now surfaces what it
   means instead of only jumping to the dashboard: the same chip label,
   plus overall readiness and a plain-language read on pace. */
.pf-target-wrap{position:relative;}
.pf-target-popover{
  position:absolute; top:44px; right:0; width:260px; z-index:60;
  background:var(--color-bg); border:1px solid var(--color-divider); border-radius:16px;
  padding:16px; box-shadow:0 16px 40px rgba(0,0,0,.18);
  animation:pf-target-pop-in .18s var(--ease-spring,cubic-bezier(.34,1.56,.64,1));
}
@keyframes pf-target-pop-in{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.pf-target-popover{animation:none;}}
.pf-target-popover-kicker{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-accent-700);}
.pf-target-popover-big{font-family:var(--font-heading);font-size:22px;font-weight:800;margin-top:4px;}
.pf-target-popover-good{color:var(--pf-good-fg);}
.pf-target-popover-warn{color:var(--pf-warn-fg);}
.pf-target-popover-bad{color:var(--pf-bad-fg);}
.pf-target-popover-sub{font-size:12px;color:var(--color-neutral-600);margin-bottom:10px;}
.pf-target-popover-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;
  padding:7px 0;border-top:1px solid var(--color-divider);}
.pf-target-popover-cta{display:flex;width:100%;justify-content:center;margin-top:12px;font-size:12.5px;}
@media (max-width:480px){.pf-target-popover{right:-8px;width:calc(100vw - 32px);max-width:280px;}}

.pf-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;color:var(--color-text);text-decoration:none;}
.pf-icon-btn:hover{background:color-mix(in srgb, var(--color-text) 8%, transparent);text-decoration:none;}
.pf-icon-btn-badge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 3px;
  display:inline-flex;align-items:center;justify-content:center;background:#b42318;color:#fff;
  font-size:10px;font-weight:700;line-height:1;border-radius:8px;}

/* ── notification bell ────────────────────────────────────────────────
   Pure CSS disclosure: <details> + <summary>. No script, so it survives
   the strict CSP. */
.pf-bell{position:relative;}
.pf-bell > summary{list-style:none;cursor:pointer;}
.pf-bell > summary::-webkit-details-marker{display:none;}
.pf-bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;color:var(--color-text);border:1px solid transparent;}
.pf-bell-btn:hover{background:color-mix(in srgb, var(--color-text) 8%, transparent);}
.pf-bell[open] > .pf-bell-btn{background:color-mix(in srgb, var(--color-text) 10%, transparent);
  border-color:var(--color-divider);}
.pf-bell-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.pf-bell-badge{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;background:#b42318;color:#fff;
  font-size:11px;font-weight:700;line-height:1;border-radius:9px;animation:pf-badge-pulse 2.2s ease-in-out infinite;}
.pf-bell-badge[hidden]{display:none;}
@keyframes pf-badge-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
@media (prefers-reduced-motion: reduce){ .pf-bell-badge{animation:none;} }

.pf-bell-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:min(380px,88vw);
  background:var(--color-bg);border:1px solid var(--color-divider);box-shadow:var(--shadow-lg);
  animation:pfIn .14s ease;}
.pf-bell-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider);font-size:14px;}
.pf-bell-list{max-height:min(420px,60vh);overflow:auto;}
.pf-bell-item{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-divider);text-decoration:none;color:var(--color-text);}
.pf-bell-item:hover{background:color-mix(in srgb, var(--color-text) 5%, transparent);text-decoration:none;}
.pf-bell-item.is-unread{background:var(--color-accent-100);}
.pf-bell-item.is-unread:hover{background:var(--color-accent-200);}
.pf-bell-dot{width:8px;height:8px;flex:none;margin-top:5px;border-radius:50%;background:var(--color-neutral-400);}
.pf-bell-good{background:var(--color-accent);}
.pf-bell-warn{background:var(--pf-warn-border);}
.pf-bell-bad{background:#b42318;}
.pf-bell-title{display:block;font-size:14px;font-weight:600;line-height:1.35;}
.pf-bell-body{display:block;font-size:13px;opacity:.7;margin-top:2px;}
.pf-bell-meta{display:block;font-size:12px;opacity:.5;margin-top:3px;}
.pf-bell-empty{padding:var(--space-5) var(--space-4);font-size:13px;opacity:.65;}
.pf-bell-foot{display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-2) var(--space-4);font-size:13px;}

/* ── per-question AI recommendation (light green) ──────────────────── */
.pf-qrow{display:grid;grid-template-columns:1fr 320px;gap:var(--space-4);align-items:start;
  margin-bottom:var(--space-4);}
.pf-airec{background:#eaf7ee;border:1px solid #bfe3c9;border-left:3px solid var(--color-accent);
  padding:var(--space-4);font-size:13px;line-height:1.55;color:#173d26;}
.pf-airec-sm{padding:var(--space-3);font-size:12.5px;}
.pf-airec-head{display:flex;align-items:center;gap:6px;margin-bottom:var(--space-2);}
.pf-airec-head span:not(.pf-pill){font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--color-accent-700);}
.pf-airec h5{font-family:var(--font-body);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin:var(--space-3) 0 var(--space-1);opacity:.75;}
.pf-airec p{margin:0 0 var(--space-2);}
.pf-airec ul{margin:0;padding-left:16px;}
.pf-airec li{margin-bottom:3px;}
.pf-airec .pf-bar{background:#cfe8d6;}
.pf-airec-note{margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid #cfe8d6;
  font-size:11.5px;opacity:.7;}

/* Insight preview (item 4): a short, clamped line of the AI's headline —
   never the full analysis — that expands in place on tap. Replaces the
   old always-open bullet list, which showed the same weight of content
   whether or not a person wanted to read it. */
.pf-airec-preview{display:flex;align-items:flex-start;gap:8px;width:100%;background:none;border:none;
  padding:2px 0;margin:0;text-align:left;cursor:pointer;color:inherit;font:inherit;}
.pf-airec-preview-text{flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.5;}
.pf-airec-chevron{flex-shrink:0;margin-top:3px;transition:transform .22s ease;color:var(--color-accent-700);}
.pf-airec-preview.is-open .pf-airec-chevron,
.pf-airec-preview[aria-expanded="true"] .pf-airec-chevron{transform:rotate(180deg);}
.pf-airec-preview:hover .pf-airec-preview-text{color:var(--color-accent-900);}

/* Expanding panel: animated via max-height (set inline by JS to the real
   content height) rather than a hard show/hide, so opening reads as a
   reveal rather than a jump-cut — and it never scrolls or shifts anything
   outside the card itself. */
.pf-airec-expand{overflow:hidden;max-height:0;transition:max-height .28s ease;margin-top:var(--space-2);}
@media (prefers-reduced-motion: reduce){
  .pf-airec-expand{transition:none;}
  .pf-airec-chevron{transition:none;}
}

/* Detailed AI insight panel (brief item 4) — meaning / why / requirement /
   risk / evidence / how to address, opened from the compact bullet card. */
.pf-airec-detail{background:#fff;border:1px solid #d7ecdc;border-radius:8px;padding:var(--space-3);}
.pf-airec-detail-h{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--color-accent-700);margin-bottom:3px;}
.pf-airec-detail-p{margin:0;font-size:12.5px;line-height:1.55;color:#173d26;}
.pf-airec-detail ol,.pf-airec-detail ul{padding-left:16px;}

/* Plain (non-shimmer) placeholder bar, still used by the between-question
   "answer submitted" skeleton below. The AI insight full-explanation panel
   no longer shows a loading placeholder at all — its content is typed into
   place as soon as it arrives (see initAiInsightLazyDetail() in app.js). */
.pf-airec-skel-line{height:9px;border-radius:5px;background:#e4f3e9;}

/* "Full explanation" content is typed in rather than faded/shimmered in. */
.pf-airec-typing::after{content:'';display:inline-block;width:6px;height:12px;margin-left:2px;
  background:var(--color-accent-700);vertical-align:-1px;animation:pf-airec-caret 0.85s steps(1) infinite;}
@keyframes pf-airec-caret{0%,100%{opacity:1;}50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){.pf-airec-typing::after{animation:none;opacity:.6;}}

/* Questionnaire "answer submitted" skeleton — shown for the genuine
   network round trip between submitting an answer and the next question
   rendering, replacing what used to be a plain opacity dim. */
.pf-qn-skeleton{padding:var(--space-5) 0;}
.pf-qn-skeleton .pf-airec-skel-line{border-radius:8px;}
@media (max-width:1080px){ .pf-qrow{grid-template-columns:1fr;} }

/* Cross-fade for the question area swap after an answer is submitted.
   The area stays exactly where it is on the page — no scroll, no jump —
   it just fades the skeleton out and the next question in in place. */
[data-qn-question-area]{transition:opacity .18s ease;}
[data-qn-question-area].pf-qn-fading{opacity:0;}
@media (prefers-reduced-motion: reduce){
  [data-qn-question-area]{transition:none;}
}

/* ---------- ISO / DPDP per-question badge ---------- */
.pf-fwbadge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 8px;border-radius:100px;line-height:1.6;}
.pf-fwbadge-iso{background:var(--color-accent-100);color:var(--color-accent-800);}
.pf-fwbadge-dpdp{background:#eef0ff;color:#3730a3;}
.pf-fwbadge-both{background:#fff4e0;color:#93500a;}

/* ---------- Related-risk strip shown while answering a question ---------- */
.pf-related-risk{background:#fff;border:1px solid var(--color-divider);border-left:3px solid var(--color-neutral-300);
  border-radius:10px;padding:var(--space-3) var(--space-4);font-size:12.5px;}
.pf-related-risk.sev-crit{border-left-color:#b42318;}
.pf-related-risk.sev-high{border-left-color:#d92d20;}
.pf-related-risk.sev-med{border-left-color:#dc9d17;}
.pf-related-risk.sev-low{border-left-color:var(--color-accent);}
.pf-airec-precue{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.55;margin-bottom:6px;}
[data-qn-question-block]{animation:pf-qn-fade .3s ease;}
@keyframes pf-qn-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){ [data-qn-question-block]{animation:none;} }

/* ---------- Policy template picker cards ---------- */
.pf-layout-card{transition:transform .15s ease,box-shadow .15s ease;}
.pf-layout-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* ---------- Square template thumbnail grid (policy + phishing pickers) ---------- */
.pf-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4);}
.pf-tpl-box{border:1px solid var(--color-divider);border-radius:14px;overflow:hidden;background:var(--color-bg);
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;display:flex;flex-direction:column;}
.pf-tpl-box:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.pf-tpl-box.is-selected{border-color:var(--color-accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent);}
.pf-tpl-thumb{aspect-ratio:1/1;background:color-mix(in srgb, var(--color-text) 3%, var(--color-bg));
  display:flex;align-items:center;justify-content:center;padding:var(--space-3);position:relative;}
.pf-tpl-thumb-svg{width:auto;height:100%;max-width:100%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.08));}
.pf-tpl-thumb-compact{aspect-ratio:auto !important;padding:var(--space-4) 0;}
.pf-tpl-badge{width:40px;height:40px;border-radius:9px;background:var(--color-accent-100, #E1F5EE);
  display:flex;align-items:center;justify-content:center;}
.pf-tpl-box-body{padding:var(--space-3);border-top:1px solid var(--color-divider);}
.pf-tpl-box-title{font-size:12.5px;font-weight:700;line-height:1.3;}
.pf-tpl-box-meta{font-size:10.5px;opacity:.6;margin-top:2px;}
.pf-tpl-box-radio{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--color-divider);background:var(--color-bg);}
.pf-tpl-box.is-selected .pf-tpl-box-radio{border-color:var(--color-accent);background:var(--color-accent);}
.pf-tpl-box.is-selected .pf-tpl-box-radio::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#fff;}
.pf-tpl-badge-custom{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;letter-spacing:.03em;
  background:var(--color-accent-100);color:var(--color-accent-800);padding:2px 6px;border-radius:100px;}

/* ---------- AI draft generation screen ---------- */
.pf-gen-wrap{display:flex;justify-content:center;padding:var(--space-8) 0;}
.pf-gen-card{width:min(420px,100%);text-align:center;padding:var(--space-8) var(--space-6);
  background:var(--color-bg);border:1px solid var(--color-divider);border-radius:16px;box-shadow:var(--shadow-md);}
.pf-gen-card-wide{width:min(560px,100%);text-align:left;padding:var(--space-6);}
.pf-gen-orbit{display:inline-flex;animation:pf-spin 1.1s linear infinite;flex-shrink:0;}
@keyframes pf-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.pf-gen-bar{height:6px;border-radius:100px;background:var(--color-neutral-200);overflow:hidden;margin-top:var(--space-4);}
.pf-gen-bar i{display:block;height:100%;width:8%;background:var(--color-accent);border-radius:100px;
  transition:width .5s ease;}

/* two-column body: animated "document" mockup + stage checklist */
.pf-gen-body{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-5);align-items:start;}
@media (max-width:560px){ .pf-gen-body{grid-template-columns:1fr;} }
.pf-gen-doc{background:color-mix(in srgb, var(--color-text) 3%, var(--color-bg));border:1px solid var(--color-divider);
  border-radius:10px;padding:var(--space-4);position:relative;min-height:180px;overflow:hidden;}
.pf-gen-beam{position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;
  background:color-mix(in srgb, var(--color-accent) 14%, transparent);
  animation:pf-gen-beam-sweep 2.4s ease-in-out infinite;}
@keyframes pf-gen-beam-sweep{0%{top:0;opacity:.9;}90%{opacity:.9;}100%{top:180px;opacity:0;}}
.pf-gen-doc-titlebar{height:8px;width:60%;border-radius:3px;background:var(--color-accent);opacity:.8;margin-bottom:14px;}
.pf-gen-doc-line{height:6px;border-radius:3px;background:var(--color-text);opacity:.18;margin-bottom:8px;width:0;
  animation:pf-gen-line-grow 1.8s ease-in-out infinite;animation-delay:var(--delay,0s);}
@keyframes pf-gen-line-grow{
  0%{width:0;}
  35%{width:var(--w,70%);}
  75%{width:var(--w,70%);}
  100%{width:0;}
}
.pf-gen-doc-cursor{position:absolute;width:2px;height:12px;background:var(--color-accent);
  animation:pf-gen-blink 1s step-end infinite;bottom:var(--space-4);left:var(--space-4);}
@keyframes pf-gen-blink{0%,100%{opacity:1;}50%{opacity:0;}}

.pf-gen-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);}
.pf-gen-checklist li{display:flex;align-items:center;gap:10px;font-size:12.5px;opacity:.4;transition:opacity .2s ease;}
.pf-gen-checklist li.is-active,.pf-gen-checklist li.is-done{opacity:1;}
.pf-gen-stage-icon{width:18px;height:18px;border-radius:50%;border:2px solid var(--color-divider);flex-shrink:0;
  position:relative;box-sizing:border-box;}
.pf-gen-checklist li.is-active .pf-gen-stage-icon{border-color:var(--color-accent);border-top-color:transparent;
  animation:pf-spin .7s linear infinite;}
.pf-gen-checklist li.is-done .pf-gen-stage-icon{border-color:var(--color-accent);background:var(--color-accent);}
.pf-gen-checklist li.is-done .pf-gen-stage-icon::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
@media (prefers-reduced-motion: reduce){
  .pf-gen-orbit{animation:none;} .pf-gen-doc-line{animation:none;width:var(--w,70%);}
  .pf-gen-doc-cursor{animation:none;} .pf-gen-checklist li.is-active .pf-gen-stage-icon{animation:none;}
  .pf-gen-beam{display:none;}
}

/* ---------- Floating AI chatbot ---------- */
.pf-chatbot{position:fixed;right:20px;bottom:20px;z-index:90;}
.pf-chatbot-fab{width:56px;height:56px;border-radius:50%;background:var(--color-accent);color:var(--color-bg);
  border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
  transition:transform .15s ease;}
.pf-chatbot-fab:hover{transform:scale(1.06);}
.pf-chatbot-fab-icon-close{display:none;}
.pf-chatbot.is-open .pf-chatbot-fab-icon-open{display:none;}
.pf-chatbot.is-open .pf-chatbot-fab-icon-close{display:block;}
.pf-chatbot-panel{position:absolute;right:0;bottom:72px;width:min(360px,88vw);max-height:min(520px,72vh);
  background:color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid color-mix(in srgb, #ffffff 45%, var(--color-divider));border-radius:18px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(12px) scale(.97);pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .28s var(--ease-spring);}
.pf-chatbot.is-open .pf-chatbot-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.pf-chatbot-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-divider);flex:none;}
.pf-chatbot-close{background:none;border:0;cursor:pointer;color:var(--color-text);padding:2px;}
.pf-chatbot-messages{flex:1;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);}
.pf-chatbot-msg{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:12px;max-width:90%;white-space:pre-wrap;}
.pf-chatbot-msg-bot{background:var(--color-accent-100);color:var(--color-accent-900);align-self:flex-start;border-bottom-left-radius:4px;}
.pf-chatbot-msg-user{background:var(--color-accent);color:var(--color-bg);align-self:flex-end;border-bottom-right-radius:4px;}
.pf-chatbot-suggestions{display:flex;flex-direction:column;gap:6px;}
.pf-chatbot-suggestion{text-align:left;font-size:12px;border:1px solid var(--color-divider);background:none;
  border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--color-text);}
.pf-chatbot-suggestion:hover{background:color-mix(in srgb, var(--color-text) 5%, transparent);}
.pf-chatbot-typing{display:flex;gap:4px;align-self:flex-start;padding:10px 12px;}
.pf-chatbot-typing i{width:6px;height:6px;border-radius:50%;background:var(--color-accent);display:inline-block;
  animation:pf-typing 1.1s infinite ease-in-out;}
.pf-chatbot-typing i:nth-child(2){animation-delay:.15s;}
.pf-chatbot-typing i:nth-child(3){animation-delay:.3s;}
@keyframes pf-typing{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}
.pf-chatbot-form{display:flex;gap:8px;padding:var(--space-3);border-top:1px solid var(--color-divider);flex:none;}
.pf-chatbot-form .input{flex:1;}
@media (prefers-reduced-motion: reduce){
  .pf-chatbot-panel{transition:none;}
  .pf-chatbot-typing i{animation:none;}
}

/* ---------- Risk heatmap ---------- */
.pf-heatmap{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:360px;}
.pf-heatmap-cell{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;background:var(--color-neutral-100);color:transparent;transition:transform .15s ease;}
.pf-heatmap-cell.has-risk{cursor:default;}
.pf-heatmap-cell.has-risk:hover{transform:scale(1.08);}
.pf-heatmap-cell.sev-low.has-risk{background:var(--bg-success,#EAF3DE);color:#3B6D11;}
.pf-heatmap-cell.sev-med.has-risk{background:#FAEEDA;color:#854F0B;}
.pf-heatmap-cell.sev-high.has-risk{background:#FAECE7;color:#993C1D;}
.pf-heatmap-cell.sev-crit.has-risk{background:#FCEBEB;color:#791F1F;}

/* ---------- Phishing funnel ---------- */
.pf-funnel{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--space-3);}
.pf-funnel-row{display:flex;align-items:center;gap:10px;}
.pf-funnel-label{width:72px;font-size:12px;color:var(--color-text);opacity:.7;flex-shrink:0;}
.pf-funnel-track{flex:1;height:14px;background:var(--color-neutral-100);border-radius:4px;overflow:hidden;}
.pf-funnel-bar{height:100%;width:0;border-radius:4px;}
.pf-funnel-sent{background:var(--color-accent);}
.pf-funnel-clicked{background:#EF9F27;}
.pf-funnel-submitted{background:#b42318;}
.pf-funnel-num{width:28px;text-align:right;font-size:12px;font-weight:600;flex-shrink:0;}
.pf-qn-beam{position:absolute;left:0;right:0;top:0;height:36px;pointer-events:none;
  background:color-mix(in srgb, var(--color-accent) 12%, transparent);
  animation:pf-qn-sweep .8s cubic-bezier(.3,.6,.4,1) forwards;}
@keyframes pf-qn-sweep{0%{top:0;opacity:1;}90%{opacity:1;}100%{top:100%;opacity:0;}}
.pf-qn-insight-delayed{opacity:0;animation:pf-qn-fade .35s ease forwards;animation-delay:.55s;}
@media (prefers-reduced-motion: reduce){
  .pf-qn-beam{display:none;} .pf-qn-insight-delayed{opacity:1;animation:none;}
}

/* ---------- Policies: coverage-by-area strip ---------- */
.pf-covstrip{display:flex;gap:4px;margin-bottom:var(--space-4);flex-wrap:wrap;}
.pf-covchip{flex:1;min-width:64px;text-align:center;font-size:11px;font-weight:600;padding:8px 4px;
  border-radius:8px;text-decoration:none;}
.pf-covchip-held{background:var(--color-accent-100);color:var(--color-accent-800);}
.pf-covchip-partial{background:#FAEEDA;color:#854F0B;}
.pf-covchip-missing{background:#FCEBEB;color:#791F1F;}
.pf-covchip-locked{background:var(--color-neutral-100);color:color-mix(in srgb, var(--color-text) 55%, transparent);}

/* ---------- Policy version-history timeline ---------- */
.pf-vtimeline{display:flex;align-items:center;margin-top:var(--space-2);max-width:200px;}
.pf-vdot{width:11px;height:11px;border-radius:50%;background:var(--color-bg);border:2px solid var(--color-divider);flex-shrink:0;}
.pf-vdot.done{background:var(--color-accent-100);border-color:var(--color-accent);}
.pf-vdot.current{background:var(--color-accent);border-color:var(--color-accent);}
.pf-vline{flex:1;height:2px;background:var(--color-divider);min-width:10px;}

/* ---------- Training: team completion avatars ---------- */
.pf-avt{width:30px;height:30px;border-radius:50%;font-size:11px;font-weight:600;display:flex;
  align-items:center;justify-content:center;cursor:default;}
.pf-avt-done{background:var(--color-accent-100);color:var(--color-accent-800);}
.pf-avt-pending{background:var(--color-neutral-100);color:color-mix(in srgb, var(--color-text) 60%, transparent);}
.pf-avt-overdue{background:#FCEBEB;color:#791F1F;}

/* ---------- Security tools: flagged finding card ---------- */
.pf-toolcard-alert{border-color:#F09595;}

/* ---------- Team & access: recent activity feed ---------- */
.pf-actrow{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:6px 0;}
.pf-actdot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0;}
.pf-actdot-ok{background:var(--color-accent);}
.pf-actdot-accent{background:#378ADD;}
.pf-actdot-warn{background:#EF9F27;}

/* ---------- Questionnaire: clickable question-progress dots ---------- */
.pf-qdots{display:flex;gap:5px;margin-bottom:var(--space-3);flex-wrap:wrap;}
.pf-qdot{width:22px;height:22px;border-radius:50%;background:var(--color-bg);border:1.5px solid var(--color-divider);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
a.pf-qdot{text-decoration:none;cursor:pointer;color:var(--color-accent-800);}
.pf-qdot.done{background:var(--color-accent-100);border-color:var(--color-accent);color:var(--color-accent-800);}
.pf-qdot.current{background:var(--color-accent);border-color:var(--color-accent);}

/* ---------- Port scan radar overlay ---------- */
.pf-radar-wrap{text-align:center;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-divider);}
.pf-radar-sweep{transform-origin:50px 50px;animation:pf-radar-spin 1.8s linear infinite;}
@keyframes pf-radar-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .pf-radar-sweep{animation:none;} }
.pf-toast-stack{position:fixed;top:16px;right:16px;z-index:150;display:flex;flex-direction:column;gap:8px;
  max-width:min(340px,90vw);}
.pf-toast{display:flex;align-items:center;gap:8px;background:var(--color-bg);border:1px solid var(--color-divider);
  border-radius:10px;padding:12px 14px;box-shadow:var(--shadow-md);font-size:13px;
  animation:pf-toast-in .28s cubic-bezier(.2,.8,.3,1);}
.pf-toast.pf-toast-out{animation:pf-toast-out .22s ease forwards;}
.pf-toast-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pf-toast-ok .pf-toast-dot{background:var(--color-accent);}
.pf-toast-err .pf-toast-dot{background:#b42318;}
.pf-toast-close{background:none;border:0;cursor:pointer;margin-left:auto;font-size:16px;line-height:1;
  color:var(--color-text);opacity:.5;padding:0 2px;}
.pf-toast-close:hover{opacity:1;}
@keyframes pf-toast-in{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:translateX(0);}}
@keyframes pf-toast-out{to{opacity:0;transform:translateX(16px);}}
@media (prefers-reduced-motion: reduce){ .pf-toast{animation:none;} }

/* ---------- Simple startup greeting ---------- */
.pf-splash{position:fixed;inset:0;z-index:200;background:var(--color-bg);
  display:flex;align-items:center;justify-content:center;
  opacity:0;animation:pf-splash-fade 3s ease forwards;}
.pf-splash-text{text-align:center;}
.pf-splash-greeting{font-family:var(--font-heading);font-weight:800;font-size:32px;color:var(--color-text);
  opacity:0;transform:translateY(6px);animation:pf-splash-text .5s ease forwards;animation-delay:.2s;}
.pf-splash-subtitle{margin-top:8px;font-size:14px;color:color-mix(in srgb, var(--color-text) 65%, transparent);
  opacity:0;animation:pf-splash-subtitle .5s ease forwards;animation-delay:.45s;}
@keyframes pf-splash-fade{
  0%{opacity:0;}
  8%{opacity:1;}
  85%{opacity:1;}
  100%{opacity:0;}
}
@keyframes pf-splash-text{to{opacity:1;transform:translateY(0);}}
@keyframes pf-splash-subtitle{to{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .pf-splash{animation:none;opacity:0;display:none;}
}

/* ── risk assessment & treatment ──────────────────────────────────── */
.pf-q-layout{grid-template-columns:250px 1fr;}
@media (max-width:1080px){ .pf-q-layout{grid-template-columns:1fr;} }

.pf-matrix{border-collapse:collapse;font-size:12px;}
.pf-matrix th{padding:4px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:color-mix(in srgb, var(--color-text) 60%, transparent);font-weight:600;text-align:center;}
.pf-matrix td{width:44px;height:34px;text-align:center;vertical-align:middle;font-weight:700;
  border:1px solid var(--color-bg);color:#1d221f;}
.pf-m-low{background:#d8ecdd;}
.pf-m-med{background:#fbeecd;}
.pf-m-high{background:#f7d9c8;}
.pf-m-crit{background:#f3c2bd;}
.pf-matrix td.is-hit{outline:2px solid var(--color-accent);outline-offset:-2px;}

.pf-risk-card{border:1px solid var(--color-divider);border-left:3px solid var(--color-neutral-400);
  padding:var(--space-4);margin-bottom:var(--space-4);background:var(--color-neutral-100);
  opacity:0;transform:translateY(6px);animation:pf-riskcard-in .4s ease forwards;}
.pf-risk-card:nth-of-type(1){animation-delay:.04s;}
.pf-risk-card:nth-of-type(2){animation-delay:.1s;}
.pf-risk-card:nth-of-type(3){animation-delay:.16s;}
.pf-risk-card:nth-of-type(4){animation-delay:.22s;}
.pf-risk-card:nth-of-type(5){animation-delay:.28s;}
.pf-risk-card:nth-of-type(n+6){animation-delay:.32s;}
@keyframes pf-riskcard-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.pf-risk-card{animation:none;opacity:1;transform:none;}}
.pf-risk-card.sev-crit{border-left-color:#b42318;}
.pf-risk-card.sev-high{border-left-color:#d1622a;}
.pf-risk-card.sev-med{border-left-color:var(--pf-warn-border);}
.pf-risk-card.sev-low{border-left-color:var(--color-accent);}
.pf-risk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);}
.pf-metric{font-family:var(--font-heading);font-size:25px;line-height:1.1;}

/* ===================================================================
   First-time product tour (brief item 5) — light glass card, guided
   step navigation. Updated to a frosted-glass, light-colored surface
   (was a solid dark-green card) per the "light color + glass effect"
   request, plus a "guided mode" toggle that highlights and explains
   sidebar/drawer sections on hover instead of only stepping page to
   page — see .pf-guide-hint below and initProductTour()/initGuideMode()
   in shared/app.js.
   =================================================================== */
#pf-tour-root[hidden] { display: none; }

.pf-tourcard {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  z-index: 900; width: min(360px, calc(100vw - 32px));
  color: var(--color-neutral-900, #1a1a18);
  border-radius: 22px; padding: 22px 24px 18px;
  overflow: hidden;
  /* Liquid glass: a layered gradient tint (rather than one flat
     translucent fill) plus deeper blur/saturation/brightness than a
     plain frosted panel, so more of the page's own color bleeds through
     the card — that richness is most of what reads as "glass" rather
     than "grey box with blur". */
  background:
    linear-gradient(135deg, color-mix(in srgb, #ffffff 55%, transparent), color-mix(in srgb, #ffffff 18%, transparent) 40%, color-mix(in srgb, #ffffff 32%, transparent)),
    color-mix(in srgb, #ffffff 28%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 55%, transparent);
  box-shadow:
    0 1px 1px color-mix(in srgb, #ffffff 60%, transparent) inset,
    0 -1px 12px color-mix(in srgb, #ffffff 25%, transparent) inset,
    0 20px 44px rgba(20, 50, 40, .20),
    0 2px 6px rgba(20, 50, 40, .10);
  backdrop-filter: blur(26px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.05);
  animation: pf-tourcard-in .5s cubic-bezier(.2,1.4,.4,1);
  /* Glass pointer-callout: the card glides to sit beside whatever it's
     pointing at, so its own position (set inline from JS per step) needs
     to animate smoothly rather than jump. transform keeps its own
     centering behaviour for the two bookend steps (no target), which set
     no inline left/top and so fall back to this centered rule. */
  transition: left .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1);
}
/* Specular sheen: a soft diagonal light streak drifting across the card
   on a slow loop, like light catching a curved glass surface. Purely
   decorative (pointer-events: none) so it never intercepts a click. */
.pf-tourcard::before {
  content: ''; position: absolute; top: -60%; left: -40%; width: 70%; height: 220%;
  background: linear-gradient(75deg, transparent 30%, color-mix(in srgb, #ffffff 55%, transparent) 48%,
              color-mix(in srgb, #ffffff 15%, transparent) 55%, transparent 70%);
  transform: rotate(8deg) translateX(-30%);
  animation: pf-tourcard-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
/* Inner rim glow — a subtle inset highlight around the edge, simulating
   how light bends at the border of a glass shape. */
.pf-tourcard::after {
  content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 45%, transparent), inset 0 0 18px color-mix(in srgb, #ffffff 22%, transparent);
}
@keyframes pf-tourcard-sheen {
  0%   { transform: rotate(8deg) translateX(-30%); }
  55%  { transform: rotate(8deg) translateX(160%); }
  100% { transform: rotate(8deg) translateX(160%); }
}
.pf-tourcard-body, .pf-tourcard-footer, .pf-tourcard-skip, .pf-tourcard-guidetoggle { position: relative; z-index: 1; }
.pf-tourcard.pf-tourcard-pinned {
  /* Once JS has positioned the card next to a real target, it sets an
     explicit left/top and switches off the centering transform — without
     this, translateX(-50%) would double-offset the pinned coordinates. */
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pf-tourcard { transition: none; }
  .pf-tourcard::before { animation: none; opacity: 0; }
}

.pf-tourcard-skip {
  position: absolute; top: 14px; right: 16px; border: none; background: none;
  color: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); font-size: 12px; cursor: pointer; padding: 4px; font-family: inherit;
}
.pf-tourcard-skip:hover { color: var(--color-neutral-900); }

.pf-tourcard-body { padding-right: 40px; margin-bottom: 14px; }
.pf-tourcard-title { display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--color-accent-700); }
.pf-tourcard-text { display: block; font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--color-neutral-900) 78%, transparent); }

/* Overall-progress fill bar (item 1 — replaces the dots as the primary
   "how far through the tour" signal; the dots stay underneath as a
   click-to-jump index). Width is set from JS in paint(); the transition
   here is what makes it read as advancing rather than snapping. */
.pf-tourcard-track {
  height: 4px; border-radius: 3px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  overflow: hidden; position: relative; z-index: 1;
}
.pf-tourcard-fill {
  height: 100%; border-radius: 3px; width: 0%;
  background: linear-gradient(90deg, var(--color-accent-300, var(--color-accent)), var(--color-accent));
  transition: width .4s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
@media (prefers-reduced-motion: reduce) { .pf-tourcard-fill { transition: none; } }

.pf-tourcard-count { font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); flex-shrink: 0; }

.pf-tourcard-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-tourcard-progress { display: flex; gap: 4px; flex-wrap: wrap; }
.pf-tourcard-pip {
  width: 14px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--color-accent) 25%, transparent);
  cursor: pointer; transition: background .25s ease, width .3s cubic-bezier(.34,1.56,.64,1); flex-shrink: 0;
}
.pf-tourcard-pip.is-active { background: var(--color-accent); width: 20px; }
.pf-tourcard-pip.is-done { background: color-mix(in srgb, var(--color-accent) 55%, transparent); }

.pf-tourcard-arrow {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-accent) 70%, #ffffff 20%), var(--color-accent-700, var(--color-accent)));
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 40%, transparent), inset 0 1px 1px color-mix(in srgb, #ffffff 40%, transparent);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.pf-tourcard-arrow:hover { transform: scale(1.1); }
.pf-tourcard-arrow:active { transform: scale(.94); }

.pf-tourcard-guidetoggle {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  color: var(--color-accent-700); background: color-mix(in srgb, #ffffff 25%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 35%, transparent);
  border-radius: 50%; cursor: pointer; margin-bottom: 12px;
}
.pf-tourcard-guidetoggle.is-on { background: var(--color-accent); color: #fff; }

@keyframes pf-tourcard-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.92); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .pf-tourcard { animation: none; } }

@media (max-width: 480px) {
  .pf-tourcard { top: 12px; width: calc(100vw - 24px); padding: 18px 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-tour-backdrop, .pf-tour-modal, .pf-celebrate-badge, .pf-celebrate-confetti span { animation: none; }
}

/* Milestone celebration overlay (render_celebration() / celebrate()) —
   a small centred modal reserved for genuinely rare, earned moments
   (100% readiness, last policy signed, last training passed). Fully
   self-contained: these class names are also used by the tour in an
   earlier design iteration, but the tour's own styling now lives under
   .pf-tourbar-* above and no longer depends on any of this. */
.pf-tour-backdrop {
  position: fixed; inset: 0; z-index: 900; background: rgba(15, 23, 20, .5);
  animation: pf-celebrate-fade .3s ease;
}
.pf-tour-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: min(380px, calc(100vw - 32px));
  background: #fff; border-radius: 16px; padding: 36px 32px 28px;
  text-align: center; box-shadow: 0 20px 48px rgba(15, 23, 20, .32);
  animation: pf-celebrate-modal-in .32s cubic-bezier(.2,.8,.3,1);
}
.pf-tour-close {
  position: absolute; top: 14px; right: 16px; border: none; background: none;
  font-size: 22px; line-height: 1; color: var(--color-neutral-400); cursor: pointer;
  padding: 4px; border-radius: 6px;
}
.pf-tour-close:hover { color: var(--color-neutral-700); background: var(--color-neutral-100); }
.pf-tour-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--color-neutral-900, #1a1a18); }
.pf-tour-body { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-600); }
.pf-tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pf-tour-btn {
  border-radius: 8px; font-size: 13px; font-weight: 600; padding: 9px 16px;
  cursor: pointer; font-family: inherit; border: none;
}
.pf-tour-btn-primary { background: var(--color-accent); color: #fff; padding: 9px 20px; }
.pf-tour-btn-primary:hover { background: var(--color-accent-700); }
@keyframes pf-celebrate-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-celebrate-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 480px) {
  .pf-tour-modal { padding: 28px 20px 22px; left: 16px; right: 16px; width: auto; transform: translateY(-50%); }
}

.pf-celebrate-badge { margin-bottom: 14px; animation: pf-celebrate-badge-in .5s cubic-bezier(.34,1.56,.64,1) both; }
.pf-celebrate-confetti { position: absolute; top: 0; left: 0; right: 0; height: 60px; overflow: hidden; pointer-events: none; }
.pf-celebrate-confetti span {
  position: absolute; top: -10px; width: 6px; height: 10px; border-radius: 1px;
  animation: pf-celebrate-fall 1.6s ease-out forwards;
}
.pf-celebrate-confetti span:nth-child(1) { left: 15%; background: #1D9E75; animation-delay: 0s; }
.pf-celebrate-confetti span:nth-child(2) { left: 32%; background: #FAC775; animation-delay: .08s; }
.pf-celebrate-confetti span:nth-child(3) { left: 50%; background: #5DCAA5; animation-delay: .04s; }
.pf-celebrate-confetti span:nth-child(4) { left: 68%; background: #D1622A; animation-delay: .12s; }
.pf-celebrate-confetti span:nth-child(5) { left: 85%; background: #1D9E75; animation-delay: .06s; }

@keyframes pf-celebrate-badge-in {
  from { opacity: 0; transform: scale(.5); }
  60%  { opacity: 1; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pf-celebrate-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(90px) rotate(200deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-celebrate-badge, .pf-celebrate-confetti span { animation: none; }
}

/* ===================================================================
   Illustrated empty states & completion animation (brief item 9)
   =================================================================== */
.pf-empty-state {
  text-align: center; padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; align-items: center;
}
.pf-empty-state svg { margin-bottom: var(--space-3); animation: pf-empty-float 3s ease-in-out infinite; }
@keyframes pf-empty-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .pf-empty-state svg { animation: none; } }
.pf-empty-state-title { font-size: 15px; font-weight: 600; color: var(--color-neutral-800); margin-bottom: 4px; }
.pf-empty-state-body { font-size: 13px; color: var(--color-neutral-600); line-height: 1.55; max-width: 42ch; margin: 0; }

.pf-completion-check {
  transition: stroke-dashoffset .4s ease .95s;
}
.pf-completion-ring[data-ring-done] .pf-completion-check { stroke-dashoffset: 0; }

/* ===================================================================
   Policy library — sidebar layout (checklist + upload card)
   =================================================================== */
.pf-policies-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-6); align-items: start; }
.pf-policies-sidebar { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: var(--space-4); }
.pf-policies-side-card { padding: var(--space-4); }
.pf-policies-main { min-width: 0; }

.pf-policies-cat { border-top: 1px solid var(--color-divider); }
.pf-policies-cat:first-of-type { border-top: none; }
.pf-policies-cat-summary {
  padding: 9px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.pf-policies-cat-summary::-webkit-details-marker { display: none; }
.pf-policies-cat-status { flex-shrink: 0; width: 14px; display: flex; align-items: center; justify-content: center; }
.pf-policies-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--color-neutral-300); display: block; }
.pf-policies-dot-locked { border: none; font-size: 11px; line-height: 1; }
.pf-policies-cat-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-policies-cat-ratio { font-size: 11px; color: var(--color-neutral-500); flex-shrink: 0; }

.pf-policies-cat-body { padding: 0 0 var(--space-2) 22px; }
.pf-policies-lockbox { background: var(--color-neutral-100); border-radius: 8px; padding: var(--space-2) var(--space-3); margin-bottom: 8px; }
.pf-policies-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 0; border-top: 1px dashed var(--color-divider); font-size: 12px;
}
.pf-policies-cat-body .pf-policies-item:first-child { border-top: none; }
.pf-policies-item-name { flex: 1; min-width: 0; }
.pf-policies-item-action { font-size: 10.5px; font-weight: 700; color: var(--color-neutral-600); flex-shrink: 0; }
.pf-policies-item-action-draft { color: var(--color-accent-700); }
.pf-policies-item-action:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .pf-policies-layout { grid-template-columns: 1fr; }
  .pf-policies-sidebar { position: static; }
}

/* Support tickets */
.pf-label{display:block;font-size:11.5px;font-weight:700;color:var(--color-neutral-600);margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em;}

/* ===================================================================
   Guided mode (item 1 + 8) — toggled from the tour card. While on,
   hovering the drawer or a section sidebar shows a glass tooltip
   explaining what that item does, and highlights it. Pure CSS +
   data-guide-tip attributes rendered server-side; shared/app.js only
   toggles the `pf-guide-active` class on <body>.
   =================================================================== */
/* ===================================================================
   Hover polish (item: "remove brief, just nice hover") — sidebar,
   drawer, and security-tool cards lift and glow on hover. No tooltip
   text anywhere; purely a motion/elevation cue (Option A).
   =================================================================== */
.pf-navrow, .pf-section-sidebar-link {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pf-navrow:hover, .pf-section-sidebar-link:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.pf-toolcard-locked, .pf-card.pf-toolcard-alert, a.card.pf-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
a.card.pf-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
a.card.pf-card.pf-toolcard-locked:hover {
  transform: none;
  box-shadow: none;
}

/* Tour spotlight dot — a small blinking indicator dot placed at the
   corner of whatever element a step is pointing at (item request:
   "a dot will blink on the specific section" instead of a squared-off
   outline box around the whole tile). The element itself keeps a mild
   z-index bump so it isn't covered by the dim overlay, but no longer
   gets an outline/background/box drawn around it. */
.pf-tour-spotlight {
  position: relative; z-index: 901;
}
.pf-tour-dot {
  position: fixed; z-index: 902; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-accent); pointer-events: none;
  animation: pf-tour-dot-blink 1.1s ease-in-out infinite;
}
.pf-tour-dot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--color-accent); opacity: .55;
  animation: pf-tour-dot-ring 1.1s ease-out infinite;
}
@keyframes pf-tour-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pf-tour-dot-ring {
  0%   { transform: scale(.6); opacity: .6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pf-tour-dot, .pf-tour-dot::after { animation: none; } }

/* Frosted arrow chip attached to the glass card, pointing at the
   spotlighted element it's sitting beside. JS sets --chip-side (which
   edge of the card it's on) and --chip-offset (position along that
   edge) per step, based on where the card was placed relative to the
   target. Replaces the earlier standalone bouncing-arrow-icon design —
   the chip is part of the card now, not a separate floating element. */
.pf-tourcard-chip {
  position: absolute; width: 22px; height: 22px;
  background: color-mix(in srgb, #ffffff 55%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 60%, transparent);
  backdrop-filter: blur(24px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.05);
  transform: rotate(45deg);
  display: none;
}
.pf-tourcard-chip.is-left   { left: -11px; top: var(--chip-offset, 50%); border-right: none; border-top: none; display: block; }
.pf-tourcard-chip.is-right  { right: -11px; top: var(--chip-offset, 50%); border-left: none; border-bottom: none; display: block; }
.pf-tourcard-chip.is-top    { top: -11px; left: var(--chip-offset, 50%); border-right: none; border-bottom: none; display: block; }
.pf-tourcard-chip.is-bottom { bottom: -11px; left: var(--chip-offset, 50%); border-left: none; border-top: none; display: block; }

/* Focus wash (Option 2) — a fixed, WHITE overlay covering the whole
   page, with a rectangular cutout punched exactly around the
   spotlighted element via CSS mask, so only that element's surroundings
   get washed out while it and its own background stay fully lit. White,
   not the previous dark tint — the tour keeps the page looking like the
   page, just softened around the edges, never "goes black."
   --cx/--cy/--cw/--ch are set from JS to the target's live bounding box. */
.pf-tour-dim {
  position: fixed; inset: 0; z-index: 899;
  background: rgba(255, 255, 255, 0.7);
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  -webkit-mask-size: 100% 100%, var(--cw, 0px) var(--ch, 0px);
  mask-size: 100% 100%, var(--cw, 0px) var(--ch, 0px);
  -webkit-mask-position: 0 0, var(--cx, 0px) var(--cy, 0px);
  mask-position: 0 0, var(--cx, 0px) var(--cy, 0px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  transition: -webkit-mask-position .25s ease, mask-position .25s ease;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .pf-tour-dim { transition: none; } }

/* Security tool lock overlay (item 3) */
.pf-toolcard-locked { filter: grayscale(.35); opacity: .85; }
.pf-toolcard-lockoverlay {
  position: absolute; inset: 0; border-radius: inherit;
  background: color-mix(in srgb, #ffffff 30%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Animated policy checklist (item 2) */
.pf-checklist-item {
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateX(-8px);
  animation: pf-checklist-in .35s ease forwards;
}
.pf-checklist-item:nth-child(1) { animation-delay: .03s; }
.pf-checklist-item:nth-child(2) { animation-delay: .09s; }
.pf-checklist-item:nth-child(3) { animation-delay: .15s; }
.pf-checklist-item:nth-child(4) { animation-delay: .21s; }
.pf-checklist-item:nth-child(5) { animation-delay: .27s; }
.pf-checklist-item:nth-child(6) { animation-delay: .33s; }
.pf-checklist-item:nth-child(n+7) { animation-delay: .38s; }
@keyframes pf-checklist-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.pf-checklist-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-good-bg); color: var(--pf-good-fg);
  transform: scale(0); animation: pf-checklist-pop .3s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: inherit;
}
@keyframes pf-checklist-pop { to { transform: scale(1); } }
.pf-checklist-check.is-pending { background: var(--color-neutral-200); color: var(--color-neutral-500); }
@media (prefers-reduced-motion: reduce) {
  .pf-checklist-item, .pf-checklist-check { animation: none; opacity: 1; transform: none; }
}

/* Notification bell wiggle + badge pop when a new notification arrives
   (checked every poll in initLiveStatus's tick()). */
@keyframes pf-bell-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
}
.pf-bell-ring { animation: pf-bell-ring 0.7s ease; transform-origin: top center; }
@keyframes pf-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
.pf-badge-pop { animation: pf-badge-pop .3s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) { .pf-bell-ring, .pf-badge-pop { animation: none; } }

/* Support ticket reply timeline — a connecting line down the left with a
   dot per entry, each fading in. */
.pf-ticket-timeline { position: relative; padding-left: 20px; }
.pf-ticket-timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background: var(--color-divider);
}
.pf-ticket-entry {
  position: relative; margin-bottom: var(--space-3);
  opacity: 0; transform: translateX(-6px);
  animation: pf-ticket-in .35s ease forwards;
}
.pf-ticket-entry:nth-child(1) { animation-delay: .03s; }
.pf-ticket-entry:nth-child(2) { animation-delay: .1s; }
.pf-ticket-entry:nth-child(3) { animation-delay: .17s; }
.pf-ticket-entry:nth-child(4) { animation-delay: .24s; }
.pf-ticket-entry:nth-child(n+5) { animation-delay: .3s; }
@keyframes pf-ticket-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.pf-ticket-dot {
  position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent);
}
.pf-ticket-entry.is-consultant .pf-ticket-dot { background: var(--pf-good-fg, #1D9E75); }
@media (prefers-reduced-motion: reduce) { .pf-ticket-entry { animation: none; opacity: 1; transform: none; } }

/* Root portal chooser (index.php) — full-screen split, two solid-color
   halves, each fully clickable (approved "Option 2" chooser layout). */
.pf-chooser { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
@media (min-width: 700px) { .pf-chooser { flex-direction: row; } }
.pf-chooser-half {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-8) var(--space-6); min-height: 240px;
  text-decoration: none; color: #fff; background: var(--color-accent-700);
  transition: filter .15s ease;
}
.pf-chooser-half:hover { filter: brightness(1.06); }
.pf-chooser-half-consultant { background: #3C3489; }
.pf-chooser-title {
  display: block; font-family: -apple-system, BlinkMacSystemFont, var(--font-heading);
  font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin: 14px 0 6px;
}
.pf-chooser-sub { display: block; font-size: 13px; color: rgba(255,255,255,.85); max-width: 30ch; }
.pf-chooser-brand {
  position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-neutral-600);
  background: var(--color-bg); padding: 6px 14px; border-radius: 999px; text-align: center;
  max-width: calc(100% - var(--space-6));
}
@media (max-width: 699px) { .pf-chooser-brand { position: static; transform: none; margin: var(--space-4) auto; } }

/* =====================================================================
   BATCH 1 — quiz timer, quiz editor, open tasks, audit countdown
   ===================================================================== */

/* ---- Quiz countdown ---- */
.pf-quiz-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; margin: 0 0 var(--space-2);
  padding: 10px var(--space-3); border-radius: 10px;
  background: var(--color-neutral-100); border: 1px solid var(--color-divider);
}
.pf-quiz-timer {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  font-size: 13px; font-weight: 600; color: var(--color-neutral-600);
}
/* Tabular figures stop the chip resizing every second as digit widths
   change — without this the whole bar jitters for the full 30 minutes. */
.pf-quiz-timer-value { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pf-quiz-timer-label { font-size: 11px; font-weight: 400; opacity: .6; }

.pf-quiz-timer.is-warning {
  background: var(--pf-warn-bg); color: var(--pf-warn-fg); border-color: transparent;
}
.pf-quiz-timer.is-critical {
  background: var(--pf-bad-bg); color: var(--pf-bad-fg); border-color: transparent;
  animation: pf-timer-pulse 1.6s ease-in-out infinite;
}
.pf-quiz-timer.is-expired { opacity: .5; animation: none; }

@keyframes pf-timer-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(180, 35, 24, .30); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(180, 35, 24, 0); }
}
/* A pulsing red badge is exactly the kind of motion that triggers
   discomfort for people who have asked the OS to reduce it. The colour
   change alone still carries the meaning. */
@media (prefers-reduced-motion: reduce) {
  .pf-quiz-timer.is-critical { animation: none; }
}

/* ---- Quiz editor question rows ---- */
.pf-quiz-q {
  border: 1px solid var(--color-divider); border-radius: 10px;
  margin-bottom: var(--space-2); background: var(--color-bg);
}
.pf-quiz-q.is-retired { opacity: .62; }
.pf-quiz-q-summary {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px var(--space-3); cursor: pointer; list-style: none;
}
.pf-quiz-q-summary::-webkit-details-marker { display: none; }
.pf-quiz-q-summary:hover { background: var(--color-neutral-100); border-radius: 10px; }
.pf-quiz-q-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-neutral-100); font-size: 11px; font-weight: 700;
}
.pf-quiz-q-text {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-quiz-q-body {
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
}
@media (max-width: 640px) {
  /* The truncated single line is fine on desktop where there is room for
     it, but on a phone it collapses to almost nothing — wrap instead. */
  .pf-quiz-q-text { white-space: normal; }
  .pf-quiz-q-summary { flex-wrap: wrap; }
}

/* ---- Dashboard open tasks ---- */
.pf-task-row { align-items: flex-start; gap: var(--space-3); }
.pf-task-row:last-of-type { border-bottom: none; }
@media (max-width: 620px) {
  .pf-task-row { flex-direction: column; align-items: stretch; }
  .pf-task-row .pf-row { justify-content: flex-start; }
}

/* ---- Audit countdown chip ---- */
.pf-audit-chip { font-variant-numeric: tabular-nums; }

/* Global dashboard search: skeleton-shimmer loading rows while a query is in flight. */
.pf-search-shimmer-bar {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%;
  animation: pfSearchShimmer 1.2s ease-in-out infinite;
}
@keyframes pfSearchShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-search-shimmer-bar { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   QUESTIONNAIRE / POLICY / CONTROL REBUILD
   Department board, drafting studio and control register. Built from the
   existing tokens only — no new colours are introduced here.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- stage rail ---- */
.qn-rail{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-6);}
.qn-step{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);
  background:var(--color-neutral-100);flex:1 1 180px;min-width:170px;}
.qn-step.is-now{background:var(--color-accent-100);box-shadow:inset 0 0 0 1px var(--color-accent-300);}
.qn-step.is-todo{opacity:.5;}
.qn-step-n{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:var(--color-neutral-300);color:var(--color-neutral-800);}
.qn-step.is-done .qn-step-n{background:var(--color-accent-600);color:#fff;}
.qn-step.is-now .qn-step-n{background:var(--color-accent-800);color:#fff;}
.qn-step b{display:block;font-size:13.5px;line-height:1.25;}
.qn-step em{display:block;font-style:normal;font-size:11.5px;opacity:.65;margin-top:1px;}

/* ---- page head ---- */
.qn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);
  flex-wrap:wrap;margin-bottom:var(--space-5);}
.qn-head h1{font-size:27px;margin:0 0 var(--space-2);}
.qn-head p{margin:0;font-size:14px;opacity:.68;max-width:74ch;}
.qn-crumb{font-size:12.5px;opacity:.65;margin-bottom:var(--space-3);}
.qn-crumb a{color:var(--color-accent-700);text-decoration:none;font-weight:600;}
.qn-crumb span{margin:0 6px;}
.qn-muted{opacity:.65;}
.qn-sm{font-size:12.5px;}
.qn-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---- progress ring ---- */
.qn-ring{--v:0;--sz:46px;--ring:var(--color-accent-600);
  width:var(--sz);height:var(--sz);flex:0 0 var(--sz);border-radius:50%;
  background:conic-gradient(var(--ring) calc(var(--v)*1%), var(--color-neutral-200) 0);
  display:grid;place-items:center;position:relative;}
.qn-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--color-bg);}
.qn-ring b{position:relative;z-index:1;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;}

/* ---- layouts ---- */
.qn-two{display:grid;grid-template-columns:1fr 320px;gap:var(--space-6);align-items:start;}
.qn-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--space-4);}
@media (max-width:900px){.qn-two{grid-template-columns:1fr;}}

/* ---- profile question card ---- */
.qn-qcard{background:var(--color-bg);border:1px solid var(--color-neutral-300);
  border-radius:var(--radius-lg);padding:var(--space-6);}
.qn-qmeta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--space-3);}
.qn-qtext{font-size:20px;margin:0 0 var(--space-2);max-width:56ch;}
.qn-qhelp{font-size:13.5px;opacity:.68;margin:0 0 var(--space-4);max-width:68ch;}

/* ---- options ---- */
.qn-opt{display:block;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  padding:13px 15px;margin-bottom:8px;cursor:pointer;background:var(--color-bg);
  transition:border-color .12s ease;position:relative;}
.qn-opt:hover{border-color:var(--color-accent-400);}
.qn-opt input{position:absolute;opacity:0;pointer-events:none;}
.qn-opt-body{display:block;padding-left:26px;position:relative;}
.qn-opt-body::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--color-neutral-400);}
.qn-opt input:checked + .qn-opt-body::before{border-color:var(--color-accent-700);
  background:radial-gradient(var(--color-accent-700) 40%, transparent 45%);}
.qn-opt:has(input:checked), .qn-opt.is-sel{border-color:var(--color-accent-600);
  background:var(--color-accent-100);box-shadow:inset 0 0 0 1px var(--color-accent-600);}
.qn-opt-body b{display:block;font-size:14px;font-weight:600;}
.qn-opt-body em{display:block;font-style:normal;font-size:12.5px;opacity:.65;margin-top:3px;}
.qn-opt-body .pf-pill{margin-top:7px;}
.qn-form textarea{width:100%;margin-top:var(--space-3);}

/* ---- department pick + cards ---- */
.qn-deptpick{display:block;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  padding:var(--space-4);cursor:pointer;background:var(--color-bg);}
.qn-deptpick:has(input:checked){border-color:var(--color-accent-600);background:var(--color-accent-100);}
.qn-deptpick.is-blocked{opacity:.55;cursor:not-allowed;border-style:dashed;}
.qn-deptpick input{margin-right:8px;}
.qn-deptpick b{font-size:14.5px;}
.qn-deptpick em{display:block;font-style:normal;font-size:12.5px;opacity:.65;margin:4px 0 8px;}
.qn-reason{font-size:11.5px;margin-top:6px !important;}

.qn-deptcard{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);}
.qn-deptlink{text-decoration:none;color:inherit;transition:border-color .12s ease, transform .12s ease;}
.qn-deptlink:hover{border-color:var(--color-accent-500);transform:translateY(-1px);}
.qn-deptfoot{margin-top:auto;padding-top:var(--space-2);border-top:1px solid var(--color-neutral-200);}
.qn-open{font-size:12.5px;font-weight:700;color:var(--color-accent-700);}

/* ---- people chips ---- */
.qn-people{display:flex;flex-wrap:wrap;gap:6px;}
.qn-av{display:inline-flex;align-items:center;gap:6px;background:var(--color-neutral-100);
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-pill);
  padding:3px 10px 3px 3px;font-size:12px;font-weight:600;}
.qn-av i{width:22px;height:22px;border-radius:50%;background:var(--color-accent-600);color:#fff;
  display:grid;place-items:center;font-size:9.5px;font-weight:800;font-style:normal;}
.qn-av-x{border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;
  opacity:.45;padding:0 0 0 4px;}
.qn-av-x:hover{opacity:1;}
.qn-assign{display:flex;gap:6px;}
.qn-assign select{flex:1;min-width:0;}

/* ---- question accordion ---- */
.qn-acc{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  margin-bottom:10px;background:var(--color-bg);overflow:hidden;}
.qn-acc.is-now{border-color:var(--color-accent-600);box-shadow:0 0 0 1px var(--color-accent-600);}
.qn-acc summary{display:flex;gap:12px;align-items:center;padding:13px 15px;cursor:pointer;
  list-style:none;}
.qn-acc summary::-webkit-details-marker{display:none;}
.qn-acc summary:hover{background:var(--color-neutral-100);}
.qn-acc-t{flex:1;min-width:0;}
.qn-acc-t b{display:block;font-size:13.5px;font-weight:600;}
.qn-acc-t em{display:block;font-style:normal;font-size:12px;opacity:.62;margin-top:2px;}
.qn-ref{flex:0 0 auto;}
.qn-acc-b{padding:0 15px 16px;border-top:1px solid var(--color-neutral-200);}
.qn-acc-b .qn-qhelp{padding-top:var(--space-3);}

/* ---- impact + exclusions ---- */
.qn-impact{border:1px dashed var(--color-accent-400);background:var(--color-accent-100);
  border-radius:var(--radius-md);padding:12px 14px;margin-top:var(--space-3);}
.qn-impact-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-accent-800);margin-bottom:6px;}
.qn-impact-i{font-size:12.5px;margin:4px 0;}
.qn-impact-i b{font-weight:700;margin-right:5px;}

.qn-excl{border-left:3px solid var(--color-neutral-400);background:var(--color-neutral-100);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-4) var(--space-5);}
.qn-excl.is-wide{margin-top:var(--space-6);}
.qn-excl-h{font-size:13px;font-weight:700;margin-bottom:6px;}
.qn-excl-i{display:flex;gap:10px;align-items:flex-start;margin:8px 0;font-size:12.5px;}
.qn-excl-i em{font-style:normal;opacity:.7;}

.qn-exdetails{margin-top:var(--space-5);}
.qn-exdetails summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--color-accent-700);}
.qn-exrow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--color-neutral-200);}
.qn-exrow b{display:block;font-size:13px;font-weight:600;opacity:.8;}
.qn-exrow em{display:block;font-style:normal;font-size:11.5px;opacity:.6;margin-top:2px;}

/* ══════════════════════════════════════════════════════════════════════
   POLICY LIBRARY + DRAFTING STUDIO
   ══════════════════════════════════════════════════════════════════════ */
.pl-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--space-4);}
.pl-filters a{text-decoration:none;}
.pl-filters .pf-pill{cursor:pointer;}
.pl-filters .is-on{outline:2px solid var(--color-accent-700);outline-offset:1px;}

.pl-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.pl-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;opacity:.6;padding:8px 10px;border-bottom:1px solid var(--color-neutral-300);
  white-space:nowrap;}
.pl-table td{padding:11px 10px;border-bottom:1px solid var(--color-neutral-200);vertical-align:middle;}
.pl-table tbody tr:hover{background:var(--color-neutral-100);}
.pl-table tr.is-na{opacity:.5;}
.pl-name{font-weight:600;}
.pl-sub{font-size:11.5px;opacity:.6;margin-top:2px;}
.pl-refs{display:flex;gap:4px;flex-wrap:wrap;}
.pl-wrap{overflow-x:auto;}

.ps-grid{display:grid;grid-template-columns:1fr 330px;gap:var(--space-6);align-items:start;}
@media (max-width:1000px){.ps-grid{grid-template-columns:1fr;}}
.ps-doc{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  background:var(--color-bg);padding:var(--space-6);font-size:13.5px;line-height:1.62;}
.ps-doc h1,.ps-doc h2{font-size:17px;margin:var(--space-5) 0 var(--space-2);}
.ps-doc h3{font-size:15px;margin:var(--space-4) 0 var(--space-2);}
.ps-doc h4{font-size:13.5px;margin:var(--space-3) 0 var(--space-2);font-weight:700;}
.ps-doc > :first-child{margin-top:0;}
.ps-doc p{margin:0 0 var(--space-3);}
.ps-editor{width:100%;min-height:440px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px !important;line-height:1.6;}
.ps-src{border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);
  background:var(--color-bg);padding:9px 11px;margin-bottom:7px;}
.ps-src-h{font-size:11px;opacity:.6;}
.ps-src-b{font-size:12.5px;margin-top:2px;}
.ps-chips{display:flex;gap:6px;flex-wrap:wrap;}
.ps-chips button{border:1px solid var(--color-neutral-400);background:var(--color-bg);
  border-radius:var(--radius-pill);padding:4px 11px;font-size:11.5px;font-weight:600;cursor:pointer;}
.ps-chips button:hover{border-color:var(--color-accent-600);color:var(--color-accent-800);}

/* ══════════════════════════════════════════════════════════════════════
   CONTROL REGISTER
   ══════════════════════════════════════════════════════════════════════ */
.cr-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:var(--space-3);margin-bottom:var(--space-5);}
.cr-stat{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);padding:var(--space-4);}
.cr-stat b{display:block;font-family:var(--font-heading);font-size:25px;line-height:1.1;}
.cr-stat span{font-size:11.5px;opacity:.62;}

.cr-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.cr-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;opacity:.6;padding:8px 10px;border-bottom:1px solid var(--color-neutral-300);
  white-space:nowrap;}
.cr-table td{padding:11px 10px;border-bottom:1px solid var(--color-neutral-200);vertical-align:middle;}
.cr-table tr.is-na{opacity:.5;}
.cr-table tr.is-open{background:var(--color-accent-100);}
.cr-code{font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;}
.cr-title{font-weight:600;}
.cr-brief{font-size:11.5px;opacity:.6;margin-top:2px;max-width:52ch;}
.cr-panel{background:var(--color-accent-100);padding:0 10px var(--space-5) !important;}
.cr-two{display:grid;grid-template-columns:1fr 320px;gap:var(--space-5);align-items:start;}
@media (max-width:1000px){.cr-two{grid-template-columns:1fr;}}
.cr-drop{border:2px dashed var(--color-neutral-400);border-radius:var(--radius-md);
  padding:var(--space-5);text-align:center;background:var(--color-bg);}
.cr-ev{display:flex;gap:11px;align-items:center;padding:9px 11px;
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);
  margin-bottom:7px;background:var(--color-bg);}
.cr-ev-ic{width:30px;height:30px;border-radius:7px;background:var(--color-accent-200);
  display:grid;place-items:center;font-size:9.5px;font-weight:800;
  color:var(--color-accent-800);flex:0 0 30px;text-transform:uppercase;}
.cr-check{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  padding:var(--space-4);background:var(--color-bg);}
.cr-check-i{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;margin:7px 0;}
.cr-check-i i{font-style:normal;font-weight:800;flex:0 0 14px;}
.cr-check-i.ok i{color:var(--pf-good-fg);}
.cr-check-i.no i{color:var(--pf-bad-fg);}
.cr-check-i em{display:block;font-style:normal;font-size:11px;opacity:.55;margin-top:1px;}

/* A department nobody has been assigned to yet — its questions have no owner. */
.qn-deptcard.is-unstaffed{border-color:var(--color-warn2-400,var(--color-neutral-400));
  background:color-mix(in srgb, var(--pf-warn-bg) 45%, transparent);}

/* Tables and recorded notes inside a rendered policy document. */
.ps-doc .ps-table{width:100%;border-collapse:collapse;margin:0 0 var(--space-4);font-size:13px;}
.ps-doc .ps-table td{border:1px solid var(--color-neutral-300);padding:7px 10px;vertical-align:top;}
.ps-doc .ps-table td:first-child{width:34%;background:var(--color-neutral-100);font-weight:600;}
.ps-doc .ps-note{margin:0 0 var(--space-3);padding:8px 13px;border-left:3px solid var(--color-accent-500);
  background:var(--color-accent-100);font-size:12.5px;}

/* ══════════════════════════════════════════════════════════════════════
   SECTION REDESIGN — home, questionnaire focus mode, training matrix,
   vendors, internal audit, reports, team. Built on the existing tokens.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- shared bits ---- */
.ui-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);
  flex-wrap:wrap;margin-bottom:var(--space-5);}
.ui-head h1{font-size:26px;margin:0 0 var(--space-2);}
.ui-head p{margin:0;font-size:14px;opacity:.66;max-width:76ch;}
.ui-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-3);margin-bottom:var(--space-5);}
.ui-stat{--t:var(--color-neutral-400);border:1px solid var(--color-neutral-300);
  border-top:3px solid var(--t);border-radius:var(--radius-md);padding:var(--space-4);
  background:var(--color-bg);}
.ui-stat b{display:block;font-family:var(--font-heading);font-size:25px;line-height:1.1;}
.ui-stat b i{font-style:normal;font-size:15px;color:var(--color-neutral-500);}
.ui-stat span{font-size:11.5px;opacity:.62;}
/* Tones now come from the same --cp-* palette the dashboard uses, and
   are carried on a coloured top border rather than a filled background.
   The filled version competed with the dashboard's tinted tiles for
   attention and made a page of four warn-state stats look alarming. */
.ui-stat.is-bad{--t:var(--cp-bad);}
.ui-stat.is-bad b{color:var(--cp-bad);}
.ui-stat.is-warn{--t:var(--cp-warn);}
.ui-stat.is-warn b{color:var(--cp-warn);}
.ui-stat.is-good{--t:var(--cp-good);}
.ui-stat.is-good b{color:var(--cp-good);}
.ui-stat.is-acc{--t:var(--cp-mini-3);}
.ui-stat.is-acc b{color:var(--cp-mini-3);}
.ui-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.ui-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  opacity:.6;padding:8px 10px;border-bottom:1px solid var(--color-neutral-300);white-space:nowrap;}
.ui-table td{padding:11px 10px;border-bottom:1px solid var(--color-neutral-200);vertical-align:middle;}
.ui-table tr:last-child td{border-bottom:0;}
.ui-table tr.is-bad{background:var(--pf-bad-bg);}
.ui-table tr.is-warn{background:var(--pf-warn-bg);}
.ui-table tr.is-muted{opacity:.55;}
.ui-sub{font-size:11.5px;opacity:.6;margin-top:2px;}
.ui-wrap{overflow-x:auto;}
.ui-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--space-4);}
.ui-filters a{text-decoration:none;}
.ui-filters .is-on{outline:2px solid var(--color-accent-700);outline-offset:1px;}
.ui-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px;}
.ui-two{display:grid;grid-template-columns:1fr 300px;gap:var(--space-5);align-items:start;}
@media (max-width:900px){.ui-two{grid-template-columns:1fr;}}

/* ---- HOME: next action ---- */
.nx{background:var(--color-accent-100);border:1px solid var(--color-accent-400);
  border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-5);}
.nx-grid{display:grid;grid-template-columns:1fr 230px;gap:var(--space-5);align-items:start;}
@media (max-width:800px){.nx-grid{grid-template-columns:1fr;}}
.nx h2{font-size:19px;margin:6px 0 8px;max-width:52ch;}
.nx p{font-size:13.5px;opacity:.75;margin:0 0 var(--space-4);max-width:62ch;}
.nx-unblocks{background:var(--color-bg);border:1px solid var(--color-neutral-300);
  border-radius:var(--radius-md);padding:var(--space-3);}
.nx-done{background:var(--pf-good-bg);border-color:var(--pf-good-fg);}
.nx-done h2{color:var(--pf-good-fg);}
.att{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;
  border-bottom:1px solid var(--color-neutral-200);}
.att:last-child{border-bottom:0;}
.att-b{flex:1;min-width:0;}
.att-b b{display:block;font-size:13.5px;font-weight:600;}
.att-b em{display:block;font-style:normal;font-size:11.5px;opacity:.6;margin-top:2px;}

/* ---- QUESTIONNAIRE: focus mode ---- */
.fm{display:grid;grid-template-columns:236px 1fr;gap:var(--space-5);align-items:start;}
@media (max-width:900px){.fm{grid-template-columns:1fr;}}
.fm-rail{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  padding:var(--space-3);background:var(--color-bg);position:sticky;top:var(--space-4);}
.fm-rail a{display:block;text-decoration:none;color:inherit;padding:9px var(--space-3);
  border-radius:var(--radius-sm);margin-bottom:2px;}
.fm-rail a:hover{background:var(--color-neutral-100);}
.fm-rail a.is-on{background:var(--color-accent-200);}
.fm-rail .pf-between b,.fm-rail .pf-between span{font-size:12.5px;}
.fm-card{border:1px solid var(--color-neutral-400);border-radius:var(--radius-lg);
  padding:var(--space-6);background:var(--color-bg);}
.fm-card h2{font-size:19px;margin:0 0 var(--space-2);max-width:58ch;}
.fm-help{font-size:13.5px;opacity:.68;margin:0 0 var(--space-5);max-width:70ch;}
.fm-opt{display:block;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  padding:13px 15px;margin-bottom:8px;cursor:pointer;background:var(--color-bg);position:relative;}
.fm-opt:hover{border-color:var(--color-accent-400);}
.fm-opt input{position:absolute;opacity:0;pointer-events:none;}
.fm-opt-t{display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start;}
.fm-opt-t b{font-size:14px;font-weight:600;}
.fm-opt em{display:block;font-style:normal;font-size:12.5px;opacity:.65;margin-top:4px;}
.fm-opt:has(input:checked){border-color:var(--color-accent-600);background:var(--color-accent-100);
  box-shadow:inset 0 0 0 1px var(--color-accent-600);}
.fm-key{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:5px;
  background:var(--color-neutral-200);font-size:10.5px;font-weight:800;flex:0 0 19px;margin-right:9px;}
.fm-opt:has(input:checked) .fm-key{background:var(--color-accent-600);color:#fff;}
.fm-hint{font-size:11.5px;opacity:.55;}
.fm-nav{display:flex;gap:6px;}
.fm-done{border:1px solid var(--pf-good-fg);background:var(--pf-good-bg);border-radius:var(--radius-lg);
  padding:var(--space-8);text-align:center;}

/* ---- TRAINING: matrix ---- */
.tm{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;}
.tm th{text-align:center;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  opacity:.6;padding:8px 6px;border-bottom:1px solid var(--color-neutral-300);
  vertical-align:bottom;min-width:74px;}
.tm th:first-child,.tm th:nth-child(2){text-align:left;}
.tm td{padding:9px 6px;border-bottom:1px solid var(--color-neutral-200);text-align:center;}
.tm td:first-child,.tm td:nth-child(2){text-align:left;}
.tm tr.is-out{background:var(--pf-warn-bg);}
.tm-cell{display:inline-block;min-width:62px;padding:3px 8px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;}
.tm-cell.done{background:var(--pf-good-bg);color:var(--pf-good-fg);}
.tm-cell.pending{background:var(--pf-warn-bg);color:var(--pf-warn-fg);}
.tm-cell.overdue{background:var(--pf-bad-bg);color:var(--pf-bad-fg);}
.tm-cell.na{background:transparent;color:var(--color-neutral-500);}

/* ---- INTERNAL AUDIT ---- */
.ia-row{display:grid;grid-template-columns:190px 1fr 118px;gap:var(--space-3);align-items:center;
  padding:7px 0;}
.ia-track{position:relative;height:22px;background:var(--color-neutral-200);border-radius:7px;}
.ia-block{position:absolute;top:0;bottom:0;border-radius:7px;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:#fff;}
.ia-months{display:grid;grid-template-columns:repeat(12,1fr);font-size:10px;opacity:.5;
  padding:0 0 4px;text-align:center;}
.ia-find{display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--color-neutral-200);}
.ia-find:last-child{border-bottom:0;}
.ia-find b{display:block;font-size:13.5px;}
.ia-find em{display:block;font-style:normal;font-size:11.5px;opacity:.6;margin-top:2px;}
.ia-chk{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;margin:8px 0;}
.ia-chk i{font-style:normal;font-weight:800;flex:0 0 14px;}
.ia-chk.ok i{color:var(--pf-good-fg);} .ia-chk.no i{color:var(--pf-bad-fg);}

/* ---- REPORTS: pack builder ---- */
.rp-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-3);}
.rp-pack{display:block;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  padding:var(--space-4);cursor:pointer;background:var(--color-bg);position:relative;}
.rp-pack input{position:absolute;opacity:0;pointer-events:none;}
.rp-pack:has(input:checked){border-color:var(--color-accent-600);background:var(--color-accent-100);
  box-shadow:inset 0 0 0 1px var(--color-accent-600);}
.rp-pack b{display:block;font-size:14px;}
.rp-pack em{display:block;font-style:normal;font-size:12px;opacity:.65;margin:6px 0 10px;}
.rp-comp{display:flex;gap:11px;align-items:flex-start;padding:10px 4px;
  border-bottom:1px solid var(--color-neutral-200);}
.rp-comp:last-child{border-bottom:0;}
.rp-comp b{display:block;font-size:13.5px;}
.rp-comp em{display:block;font-style:normal;font-size:11.5px;opacity:.6;margin-top:2px;}
.rp-fmt{font-size:10.5px;font-weight:700;opacity:.5;letter-spacing:.05em;}

/* ---- TEAM ---- */
.tw-av{display:inline-flex;align-items:center;gap:8px;}
.tw-av i{width:26px;height:26px;border-radius:50%;background:var(--color-accent-600);color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:800;font-style:normal;flex:0 0 26px;}

/* ---- tabs (dashboard: your programme / other frameworks) ---- */
.ui-tabs{display:flex;gap:2px;border-bottom:1px solid var(--color-neutral-300);
  margin-bottom:var(--space-5);overflow-x:auto;scrollbar-width:none;}
.ui-tabs::-webkit-scrollbar{display:none;}
.ui-tab{background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--color-neutral-600);padding:10px 16px;cursor:pointer;position:relative;
  white-space:nowrap;flex:0 0 auto;}
.ui-tab:hover{color:var(--color-text);}
.ui-tab.is-on{color:var(--color-text);}
.ui-tab.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
  background:var(--color-accent-700);border-radius:2px;}
.ui-panel{display:none;}
.ui-panel.is-on{display:block;}

/* ---- other-framework cards ---- */
.fw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:var(--space-4);}
.fw-card{padding:var(--space-5);display:flex;flex-direction:column;}
.fw-claim{margin:var(--space-4) 0 0;padding:10px 13px;border-radius:var(--radius-md);
  background:var(--color-accent-100);font-size:13px;}
.fw-claim b{font-size:15px;}
.fw-next{margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--color-neutral-200);}

/* ══════════════════════════════════════════════════════════════════════
   AI DRAFTING — the wait while a policy is written
   A policy draft takes a few seconds against a model. Without something
   to watch, people click twice or assume it failed.
   ══════════════════════════════════════════════════════════════════════ */
.ai-overlay{position:fixed;inset:0;z-index:9000;display:none;place-items:center;
  background:color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  backdrop-filter:blur(3px);}
.ai-overlay.is-on{display:grid;}
.ai-box{width:min(460px,calc(100vw - 40px));background:var(--color-bg);border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6);text-align:center;box-shadow:var(--shadow-lg);}
.ai-box h3{font-size:18px;margin:0 0 var(--space-2);}
.ai-box p{font-size:13px;opacity:.65;margin:0 auto var(--space-5);max-width:40ch;}

/* the document being written: lines appearing one after another */
.ai-doc{position:relative;width:150px;height:106px;margin:0 auto var(--space-5);
  border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-bg);
  padding:14px 13px;overflow:hidden;box-shadow:var(--shadow-sm);}
.ai-doc::before{content:"";position:absolute;top:0;right:0;width:22px;height:22px;
  background:linear-gradient(225deg,var(--color-neutral-200) 50%,transparent 50%);}
.ai-line{height:5px;border-radius:3px;background:var(--color-neutral-200);margin-bottom:7px;
  transform-origin:left;animation:ai-fill .55s ease forwards;opacity:0;}
.ai-line.h{height:7px;background:var(--color-accent-300);width:62%;}
.ai-line:nth-child(1){animation-delay:.0s}   .ai-line:nth-child(2){animation-delay:.35s}
.ai-line:nth-child(3){animation-delay:.7s}   .ai-line:nth-child(4){animation-delay:1.05s}
.ai-line:nth-child(5){animation-delay:1.4s}  .ai-line:nth-child(6){animation-delay:1.75s}
.ai-line:nth-child(7){animation-delay:2.1s}  .ai-line:nth-child(8){animation-delay:2.45s}
@keyframes ai-fill{from{opacity:0;transform:scaleX(.1)}to{opacity:1;transform:scaleX(1)}}

/* the sweep that reads over it */
.ai-doc::after{content:"";position:absolute;left:0;right:0;height:34px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--color-accent-400) 26%,transparent),transparent);
  animation:ai-sweep 2.1s ease-in-out infinite;}
@keyframes ai-sweep{0%{top:-34px}100%{top:106px}}

.ai-steps{text-align:left;max-width:270px;margin:0 auto;}
.ai-step{display:flex;gap:9px;align-items:center;font-size:12.5px;padding:4px 0;opacity:.35;
  transition:opacity .3s ease;}
.ai-step.is-on{opacity:1;}
.ai-step.is-done{opacity:.6;}
.ai-step i{width:15px;height:15px;border-radius:50%;border:2px solid var(--color-neutral-400);
  flex:0 0 15px;font-style:normal;display:grid;place-items:center;font-size:9px;font-weight:800;}
.ai-step.is-on i{border-color:var(--color-accent-600);border-right-color:transparent;
  animation:ai-spin .7s linear infinite;}
.ai-step.is-done i{border-color:var(--pf-good-fg);background:var(--pf-good-fg);color:#fff;}
@keyframes ai-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .ai-line,.ai-doc::after,.ai-step.is-on i{animation:none;opacity:1;}
}

/* ---- drawer hierarchy ---- */
.pf-navgroup{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  opacity:.45;padding:var(--space-5) var(--space-4) var(--space-2);}
.pf-navgroup:first-child{padding-top:var(--space-2);}
.pf-navrule{height:1px;background:var(--color-neutral-300);margin:var(--space-4) var(--space-4) var(--space-2);}
.pf-sidebar-nav .pf-navrow{padding-left:var(--space-5);}

/* ---- assign people from the board, any time ---- */
.qn-people-panel{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  background:var(--color-bg);padding:var(--space-4) var(--space-5);margin-top:var(--space-6);}
.qn-people-panel summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  cursor:pointer;list-style:none;}
.qn-people-panel summary::-webkit-details-marker{display:none;}
.qn-people-panel summary b{font-size:14px;}
.qn-people-panel summary em{display:block;font-style:normal;font-size:12px;opacity:.6;margin-top:2px;}

/* ---- audience: adding people who have no login ---- */
.aud-forms{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
@media (max-width:820px){.aud-forms{grid-template-columns:1fr;}}
.aud-or{text-align:center;font-size:11.5px;opacity:.5;margin:var(--space-3) 0;
  position:relative;}
.aud-or::before,.aud-or::after{content:"";position:absolute;top:50%;width:38%;height:1px;
  background:var(--color-neutral-300);}
.aud-or::before{left:0;} .aud-or::after{right:0;}
.aud-pick{display:flex;flex-wrap:wrap;gap:6px;max-height:220px;overflow-y:auto;
  padding:var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  background:var(--color-neutral-100);}
.aud-chip{position:relative;cursor:pointer;}
.aud-chip input{position:absolute;opacity:0;pointer-events:none;}
.aud-chip span{display:inline-flex;align-items:center;gap:7px;background:var(--color-bg);
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-pill);
  padding:3px 12px 3px 3px;font-size:12px;}
.aud-chip i{width:21px;height:21px;border-radius:50%;background:var(--color-neutral-400);color:#fff;
  display:grid;place-items:center;font-size:9px;font-weight:800;font-style:normal;}
.aud-chip em{font-style:normal;font-size:10.5px;opacity:.55;}
.aud-chip:has(input:checked) span{border-color:var(--color-accent-600);background:var(--color-accent-100);
  box-shadow:inset 0 0 0 1px var(--color-accent-600);}
.aud-chip:has(input:checked) i{background:var(--color-accent-600);}


/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD BOXES  (client home)

   The home page is a set of boxes rather than tabs: a full-width
   Compliance Progress hero, a 2x2 grid of Policies / Controls /
   Training & Phishing / Departments, then Other Frameworks.

   One shared palette runs through all of them. The three-band scale
   (bad under 40%, warn under 75%, good above) is used for every
   more-is-better figure, so a bar that looks healthy in the Departments
   box means the same thing as a healthy arc in the hero. The only
   inversion is the phishing click rate, where a high number is bad and
   the scale is flipped at the call site.

   Donuts are plain inline SVG arcs — stroke-dasharray on a circle, no
   chart library and no script, which keeps it inside the CSP and means
   the numbers are still readable with JavaScript off.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --cp-track:#eceef2;
  --cp-bad:#f2653b;
  --cp-warn:#f0a92a;
  --cp-good:var(--color-accent-500);
  --cp-mini-1:#f5c542;
  --cp-mini-2:#f0a92a;
  --cp-mini-3:#2b8fe6;
}

/* ---- shared donut ---- */
.cp-donut{position:relative;width:var(--cp-size);height:var(--cp-size);flex:0 0 var(--cp-size);}
.cp-donut svg{display:block;}
.cp-donut circle{transition:stroke-dasharray .6s ease;}
@media (prefers-reduced-motion: reduce){.cp-donut circle{transition:none;}}
.cp-donut-mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;}
.cp-donut-mid b{font-family:var(--font-heading);font-size:32px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;}
.cp-donut-mid span{font-size:12px;opacity:.6;margin-top:5px;}
.cp-donut-mid svg{opacity:.55;}

/* ---- segmented bar, shared by every box ---- */
.cp-seg{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--cp-track);}
.cp-seg > i{display:block;height:100%;transition:width .5s ease;}
@media (prefers-reduced-motion: reduce){.cp-seg > i{transition:none;}}

.cp-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);
  margin-top:var(--space-3);font-size:11.5px;opacity:.75;}
.cp-legend span{display:inline-flex;align-items:center;gap:6px;}
.cp-legend i{width:9px;height:9px;border-radius:2px;flex:none;}

/* ---- compliance hero ---- */
.cp-card{padding:var(--space-5);border-radius:var(--radius-lg);margin-bottom:var(--space-5);}
.cp-trend{font-size:12.5px;font-weight:700;color:var(--color-accent-600);white-space:nowrap;}
.cp-hero{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:var(--space-6);align-items:center;}
.cp-big{position:relative;justify-self:center;}

/* Hover/focus tooltip over the headline ring, mirroring the reference
   design. Decorative only — the same two numbers are already in the
   middle of the ring and in the legend, so nothing is lost on a touch
   device that never shows it. */
.cp-tip{position:absolute;left:50%;bottom:calc(100% - 4px);transform:translateX(-18%);
  display:none;align-items:flex-start;gap:8px;z-index:5;
  background:var(--color-bg);border:1px solid var(--color-neutral-300);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  padding:9px 13px;font-size:12.5px;line-height:1.45;white-space:nowrap;}
.cp-big:hover .cp-tip,.cp-big:focus-visible .cp-tip{display:flex;}
.cp-tip-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;}

.cp-mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);
  margin-bottom:var(--space-4);}
.cp-mini{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);
  text-decoration:none;color:inherit;}
.cp-mini:hover{background:var(--color-neutral-100);text-decoration:none;}
.cp-mini b{font-family:var(--font-heading);font-size:19px;font-weight:800;
  margin-top:var(--space-2);font-variant-numeric:tabular-nums;}
.cp-mini span{font-size:12px;opacity:.72;margin-top:1px;}
.cp-mini em{font-style:normal;font-size:10.5px;opacity:.5;margin-top:2px;}

/* ---- dashboard rows: one shared column split, equal heights ----
   Every row uses the SAME template, so the divide between the narrow
   left rail and the wide right column is one straight line down the
   whole page. Rows that split at different points (340px on one, 50%
   on the next) were what made the page look ragged.
   align-items:stretch plus height:100% makes both boxes in a row end
   flush at the bottom however much content each holds. */
.dash-row{display:grid;grid-template-columns:340px minmax(0,1fr);
  gap:var(--space-5);align-items:stretch;margin-bottom:var(--space-5);}
.dash-row > .card{height:100%;margin-bottom:0;}
.dash-box{padding:var(--space-5);border-radius:var(--radius-lg);}
.dash-big{font-family:var(--font-heading);font-size:26px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;}
.dash-big i{font-style:normal;font-size:15px;color:var(--color-neutral-500);}

/* Tinted stat tiles. --t carries the tone so one rule covers every
   colour and the call site stays readable. */
.dash-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);}
.dash-tile{--t:var(--color-neutral-400);border:1px solid var(--color-neutral-300);
  border-top:3px solid var(--t);border-radius:var(--radius-md);
  padding:10px var(--space-2);text-align:center;min-width:0;}
.dash-tile b{display:block;font-family:var(--font-heading);font-size:19px;font-weight:800;
  line-height:1.1;color:var(--t);font-variant-numeric:tabular-nums;}
.dash-tile span{display:block;font-size:10.5px;opacity:.62;margin-top:3px;}

.dash-table{margin-top:var(--space-4);font-size:12.5px;}
.dash-table td{padding:8px 4px;border-bottom:1px solid var(--color-neutral-200);}
.dash-table tr:last-child td{border-bottom:0;}

.dash-dept{display:block;text-decoration:none;color:inherit;margin-bottom:var(--space-3);}
.dash-dept:last-child{margin-bottom:0;}
.dash-dept:hover{text-decoration:none;}
.dash-dept:hover span{color:var(--color-accent-700);}

.dash-fw{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  padding:var(--space-4);}

/* Narrow-rail boxes (Compliance, Controls, Training) stack and shrink to
   suit the 340px column. */
.cp-narrow{margin-bottom:0;}
.cp-narrow .cp-hero{grid-template-columns:1fr;gap:var(--space-4);}
.cp-narrow .cp-mini-row{gap:var(--space-1);margin-bottom:var(--space-3);}
.cp-narrow .cp-mini{padding:var(--space-2) 2px;}
.cp-narrow .cp-mini b{font-size:15px;margin-top:6px;}
.cp-narrow .cp-mini span{font-size:10.5px;}
.cp-narrow .cp-mini em{font-size:9.5px;}
.cp-narrow .cp-donut-mid b{font-size:26px;}
.cp-narrow .cp-legend{gap:var(--space-2);font-size:10.5px;}
.cp-narrow .cp-trend,.dash-narrow .cp-trend{font-size:11.5px;}
.dash-narrow .dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);}

/* The block that fills out a short box — theme bars, overdue names, the
   closed/target figures. Set off with a rule and a label so it reads as
   supporting detail rather than more headline numbers. It carries real
   content in every state: where there is nothing to list (nobody
   overdue, no training assigned) the call site writes a sentence
   instead, so the box never collapses to an empty panel. */
.dash-fill{margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--color-neutral-200);}
.dash-fill-t{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-neutral-600);margin-bottom:var(--space-3);}
.dash-fill-row{font-size:12.5px;margin-bottom:7px;}
.dash-fill-row:last-child{margin-bottom:0;}

/* Frameworks sits in the wide cell; two across reads better than one. */
.dash-row .fw-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

@media (max-width:1000px){
  .dash-row{grid-template-columns:1fr;}
  .cp-narrow .cp-hero{grid-template-columns:minmax(0,auto) minmax(0,1fr);}
  .dash-narrow .dash-tiles{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:560px){
  .cp-card,.dash-box{padding:var(--space-4);}
  .cp-donut-mid b{font-size:26px;}
  .dash-tiles,.dash-narrow .dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cp-mini-row{grid-template-columns:1fr;}
  .cp-mini{flex-direction:row;gap:var(--space-3);text-align:left;}
  .cp-mini b{margin-top:0;}
  .cp-narrow .cp-hero{grid-template-columns:1fr;}
  .cp-tip{white-space:normal;max-width:200px;transform:translateX(-50%);}
}

/* ══════════════════════════════════════════════════════════════════════
   HEADING COUNT CHIPS

   Replaces the paragraph of prose that used to sit under every page
   <h1>. On the list pages that subtitle was only ever a run of numbers
   joined by middle dots; as chips the same figures take about a quarter
   of the height, and each one links to the filter it names, so the row
   is navigation rather than decoration. Rendered by ui_chips().
   ══════════════════════════════════════════════════════════════════ */
.qn-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;}
.qn-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1.4;
  padding:3px 11px;border-radius:var(--radius-pill);background:var(--color-neutral-200);
  color:var(--color-neutral-700);text-decoration:none;border:1px solid transparent;
  white-space:nowrap;}
.qn-chip b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text);}
a.qn-chip:hover{background:var(--color-accent-100);border-color:var(--color-accent-200);
  color:var(--color-accent-700);text-decoration:none;}
a.qn-chip:hover b{color:var(--color-accent-700);}
a.qn-chip:focus-visible{outline:2px solid var(--color-accent-600);outline-offset:2px;}

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD — POLICIES BOX

   Ring on the left, the four figures that describe the library on the
   right. The box sits in the wide column of row A, where four table
   rows left most of the card empty.
   ══════════════════════════════════════════════════════════════════ */
.dash-split{display:flex;gap:var(--space-5);align-items:center;
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--color-neutral-200);}
.dash-split-facts{flex:1;min-width:0;}
@media (max-width:560px){
  .dash-split{flex-direction:column;align-items:stretch;gap:var(--space-3);}
  .dash-split .cp-donut{align-self:center;}
}

/* ══════════════════════════════════════════════════════════════════════
   SLIDE-OVER SIDE PANEL

   Used by the control register and the policy library in place of the
   inline expanding table row. The list underneath keeps its scroll
   position and its layout; only this panel changes. On a narrow screen
   it takes the full width, which is the right shape on a phone anyway.
   ══════════════════════════════════════════════════════════════════ */
.pf-side-root{position:fixed;inset:0;z-index:940;pointer-events:none;}
.pf-side-root.is-open{pointer-events:auto;}
.pf-side-scrim{position:absolute;inset:0;background:rgba(20,25,20,.34);
  opacity:0;transition:opacity .22s ease;}
.pf-side-root.is-open .pf-side-scrim{opacity:1;}
.pf-side{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);
  background:var(--color-bg);border-left:1px solid var(--color-neutral-300);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .26s cubic-bezier(.32,.72,0,1);}
.pf-side-root.is-open .pf-side{transform:none;}
.pf-side:focus{outline:none;}
@media (prefers-reduced-motion: reduce){
  .pf-side{transition:none;}
  .pf-side-scrim{transition:none;}
}
/* The fetched fragment supplies head / body / foot; this is the column
   that lays them out, with only the body scrolling so the primary
   action stays reachable however long the checklist gets. */
.pf-side-inner{display:flex;flex-direction:column;min-height:0;flex:1;}
.pf-side-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--space-3);padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--color-neutral-200);flex:none;}
.pf-side-title{display:block;font-family:var(--font-heading);font-size:16px;
  font-weight:600;line-height:1.3;margin-top:7px;word-break:break-word;}
.pf-side-body{padding:var(--space-5);overflow-y:auto;flex:1;min-height:0;}
.pf-side-foot{padding:var(--space-3) var(--space-5);flex:none;
  border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-100);
  display:flex;gap:var(--space-2);align-items:center;}
.pf-side-x{appearance:none;border:0;background:transparent;font-size:22px;line-height:1;
  color:var(--color-neutral-600);cursor:pointer;padding:0 2px;}
.pf-side-x:hover{color:var(--color-neutral-900);}
.pf-side-excerpt{margin-top:var(--space-3);padding:var(--space-4);
  border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);
  background:var(--color-neutral-100);font-size:12.5px;line-height:1.7;
  max-height:260px;overflow:hidden;position:relative;}
.pf-side-excerpt::after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;
  background:linear-gradient(transparent,var(--color-neutral-100));}
.pf-side-loading{display:flex;align-items:center;gap:10px;padding:var(--space-8);
  justify-content:center;color:var(--color-neutral-600);font-size:13px;}
.pf-side-spin{width:16px;height:16px;border-radius:50%;
  border:2px solid var(--color-neutral-300);border-top-color:var(--color-accent-600);
  animation:pf-side-spin .7s linear infinite;}
@keyframes pf-side-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.pf-side-spin{animation:none;}}
/* Stop the page behind from scrolling while the panel has focus. */
body.pf-side-locked{overflow:hidden;}

/* Rows that open a panel. The whole row is the target, so it needs to
   look like one and to show which row the open panel belongs to. */
.cr-row{cursor:pointer;}
.cr-row:hover{background:var(--color-neutral-100);}
.cr-row.is-open{background:var(--color-accent-100);
  box-shadow:inset 3px 0 0 var(--color-accent-600);}
.cr-row:focus-visible{outline:2px solid var(--color-accent-600);outline-offset:-2px;}
.cr-row.is-na{cursor:default;}
.cr-row.is-na:hover{background:transparent;}

/* ══════════════════════════════════════════════════════════════════════
   PRODUCT TOUR — SPOTLIGHT COACHMARKS

   Sixth iteration. The page dims, a hole is cut around the one element
   the step is about, and a small card floats beside it with a tail
   pointing at the target. Nothing navigates: the tour runs on whatever
   page the person is already on, which is what let it drop from
   thirteen steps to six.
   ══════════════════════════════════════════════════════════════════ */
.pf-cm-dim{
  position:fixed;inset:0;z-index:948;
  background:rgba(18,26,20,.52);
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
          mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-composite:destination-out;
          mask-composite:exclude;
  -webkit-mask-size:100% 100%,var(--cw,0px) var(--ch,0px);
          mask-size:100% 100%,var(--cw,0px) var(--ch,0px);
  -webkit-mask-position:0 0,var(--cx,0px) var(--cy,0px);
          mask-position:0 0,var(--cx,0px) var(--cy,0px);
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
  transition:-webkit-mask-position .28s cubic-bezier(.32,.72,0,1),
             mask-position .28s cubic-bezier(.32,.72,0,1),
             -webkit-mask-size .28s cubic-bezier(.32,.72,0,1),
             mask-size .28s cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion: reduce){.pf-cm-dim{transition:none;}}

/* The spotlighted element itself is lifted above the wash so the hole
   shows the real, live control rather than a picture of it. */
.pf-tour-spotlight{position:relative;z-index:949;border-radius:8px;}

/* ── The tour card, docked ──────────────────────────────────────────────
   It used to float beside its target with a rotated-square tail. Docking
   it to the bottom edge removed two problems at once: on a short viewport
   with a low target the card could cover the very element it described,
   and the tail needed a four-sided fallback that still crowded the edge
   on narrow screens. Docked, it has exactly one position, so it can never
   obscure the spotlight and there is no tail geometry at all.

   It also stops moving between steps, so the eye is not chasing a card
   around the page while trying to read it. */
.pf-cm{
  position:fixed;z-index:950;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-4);align-items:center;
  padding:var(--space-4) var(--space-5);
  background:var(--color-surface);
  border-top:1px solid var(--color-neutral-300);
  box-shadow:0 -6px 26px color-mix(in srgb, var(--color-neutral-900) 13%, transparent);
  animation:pf-cm-in .26s cubic-bezier(.2,1,.4,1);
  /* Clear of the iOS home indicator when installed to the home screen. */
  padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
@media (prefers-reduced-motion: reduce){.pf-cm{animation:none;}}
@keyframes pf-cm-in{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:none;}}

/* Progress rail on the top edge. Replaces six 6px dot pips, which said
   the same thing in more space and were an awkward click target. */
.pf-cm-rail{position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--color-accent-600);transition:width .3s ease;}
@media (prefers-reduced-motion: reduce){.pf-cm-rail{transition:none;}}

.pf-cm-num{width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--color-accent-600);color:#fff;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}

.pf-cm-main{min-width:0;}
.pf-cm-title{display:block;font-family:var(--font-heading);font-size:14.5px;font-weight:600;
  line-height:1.3;}
.pf-cm-text{margin:2px 0 0;font-size:13px;line-height:1.5;
  color:color-mix(in srgb, var(--color-neutral-900) 74%, transparent);}

.pf-cm-btns{display:flex;gap:6px;align-items:center;}
.pf-cm-of{font-size:12px;color:var(--color-neutral-600);font-variant-numeric:tabular-nums;
  margin-right:var(--space-2);white-space:nowrap;}
.pf-cm-skip,.pf-cm-back,.pf-cm-next{appearance:none;font:inherit;font-size:12.5px;font-weight:600;
  padding:6px 14px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;}
.pf-cm-skip{border:1px solid transparent;background:transparent;color:var(--color-neutral-600);}
.pf-cm-skip:hover{background:var(--color-neutral-100);color:var(--color-text);}
.pf-cm-back{border:1px solid var(--color-neutral-300);background:var(--color-surface);
  color:var(--color-text);}
.pf-cm-back:hover{background:var(--color-neutral-100);}
.pf-cm-next{border:1px solid var(--color-accent-600);background:var(--color-accent-600);color:#fff;}
.pf-cm-next:hover{background:var(--color-accent-700);border-color:var(--color-accent-700);}
.pf-cm-skip:focus-visible,.pf-cm-back:focus-visible,.pf-cm-next:focus-visible{
  outline:2px solid var(--color-accent-600);outline-offset:2px;}

/* Narrow screens: the text takes the full width and the buttons drop to
   their own row, so a long step title never squeezes Next off the edge. */
@media (max-width:640px){
  .pf-cm{grid-template-columns:auto minmax(0,1fr);row-gap:var(--space-3);
    padding:var(--space-3) var(--space-4)
            calc(var(--space-3) + env(safe-area-inset-bottom, 0px));}
  .pf-cm-btns{grid-column:1 / -1;justify-content:flex-end;}
  .pf-cm-of{margin-right:auto;}
  .pf-cm-text{font-size:12.5px;}
}

/* The menu drawer sits at z-index 80, well below the tour's dimming
   wash. On the step that opens it, the drawer must be above the wash or
   the very thing being pointed at is darkened along with everything
   else. Applied by initProductTour() only for the duration of that step. */
.pf-drawer.pf-tour-lift{z-index:949;}

/* =====================================================================
   PHASE 15
   =====================================================================
   Three of the five changes in this drop are stylesheet-only and live
   here, at the end, so they override the historic rules above without
   any of them having to be hunted down and edited:

     (2) one motion scale, applied to every transition in the app
     (4) the dashboard's --cp-* palette promoted to app-wide status colour

   (1), the custom cursor, was a deletion — see the note where those two
   rules used to be, near the top of this file.
   ===================================================================== */


/* ---------------------------------------------------------------------
   4 · COLOUR — one meaning per colour
   ---------------------------------------------------------------------
   --cp-* was declared around line 1970 and consumed almost entirely by
   client/index.php. Every other page fell back to grey chrome plus the
   brand green, so status carried no colour and you had to read the words
   to know whether a row was good or bad.

   These tokens now sit in one place with one meaning each, and the older
   --pf-good/warn/bad trio is re-pointed at them so every pill, tag,
   table and bar already in the app inherits the palette without its
   markup changing.

     good        implemented · signed · accepted · passed
     attention   partial · awaiting review · due soon
     critical    gap · rejected · overdue · blocking
     info        departments · assignment · plain counts
     signature   policy signing progress, and nothing else
     ai          text or a suggestion produced by the engine
     excluded    out of scope · not applicable

   Two guardrails. Colour is never the only carrier of meaning — every
   pill keeps its word, so the interface still reads for a colour-blind
   user and in print. And status colour is confined to pills, stat-tile
   top rules, bar segments and ring strokes; it is not allowed onto page
   backgrounds, because a screen that is mostly red has nothing left to
   say when something is genuinely urgent.
--------------------------------------------------------------------- */
:root{
  /* The semantic layer. --cp-* stays as the raw ramp; these name it. */
  --st-good:var(--cp-good);        --st-good-bg:#e6f2e9;   --st-good-fg:#1f4f2e;
  --st-warn:var(--cp-warn);        --st-warn-bg:#fdf3e2;   --st-warn-fg:#8a5712;
  --st-bad:var(--cp-bad);          --st-bad-bg:#fbeaea;    --st-bad-fg:#8c2b2b;
  --st-info:var(--cp-mini-3);      --st-info-bg:#e5eef9;   --st-info-fg:#284f85;
  --st-sign:var(--cp-mini-1);      --st-sign-bg:#fdf6de;   --st-sign-fg:#7a5b06;
  --st-ai:var(--color-ai-500);     --st-ai-bg:#f0ecff;     --st-ai-fg:#5f3fdb;
  --st-off:var(--color-neutral-400);
}

/* Re-point the historic trio, so nothing has to be renamed anywhere. */
:root{
  --pf-good-bg:var(--st-good-bg); --pf-good-fg:var(--st-good-fg);
  --pf-warn-bg:var(--st-warn-bg); --pf-warn-fg:var(--st-warn-fg); --pf-warn-border:var(--st-warn);
  --pf-bad-bg:var(--st-bad-bg);   --pf-bad-fg:var(--st-bad-fg);
}

/* Pills and tags — one shape, seven tones, both naming conventions.
   A 1px tinted edge is what makes a pale fill legible against the
   surface colour without darkening the fill itself. */
.pf-pill,.tag{border:1px solid transparent;font-weight:600;}
.pf-pill-good,.tag-good      {background:var(--st-good-bg);color:var(--st-good-fg);border-color:color-mix(in srgb,var(--st-good) 26%,transparent);}
.pf-pill-warn,.tag-warn      {background:var(--st-warn-bg);color:var(--st-warn-fg);border-color:color-mix(in srgb,var(--st-warn) 32%,transparent);}
.pf-pill-bad,.tag-bad        {background:var(--st-bad-bg); color:var(--st-bad-fg); border-color:color-mix(in srgb,var(--st-bad) 30%,transparent);}
.pf-pill-info,.tag-info      {background:var(--st-info-bg);color:var(--st-info-fg);border-color:color-mix(in srgb,var(--st-info) 26%,transparent);}
.pf-pill-sign,.tag-sign      {background:var(--st-sign-bg);color:var(--st-sign-fg);border-color:color-mix(in srgb,var(--st-sign) 40%,transparent);}
.pf-pill-ai,.tag-ai          {background:var(--st-ai-bg);  color:var(--st-ai-fg);  border-color:color-mix(in srgb,var(--st-ai) 26%,transparent);}
.pf-pill-attn,.tag-attn      {background:var(--st-warn-bg);color:var(--st-warn-fg);border-color:color-mix(in srgb,var(--st-warn) 32%,transparent);}
.pf-pill-neutral,.tag-neutral{background:var(--color-neutral-200);color:var(--color-neutral-800);
  border-color:color-mix(in srgb,var(--color-neutral-800) 12%,transparent);}
.pf-pill-accent{background:var(--color-accent);color:#fff;border-color:transparent;}

/* Stat tiles — the top rule is the status, the figure repeats it. */
.ui-stat.is-info{--t:var(--st-info);}  .ui-stat.is-info b{color:var(--st-info);}
.ui-stat.is-sign{--t:var(--st-sign);}  .ui-stat.is-sign b{color:var(--st-sign);}
.ui-stat.is-ai{--t:var(--st-ai);}      .ui-stat.is-ai b{color:var(--st-ai);}
.ui-stat.is-off{--t:var(--st-off);}    .ui-stat.is-off b{color:var(--color-neutral-600);}

/* Tables — a status row gets a 3px edge in its own tone rather than a
   tinted background. A tinted row fights the hover state and, repeated
   down 93 rows, is exactly the wash of colour ruled out above. */
.table tbody tr[data-tone]{box-shadow:inset 3px 0 0 0 var(--rt,transparent);}
.table tbody tr[data-tone="good"]{--rt:var(--st-good);}
.table tbody tr[data-tone="warn"]{--rt:var(--st-warn);}
.table tbody tr[data-tone="bad"]{--rt:var(--st-bad);}
.table tbody tr[data-tone="info"]{--rt:var(--st-info);}
.table tbody tr[data-tone="ai"]{--rt:var(--st-ai);}
/* Neutral: excluded / not-applicable / nothing-sent rows. A visible but
   colourless spine, so an N/A row still aligns with its neighbours
   instead of looking like a rendering slip. */
.table tbody tr[data-tone="neutral"]{--rt:var(--color-neutral-300);}

/* Segmented bars and rings pick their fill from the same tokens. */
.cp-seg i[data-tone="good"],.pf-bar i[data-tone="good"]{background:var(--st-good);}
.cp-seg i[data-tone="warn"],.pf-bar i[data-tone="warn"]{background:var(--st-warn);}
.cp-seg i[data-tone="bad"], .pf-bar i[data-tone="bad"]{background:var(--st-bad);}
.cp-seg i[data-tone="info"],.pf-bar i[data-tone="info"]{background:var(--st-info);}
.cp-seg i[data-tone="sign"],.pf-bar i[data-tone="sign"]{background:var(--st-sign);}

/* The consultant side had no --cp-* consumers at all. These are the
   dashboard primitives it was missing, so both sides now draw the same
   donut, the same segmented bar and the same tile. */
.pf-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--space-3);}
.pf-stat{background:var(--color-neutral-100);border:1px solid var(--color-divider);
  border-radius:var(--radius-sm);padding:var(--space-3);border-top:2px solid var(--t,var(--color-accent));}
.pf-stat b{display:block;font-family:var(--font-heading);font-size:23px;font-weight:800;
  line-height:1.1;color:var(--t,var(--color-accent));}
.pf-stat b i{font-style:normal;font-size:14px;color:var(--color-neutral-500);}
.pf-stat span{display:block;font-size:11.5px;color:var(--color-neutral-600);margin-top:1px;}
.pf-stat.is-good{--t:var(--st-good);} .pf-stat.is-warn{--t:var(--st-warn);}
.pf-stat.is-bad{--t:var(--st-bad);}   .pf-stat.is-info{--t:var(--st-info);}
.pf-stat.is-sign{--t:var(--st-sign);} .pf-stat.is-ai{--t:var(--st-ai);}
.pf-stat.is-off{--t:var(--st-off);}   .pf-stat.is-off b{color:var(--color-neutral-600);}


/* ---------------------------------------------------------------------
   2 · MOTION — one scale, three durations
   ---------------------------------------------------------------------
   --ease-spring and --ease-out were already declared but only three
   rules used them. Everything else transitioned at whatever duration was
   convenient when it was written: .12s, .15s, .16s, .2s, .25s, .3s. That
   inconsistency is what made the app feel uneven, and unevenness reads
   as slowness even when nothing is actually slow.

   Three durations, chosen by what the motion is for:

     --dur-fast  120ms  feedback on something you just did
     --dur-base  240ms  a reveal — a panel, a tab, a row opening
     --dur-slow  400ms  a whole surface entering or leaving

   Anything shorter than 120ms is not perceived as motion, and anything
   over 400ms is perceived as waiting.
--------------------------------------------------------------------- */
:root{
  --dur-fast:120ms;
  --dur-base:240ms;
  --dur-slow:400ms;
}

/* Buttons, pills, tabs, nav, inputs and icon controls — feedback speed. */
.btn,.pf-pill,.tag,.pf-tab,.pf-navlink,.pf-drawer-toggle,.pf-drawer-close,
.pf-toast-close,.qn-av-x,.input,select,textarea,.pf-chip{
  transition:background-color var(--dur-fast) var(--ease-out),
             border-color     var(--dur-fast) var(--ease-out),
             color            var(--dur-fast) var(--ease-out),
             box-shadow       var(--dur-fast) var(--ease-out),
             transform        var(--dur-fast) var(--ease-spring);
}
.btn:active,.pf-tab:active,.pf-navlink:active{transform:scale(.97);}
.btn:hover{transform:translateY(-1px);}

/* Cards, rows, tiles, template boxes — reveal speed, and one shared
   lift rather than four slightly different ones. */
.pf-card,.pf-listrow,.pf-actrow,.pf-tpl-box,.pf-layout-card,.qn-deptpick,
.pf-tile,.cp-mini,.pf-stat{
  transition:background-color var(--dur-base) var(--ease-out),
             border-color     var(--dur-base) var(--ease-out),
             box-shadow       var(--dur-base) var(--ease-out),
             transform        var(--dur-base) var(--ease-spring);
}
.pf-card:hover,.pf-tpl-box:hover,.pf-layout-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-md);
}
.table tbody tr{transition:background-color var(--dur-fast) var(--ease-out);}

/* Surfaces — the side panel, its scrim, modals, the chatbot. Slow, and
   eased out rather than sprung: a panel that overshoots looks like it
   was dropped rather than placed. */
.pf-side,.pf-sidepanel,.pf-modal,.pf-chatbot-panel{
  transition:transform var(--dur-slow) var(--ease-out),
             opacity   var(--dur-base) var(--ease-out);
}
.pf-side-scrim,.pf-scrim,.pf-modal-scrim{
  transition:opacity var(--dur-base) var(--ease-out);
}

/* Details/summary disclosure — the marker turns instead of snapping. */
.qn-acc summary .qn-chev,.pf-navdrop > summary svg,.pf-acc-chev{
  transition:transform var(--dur-base) var(--ease-spring);
}
.qn-acc[open] summary .qn-chev,.pf-navdrop[open] > summary svg,
details[open] > summary .pf-acc-chev{transform:rotate(90deg);}

/* One entrance, reused. Any panel, tab pane or freshly-fetched fragment
   that wants to appear rather than blink adds .pf-enter. Having a single
   named animation is the point: thirty bespoke fade-ups are what made
   different parts of the app feel like different products. */
@keyframes pfEnter{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
.pf-enter{animation:pfEnter var(--dur-base) var(--ease-out);}

/* Skeletons — shown while a fetch is in flight instead of an empty box,
   so the layout does not jump when the content lands. */
.pf-skel{border-radius:5px;height:10px;margin-bottom:8px;
  background:linear-gradient(90deg,var(--color-neutral-200) 25%,
                                   var(--color-neutral-100) 50%,
                                   var(--color-neutral-200) 75%);
  background-size:220% 100%;animation:pfShim 1.3s linear infinite;}
@keyframes pfShim{to{background-position:-220% 0;}}

/* Honour the OS setting properly. The per-component reduced-motion rules
   scattered above this block each covered one animation; this covers
   every one, including any added later. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .pf-card:hover,.pf-tpl-box:hover,.pf-layout-card:hover,
  .btn:hover,.btn:active,.pf-tile:hover{transform:none;}
}


/* ---------------------------------------------------------------------
   5 · AI POLICY DRAFTING — template, writing screen, document
   ---------------------------------------------------------------------
   Three stages in one page (client/policy_draft.php). The old flow posted
   the form, covered the screen with .ai-overlay and reloaded; the stages
   here replace each other in place, and the rail above them stays put so
   the writing screen reads as the middle of something.
--------------------------------------------------------------------- */
.pd-wrap{max-width:960px;}
.pd-lede{color:var(--color-neutral-600);font-size:14px;max-width:62ch;}

/* Stage rail */
.pd-rail{list-style:none;display:flex;align-items:center;gap:var(--space-2);
  margin:0 0 var(--space-6);padding:0 0 var(--space-4);
  border-bottom:1px solid var(--color-divider);flex-wrap:wrap;}
.pd-step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--color-neutral-500);
  transition:color var(--dur-base) var(--ease-out);}
.pd-step + .pd-step{margin-left:var(--space-2);}
.pd-step + .pd-step::before{content:'';width:22px;height:1.5px;background:var(--color-neutral-300);
  margin-right:var(--space-2);}
.pd-step i{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-neutral-300);
  display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:800;flex:none;
  transition:background-color var(--dur-base) var(--ease-spring),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);}
.pd-step.is-on{color:var(--color-accent-700);}
.pd-step.is-on i{border-color:var(--color-accent);color:var(--color-accent-700);}
.pd-step.is-done{color:var(--color-accent-600);}
.pd-step.is-done i{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
/* The tick replaces the digit on a completed step. */
.pd-step.is-done i{font-size:0;position:relative;}
.pd-step.is-done i::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

.pd-stage[hidden]{display:none;}
.pd-stage{animation:pfEnter var(--dur-base) var(--ease-out);}

/* Template cards are <button>s inside the picker form, so they submit the
   chosen code with no JavaScript. Stripping the UA button styling is what
   lets them keep looking like the .pf-tpl-box cards used elsewhere. */
.pd-tpl{font:inherit;color:inherit;text-align:left;padding:0;width:100%;
  background:var(--color-bg);border:1px solid var(--color-divider);}
.pd-tpl.is-rec{border-color:var(--color-accent-300);}
.pd-tpl.is-chosen{border-color:var(--color-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 32%,transparent);}

/* ---- Writing screen ---- */
.pd-gen{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--space-6);align-items:center;
  padding:var(--space-6) 0;}
@media (max-width:700px){ .pd-gen{grid-template-columns:1fr;} }

.pd-doc{background:color-mix(in srgb,var(--color-text) 3%,var(--color-bg));
  border:1px solid var(--color-divider);border-radius:var(--radius-sm);
  padding:var(--space-4);position:relative;min-height:200px;overflow:hidden;}
.pd-beam{position:absolute;left:0;right:0;height:38px;pointer-events:none;
  background:linear-gradient(180deg,transparent,
             color-mix(in srgb,var(--color-accent) 16%,transparent),transparent);
  animation:pdBeam 2.2s ease-in-out infinite;}
@keyframes pdBeam{0%{top:-38px;}100%{top:200px;}}
.pd-doc-title{display:block;height:8px;width:58%;border-radius:3px;
  background:var(--color-accent);opacity:.85;margin-bottom:14px;}
.pd-doc-line{display:block;height:6px;border-radius:3px;margin-bottom:8px;width:0;
  background:color-mix(in srgb,var(--color-text) 17%,transparent);
  animation:pdGrow 1.9s var(--ease-out) infinite;animation-delay:var(--d,0s);}
@keyframes pdGrow{0%{width:0;}38%{width:var(--w,72%);}78%{width:var(--w,72%);}100%{width:0;}}
.pd-doc-caret{position:absolute;width:2px;height:12px;background:var(--color-accent);
  left:var(--space-4);bottom:var(--space-4);animation:pdBlink 1s step-end infinite;}
@keyframes pdBlink{0%,100%{opacity:1;}50%{opacity:0;}}

.pd-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);}
.pd-steps li{display:flex;align-items:center;gap:11px;font-size:13px;opacity:.38;
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-spring);}
.pd-steps li.is-on,.pd-steps li.is-done{opacity:1;}
.pd-steps li.is-on{transform:translateX(3px);}
.pd-steps li i{width:19px;height:19px;border-radius:50%;flex:none;box-sizing:border-box;
  border:2px solid var(--color-neutral-300);position:relative;}
.pd-steps li.is-on i{border-color:var(--color-accent);border-top-color:transparent;
  animation:pdSpin .7s linear infinite;}
@keyframes pdSpin{to{transform:rotate(360deg);}}
.pd-steps li.is-done i{background:var(--color-accent);border-color:var(--color-accent);}
.pd-steps li.is-done i::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

.pd-bar{height:5px;border-radius:var(--radius-pill);background:var(--color-neutral-200);
  overflow:hidden;margin-top:var(--space-5);}
.pd-bar i{display:block;height:100%;width:4%;background:var(--color-accent);
  border-radius:var(--radius-pill);transition:width var(--dur-slow) var(--ease-out);}

/* ---- Finished document ---- */
.pd-donebar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);
  background:var(--color-neutral-100);border:1px solid var(--color-divider);
  border-radius:var(--radius-md);}
.pd-donebar-sp{margin-left:auto;display:flex;gap:var(--space-2);flex-wrap:wrap;}
@media (max-width:560px){ .pd-donebar-sp{margin-left:0;width:100%;} }
.pd-preview{max-height:70vh;overflow-y:auto;}

/* With the beam and the growing lines stilled, the writing screen would
   be four grey circles and nothing else, so the active step keeps a
   plain opacity change to show which one is running. */
@media (prefers-reduced-motion: reduce){
  .pd-beam,.pd-doc-caret{display:none;}
  .pd-doc-line{animation:none;width:var(--w,72%);}
  .pd-steps li.is-on i{animation:none;border-top-color:var(--color-accent);}
}


/* ---------------------------------------------------------------------
   3 · CONSULTANT CLIENT WORKSPACE
   ---------------------------------------------------------------------
   consultant/project.php. Seven tabs over one engagement, in the same
   palette and at the same motion scale as everything above, so the
   consultant side stops looking like a different product from the client
   side.
--------------------------------------------------------------------- */

/* A small button. The view uses this heavily — a table row full of
   full-size buttons is mostly buttons. Declared here rather than in
   ds.css because it is a density variant of .btn, not a new component. */
.btn-sm{font-size:12px;padding:5px 11px;}

/* ---- Header ---- */
.eng-head{display:flex;gap:var(--space-4);align-items:flex-start;flex-wrap:wrap;
  margin-bottom:var(--space-5);}
.eng-head-main{min-width:0;}
.eng-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-neutral-500);}
.eng-title{margin:var(--space-1) 0;font-size:29px;}
.eng-meta{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--color-neutral-600);}
.eng-head-acts{margin-left:auto;display:flex;gap:var(--space-2);flex-wrap:wrap;}
@media (max-width:760px){ .eng-head-acts{margin-left:0;width:100%;} }

/* ---- Tabs ----
   Real anchors. The scroll container hides its bar on the small screens
   where the row overflows, and each tab keeps its full label — truncating
   "Departments & people" to "Depts" saves 40px and costs the meaning. */
.eng-tabs{display:flex;gap:var(--space-5);overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--color-divider);margin-bottom:var(--space-5);}
.eng-tabs::-webkit-scrollbar{display:none;}
.eng-tab{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--color-neutral-600);
  padding:var(--space-3) 0;position:relative;text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);}
.eng-tab:hover{color:var(--color-text);text-decoration:none;}
.eng-tab.is-on{color:var(--color-accent-700);}
.eng-tab.is-on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--color-accent);border-radius:2px;
  animation:engInk var(--dur-base) var(--ease-spring);}
@keyframes engInk{from{transform:scaleX(.25);opacity:0;}to{transform:scaleX(1);opacity:1;}}
.eng-tab-n{min-width:17px;padding:0 5px;font-size:10.5px;font-weight:800;text-align:center;
  border-radius:var(--radius-pill);background:var(--color-neutral-200);
  color:var(--color-neutral-700);}
.eng-tab.is-on .eng-tab-n{background:var(--color-accent-100);color:var(--color-accent-800);}

.eng-lede{color:var(--color-neutral-600);font-size:13.5px;max-width:76ch;
  margin:0 0 var(--space-4);}

/* ---- Filter chips ---- */
.eng-chips{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4);}
.eng-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  padding:5px 12px;border-radius:var(--radius-pill);text-decoration:none;
  background:var(--color-neutral-100);color:var(--color-neutral-700);
  border:1px solid var(--color-divider);
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);}
.eng-chip:hover{background:var(--color-neutral-200);text-decoration:none;}
.eng-chip.is-on{background:var(--color-accent);color:#fff;border-color:transparent;}
.eng-chip b{font-weight:800;opacity:.75;}
.eng-deptfilter{display:flex;gap:var(--space-2);margin-bottom:var(--space-4);max-width:320px;}

/* ---- Overview ---- */
.eng-ringrow{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap;
  margin-top:var(--space-3);}
.eng-metric{margin-bottom:var(--space-3);font-size:12.5px;}
.eng-metric:last-child{margin-bottom:0;}
.eng-metric .pf-between{margin-bottom:4px;}
.eng-legend{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-2);
  font-size:11.5px;color:var(--color-neutral-600);}
.eng-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;}

.eng-attn{display:flex;gap:10px;align-items:flex-start;padding:var(--space-3) var(--space-2);
  border-radius:var(--radius-sm);text-decoration:none;color:inherit;
  border-bottom:1px solid var(--color-divider);
  transition:background-color var(--dur-fast) var(--ease-out);}
.eng-attn:last-child{border-bottom:0;}
.eng-attn:hover{background:var(--color-neutral-100);text-decoration:none;}
.eng-attn-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px;
  background:var(--color-neutral-400);}
.eng-attn-dot[data-tone="bad"]{background:var(--st-bad);}
.eng-attn-dot[data-tone="warn"]{background:var(--st-warn);}
.eng-attn-txt{min-width:0;}
.eng-attn-txt b{display:block;font-size:13px;font-weight:600;}
.eng-attn-txt span{display:block;font-size:12px;}
.eng-gap{padding:var(--space-2) 0;border-bottom:1px solid var(--color-divider);}
.eng-gap:last-child{border-bottom:0;}

/* ---- Departments ---- */
.eng-dept{display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) 190px auto;
  gap:var(--space-3);align-items:center;
  padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);}
.eng-dept:last-child{border-bottom:0;}
@media (max-width:900px){ .eng-dept{grid-template-columns:1fr;} }
.eng-dept.is-unstaffed{box-shadow:inset 3px 0 0 0 var(--st-bad);padding-left:var(--space-3);}
.eng-dept.is-out{opacity:.55;}
.eng-dept-name b{display:block;font-size:13.5px;}
.eng-dept-name span{display:block;font-size:12px;}
.eng-dept-people{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.eng-person{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  background:var(--color-neutral-100);border:1px solid var(--color-divider);
  border-radius:var(--radius-pill);padding:2px 4px 2px 2px;}
.eng-person i{width:20px;height:20px;border-radius:50%;flex:none;font-style:normal;
  font-size:9px;font-weight:800;display:grid;place-items:center;
  background:var(--color-accent-200);color:var(--color-accent-800);}
.eng-person-x{border:0;background:transparent;cursor:pointer;font-size:14px;line-height:1;
  padding:0 3px;color:var(--color-neutral-500);}
.eng-person-x:hover{color:var(--st-bad);}
.eng-dept-bar{font-size:11.5px;}
.eng-dept-bar .cp-seg{margin-bottom:3px;}
.eng-dept-assign{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.eng-dept-assign .input{min-height:30px;font-size:12px;width:auto;max-width:190px;}
.eng-lead{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  color:var(--color-neutral-600);}

/* ---- Questionnaire ---- */
.eng-qa{border:1px solid var(--color-divider);border-radius:var(--radius-md);
  padding:var(--space-4);margin-bottom:var(--space-3);background:var(--color-bg);
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);}
.eng-qa:hover{border-color:var(--color-accent-300);box-shadow:var(--shadow-sm);}
.eng-qa.is-flagged{border-color:color-mix(in srgb,var(--st-warn) 55%,transparent);
  box-shadow:inset 3px 0 0 0 var(--st-warn);}
.eng-qa-q{font-size:13.5px;font-weight:600;}
.eng-qa-a{font-size:13px;background:var(--color-neutral-100);border-radius:8px;
  padding:8px 11px;margin:var(--space-2) 0;}
.eng-qa-note{margin:0 0 var(--space-2);padding:6px 11px;font-size:12.5px;font-style:italic;
  border-left:2px solid var(--color-divider);color:var(--color-neutral-600);}
.eng-qa-meta{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;font-size:12px;}
.eng-qa-flag{margin-top:var(--space-2);padding:7px 11px;border-radius:8px;font-size:12.5px;
  background:var(--st-warn-bg);color:var(--st-warn-fg);}
.eng-qa-acts{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;
  margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--color-divider);}
.eng-qa-acts form{margin:0;}
.eng-flagform{display:flex;gap:6px;flex:1;min-width:230px;}
.eng-flagform .input{min-height:30px;font-size:12.5px;}

/* ---- Evidence ---- */
.eng-ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);
  align-items:start;padding:var(--space-3) var(--space-4);margin-bottom:var(--space-2);
  border:1px solid var(--color-divider);border-radius:var(--radius-md);
  background:var(--color-bg);
  transition:background-color var(--dur-fast) var(--ease-out);}
.eng-ev:hover{background:var(--color-neutral-100);}
.eng-ev[data-tone="warn"]{box-shadow:inset 3px 0 0 0 var(--st-warn);}
.eng-ev[data-tone="bad"]{box-shadow:inset 3px 0 0 0 var(--st-bad);}
.eng-ev[data-tone="good"]{box-shadow:inset 3px 0 0 0 var(--st-good);}
.eng-ev-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:9px;font-weight:800;background:var(--st-info-bg);color:var(--st-info-fg);}
.eng-ev-main{min-width:0;font-size:13px;}
.eng-ev-main b{display:block;word-break:break-word;}
.eng-ev-why{margin-top:5px;padding:6px 10px;border-radius:8px;font-size:12.5px;
  background:var(--st-bad-bg);color:var(--st-bad-fg);}
.eng-ev-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.eng-ev-acts form{margin:0;}
.eng-ev-reject{grid-column:1/-1;display:flex;gap:6px;padding-top:var(--space-2);
  border-top:1px solid var(--color-divider);margin:0;}
.eng-ev-reject .input{min-height:30px;font-size:12.5px;}
@media (max-width:640px){
  .eng-ev{grid-template-columns:auto minmax(0,1fr);}
  .eng-ev-acts{grid-column:1/-1;}
}

/* ---- Awareness ---- */
.eng-assign summary{cursor:pointer;font-size:13px;font-weight:600;
  color:var(--color-accent-700);padding:var(--space-2) 0;}
.eng-people{border:1px solid var(--color-divider);border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);margin:var(--space-3) 0 0;
  max-height:210px;overflow-y:auto;}
.eng-people legend{font-size:11.5px;color:var(--color-neutral-600);padding:0 4px;}
.eng-people-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 0;}
.eng-people-row span:first-of-type{flex:1;min-width:0;}

/* The consultant's flag, shown to the client on the question it concerns.
   Sits above the answer options because it is meant to change the answer,
   not to be read after one has been given. */
.qn-flagnote{background:var(--st-warn-bg);color:var(--st-warn-fg);
  border:1px solid color-mix(in srgb,var(--st-warn) 40%,transparent);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  margin:0 0 var(--space-4);font-size:13.5px;}
.qn-flagnote strong{display:block;margin-bottom:3px;}
.qn-flagnote p{margin:0;}
.qn-flagnote-when{display:block;margin-top:4px;font-size:11.5px;opacity:.75;}
/* A rejected evidence file, as the client sees it on the control. */
.cr-ev-rejected{margin-top:4px;font-size:12px;padding:5px 9px;border-radius:7px;
  background:var(--st-bad-bg);color:var(--st-bad-fg);}
.cr-ev-rejected strong{font-weight:700;}

/* ══════════════════════════════════════════════════════════════════════
   B1 — Department cards (consultant → client workspace → Departments)

   Replaces the old flat .eng-dept rows. Three ideas carry the design:

     1. Each department owns a hue, applied only as a 3px left spine via
        --dept-hue. Colour identifies, it never fills — so a person learns
        "amber is Operations" and finds it without reading, while the card
        itself stays as quiet as every other card.
     2. An unstaffed department drops its hue and turns red. "Needs action"
        has to outrank "is Procurement", so staffing state wins the spine.
     3. Progress is a ring, not a bar. A bar in a card competes with the
        card's own edges; a ring reads as a single object at 46px and puts
        the number inside itself instead of next to it.

   The hues are one even sweep round the wheel at matched lightness and
   chroma, so no department looks more important than another.
   ══════════════════════════════════════════════════════════════════ */
.eng-deptgrid{display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));}

.eng-dcard{--dept-hue:var(--color-accent-500);
  display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--color-surface);border:1px solid var(--color-neutral-300);
  border-left:3px solid var(--dept-hue);border-radius:var(--radius-md);
  padding:var(--space-4);}
/* All ten codes in categories.sort_order, one even 36-degree sweep round the
   wheel at matched lightness and chroma, so adjacent departments stay
   distinguishable and none looks more important than another. */
[data-dept="EXEC"]  {--dept-hue:oklch(0.54 0.13 285);} /* 1  Executive   */
[data-dept="LEGAL"] {--dept-hue:oklch(0.54 0.13 249);} /* 2  Legal       */
[data-dept="PEOPLE"]{--dept-hue:oklch(0.56 0.13 213);} /* 3  People      */
[data-dept="HR"]    {--dept-hue:oklch(0.56 0.13 177);} /* 4  HR          */
[data-dept="IT"]    {--dept-hue:oklch(0.55 0.13 141);} /* 5  IT          */
[data-dept="ENG"]   {--dept-hue:oklch(0.60 0.13 105);} /* 6  Engineering */
[data-dept="OPS"]   {--dept-hue:oklch(0.64 0.14 69);}  /* 7  Operations  */
[data-dept="PROC"]  {--dept-hue:oklch(0.60 0.15 33);}  /* 8  Procurement */
[data-dept="FAC"]   {--dept-hue:oklch(0.56 0.15 357);} /* 9  Facilities  */
[data-dept="FIN"]   {--dept-hue:oklch(0.55 0.14 321);} /* 10 Finance     */

/* Staffing state outranks identity. */
.eng-dcard.is-unstaffed{--dept-hue:var(--st-bad);
  border-color:var(--st-bad);background:var(--st-bad-bg);}
.eng-dcard.is-out{opacity:.6;}

.eng-dcard-head{display:grid;grid-template-columns:46px minmax(0,1fr);
  gap:var(--space-3);align-items:center;}
.eng-dcode{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--dept-hue);}
.eng-dcard-head h4{margin:0;font-size:14.5px;line-height:1.25;}
.eng-dmeta{font-size:11.5px;color:var(--color-neutral-600);}

/* Progress ring. conic-gradient + a punched-out centre: no SVG, no JS. */
.eng-dring{width:46px;height:46px;border-radius:50%;position:relative;flex:none;
  background:conic-gradient(var(--ring-tone,var(--dept-hue))
    calc(var(--pct,0) * 1%), var(--cp-track) 0);}
.eng-dring::after{content:attr(data-pct);position:absolute;inset:5px;
  background:var(--color-surface);border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:var(--color-text);}
.eng-dcard.is-unstaffed .eng-dring::after{background:var(--st-bad-bg);}

.eng-dcard-people{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.eng-dslot{border:1.5px dashed var(--st-bad);border-radius:var(--radius-sm);
  padding:var(--space-3);text-align:center;font-size:12.5px;color:var(--st-bad-fg);
  background:var(--color-surface);}
.eng-dslot b{display:block;font-size:13px;}
.eng-dcard-foot{margin-top:auto;padding-top:var(--space-2);
  border-top:1px solid var(--color-neutral-200);}
.eng-dcard-foot .eng-dept-assign{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0;}
.eng-dcard-foot .input{min-height:30px;font-size:12px;flex:1;min-width:130px;}

/* ══════════════════════════════════════════════════════════════════════
   D1 — Controls grouped by Annex A theme

   93 rows is too many for one flat table, and a register where 57 rows say
   "implemented" is mostly noise. Annex A's own four themes are the natural
   grouping, and each header carries its own progress so a section still
   tells you something before you read a single row.

   Status colour sits on the row's left edge rather than inside it, so 93
   rows can be scanned for red without the text fighting a wall of colour.
   Only gaps get a tinted background — the state that needs work is the
   only one that changes the row's weight.

   The status buttons are real submit buttons in one form (name="status",
   distinct values), so setting a status is one click and needs no
   JavaScript, unlike the select-then-Set pair it replaces.
   ══════════════════════════════════════════════════════════════════ */
.eng-theme{margin-bottom:var(--space-6);}
.eng-theme-head{display:grid;grid-template-columns:minmax(140px,auto) minmax(80px,1fr) auto auto;
  gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-3);
  border-bottom:1px solid var(--color-neutral-300);}
.eng-theme-head h3{margin:0;font-size:15px;}
.eng-theme-head .cp-seg{max-width:220px;}
.eng-theme-count{font-size:12px;color:var(--color-neutral-600);white-space:nowrap;}

.eng-ctrl{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;
  gap:var(--space-3);align-items:center;padding:var(--space-3);
  border-bottom:1px solid var(--color-neutral-200);border-left:3px solid transparent;}
.eng-ctrl:last-child{border-bottom:0;}
.eng-ctrl[data-tone="good"]{border-left-color:var(--st-good);}
.eng-ctrl[data-tone="warn"]{border-left-color:var(--st-warn);}
.eng-ctrl[data-tone="bad"] {border-left-color:var(--st-bad);
  background:color-mix(in srgb, var(--st-bad-bg) 45%, transparent);}
.eng-ctrl[data-tone="neutral"]{border-left-color:var(--color-neutral-300);opacity:.72;}
.eng-ctrl.is-closed{border-left-style:double;border-left-width:4px;}
.eng-ctrl-ref{font-size:12.5px;font-weight:700;color:var(--color-neutral-700);
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.eng-ctrl-title{font-weight:600;font-size:13.5px;line-height:1.3;}
.eng-ctrl-brief{font-size:11.5px;color:var(--color-neutral-600);line-height:1.4;}

/* Segmented status. Each button posts its own value. */
.eng-seg{display:inline-flex;border:1px solid var(--color-neutral-300);
  border-radius:var(--radius-sm);overflow:hidden;margin:0;}
.eng-seg button{border:0;border-right:1px solid var(--color-neutral-300);
  background:var(--color-surface);font:inherit;font-size:11.5px;font-weight:600;
  padding:5px 10px;cursor:pointer;color:var(--color-neutral-600);white-space:nowrap;}
.eng-seg button:last-child{border-right:0;}
.eng-seg button:hover{background:var(--color-neutral-100);color:var(--color-text);}
.eng-seg button[aria-pressed="true"][value="implemented"]   {background:var(--st-good);color:#fff;}
.eng-seg button[aria-pressed="true"][value="partial"]       {background:var(--st-warn);color:#fff;}
.eng-seg button[aria-pressed="true"][value="gap"]           {background:var(--st-bad); color:#fff;}
.eng-seg button[aria-pressed="true"][value="not_applicable"]{background:var(--color-neutral-600);color:#fff;}
.eng-ctrl-act{display:flex;gap:6px;align-items:center;justify-self:end;}

@media (max-width:820px){
  .eng-ctrl{grid-template-columns:64px minmax(0,1fr);row-gap:var(--space-2);}
  .eng-ctrl-act{grid-column:1/-1;justify-self:start;flex-wrap:wrap;}
  .eng-seg{flex-wrap:wrap;}
  .eng-theme-head{grid-template-columns:1fr auto;}
  .eng-theme-head .cp-seg{grid-column:1/-1;max-width:none;}
}

/* ══════════════════════════════════════════════════════════════════════
   The department hue map above is keyed on [data-dept] alone, so the
   client's own department cards inherit exactly the same colour as the
   consultant's. A department is the same colour to both sides of the
   engagement — that is the point of coding it by hue at all.
   ══════════════════════════════════════════════════════════════════ */
.qn-deptcard{border-left:3px solid var(--dept-hue,var(--color-accent-500));}
.qn-deptcard.is-unstaffed{--dept-hue:var(--st-bad);
  border-color:var(--st-bad);background:var(--st-bad-bg);}
.qn-deptcard[data-tone="good"]{--dept-hue:var(--st-good);}

/* ══════════════════════════════════════════════════════════════════════
   v23.6 — THE ANSWERING SCREEN

   Three columns. The department rail keeps your place, the middle column
   is the question, and the right column is everything you need WHILE
   answering it: what good looks like, what the answer will produce, and
   somewhere to put the proof. Those three used to sit underneath the
   options, which is after the decision has been made.

   The right column collapses below the question at 1220px and the whole
   thing stacks at 900px, so the phone layout is still one thing at a time.
   ══════════════════════════════════════════════════════════════════ */
.fm-3{grid-template-columns:212px minmax(0,1fr) 312px;gap:var(--space-5);}
.fm-main{min-width:0;}

.fm-side{min-width:0;}
.fm-side-in{position:sticky;top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);}
.fm-side .pf-airec{margin:0;}
.fm-ai ul{margin:0;padding-left:15px;}
.fm-ai li{margin-bottom:6px;font-size:12.5px;line-height:1.55;}
.fm-ai li:last-child{margin-bottom:0;}

/* The worked examples, inside the insight card rather than as a block of
   their own above the options. They lead, because their job is to settle
   what the question means before a choice is made, and they are separated
   from the auditor tips by a rule so the card still reads as two things. */
.fm-ai-eg > span{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;opacity:.65;margin-bottom:4px;}
.fm-ai-eg li{font-style:italic;}
.fm-ai-tips{margin-top:10px !important;padding-top:10px;border-top:1px solid #cfe8d6;}
.fm-ai-eg + .fm-ai-tips{margin-top:10px;}

.fm-side-card{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  background:var(--color-bg);padding:var(--space-4);}
.fm-side-t{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--color-neutral-700);
  margin-bottom:var(--space-3);}
/* Label above value rather than beside it. In a 312px column a side-by-side
   pair gives the label a fixed track that the longest of them ("CONTROLS")
   overflows, so it ran into the value next to it. */
.fm-side-row{font-size:12.5px;line-height:1.5;margin-bottom:10px;}
.fm-side-row:last-child{margin-bottom:0;}
.fm-side-k{display:block;font-weight:700;color:var(--color-neutral-600);font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.fm-side-chips{display:flex;flex-wrap:wrap;gap:4px;}

/* ---- evidence box ---- */
.fm-ev-hint{margin:0 0 var(--space-3);font-size:12.5px;line-height:1.55;opacity:.75;}
.fm-ev-list{list-style:none;margin:0 0 var(--space-3);padding:0;display:flex;
  flex-direction:column;gap:6px;}
.fm-ev-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:6px;background:var(--color-neutral-100);border:1px solid var(--color-neutral-200);
  border-radius:var(--radius-sm);padding:7px 9px;}
.fm-ev-list a{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--color-accent-800);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.fm-ev-list a:hover{text-decoration:underline;}
.fm-ev-meta{grid-column:1;font-size:10.5px;opacity:.6;}
.fm-ev-x{grid-column:2;grid-row:1/3;}
.fm-ev-x button{border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1;
  opacity:.4;padding:0 2px;color:inherit;}
.fm-ev-x button:hover{opacity:1;color:var(--pf-bad-fg);}
.fm-ev-up{display:flex;flex-direction:column;gap:6px;}
.fm-ev-up input[type=file]{font-size:11.5px;padding:7px 8px;}
.fm-ev-note{margin:var(--space-2) 0 0;font-size:10.5px;line-height:1.5;opacity:.6;}

/* ---- answered-for-you note ---- */
.qn-autonote{background:var(--pf-good-bg);border:1px solid var(--color-accent-300);
  border-radius:var(--radius-sm);padding:11px 13px;margin:0 0 var(--space-4);}
.qn-autonote strong{display:block;font-size:12.5px;color:var(--pf-good-fg);margin-bottom:3px;}
.qn-autonote p{margin:0;font-size:12px;line-height:1.55;opacity:.8;}

/* The jump strip and the exclusions list are a row of their own beneath
   both columns, rather than the tail of the question column. Left inside
   it, they pushed the guidance column below thirty-odd question pills the
   moment the layout dropped to two columns. */
.fm-strip{grid-column:2/-1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}

/* Laptop widths keep all three columns — just tighter. Losing the
   guidance column at 1220px took it away from most 13-inch screens, which
   is exactly where it is most useful. */
@media (max-width:1240px){
  .fm-3{grid-template-columns:186px minmax(0,1fr) 274px;gap:var(--space-4);}
}
@media (max-width:1024px){
  .fm-3{grid-template-columns:186px minmax(0,1fr);}
  .fm-side{grid-column:2/-1;}
  .fm-side-in{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    align-items:start;}
}
@media (max-width:900px){
  .fm-3{grid-template-columns:1fr;}
  .fm-side,.fm-strip{grid-column:1/-1;}
  .fm-side-in{grid-template-columns:1fr;}
  /* Stacked, the department rail is ten rows tall and would push the
     question itself off the first screen. The question comes first, the
     guidance under it, then the jump strip, and the rail last — where it
     is a navigation footer rather than a wall to scroll past. */
  .fm-3 .fm-main{order:1;}
  .fm-3 .fm-side{order:2;}
  .fm-3 .fm-strip{order:3;}
  .fm-3 .fm-rail{order:4;}
}

/* ══════════════════════════════════════════════════════════════════════
   v23.8 — THE TWO COMPANY-PROFILE PICKERS

   One layout serves both: 89 product tiles and 74 policy cards are the
   same interaction over different content, so they share a header, a
   search, grouped sections with their own hue and counter, a card grid,
   and a sticky action bar.

   The bar is the part that matters. Ten groups deep, a Save button that
   exists only at the bottom of the page means scrolling past everything
   you have already decided in order to commit it — so it follows you, and
   carries the live count of what is ticked.
   ══════════════════════════════════════════════════════════════════ */
.pk{padding-bottom:84px;}

/* ---- header ---- */
.pk-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);
  align-items:start;border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);
  background:var(--color-bg);padding:var(--space-5) var(--space-6);}
.pk-head-t h2{font-size:21px;line-height:1.25;margin:var(--space-2) 0 var(--space-2);max-width:48ch;}
.pk-head-t > p{font-size:13.5px;line-height:1.6;opacity:.7;margin:0 0 var(--space-4);max-width:68ch;}
.pk-head-n{text-align:right;border-left:1px solid var(--color-neutral-200);
  padding-left:var(--space-5);min-width:104px;}
.pk-head-n b{display:block;font-size:30px;font-weight:800;line-height:1;
  color:var(--color-accent-700);font-variant-numeric:tabular-nums;}
.pk-head-n span{display:block;font-size:11.5px;opacity:.6;margin-top:4px;}

/* ---- search ---- */
.pk-search{position:relative;margin:var(--space-4) 0 var(--space-2);}
.pk-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  opacity:.4;pointer-events:none;}
.pk-search input{width:100%;padding-left:38px;padding-top:11px;padding-bottom:11px;
  font-size:14px;}

/* ---- a group ---- */
.pk-group{margin-top:var(--space-6);}
.pk-group-h{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:var(--space-3);
  align-items:center;padding-bottom:var(--space-3);margin-bottom:var(--space-3);
  border-bottom:1px solid var(--color-neutral-200);}
.pk-group-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--dept-hue,var(--color-accent-600));
  background:color-mix(in oklch, var(--dept-hue,var(--color-accent-600)) 12%, transparent);
  border:1px solid color-mix(in oklch, var(--dept-hue,var(--color-accent-600)) 26%, transparent);}
.pk-group-t{min-width:0;}
.pk-group-t b{display:block;font-size:14.5px;font-weight:700;line-height:1.3;}
.pk-group-t em{display:block;font-style:normal;font-size:12px;opacity:.58;margin-top:2px;}
.pk-group-n{flex:0 0 auto;font-size:12px;opacity:.6;font-variant-numeric:tabular-nums;
  background:var(--color-neutral-100);border-radius:var(--radius-pill);padding:4px 11px;}
.pk-group-n b{font-weight:800;opacity:1;color:var(--dept-hue,var(--color-accent-700));}
.pk-group > textarea{width:100%;}

/* ---- the card grid ---- */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px;}
.pk-grid-wide{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));}

.pk-tile{display:block;cursor:pointer;position:relative;}
.pk-tile input{position:absolute;opacity:0;pointer-events:none;}
.pk-tile-b{display:grid;grid-template-columns:36px minmax(0,1fr) 20px;gap:11px;align-items:center;
  height:100%;box-sizing:border-box;background:var(--color-bg);
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);padding:12px 13px;
  transition:border-color .13s ease, background .13s ease, box-shadow .13s ease;}
.pk-tile:hover .pk-tile-b{border-color:color-mix(in oklch, var(--dept-hue,var(--color-accent-600)) 55%, transparent);
  box-shadow:0 1px 3px color-mix(in srgb,#2d2b2b 9%,transparent);}
.pk-tile-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--color-neutral-100);border:1px solid var(--color-neutral-200);
  font-size:12px;font-weight:800;letter-spacing:.01em;color:var(--color-neutral-700);
  transition:all .13s ease;overflow:hidden;}
/* A real vendor logo sits on white in both themes. Brand marks are drawn
   for a light background and several are near-black; tinting the plate with
   the group hue, as the lettermark tiles are, would make half of them
   disappear. */
.pk-tile-ic.has-logo{background:#fff;border-color:var(--color-neutral-300);}
.pk-tile-ic img{width:22px;height:22px;object-fit:contain;display:block;}
.pk-tile-t{min-width:0;}
.pk-tile-t b{display:block;font-size:13.5px;font-weight:650;line-height:1.3;}
.pk-tile-t em{display:block;font-style:normal;font-size:11.5px;line-height:1.5;opacity:.6;
  margin-top:3px;}
.pk-tick{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--color-neutral-300);color:transparent;transition:all .13s ease;}

.pk-tile input:checked ~ .pk-tile-b{
  border-color:var(--dept-hue,var(--color-accent-600));
  background:color-mix(in oklch, var(--dept-hue,var(--color-accent-600)) 7%, var(--color-bg));
  box-shadow:inset 0 0 0 1px var(--dept-hue,var(--color-accent-600));}
.pk-tile input:checked ~ .pk-tile-b .pk-tile-ic{
  background:color-mix(in oklch, var(--dept-hue,var(--color-accent-600)) 16%, transparent);
  border-color:color-mix(in oklch, var(--dept-hue,var(--color-accent-600)) 34%, transparent);
  color:var(--dept-hue,var(--color-accent-800));}
.pk-tile input:checked ~ .pk-tile-b .pk-tile-ic.has-logo{background:#fff;
  border-color:color-mix(in oklch, var(--dept-hue,var(--color-accent-600)) 40%, transparent);}
.pk-tile input:checked ~ .pk-tile-b .pk-tick{background:var(--dept-hue,var(--color-accent-600));
  border-color:var(--dept-hue,var(--color-accent-600));color:#fff;}
.pk-tile input:focus-visible ~ .pk-tile-b{outline:2px solid var(--color-accent-700);outline-offset:2px;}

/* ---- the policy variant: a checkbox, not a product mark ---- */
.pk-tile-doc .pk-tile-b{grid-template-columns:20px minmax(0,1fr);align-items:start;padding:13px 14px;}
.pk-box{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;margin-top:1px;
  border:1.5px solid var(--color-neutral-400);color:transparent;transition:all .13s ease;}
.pk-tile-doc input:checked ~ .pk-tile-b .pk-box{background:var(--dept-hue,var(--color-accent-600));
  border-color:var(--dept-hue,var(--color-accent-600));color:#fff;}
.pk-chip{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:10.5px;
  font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--pf-good-bg);color:var(--pf-good-fg);}

.pk-empty{margin-top:var(--space-5);padding:var(--space-6);text-align:center;
  border:1px dashed var(--color-neutral-400);border-radius:var(--radius-md);
  font-size:13px;opacity:.7;}
.pk-tile[hidden],.pk-group[hidden],.pk-empty[hidden]{display:none;}

/* ---- the upload half of the policy step ---- */
.pk-uploads{margin-top:var(--space-6);border:1px solid var(--color-neutral-300);
  border-radius:var(--radius-lg);background:var(--color-bg);overflow:hidden;}
.pk-uploads-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:var(--space-4) var(--space-5);background:var(--color-neutral-100);
  border-bottom:1px solid var(--color-neutral-200);}
.pk-uploads-h b{display:block;font-size:14px;}
.pk-uploads-h em{display:block;font-style:normal;font-size:12.5px;opacity:.62;margin-top:3px;
  max-width:66ch;}
.pk-uploads-n{text-align:right;flex:0 0 auto;}
.pk-uploads-n b{font-size:22px;font-weight:800;line-height:1;color:var(--color-accent-700);
  font-variant-numeric:tabular-nums;}
.pk-uploads-n span{display:block;font-size:11px;opacity:.6;margin-top:3px;}
.pk-upl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:center;
  padding:11px var(--space-5);border-bottom:1px solid var(--color-neutral-200);
  border-left:3px solid transparent;}
.pk-upl:last-child{border-bottom:0;}
.pk-upl.is-done{border-left-color:var(--color-accent-500);background:var(--color-accent-100);}
.pk-upl-t b{display:block;font-size:13px;font-weight:650;}
.pk-upl-t em{display:block;font-style:normal;font-size:11.5px;opacity:.6;margin-top:2px;}
.pk-upl-file{display:flex;align-items:center;gap:5px;color:var(--pf-good-fg);opacity:.95 !important;
  font-weight:600;}
.pk-upl-f{display:flex;gap:6px;align-items:center;}
.pk-upl-f input[type=file]{font-size:11.5px;padding:6px 8px;max-width:220px;}

/* ---- the sticky action bar ---- */
.pk-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
  margin-top:var(--space-6);padding:var(--space-3) var(--space-5);
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 -2px 14px color-mix(in srgb,#2d2b2b 10%,transparent);}
.pk-bar-n{font-size:13px;}
.pk-bar-n b{font-size:17px;font-weight:800;color:var(--color-accent-700);
  font-variant-numeric:tabular-nums;margin-right:2px;}
.pk-bar-n em{display:block;font-style:normal;font-size:11.5px;opacity:.6;margin-top:1px;}
.pk-bar-a{display:flex;gap:8px;flex-wrap:wrap;}
/* The assistant's floating button is fixed at bottom-right on every page
   (.pf-chatbot, 56px + 20px inset). Without this the primary action sits
   underneath it, which is exactly the button you least want covered. */
.pk-bar{padding-right:calc(var(--space-5) + 64px);}
@media (max-width:640px){ .pk-bar{padding-right:var(--space-5);padding-bottom:76px;} }

@media (max-width:640px){
  .pk-head{grid-template-columns:1fr;}
  .pk-head-n{border-left:0;padding-left:0;text-align:left;
    border-top:1px solid var(--color-neutral-200);padding-top:var(--space-3);}
  .pk-bar{flex-direction:column;align-items:stretch;}
  .pk-bar-a{justify-content:stretch;}
  .pk-bar-a .btn{flex:1;justify-content:center;}
  .pk-upl{grid-template-columns:1fr;}
  .pk-upl-f input[type=file]{max-width:none;}
}
@media (prefers-reduced-motion: reduce){
  .pk-tile-b,.pk-tick,.pk-box,.pk-tile-ic{transition:none;}
}

/* ---- what the profile already settled, shown on the board ---- */
.qn-intake{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) auto;
  gap:var(--space-5);align-items:center;border:1px solid var(--color-accent-300);
  background:var(--color-accent-100);border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6);}
.qn-intake-i{display:flex;gap:var(--space-3);align-items:center;}
.qn-intake-n{flex:0 0 auto;font-size:24px;font-weight:800;color:var(--color-accent-800);
  line-height:1;min-width:34px;}
.qn-intake-i b{display:block;font-size:13px;font-weight:650;}
.qn-intake-i em{display:block;font-style:normal;font-size:11.5px;opacity:.68;margin-top:2px;}
.qn-intake-a{display:flex;gap:6px;flex-wrap:wrap;}
@media (max-width:760px){
  .qn-intake{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════════════════
   v23.7 — THE CONTROL REGISTER AS A LIST OF WORK

   The row leads with the job. The standard's own title for the control
   sits under it in small caps-height text: present, because an auditor
   matches on it, but no longer the thing your eye lands on.
   ══════════════════════════════════════════════════════════════════ */
/* Code and task on one line, with the task wrapping inside its own box.
   Under the generic .pf-row (which wraps) a task longer than the row
   pushed the whole title onto a second line, so some rows showed the code
   above the task and others beside it. */
.cr-taskline{display:flex;gap:8px;align-items:baseline;flex-wrap:nowrap;}
.cr-taskline .cr-code{flex:0 0 auto;}
.cr-taskline .cr-title{min-width:0;}
.cr-isotitle{font-size:11px;line-height:1.45;opacity:.5;margin-top:3px;}
.cr-step1{margin-top:4px !important;}
.cr-table .cr-title{font-weight:650;}

/* ---- "this list is the work only" ---- */
.cr-note{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  flex-wrap:wrap;border:1px solid var(--color-neutral-300);border-left:3px solid var(--color-accent-500);
  border-radius:var(--radius-md);background:var(--color-neutral-100);
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);}
.cr-note b{display:block;font-size:13px;}
.cr-note em{display:block;font-style:normal;font-size:12.5px;line-height:1.55;opacity:.68;
  margin-top:3px;max-width:78ch;}

/* ---- the steps, in the slide-over ---- */
.cr-steps{border:1px solid var(--color-accent-300);background:var(--color-accent-100);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);}
.cr-steps-t{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-accent-800);margin-bottom:var(--space-2);}
.cr-steps ol{margin:0;padding-left:18px;}
.cr-steps li{font-size:12.5px;line-height:1.6;margin-bottom:6px;}
.cr-steps li:last-child{margin-bottom:0;}

/* ---- the ISO wording, folded away ---- */
.cr-iso{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  background:var(--color-bg);margin-bottom:var(--space-4);}
.cr-iso summary{cursor:pointer;padding:10px 13px;font-size:12.5px;font-weight:600;
  list-style:none;display:flex;align-items:center;gap:8px;}
.cr-iso summary::-webkit-details-marker{display:none;}
.cr-iso summary::before{content:"";width:0;height:0;flex:0 0 auto;
  border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;opacity:.5;transition:transform .15s ease;}
.cr-iso[open] summary::before{transform:rotate(90deg);}
.cr-iso summary:hover{background:var(--color-neutral-100);}
.cr-iso > p{margin:0 13px 10px;font-size:12.5px;line-height:1.6;}
.cr-iso > p.pl-sub{font-size:11px;padding-bottom:4px;}

/* ══════════════════════════════════════════════════════════════════════
   v24.0 — COMPACT COMPANY-PROFILE PICKERS

   Tools & software and Policies share one shell: a category / department
   rail on the left and one panel on the right. Without scripting the rail
   is hidden and every panel renders stacked, so the page still works and
   still submits; app.js adds .is-tabbed and the rail takes over.

   Theme-safe by construction: surfaces are --vn-card (white in the light
   theme, the card colour in the dark one) and every line is a tint of
   --color-text, so the dark theme needs no separate overrides here.
   ══════════════════════════════════════════════════════════════════ */
.tk{--tk-line:color-mix(in srgb,var(--color-text) 13%,transparent);
  --tk-soft:color-mix(in srgb,var(--color-text) 5%,transparent);
  --tk-muted:color-mix(in srgb,var(--color-text) 64%,transparent);}

/* header: title left, search right */
.tk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-5);
  flex-wrap:wrap;margin-bottom:var(--space-4);}
.tk-head h2{font-size:24px;line-height:1.2;margin:var(--space-2) 0 0;letter-spacing:-.01em;}
.tk-search{position:relative;width:min(380px,100%);}
.tk-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.45;pointer-events:none;}
.tk-search input{width:100%;padding:11px 14px 11px 40px;font-size:14px;}

/* shell */
.tk-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);align-items:start;}
.tk-nav{display:none;}
.tk.is-tabbed .tk-body{grid-template-columns:272px minmax(0,1fr);}
.tk.is-tabbed .tk-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--space-4);
  background:var(--vn-card);border:1px solid var(--tk-line);border-radius:var(--radius-lg);padding:8px;}

.tk-tab{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:10px;align-items:center;
  width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:transparent;
  font:inherit;font-size:13.5px;color:var(--color-text);text-align:left;cursor:pointer;}
.tk-tab:hover{background:var(--tk-soft);}
.tk-tab:focus-visible{outline:2px solid var(--color-accent-700);outline-offset:1px;}
.tk-tab.is-on{background:color-mix(in oklch,var(--color-accent-600) 13%,transparent);font-weight:700;}
.tk-dot{width:9px;height:9px;border-radius:50%;background:var(--dept-hue,var(--color-accent-600));}
.tk-dot-other{background:transparent;border:1.5px dashed var(--tk-muted);box-sizing:border-box;}
.tk-tab-t{line-height:1.3;}
.tk-tab-n{font-size:12px;font-weight:600;color:var(--tk-muted);font-variant-numeric:tabular-nums;}
.tk-tab.is-on .tk-tab-n{color:#fff;background:var(--color-accent);border-radius:999px;padding:2px 8px;}
.tk-tab.has-any:not(.is-on) .tk-tab-n{color:var(--color-accent-700);font-weight:700;}
.tk-nav-total{display:flex;justify-content:space-between;margin:6px 4px 0;padding:12px 8px 6px;
  border-top:1px solid var(--tk-line);font-size:13px;color:var(--tk-muted);}
.tk-nav-total b{color:var(--color-accent-700);}

/* a panel */
.tk-main{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;}
.tk-panel{background:var(--vn-card);border:1px solid var(--tk-line);border-radius:var(--radius-lg);
  padding:var(--space-5);}
.tk.is-tabbed:not(.is-searching) .tk-panel:not(.is-on){display:none;}
.tk-panel[hidden]{display:none !important;}
.tk-panel-h{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--space-4);}
.tk-panel-h h3{margin:0;font-size:18px;font-weight:650;}
.tk-panel-n{font-size:13px;color:var(--tk-muted);font-variant-numeric:tabular-nums;}
.tk-panel-n b{color:var(--color-text);}
.tk-all{margin-left:auto;border:1px solid var(--tk-line) !important;}
.tk:not(.is-tabbed) .tk-all{display:none;}
.tk.is-searching .tk-all{display:none;}
.tk-panel textarea{width:100%;}

/* tool tiles — logo + name only */
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.tk-tile{position:relative;display:block;cursor:pointer;}
.tk-tile[hidden]{display:none;}
.tk-tile input{position:absolute;opacity:0;pointer-events:none;}
.tk-tile-b{display:grid;grid-template-columns:34px minmax(0,1fr) 20px;gap:10px;align-items:center;
  min-height:58px;box-sizing:border-box;padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--tk-line);background:var(--vn-card);
  transition:border-color .13s ease,background .13s ease;}
.tk-tile:hover .tk-tile-b{border-color:color-mix(in oklch,var(--dept-hue,var(--color-accent-600)) 55%,transparent);}
.tk-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;overflow:hidden;
  font-size:11px;font-weight:800;color:var(--dept-hue,var(--color-accent-700));
  background:color-mix(in oklch,var(--dept-hue,var(--color-accent-600)) 12%,transparent);}
.tk-ic.has-logo{background:#fff;border:1px solid color-mix(in srgb,#000 10%,transparent);}
.tk-ic img{width:20px;height:20px;object-fit:contain;display:block;}
.tk-name{font-size:13.5px;font-weight:550;line-height:1.25;}
.tk-tick{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--tk-line);color:transparent;box-sizing:border-box;}
.tk-tile input:checked ~ .tk-tile-b{border-color:var(--color-accent-700);
  background:color-mix(in oklch,var(--color-accent-600) 10%,var(--vn-card));}
.tk-tile input:checked ~ .tk-tile-b .tk-name{font-weight:700;}
.tk-tile input:checked ~ .tk-tile-b .tk-tick{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.tk-tile input:focus-visible ~ .tk-tile-b{outline:2px solid var(--color-accent-700);outline-offset:2px;}

/* the selection tray */
.tk-tray{background:var(--vn-card);border:1px solid var(--tk-line);border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);}
.tk-tray-h{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tk-muted);margin-bottom:10px;}
.tk-tray-h b{color:var(--color-accent-700);}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px;}
.tk-chip{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 4px 0 12px;
  border-radius:999px;background:var(--tk-soft);font-size:12.5px;font-weight:600;}
.tk-chip-x{width:24px;height:24px;border:0;border-radius:50%;background:transparent;cursor:pointer;
  color:var(--tk-muted);font-size:16px;line-height:1;padding:0;}
.tk-chip-x:hover{background:var(--tk-line);color:var(--color-text);}
.tk-chips-none{font-size:13px;color:var(--tk-muted);}
.tk-chips-none[hidden]{display:none;}
.tk:not(.is-tabbed) .tk-chip-x{display:none;}

/* policy rows — name, one line, framework tag, switch */
.tk-panel-list{padding:var(--space-3) var(--space-3) var(--space-2);}
.tk-panel-list .tk-panel-h{padding:var(--space-3) var(--space-3) 0;margin-bottom:var(--space-3);}
.pl-row{position:relative;display:flex;align-items:center;gap:14px;padding:10px 12px;
  border-top:1px solid var(--tk-line);cursor:pointer;border-radius:10px;}
.pl-row:hover{background:var(--tk-soft);}
.pl-row[hidden]{display:none;}
.pl-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.pl-t b{font-size:14px;font-weight:600;}
.pl-t em{font-style:normal;font-size:12.5px;color:var(--tk-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-file{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;font-size:10.5px;font-weight:700;
  padding:3px 8px;border-radius:999px;background:var(--pf-good-bg);color:var(--pf-good-fg);}
.pl-tag{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:3px 7px;}
.pl-tag-iso{background:color-mix(in oklch,oklch(0.5 0.12 255) 14%,transparent);color:oklch(0.45 0.12 255);}
.pl-tag-dpdp{background:color-mix(in oklch,oklch(0.55 0.12 55) 16%,transparent);color:oklch(0.47 0.11 55);}
.pl-tag-both{background:color-mix(in oklch,oklch(0.5 0.12 300) 14%,transparent);color:oklch(0.45 0.12 300);}
[data-theme="dark"] .pl-tag-iso{color:oklch(0.78 0.1 255);}
[data-theme="dark"] .pl-tag-dpdp{color:oklch(0.8 0.1 55);}
[data-theme="dark"] .pl-tag-both{color:oklch(0.8 0.1 300);}
.pl-row input{position:absolute;opacity:0;pointer-events:none;}
.pl-sw{flex:0 0 auto;position:relative;width:40px;height:24px;border-radius:999px;
  background:color-mix(in srgb,var(--color-text) 22%,transparent);transition:background .15s ease;}
.pl-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease;}
.pl-row input:checked ~ .pl-sw{background:var(--color-accent);}
.pl-row input:checked ~ .pl-sw::after{transform:translateX(16px);}
.pl-row input:focus-visible ~ .pl-sw{outline:2px solid var(--color-accent-700);outline-offset:2px;}

/* the two-step marker */
.pl-steps{list-style:none;display:flex;align-items:center;gap:12px;margin:0 0 var(--space-4);padding:0;
  font-size:13px;font-weight:600;}
.pl-steps li{display:flex;align-items:center;gap:8px;color:var(--tk-muted);}
.pl-steps li.is-now,.pl-steps li.is-done{color:var(--color-accent-700);}
.pl-steps-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-weight:700;border:1.5px solid var(--tk-muted);box-sizing:border-box;}
.pl-steps li.is-now .pl-steps-n{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.pl-steps li.is-done .pl-steps-n{background:color-mix(in oklch,var(--color-accent-600) 15%,transparent);border-color:transparent;}
.pl-steps-line{width:48px;height:2px;background:var(--tk-line);}
.pl-steps-line.is-done{background:var(--color-accent);}

/* the attach page */
.pa-sub{margin:6px 0 0;font-size:13px;color:var(--tk-muted);}
.pa-prog{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:240px;}
.pa-prog span{font-size:13.5px;color:var(--tk-muted);}
.pa-prog b{font-size:22px;color:var(--color-accent-700);}
.pa-prog .pf-bar{height:8px;border-radius:999px;overflow:hidden;}
.pa-list{background:var(--vn-card);border:1px solid var(--tk-line);border-radius:var(--radius-lg);overflow:hidden;}
.pa-row{display:grid;grid-template-columns:28px minmax(200px,340px) minmax(0,1fr) auto;gap:16px;
  align-items:center;padding:12px 20px;border-top:1px solid var(--tk-line);}
.pa-row:first-child{border-top:0;}
.pa-row.is-dragover,.pa-up.is-dragover{background:color-mix(in oklch,var(--color-accent-600) 10%,transparent);}
.pa-st{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box;
  border:2px dashed color-mix(in srgb,var(--color-text) 35%,transparent);}
.pa-row.is-done .pa-st{border:0;background:var(--color-accent);color:#fff;}
.pa-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pa-t b{font-size:14px;font-weight:650;}
.pa-t em{font-style:normal;font-size:12.5px;color:var(--tk-muted);}
.pa-file{min-width:0;}
.pa-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;height:32px;padding:0 12px;
  border-radius:8px;background:var(--tk-soft);font-size:13px;font-weight:600;color:var(--color-text);}
.pa-chip svg{color:var(--color-accent-700);flex:0 0 auto;}
.pa-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pa-none{font-size:13px;color:var(--tk-muted);}
.pa-act{display:flex;align-items:center;gap:6px;}
.pa-up,.pa-rm{margin:0;display:flex;align-items:center;gap:6px;}
.pa-pick{position:relative;cursor:pointer;border:1px solid var(--tk-line);}
.pa-pick.btn-primary{border-color:transparent;}
.pa-pick input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}
.pa-x{border:1px solid var(--tk-line) !important;width:34px;padding:0;color:var(--tk-muted);}
.pa-gate{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;
  background:var(--pf-warn-bg);color:var(--pf-warn-fg);font-size:13.5px;font-weight:600;}
.pa-ready{font-size:13.5px;font-weight:600;color:var(--pf-good-fg);}

@media (max-width:900px){
  .tk.is-tabbed .tk-body{grid-template-columns:minmax(0,1fr);}
  .tk.is-tabbed .tk-nav{position:static;flex-direction:row;overflow-x:auto;}
  .tk.is-tabbed .tk-tab{flex:0 0 auto;width:auto;}
  .tk-nav-total{display:none;}
  .pa-row{grid-template-columns:28px minmax(0,1fr);}
  .pa-file,.pa-act{grid-column:2;}
}
@media (prefers-reduced-motion: reduce){ .tk-tile-b,.pl-sw,.pl-sw::after{transition:none;} }

/* ══════════════════════════════════════════════════════════════════════
   v24.1 — DPDP theme, tool categories + your own tools, audit-ready date,
           written evidence, answer → evidence animation
   ══════════════════════════════════════════════════════════════════ */

/* control register: five theme cards when DPDP applies */
.cr-themes.cr-themes-5{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:1100px){ .cr-themes.cr-themes-5{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:900px){ .cr-themes.cr-themes-5{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .cr-themes.cr-themes-5{grid-template-columns:1fr;} }

/* tool categories: 25 of them, so the rail scrolls on its own */
.tk.is-tabbed .tk-nav{max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;}
.tk.is-tabbed .tk-tab{min-height:38px;padding:6px 10px;font-size:13px;}
.tk-panel-sub{margin:-8px 0 var(--space-4);font-size:13px;color:var(--tk-muted);}
.tk-dot-own{background:transparent;border:2px solid var(--color-accent-600);box-sizing:border-box;}
.tk-tab-add .tk-tab-t{color:var(--color-accent-700);font-weight:650;}
.tk-tile-own .tk-tile-b{border-style:dashed;grid-template-columns:34px minmax(0,1fr) 24px;cursor:default;}
.tk-own-badge{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--color-accent-700);margin-top:2px;}
.tk-own-tx{width:24px;height:24px;border:0;border-radius:50%;background:transparent;cursor:pointer;
  color:var(--tk-muted);font-size:16px;line-height:1;padding:0;}
.tk-own-tx:hover{background:var(--tk-line);color:var(--color-text);}
button.tk-tile{padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;width:100%;}
.tk-tile-addhere .tk-tile-b{border-style:dashed;background:transparent;color:var(--tk-muted);
  grid-template-columns:34px minmax(0,1fr);}
.tk-tile-addhere .tk-ic{font-size:18px;font-weight:500;}
.tk-tile-addhere:hover .tk-tile-b{color:var(--color-text);border-color:var(--color-accent-600);}
.tk-tile-addhere:focus-visible .tk-tile-b{outline:2px solid var(--color-accent-700);outline-offset:2px;}
.tk-own-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.tk-own-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 36px;gap:8px;align-items:center;
  border-radius:10px;transition:box-shadow .3s ease;}
.tk-own-row.is-flash{box-shadow:0 0 0 3px color-mix(in oklch,var(--color-accent-600) 35%,transparent);}
.tk-own-x{width:36px;padding:0;border:1px solid var(--tk-line) !important;color:var(--tk-muted);}
.tk-own-notes-l{display:block;margin:var(--space-5) 0 6px;font-size:12.5px;font-weight:600;color:var(--tk-muted);}
.tk-chip-own{padding-right:12px;border:1px dashed color-mix(in oklch,var(--color-accent-600) 55%,transparent);}
@media (max-width:640px){ .tk-own-row{grid-template-columns:minmax(0,1fr) 36px;}
  .tk-own-row input[name="custom_cat[]"]{grid-column:1;} .tk-own-x{grid-row:1/3;grid-column:2;} }

/* P.14 — the recommended date */
.dl-rec{border:1px solid color-mix(in oklch,var(--color-accent-600) 35%,transparent);
  background:color-mix(in oklch,var(--color-accent-600) 7%,var(--vn-card,#fff));
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4);}
.dl-rec-top{display:flex;gap:var(--space-4);align-items:center;}
.dl-cal{flex:0 0 auto;width:66px;border-radius:12px;overflow:hidden;text-align:center;
  background:var(--vn-card,#fff);border:1px solid var(--color-neutral-300);box-shadow:0 2px 6px rgba(0,0,0,.06);}
.dl-cal-m{display:block;background:var(--color-accent);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 0;}
.dl-cal-d{display:block;font-size:26px;font-weight:800;line-height:1.1;padding-top:4px;font-variant-numeric:tabular-nums;}
.dl-cal-y{display:block;font-size:10.5px;font-weight:600;opacity:.6;padding-bottom:5px;}
.dl-kicker{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-accent-700);}
.dl-date{display:block;font-size:22px;font-weight:800;line-height:1.2;margin:2px 0;}
.dl-months{display:block;font-style:normal;font-size:13px;opacity:.72;}
.dl-why{margin-top:var(--space-3);font-size:13px;}
.dl-why summary{cursor:pointer;font-weight:650;color:var(--color-accent-800);}
.dl-why ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
.dl-why li{display:flex;justify-content:space-between;gap:var(--space-4);padding:5px 0;
  border-bottom:1px dashed var(--color-neutral-300);}
.dl-why li b{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--pf-warn-fg);}
.dl-why li b.is-less{color:var(--pf-good-fg);}
.dl-why li.dl-total{border-bottom:0;font-weight:700;}
.dl-why li.dl-total b{color:var(--color-text);}
.dl-note{margin:var(--space-3) 0 0;font-size:12.5px;opacity:.8;}
.dl-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;}
.dl-pick input[type=date]{max-width:210px;}
.dl-or{margin:var(--space-4) 0 var(--space-2);font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;opacity:.55;}
.dl-span{font-weight:500;opacity:.6;font-size:12.5px;}

/* written evidence */
.fm-evw{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px dashed var(--color-neutral-300);}
.fm-evw-h{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--color-neutral-700);margin-bottom:8px;}
.fm-evw-t{width:100%;font-size:12.5px;line-height:1.55;resize:vertical;min-height:96px;box-sizing:border-box;}
.fm-evw-t.is-generating{background-image:linear-gradient(90deg,transparent,color-mix(in oklch,var(--color-accent-600) 12%,transparent),transparent);
  background-size:200% 100%;animation:evw-shimmer 1.1s linear infinite;}
@keyframes evw-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
.fm-evw-a{display:flex;gap:6px;justify-content:space-between;margin-top:8px;flex-wrap:wrap;}
.fm-evw-gen{display:inline-flex;align-items:center;gap:6px;color:var(--color-accent-800);
  border:1px solid color-mix(in oklch,var(--color-accent-600) 45%,transparent) !important;}
.fm-evw-gen.is-busy svg{animation:evw-spin 1s linear infinite;}
@keyframes evw-spin{to{transform:rotate(360deg);}}
.fm-evw-draft{margin:6px 0 0;font-size:11px;color:var(--pf-warn-fg);}
.fm-evw-draft[hidden]{display:none;}
.fm-evw-why{margin:0 0 8px;font-size:12px;color:var(--pf-bad-fg);}
.fm-evw-ro{margin:0;font-size:12.5px;line-height:1.55;white-space:normal;}
.eng-ev-body{margin:8px 0 4px;padding:8px 12px;border-left:3px solid var(--color-accent-500);
  background:var(--color-neutral-100);font-size:12.5px;line-height:1.55;border-radius:0 8px 8px 0;}

/* answer → evidence: the cue, the pulse, the flying arrow */
.fm-ev{position:relative;scroll-margin-top:90px;}
.fm-ev-cue{display:flex;align-items:center;gap:8px;margin:0 0 var(--space-3);padding:8px 10px;
  border-radius:10px;background:var(--color-accent);color:#fff;font-size:12.5px;font-weight:650;
  animation:ev-cue-in .45s cubic-bezier(.2,.9,.3,1.3) both;}
.fm-ev-cue[hidden]{display:none;}
.fm-ev-cue svg{flex:0 0 auto;animation:ev-bob 1s ease-in-out 3;}
@keyframes ev-cue-in{from{opacity:0;transform:translateY(-6px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes ev-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.fm-ev.is-beckon{animation:ev-pulse 1.2s ease-out 2;border-color:var(--color-accent-600);}
.fm-ev.is-beckon .fm-ev-up input[type=file],
.fm-ev.is-beckon .fm-evw-gen{box-shadow:0 0 0 3px color-mix(in oklch,var(--color-accent-600) 30%,transparent);}
@keyframes ev-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--color-accent-600) 55%,transparent);transform:scale(1);}
  18%{transform:scale(1.018);}
  40%{transform:scale(1);}
  100%{box-shadow:0 0 0 16px color-mix(in oklch,var(--color-accent-600) 0%,transparent);}
}
.ev-fly{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:visible;transition:opacity .45s ease;}
.ev-fly.is-out{opacity:0;}
.ev-fly-path{fill:none;stroke:var(--color-accent-600);stroke-width:2.5;stroke-linecap:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));}
.ev-fly-head{fill:none;stroke:var(--color-accent-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .15s ease;}
.ev-fly-doc rect{fill:var(--vn-card,#fff);stroke:var(--color-accent-700);stroke-width:1.8;}
.ev-fly-doc path{stroke:var(--color-accent-600);stroke-width:1.6;stroke-linecap:round;}
.ev-fly-doc{transition:opacity .2s ease;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18));}
.ev-fly.is-landed .ev-fly-head{animation:ev-land .5s ease-out;}
@keyframes ev-land{0%{stroke-width:2.6;}50%{stroke-width:4.5;}100%{stroke-width:2.6;}}
.ev-fab{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9000;display:inline-flex;
  align-items:center;gap:8px;padding:11px 18px;border:0;border-radius:999px;background:var(--color-accent);
  color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22);
  animation:ev-fab-in .45s cubic-bezier(.2,.9,.3,1.3) both;transition:opacity .35s ease,transform .35s ease;}
.ev-fab svg{animation:ev-bob 1s ease-in-out infinite;}
.ev-fab.is-out{opacity:0;transform:translate(-50%,12px);}
@keyframes ev-fab-in{from{opacity:0;transform:translate(-50%,20px);}to{opacity:1;transform:translate(-50%,0);}}

/* skipped questions */
.qn-skipped-pill:hover{filter:brightness(.97);text-decoration:underline !important;}

@media (prefers-reduced-motion: reduce){
  .fm-ev.is-beckon{animation:none;outline:2px solid var(--color-accent-600);outline-offset:2px;}
  .fm-ev-cue,.fm-ev-cue svg,.ev-fab,.ev-fab svg,.fm-evw-t.is-generating,.fm-evw-gen.is-busy svg{animation:none;}
  .tk-own-row{transition:none;}
}
/* the date field lives inside a .qn-opt, whose inputs are visually hidden */
.qn-opt .dl-pick input[type=date]{position:static;opacity:1;pointer-events:auto;}
.dl-pick [hidden]{display:none !important;}

/* =====================================================================
   v24.2 — AI policy score, uploaded policies, bulk people assignment
   ===================================================================== */
.pf-alert-info{background:var(--color-accent-100);color:var(--color-accent-800);border-color:var(--color-accent-500);}
.pai-card{padding:var(--space-5);margin-bottom:var(--space-4);}
.pai-ring{--v:0;--ring:var(--color-accent-600);width:74px;height:74px;flex:0 0 74px;border-radius:50%;
  background:conic-gradient(var(--ring) calc(var(--v)*1%), var(--color-neutral-200) 0);
  display:grid;place-items:center;position:relative;}
.pai-ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--color-bg);}
.pai-ring b,.pai-ring i{position:relative;z-index:1;}
.pai-ring b{font-size:21px;font-weight:800;line-height:1;margin-top:10px;font-variant-numeric:tabular-nums;}
.pai-ring i{font-style:normal;font-size:10px;opacity:.6;margin-top:-16px;}
.pai-bars{display:grid;gap:7px;margin:var(--space-3) 0 0;}
.pai-bar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:12.5px;}
.pai-bar .pf-bar{height:7px;}
.pai-bar em{font-style:normal;text-align:right;opacity:.7;font-variant-numeric:tabular-nums;}
.pai-miss-head{margin:var(--space-4) 0 var(--space-2);font-size:13.5px;}
.pai-miss{max-height:420px;overflow:auto;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);background:var(--color-neutral-50, var(--color-bg));}
.pai-group{padding:var(--space-2) 0;border-bottom:1px dashed var(--color-neutral-300);}
.pai-group:last-child{border-bottom:0;}
.pai-group-h{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin-bottom:4px;}
.pai-item{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;padding:5px 0;cursor:pointer;}
.pai-item input{margin-top:3px;flex:0 0 auto;accent-color:var(--color-accent-600);}
.pai-dot{width:7px;height:7px;border-radius:50%;background:var(--pf-bad-fg);margin-top:7px;flex:0 0 7px;}
.pai-tag{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;margin-left:5px;
  border-radius:var(--radius-pill);background:var(--color-neutral-200);vertical-align:1px;}
.pai-tag-warn{background:var(--pf-warn-bg);color:var(--pf-warn-fg);}
.pai-fix{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:var(--space-3);}
.pai-fix label{font-size:12.5px;}
.pai-fix select{max-width:170px;}
.pai-pill{font-variant-numeric:tabular-nums;white-space:nowrap;}
.pai-pill b{font-weight:800;}
.pai-pill i{font-style:normal;opacity:.65;font-size:.85em;}
.pai-upload{max-height:640px;overflow:auto;}
.pai-trnote{font-size:13px;}
.pai-linkbtn{border:0;background:none;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;}
.pl-src{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;margin-left:6px;border-radius:var(--radius-pill);
  background:var(--color-accent-100);color:var(--color-accent-800);vertical-align:2px;}

/* ---- People × departments grid (one save) ---- */
.pm-wrap{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);overflow:auto;background:var(--color-bg);
  max-height:70vh;}
.pm-table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:13px;}
.pm-table th,.pm-table td{border-bottom:1px solid var(--color-neutral-200);padding:8px 10px;text-align:center;}
.pm-table thead th{position:sticky;top:0;z-index:2;background:var(--color-neutral-100);font-weight:700;font-size:12px;
  vertical-align:bottom;min-width:92px;}
.pm-table thead th.pm-corner{left:0;z-index:3;text-align:left;min-width:220px;}
.pm-table tbody th{position:sticky;left:0;z-index:1;background:var(--color-bg);text-align:left;font-weight:600;min-width:220px;}
.pm-table tbody tr:hover th,.pm-table tbody tr:hover td{background:var(--color-accent-50, var(--color-neutral-100));}
.pm-dept{display:flex;flex-direction:column;gap:4px;align-items:center;}
.pm-dept small{font-weight:500;opacity:.65;}
.pm-dept .pm-count{font-size:11px;padding:1px 7px;border-radius:var(--radius-pill);background:var(--pf-bad-bg);color:var(--pf-bad-fg);}
.pm-dept .pm-count.is-ok{background:var(--pf-good-bg);color:var(--pf-good-fg);}
.pm-person{display:flex;align-items:center;gap:8px;}
.pm-person i{width:26px;height:26px;border-radius:50%;background:var(--color-accent-600);color:#fff;font-style:normal;
  font-size:11px;display:grid;place-items:center;flex:0 0 26px;}
.pm-person em{display:block;font-style:normal;font-weight:400;font-size:11.5px;opacity:.6;}
.pm-cell{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;cursor:pointer;
  border:1.5px solid var(--color-neutral-300);transition:background .12s,border-color .12s;}
.pm-cell input{position:absolute;opacity:0;width:1px;height:1px;}
.pm-cell svg{opacity:0;transform:scale(.6);transition:opacity .12s,transform .12s;}
.pm-cell:has(input:checked){background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff;}
.pm-cell:has(input:checked) svg{opacity:1;transform:scale(1);}
.pm-cell:has(input:focus-visible){outline:2px solid var(--color-accent-600);outline-offset:2px;}
.pm-colbtn,.pm-rowbtn{border:0;background:none;color:var(--color-accent-700, var(--color-accent-600));font-size:11px;
  cursor:pointer;padding:0;text-decoration:underline;}
.pm-bar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;margin:0 0 var(--space-3);}
.pm-bar .pm-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.pm-search{max-width:240px;}
.pm-save{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-4);margin-top:var(--space-3);background:var(--color-bg);
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);box-shadow:0 -6px 16px rgba(0,0,0,.06);z-index:4;}
.pm-save .pm-dirty{font-size:13px;opacity:.75;}
.pm-quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 var(--space-3);padding:var(--space-3);
  border:1px dashed var(--color-neutral-400);border-radius:var(--radius-md);}
.pm-quick select{max-width:260px;}
.pm-quick .pm-ms{min-width:220px;}
@media (max-width:700px){
  .pm-table thead th.pm-corner,.pm-table tbody th{min-width:150px;}
  .pm-person em{display:none;}
}
.pa-score{margin-left:8px;font-size:12px;text-decoration:none;white-space:nowrap;color:inherit;}