/* Perimeter — 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);}
a{color:var(--color-accent-700);text-decoration:none;}
a:hover{color:var(--color-accent);text-decoration:underline;}
.pf-card{transition:box-shadow .15s ease, transform .15s ease;}
.pf-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
@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 .18s ease;}

/* ---------------------------------------------------------------------
   Site-wide visual polish pass (items 6 & 10): a bit more depth, motion
   and color variety, applied once here so it reaches every section
   rather than being redone page by page. Kept subtle on purpose — one
   consistent hover/press language across buttons, cards and tags reads
   as more considered than several loud, one-off effects.
--------------------------------------------------------------------- */
:root{
  --color-info-100:#e5eef9; --color-info-500:#3568b0; --color-info-700:#284f85;
}
.btn{transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);}
.btn:active{transform:translateY(0);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 gains an "info" tone (blue) alongside the existing
   good/warn/bad, for status states that are neither a pass nor a
   problem — e.g. "In review", "Pending" — so the app isn't only ever
   green, amber or red. */
.pf-pill-info, .tag-info{background:var(--color-info-100);color:var(--color-info-700);}

/* 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);}

/* 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(.92);}to{opacity:1;transform:scale(1);}}
[data-countup]{display:inline-block;animation:pfStatIn .35s ease;}
@media (prefers-reduced-motion: reduce){[data-countup]{animation:none;}}

/* 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);}

.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);}
@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{height:6px;background:var(--color-neutral-200);width:100%;border-radius:3px;overflow:hidden;}
.pf-bar > i{display:block;height:100%;background:var(--color-accent);}

/* 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;}

/* ── 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:var(--color-bg);border:1px solid var(--color-divider);border-radius:16px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
.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));
  background: color-mix(in srgb, #ffffff 30%, transparent);
  color: var(--color-neutral-900, #1a1a18);
  border: 1px solid color-mix(in srgb, #ffffff 40%, transparent);
  border-radius: 18px; padding: 22px 24px 18px;
  box-shadow: 0 16px 44px rgba(20, 60, 45, .18);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  animation: pf-tourcard-in .3s cubic-bezier(.2,.8,.3,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);
}
.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-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: 18px; }
.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); }

.pf-tourcard-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-tourcard-progress { display: flex; gap: 4px; }
.pf-tourcard-pip {
  width: 14px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--color-accent) 25%, transparent);
  cursor: pointer; transition: background .2s ease, width .2s ease; 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: var(--color-accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .15s ease;
}
.pf-tourcard-arrow:hover { transform: scale(1.08); }

.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); }
  to   { opacity: 1; transform: translateX(-50%) translateY(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 ring — highlights the exact nav item/element a step is
   pointing at (item 1: "take it to a specific point"). Sits above the
   dim overlay below so it stays bright and outlined while the rest of
   the page dims (Option 2). */
.pf-tour-spotlight {
  position: relative; z-index: 901;
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 8px;
  background: var(--color-bg, #fff);
  animation: pf-tour-pulse 1.6s ease-in-out infinite;
}
@keyframes pf-tour-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 35%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .pf-tour-spotlight { 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 55%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  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; }

/* Dimmed-spotlight backdrop (Option 2) — a fixed dark overlay covering
   the whole page, with a rectangular cutout punched exactly around the
   spotlighted element via CSS mask, so only that element's surroundings
   dim while it and its own background stay fully lit. --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(10, 20, 16, 0.45);
  -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; }
}