/* ============================================================================
   FullView Safety Portal — customer-facing UI
   Viritium emerald accent · light + dark (data-theme + prefers-color-scheme).
   ========================================================================== */

:root, html[data-theme="light"] {
  --pf-brand:      #10A37F;
  --pf-brand-600:  #0C8266;
  --pf-brand-700:  #0B7A5F;
  --pf-brand-300:  #4ADDB8;
  --pf-tint:        #E9F7F2;

  --pf-bg:        #F4F6F8;
  --pf-surface:   #FFFFFF;
  --pf-sunken:    #F7F8FA;
  --pf-text:      #14181E;
  --pf-muted:     #5A6573;
  --pf-faint:     #8B95A4;
  --pf-border:    #E5E8EC;
  --pf-hairline:  #EEF1F4;
  --pf-accent:    var(--pf-brand-700);   /* brand as text/link */
  --pf-cta:       var(--pf-brand);
  --pf-cta-hover: var(--pf-brand-600);
  --pf-row-hover: var(--pf-tint);

  --pf-ok-fg:#067647; --pf-ok-bg:#ECFDF3; --pf-ok-bd:#A6E9C5;
  --pf-warn-fg:#B54708; --pf-warn-bg:#FFFAEB; --pf-warn-bd:#FEDF89;
  --pf-bad-fg:#B42318; --pf-bad-bg:#FEF3F2; --pf-bad-bd:#FECDCA;
  --pf-neu-fg:#475467; --pf-neu-bg:#F2F4F7; --pf-neu-bd:#E1E5EB;

  --pf-radius: 14px;
  --pf-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px -14px rgba(16,24,40,.16);
  --pf-shadow-lg: 0 28px 60px -22px rgba(16,24,40,.30);
  --pf-ring: 0 0 0 4px rgba(16,163,127,.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pf-bg:#0D1014; --pf-surface:#161A20; --pf-sunken:#11151B;
    --pf-text:#E7EAEE; --pf-muted:#97A2B0; --pf-faint:#7A8493;
    --pf-border:#262C36; --pf-hairline:#20262F;
    --pf-accent:var(--pf-brand-300); --pf-row-hover:#0A231C; --pf-tint:#0A231C;
    --pf-ok-bg:#0B2C18; --pf-ok-bd:#13502E; --pf-ok-fg:#6CE9A6;
    --pf-warn-bg:#2E2406; --pf-warn-bd:#5A4708; --pf-warn-fg:#FEC84B;
    --pf-bad-bg:#2E1212; --pf-bad-bd:#5A2222; --pf-bad-fg:#FDA29B;
    --pf-neu-bg:#1C212A; --pf-neu-bd:#2A313C; --pf-neu-fg:#AEB7C4;
    --pf-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 30px -16px rgba(0,0,0,.7);
    --pf-shadow-lg: 0 30px 64px -22px rgba(0,0,0,.8);
  }
}
html[data-theme="dark"] {
  --pf-bg:#0D1014; --pf-surface:#161A20; --pf-sunken:#11151B;
  --pf-text:#E7EAEE; --pf-muted:#97A2B0; --pf-faint:#7A8493;
  --pf-border:#262C36; --pf-hairline:#20262F;
  --pf-accent:var(--pf-brand-300); --pf-row-hover:#0A231C; --pf-tint:#0A231C;
  --pf-ok-bg:#0B2C18; --pf-ok-bd:#13502E; --pf-ok-fg:#6CE9A6;
  --pf-warn-bg:#2E2406; --pf-warn-bd:#5A4708; --pf-warn-fg:#FEC84B;
  --pf-bad-bg:#2E1212; --pf-bad-bd:#5A2222; --pf-bad-fg:#FDA29B;
  --pf-neu-bg:#1C212A; --pf-neu-bd:#2A313C; --pf-neu-fg:#AEB7C4;
  --pf-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 30px -16px rgba(0,0,0,.7);
  --pf-shadow-lg: 0 30px 64px -22px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
/* No horizontal scroll, page-wide. `clip` (not `hidden`) so the sticky topbar
   keeps working — `hidden` would turn the body into a scroll container. */
html, body { margin: 0; overflow-x: clip; max-width: 100%; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--pf-bg); color: var(--pf-text);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--pf-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; margin: 2px 0 0; }
h2 { font-size: 15px; font-weight: 700; margin: 0; }
.pf-muted { color: var(--pf-muted); }
.pf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* ---- Top bar ---- */
.pf-top {
  /* z 1200: above in-page toolbars (the map's control row is z 950 and was
     painting OVER the navbar); still under the drawer (4410) / kbar (6000),
     and under fullscreen map overlays (3000) except where fullscreen CSS
     deliberately lifts it for the ticker. */
  position: sticky; top: 0; z-index: 1200;
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px; min-height: 64px;
  background: color-mix(in srgb, var(--pf-surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--pf-border);
  box-shadow: 0 1px 0 rgba(16,163,127,.35);
}
.pf-brand { display: inline-flex; align-items: center; gap: 12px; }
.pf-brand:hover { text-decoration: none; }
.pf-mark {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  background: #0D1117;
  box-shadow: 0 6px 16px -4px rgba(16,163,127,.6), inset 0 1px 0 rgba(255,255,255,.35);
  position: relative;
}
.pf-mark::before { content:""; position:absolute; inset:5px; background:url(/static/brand/viritium-mark.png?v=18) center/contain no-repeat; }
.pf-mark::after { content:none; }
.pf-brandtext { display: flex; flex-direction: column; line-height: 1.05; }
.pf-word { font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--pf-text); }
.pf-acc { color: var(--pf-brand); }
.pf-sub { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pf-faint); margin-top: 2px; }

.pf-top-actions { margin-left: auto; display: flex; align-items: center;
  gap: 14px; flex: 0 0 auto; }
.pf-org {
  font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px;
  background: var(--pf-tint); color: var(--pf-accent);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-acct-email { color: var(--pf-muted); font-size: 13px; }
.pf-logout {
  font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--pf-border); color: var(--pf-text);
  /* "Log out" was breaking across two lines inside its own button */
  white-space: nowrap; flex: 0 0 auto;
}
.pf-logout:hover { background: var(--pf-row-hover); border-color: var(--pf-accent); color: var(--pf-accent); text-decoration: none; }

.pf-theme-toggle {
  width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--pf-border); background: var(--pf-surface); color: var(--pf-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.pf-theme-toggle:hover { background: var(--pf-row-hover); color: var(--pf-accent); border-color: var(--pf-accent); }
.pf-theme-toggle svg { width: 18px; height: 18px; }
/* Controls is a gear beside the theme toggle rather than a nav tab — same
   36px chip, but it's an <a> so it needs the link defaults cleared. */
.pf-gear-btn { text-decoration: none; }
.pf-gear-btn.on { color: var(--pf-accent); border-color: var(--pf-accent); background: var(--pf-tint); }
.pf-i-sun { display: none; } .pf-i-moon { display: block; }
html[data-theme="dark"] .pf-i-sun { display: block; } html[data-theme="dark"] .pf-i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .pf-i-sun { display: block; }
  html:not([data-theme="light"]) .pf-i-moon { display: none; }
}

/* ---- Layout ---- */
.pf-main { min-height: calc(100vh - 64px); }
.pf-container { max-width: 1160px; margin: 0 auto; padding: 30px 28px 64px; }
.pf-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pf-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-accent); }
.pf-back { display: inline-block; margin-bottom: 16px; font-weight: 600; color: var(--pf-muted); }
.pf-back:hover { color: var(--pf-accent); text-decoration: none; }
.pf-head-badges { display: flex; gap: 8px; }

/* ---- Stat cards ---- */
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.pf-stat {
  background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.pf-stat-n { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.pf-stat-l { font-size: 12px; font-weight: 600; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ---- Table ---- */
.pf-table-card { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); overflow: hidden; }
.pf-table { width: 100%; border-collapse: collapse; }
.pf-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pf-muted); padding: 14px 16px; background: var(--pf-sunken); border-bottom: 1px solid var(--pf-border);
}
.pf-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--pf-hairline); vertical-align: middle; }
.pf-table tbody tr { cursor: pointer; transition: background .1s ease; }
.pf-table tbody tr:hover { background: var(--pf-row-hover); }
.pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-rowlink { display: flex; flex-direction: column; }
.pf-rowlink strong { color: var(--pf-text); font-weight: 700; }
.pf-rowlink:hover { text-decoration: none; }
/* Secondary line under the bold primary (time under date, slug under site).
   Block so it drops to its own line instead of colliding inline. */
.pf-slug { display: block; margin-top: 3px; font-size: 12px; font-weight: 500;
           color: var(--pf-faint); line-height: 1.25; }
/* The bold primary in stacked cells (date / site name) sits on its own line. */
.pf-table tbody td > strong { display: block; line-height: 1.3; }
.pf-evidence { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-row-cta { text-align: right; }

/* ---- Pills + tags ---- */
.pf-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.pf-pill-lg { font-size: 13px; padding: 6px 13px; }
.pf-pill-ok { color: var(--pf-ok-fg); background: var(--pf-ok-bg); border-color: var(--pf-ok-bd); }
.pf-pill-warn { color: var(--pf-warn-fg); background: var(--pf-warn-bg); border-color: var(--pf-warn-bd); }
.pf-pill-bad { color: var(--pf-bad-fg); background: var(--pf-bad-bg); border-color: var(--pf-bad-bd); }
.pf-pill-neutral { color: var(--pf-neu-fg); background: var(--pf-neu-bg); border-color: var(--pf-neu-bd); }
.pf-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 7px; background: var(--pf-tint); color: var(--pf-accent); white-space: nowrap; }
/* Record-kind pill — emerald (Viritium 2026 accent) flags a Call Summary
   against the briefing default so the two record types read apart at a glance. */
.pf-kind { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; margin-right: 8px; vertical-align: 1px; }
.pf-kind-call { background: #10A37F; color: #fff; }

/* ---- Buttons ---- */
.pf-btn-primary, .pf-btn-ghost, .pf-btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; border-radius: 10px; cursor: pointer; transition: all .14s ease; text-decoration: none;
  white-space: nowrap;
}
.pf-btn-primary { background: var(--pf-cta); color: #fff; padding: 9px 16px; border: 0; box-shadow: 0 1px 2px rgba(16,24,40,.1); }
.pf-btn-primary:hover { background: var(--pf-cta-hover); transform: translateY(-1px); text-decoration: none; color: #fff; }
.pf-btn-ghost { background: var(--pf-surface); color: var(--pf-text); padding: 9px 16px; border: 1px solid var(--pf-border); }
.pf-btn-ghost:hover { background: var(--pf-row-hover); border-color: var(--pf-accent); color: var(--pf-accent); text-decoration: none; }
/* Small action. Worn by real <button>s AND by <span>s inside clickable table
   rows, so it has to NEUTRALISE the UA button chrome: without that a <button>
   kept the browser's own background — a blue pill on iOS — while `padding:
   4px 0` jammed the label flat against its edges (Cole, 2026-09-13). Surface
   + border rather than tint, because --pf-tint and --pf-row-hover are the same
   colour in dark mode, so a tinted chip vanished the moment its row hovered. */
.pf-btn-sm {
  font-size: 13px; font-weight: 700; color: var(--pf-accent);
  /* 18px horizontal, more than the 16px on .pf-btn-primary, because this
     one is a full pill: the rounded caps optically eat several pixels of
     the inset, so matching the square buttons' number still reads tight. */
  padding: 6px 18px; line-height: 1.25; font-family: inherit;
  background: var(--pf-surface); border: 1px solid var(--pf-border);
  -webkit-appearance: none; appearance: none;
}
.pf-btn-sm:hover { border-color: var(--pf-accent); background: var(--pf-tint);
  color: var(--pf-accent); text-decoration: none; }
.pf-btn-block { width: 100%; padding: 12px; font-size: 15px; }

/* ---- Record detail grid ---- */
.pf-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }
.pf-card { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); margin-bottom: 20px; overflow: hidden; }
.pf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--pf-hairline); }
.pf-card-actions { display: flex; gap: 8px; }
.pf-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 16px 18px; }
.pf-dl dt { color: var(--pf-muted); font-size: 12.5px; font-weight: 600; }
.pf-dl dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; }

/* ---- PDF embed ---- */
.fv-pdf-embed { padding: 0; }
.fv-pdf-stage { max-height: 820px; overflow: auto; padding: 16px; background: var(--pf-sunken); }
.pf-loading { text-align: center; color: var(--pf-muted); padding: 40px 16px; }

/* ---- Audio ---- */
.pf-audio { width: 100%; margin: 16px 18px 6px; max-width: calc(100% - 36px); }
.pf-audio-note { padding: 0 18px 16px; font-size: 12.5px; }

/* ---- Timeline ---- */
.pf-timeline { list-style: none; margin: 0; padding: 8px 18px 16px; }
.pf-timeline li { padding: 12px 0; border-bottom: 1px solid var(--pf-hairline); }
.pf-timeline li:last-child { border-bottom: 0; }
.pf-tl-main { display: flex; justify-content: space-between; gap: 10px; }
.pf-tl-title { font-weight: 700; }
.pf-tl-date { font-size: 12px; color: var(--pf-faint); white-space: nowrap; }
.pf-tl-meta { font-size: 12.5px; color: var(--pf-muted); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Empty / alert ---- */
.pf-empty { padding: 28px 18px; color: var(--pf-muted); text-align: center; }
.pf-empty-lg { background: var(--pf-surface); border: 1px dashed var(--pf-border); border-radius: var(--pf-radius); padding: 48px 24px; display: flex; flex-direction: column; gap: 6px; }
.pf-empty-lg strong { font-size: 16px; color: var(--pf-text); }
.pf-alert { background: var(--pf-bad-bg); color: var(--pf-bad-fg); border: 1px solid var(--pf-bad-bd); border-radius: 10px; padding: 11px 14px; font-weight: 600; font-size: 13.5px; margin-bottom: 16px; }

/* ---- Login ---- */
body.pf-login {
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(16,163,127,.20), transparent 60%),
    radial-gradient(700px 480px at -6% 108%, rgba(16,163,127,.12), transparent 55%),
    var(--pf-bg);
}
.pf-login-wrap { display: flex; align-items: center; justify-content: center; padding: 64px 20px; min-height: calc(100vh - 64px); }
.pf-login-card { width: 420px; max-width: 100%; background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 20px; box-shadow: var(--pf-shadow-lg); padding: 36px 34px 28px; }
.pf-login-mark { display: block; width: 52px; height: 52px; border-radius: 15px; margin-bottom: 18px; background: #0D1117; box-shadow: 0 10px 24px -8px rgba(16,163,127,.6); position: relative; }
.pf-login-mark::before { content:""; position:absolute; inset:7px; background:url(/static/brand/viritium-mark.png?v=18) center/contain no-repeat; }
.pf-login-mark::after { content:none; }
.pf-login-card h1 { font-size: 22px; margin-bottom: 6px; }
.pf-login-lede { margin: 0 0 20px; font-size: 13.5px; }
.pf-form { display: flex; flex-direction: column; gap: 14px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-label { font-size: 12.5px; font-weight: 600; color: var(--pf-muted); }
.pf-field input {
  font: inherit; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--pf-border);
  background: var(--pf-surface); color: var(--pf-text); transition: border-color .12s, box-shadow .12s;
}
.pf-field input:focus { outline: none; border-color: var(--pf-brand); box-shadow: var(--pf-ring); }
.pf-login-foot { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--pf-faint); }

/* ---- Responsive ---- */
@media (max-width: 920px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-acct-email { display: none; }
}
@media (max-width: 560px) {
  .pf-container { padding: 22px 16px 48px; }
  .pf-top { padding: 0 16px; }
  .pf-org { max-width: 130px; }
  .pf-sub { display: none; }
}

/* ---- Site filter chips ---- */
.pf-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pf-chip {
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--pf-border); background: var(--pf-surface); color: var(--pf-muted);
}
.pf-chip:hover { border-color: var(--pf-accent); color: var(--pf-accent); background: var(--pf-row-hover); text-decoration: none; }
.pf-chip-on { background: var(--pf-cta); border-color: var(--pf-cta); color: #fff; }
.pf-chip-on:hover { background: var(--pf-cta-hover); color: #fff; }

/* Site grouping for the filter bar: a jobsite label followed by its project
   chips, e.g.  [All projects]   DAVIDSON [2821] [6789]. */
.pf-filtergroup {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 12px; border-radius: 999px;
  background: var(--pf-sunken);
}
.pf-filtergroup-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--pf-muted);
}
.pf-filtergroup .pf-chip { background: var(--pf-surface); }
.pf-filtergroup .pf-chip-on { background: var(--pf-cta); }

/* Long content never forces the table wider than its container. */
.pf-table td { overflow-wrap: anywhere; }

/* ---- Records: stacked cards on narrow screens (no horizontal scroll) ----
   Below 900px a 6-column table can't fit, so each row becomes a clean,
   tappable card: date · time, site · slug, the record title, then the
   certified + evidence badges. The whole card links through (tr onclick). */
/* (legacy mobile collapse removed — v7 block at the end owns it) */

/* ============================================================================
   v6 — 2026 glass redesign. Aurora backdrop, frosted surfaces, hero stats,
   mobile card-collapse. Layered over the token system above (cascade wins).
   ========================================================================== */
:root, html[data-theme="light"]{
  --pf-glass: rgba(255,255,255,.62);
  --pf-glass-2: rgba(255,255,255,.45);
  --pf-glass-bd: rgba(255,255,255,.75);
  --pf-glass-shadow: 0 12px 40px -12px rgba(16,24,40,.18);
  --pf-blur: 20px;
}
html[data-theme="dark"]{
  --pf-glass: rgba(20,24,32,.58);
  --pf-glass-2: rgba(20,24,32,.42);
  --pf-glass-bd: rgba(255,255,255,.09);
  --pf-glass-shadow: 0 18px 48px -12px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pf-glass: rgba(20,24,32,.58); --pf-glass-2: rgba(20,24,32,.42);
    --pf-glass-bd: rgba(255,255,255,.09);
    --pf-glass-shadow: 0 18px 48px -12px rgba(0,0,0,.6);
  }
}

body{position:relative}
body::before{
  content:"";position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 46% at 10% 6%, rgba(16,163,127,.20), transparent 62%),
    radial-gradient(36% 42% at 92% 10%, rgba(47,111,176,.17), transparent 60%),
    radial-gradient(44% 52% at 85% 94%, rgba(46,125,50,.13), transparent 62%),
    radial-gradient(38% 44% at 6% 90%, rgba(155,109,255,.14), transparent 60%);
  filter:blur(52px) saturate(130%);
  animation:pfdrift 30s ease-in-out infinite alternate;
}
@keyframes pfdrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-2%,0) scale(1.06)}}
html[data-theme="dark"] body::before{opacity:.75;filter:blur(60px) saturate(115%) brightness(.8)}

.pf-top{
  /* NO z-index here on purpose — the rule above owns it (1200) and explains
     why. Re-declaring it here is what put the navbar under the analytics
     fullscreen buttons (z 900). If the navbar needs to move in the stack,
     move it there. */
  position:sticky;top:0;
  background:var(--pf-glass-2)!important;
  -webkit-backdrop-filter:blur(var(--pf-blur)) saturate(180%);
  backdrop-filter:blur(var(--pf-blur)) saturate(180%);
  border-bottom:1px solid var(--pf-glass-bd);
  box-shadow:none;   /* top inset highlight removed (Cole 2026-07-25) */
  transition:transform .28s ease;
}
/* hide-on-downscroll: the navbar slides up and away (past its own height AND
   the fixed banner above it); the Pulse banner never moves. Re-shown the
   moment the user scrolls up. */
.pf-top.pf-top-hide{transform:translateY(calc(-100% - var(--pf-pulse-h,28px)))}
.pf-card,.pf-table-card,.pf-stat,.pf-login-card,.pf-filterbar,
.wf-card,.wf-table,.join,.pending{
  background:var(--pf-glass)!important;
  -webkit-backdrop-filter:blur(var(--pf-blur)) saturate(170%);
  backdrop-filter:blur(var(--pf-blur)) saturate(170%);
  border:1px solid var(--pf-glass-bd)!important;
  box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.45)!important;
}
html[data-theme="dark"] .pf-card,html[data-theme="dark"] .pf-table-card,
html[data-theme="dark"] .pf-stat,html[data-theme="dark"] .pf-login-card,
html[data-theme="dark"] .pf-filterbar,html[data-theme="dark"] .wf-card,
html[data-theme="dark"] .wf-table,html[data-theme="dark"] .join,
html[data-theme="dark"] .pending{
  box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.pending{background:linear-gradient(135deg, rgba(16,163,127,.14), rgba(16,163,127,.05))!important;border-color:rgba(16,163,127,.35)!important}

/* --- stats: hero tiles --- */
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0 22px}
.pf-stat{border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:5px;
  transition:transform .18s ease, box-shadow .18s ease}
.pf-stat:hover{transform:translateY(-3px)}
.pf-stat-n{font-size:32px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg, var(--pf-brand-700), var(--pf-brand));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="dark"] .pf-stat-n{background:linear-gradient(120deg, var(--pf-brand-300), var(--pf-brand))
  ;-webkit-background-clip:text;background-clip:text}
.pf-stat-l{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pf-muted)}

/* --- page head --- */
.pf-page-head h1{font-size:26px;letter-spacing:-.03em}
.pf-eyebrow{color:var(--pf-accent);font-weight:800;letter-spacing:.09em}

/* --- filter chips --- */
.pf-filterbar{border-radius:16px;padding:10px 14px;margin-bottom:16px}
.pf-chip{border-radius:999px;transition:all .15s}
.pf-chip:hover{transform:translateY(-1px)}
.pf-chip-on{background:linear-gradient(120deg,var(--pf-brand),var(--pf-brand-600))!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 6px 16px -6px rgba(16,163,127,.55)}

/* --- records table --- */
.pf-table-card{border-radius:18px;overflow:hidden}
.pf-table th{font-size:10.5px;letter-spacing:.08em}
.pf-table tbody tr{transition:background .15s}
.pf-table tbody tr:hover{background:var(--pf-row-hover);cursor:pointer}
.pf-tag{border-radius:7px;font-weight:700}
.pf-btn-sm{border-radius:999px}

/* --- buttons --- */
.pf-btn-primary{background:linear-gradient(120deg,var(--pf-brand),var(--pf-brand-600));
  border:none;box-shadow:0 8px 20px -8px rgba(16,163,127,.6);transition:transform .15s, box-shadow .15s}
.pf-btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(16,163,127,.7)}

/* --- login: centerpiece glass panel --- */
.pf-login-wrap{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center}
.pf-login-card{border-radius:24px;padding:38px 36px;max-width:420px;width:100%;
  box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(16,163,127,.08)!important}
.pf-login-card h1{letter-spacing:-.02em}
.pf-field input{border-radius:12px;transition:box-shadow .15s, border-color .15s}
.pf-field input:focus{box-shadow:var(--pf-ring)}

/* --- demo ribbon --- */
.pf-demo-ribbon{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(90deg, rgba(16,163,127,.14), rgba(16,163,127,.05), rgba(16,163,127,.14));
  border-bottom:1px solid rgba(16,163,127,.28);
  color:var(--pf-accent);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:7px 12px;text-align:center;
  -webkit-backdrop-filter:blur(var(--pf-blur));backdrop-filter:blur(var(--pf-blur));
}
.pf-demo-ribbon .dot{width:8px;height:8px;border-radius:50%;background:var(--pf-brand);
  box-shadow:0 0 0 0 rgba(16,163,127,.5);animation:pfpulse 2s infinite}
@keyframes pfpulse{0%{box-shadow:0 0 0 0 rgba(16,163,127,.5)}70%{box-shadow:0 0 0 7px rgba(16,163,127,0)}100%{box-shadow:0 0 0 0 rgba(16,163,127,0)}}

/* --- workforce/map pages inherit the glass (their classes are whitelisted
       in the glass selector above); soften their hardcoded internals --- */
.wf-table th{background:transparent}
#map{box-shadow:var(--pf-glass-shadow)!important;border:1px solid var(--pf-glass-bd)!important}

/* ============================ mobile (v7) ============================ */
@media (max-width:900px){
  :root{--pf-blur:12px}
  body::before{animation:none}                     /* save low-end GPUs */
  .pf-stat{-webkit-backdrop-filter:none;backdrop-filter:none}
  .pf-main{padding:14px 12px 60px}
  .pf-container{padding:0}
  .wf-wrap{padding:4px 2px}
  .pf-page-head h1{font-size:21px}
  .pf-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .pf-stat{padding:14px 16px;border-radius:15px}
  .pf-stat-n{font-size:25px}
  .pf-org,.pf-acct-email{display:none}

  /* records table → compact tappable glass cards */
  .pf-table thead{display:none}
  .pf-table,.pf-table tbody,.pf-table tr,.pf-table td{display:block;width:100%}
  .pf-table tbody tr{
    padding:13px 15px;margin:9px;border-radius:14px;width:auto;
    background:var(--pf-glass-2);border:1px solid var(--pf-glass-bd);
    box-shadow:0 4px 14px -8px rgba(16,24,40,.2);
  }
  .pf-table td{padding:0;border:none;line-height:1.5}
  .pf-table tbody td > strong{display:inline}
  .pf-table td .pf-slug{display:inline;margin:0;font-weight:500}
  .pf-table td .pf-slug::before{content:" · ";color:var(--pf-faint)}
  .pf-table td:nth-child(1){font-size:14px;font-weight:700}
  .pf-table td:nth-child(2){margin-top:3px}
  .pf-table td:nth-child(3){margin-top:4px;color:var(--pf-muted);font-size:13px}
  .pf-table td:nth-child(4),
  .pf-table td.pf-evidence{display:inline-block;width:auto;vertical-align:middle;margin:9px 8px 0 0}
  .pf-table td:nth-child(4) > .pf-muted,
  .pf-table td.pf-evidence > .pf-muted{display:none}
  .pf-row-cta{display:none!important}

  .pf-grid{grid-template-columns:1fr!important}
  .pf-login-card{padding:28px 22px;border-radius:20px}
  .wf-cards{grid-template-columns:repeat(2,1fr)!important}
  .join{flex-direction:column;text-align:center}
  .wf-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:420px){
  .pf-stats{grid-template-columns:1fr 1fr}
  .pf-nav{gap:1px}
}

/* ---- system-dark twins for the v6/v7 glass chrome (first visit, no toggle) ---- */
html[data-theme="dark"] .pf-login-card{box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(16,163,127,.14)!important}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) body::before{opacity:.75;filter:blur(60px) saturate(115%) brightness(.8)}
  html:not([data-theme="light"]) .pf-card,html:not([data-theme="light"]) .pf-table-card,
  html:not([data-theme="light"]) .pf-stat,html:not([data-theme="light"]) .pf-login-card,
  html:not([data-theme="light"]) .pf-filterbar,html:not([data-theme="light"]) .wf-card,
  html:not([data-theme="light"]) .wf-table,html:not([data-theme="light"]) .join,
  html:not([data-theme="light"]) .pending{
    box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
  html:not([data-theme="light"]) .pf-stat-n{
    background:linear-gradient(120deg, var(--pf-brand-300), var(--pf-brand));
    -webkit-background-clip:text;background-clip:text;
  }
  html:not([data-theme="light"]) .pf-login-card{box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(16,163,127,.14)!important}
}

/* v7 contrast: darker faint ink on LIGHT glass only (AA at small sizes) */
html[data-theme="light"]{--pf-faint:#66707F}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--pf-faint:#66707F}
}

/* ---- native widget theming + record-page columns + a11y motion ---- */
:root{color-scheme:light dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
.pf-col-main{grid-column:1;min-width:0}
.pf-col-side{grid-column:2;min-width:0}
@media (max-width:900px){.pf-col-main,.pf-col-side{grid-column:auto}}
@media (prefers-reduced-motion: reduce){
  body::before,.pf-demo-ribbon .dot{animation:none!important}
  .pf-stat,.pf-chip,.pf-btn-primary{transition:none!important}
}

/* ============================ v8 — mobile drawer ============================ */
.pf-burger{display:none;flex-direction:column;justify-content:center;gap:4.5px;width:40px;height:40px;
  padding:9px;border:1px solid var(--pf-glass-bd);border-radius:11px;background:var(--pf-glass-2);cursor:pointer}
.pf-burger span{display:block;height:2px;border-radius:2px;background:var(--pf-text);
  transition:transform .25s, opacity .2s}
.pf-burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.pf-burger.x span:nth-child(2){opacity:0}
.pf-burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:900px){
  .pf-nav,.pf-top .pf-theme-toggle,.pf-logout{display:none}
  .pf-burger{display:flex}
}
.pf-drawer-backdrop{position:fixed;inset:0;z-index:4400;background:rgba(10,12,16,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s}
.pf-drawer-backdrop.open{opacity:1;visibility:visible}
.pf-drawer{position:fixed;top:0;right:0;bottom:0;z-index:4410;width:min(82vw,320px);
  display:flex;flex-direction:column;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  background:var(--pf-glass);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border-left:1px solid var(--pf-glass-bd);box-shadow:-28px 0 70px rgba(10,14,20,.35);
  transform:translateX(105%);transition:transform .3s cubic-bezier(.32,.72,.35,1)}
.pf-drawer.open{transform:none}
body.pf-lock{overflow:hidden}
.pf-drawer-head{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 12px}
.pf-drawer-x{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--pf-glass-bd);border-radius:10px;background:var(--pf-glass-2);color:var(--pf-text);cursor:pointer}
/* the nav scrolls, the foot (Log out) never leaves the screen: min-height:0
   lets this flex child shrink instead of shoving the footer off the bottom
   edge on short phone viewports (the app shell injects extra items) */
.pf-drawer-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;
  -webkit-overflow-scrolling:touch}
.pf-dlink{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  font-size:14px;font-weight:600;color:var(--pf-text);text-decoration:none;
  background:transparent;border:none;cursor:pointer;font-family:inherit;text-align:left;width:100%}
.pf-dlink svg{width:18px;height:18px;flex:none;opacity:.75}
.pf-dlink:hover{background:rgba(128,128,128,.1)}
.pf-dlink.on{color:var(--pf-accent);background:var(--pf-tint)}
.pf-dlink.on svg{opacity:1}
/* "Briefing history" is retired from the app drawer (2026-07-29). The iOS
   shell injects it client-side (PortalScreen.swift drawerJS) — it is removed
   from the source too, but installed builds keep injecting it until their
   next update, so the server hides it for them immediately. Drop this rule
   once a build without the injection is the floor. */
#pf-app-history{display:none!important}
/* Same story for "App settings" (2026-08-27): it folded into the Controls
   page's Site controls / App settings switcher, so the drawer entry is a
   duplicate. Installed builds keep injecting it until they update. */
#pf-app-settings{display:none!important}
.pf-drawer-sep{height:1px;background:var(--pf-glass-bd);margin:8px 6px}
.pf-drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;
  padding-top:8px;flex:none}
.pf-drawer-org{padding:10px 14px;font-size:13.5px;font-weight:700}
.pf-drawer-org span{display:block;font-size:12px;font-weight:500;color:var(--pf-muted);margin-top:2px;word-break:break-all}
.pf-dlink-out{color:var(--pf-bad-fg)}
.pf-demo-chip{display:inline-block;margin:0 14px;padding:6px 12px;border-radius:999px;
  background:var(--pf-tint);color:var(--pf-accent);font-size:12px;font-weight:700;width:max-content}
@media (prefers-reduced-motion: reduce){.pf-drawer,.pf-drawer-backdrop,.pf-burger span{transition:none}}

/* ================= v8 — grade breakdown sheet ================= */
.grade-btn{border:none;cursor:pointer;font-family:inherit;gap:5px;transition:transform .15s, box-shadow .15s}
.grade-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(16,24,40,.4)}
.grade-btn svg{opacity:.7;margin-left:1px}
.pf-bd-backdrop{position:fixed;inset:0;z-index:130;background:rgba(10,12,16,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .22s, visibility .22s}
.pf-bd-backdrop.open{opacity:1;visibility:visible}
.pf-sheet{position:fixed;z-index:4420;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  width:min(94vw,480px);max-height:86dvh;overflow:auto;border-radius:22px;
  background:var(--pf-glass);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--pf-glass-bd);box-shadow:var(--pf-shadow-lg), inset 0 1px 0 rgba(255,255,255,.4);
  padding:22px;opacity:0;visibility:hidden;transition:opacity .22s, transform .22s, visibility .22s}
html[data-theme="dark"] .pf-sheet{box-shadow:var(--pf-shadow-lg), inset 0 1px 0 rgba(255,255,255,.06)}
.pf-sheet.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
@media (max-width:640px){
  .pf-sheet{left:0;right:0;top:auto;bottom:0;transform:translateY(8%);width:auto;
    border-radius:22px 22px 0 0;max-height:88dvh;padding:20px 18px calc(22px + env(safe-area-inset-bottom))}
  .pf-sheet.open{transform:none}
}
.pf-sheet-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.pf-sheet-grade{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:18px;font-weight:800;font-size:26px;line-height:1}
.pf-sheet-grade small{font-size:11px;font-weight:700;opacity:.85;margin-top:3px}
.pf-sheet-name{font-size:17px;font-weight:800;letter-spacing:-.01em}
.pf-sheet-sub{font-size:12.5px;color:var(--pf-muted);margin-top:2px}
.pf-sheet-x{margin-left:auto;width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--pf-glass-bd);border-radius:10px;background:var(--pf-glass-2);color:var(--pf-text);cursor:pointer}
.pf-sheet-inc{margin:8px 0 2px;padding:9px 12px;border-radius:11px;font-size:12.5px;font-weight:700;
  background:var(--pf-warn-bg);color:var(--pf-warn-fg);border:1px solid var(--pf-warn-bd)}
.bd-row{padding:11px 2px 2px}
.bd-top{display:flex;align-items:baseline;gap:8px}
.bd-label{font-size:13.5px;font-weight:700}
.bd-weight{font-size:10.5px;font-weight:700;color:var(--pf-faint);background:var(--pf-neu-bg);
  border-radius:6px;padding:1.5px 6px}
.bd-val{margin-left:auto;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.bd-bar{height:7px;border-radius:999px;background:rgba(127,127,127,.16);overflow:hidden;margin:7px 0 4px}
.bd-bar span{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.bd-detail{font-size:12px;color:var(--pf-muted)}
.bd-none .bd-val,.bd-none .bd-label{opacity:.45}
.pf-sheet-note{margin-top:14px;font-size:11px;color:var(--pf-faint);line-height:1.5}


/* ===== v9 — header nav (moved out of base.html so the mobile hide wins) ===== */
/* NO WRAP (Cole 2026-08-04): the nav is a flex item next to the brand and
   the account block. Wrapping orphaned "Crew ↗" onto a second row and made
   the header two lines tall — it appeared the moment the tab count hit 7.
   One line always; if the viewport is genuinely too narrow the nav scrolls
   horizontally (scrollbar hidden) instead of restacking the header. */
.pf-nav{display:flex;gap:3px;margin:0 6px;flex-wrap:nowrap;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.pf-nav::-webkit-scrollbar{display:none}
.pf-navlink{padding:7px 12px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--pf-muted);text-decoration:none;white-space:nowrap;background:transparent;border:none;cursor:pointer;font-family:inherit}
.pf-navlink:hover{background:rgba(128,128,128,.12)}
.pf-navlink.on{color:var(--pf-accent);background:var(--pf-tint)}
/* Staged reclaim so the nav keeps its single line as the window narrows:
   the account email goes first (least useful), then the tabs tighten, then
   the org pill shrinks. Below 900px the drawer takes over entirely. */
@media (max-width:1500px){ .pf-acct-email{display:none} }
@media (max-width:1300px){
  .pf-navlink{padding:7px 9px;font-size:13px}
  .pf-nav{margin:0 2px}
  .pf-top{gap:10px;padding:0 18px}
}
@media (max-width:1100px){
  .pf-navlink{padding:6px 7px;font-size:12.5px}
  .pf-org{max-width:150px}
}

@media (max-width:900px){
  /* mobile: the drawer owns navigation — keep the header to logo + burger */
  .pf-top .pf-nav{display:none}
}


/* ===== v10 — workforce table -> cards on mobile (no clipped columns) ===== */
.wf-cards-m{display:none}
@media (max-width:900px){
  .wf-table{display:none}
  .wf-cards-m{display:flex;flex-direction:column;gap:10px}
  .wfm-card{background:var(--pf-glass);border:1px solid var(--pf-glass-bd);border-radius:16px;
    padding:13px 14px;-webkit-backdrop-filter:blur(var(--pf-blur)) saturate(170%);
    backdrop-filter:blur(var(--pf-blur)) saturate(170%);
    box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.35)}
  html[data-theme="dark"] .wfm-card{box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.05)}
  .wfm-top{display:flex;align-items:center;gap:10px}
  .wfm-top .dotm{flex:none}
  .wfm-id{flex:1;min-width:0}
  .wfm-id .wf-nm{font-size:14.5px}
  .wfm-top .grade{flex:none}
  .wfm-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .wfm-meta{margin-top:8px;font-size:12.5px;color:var(--pf-muted)}
  .wfm-flags{margin-top:6px;font-size:12px;font-weight:600;color:var(--pf-bad-fg)}
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .wfm-card{box-shadow:var(--pf-glass-shadow), inset 0 1px 0 rgba(255,255,255,.05)}
}


/* ===== v11 — record page: download actions never clip ===== */
.pf-card-head{flex-wrap:wrap}
.pf-card-actions{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:900px){
  .pf-card-head{flex-direction:column;align-items:stretch;gap:10px}
  .pf-card-actions{justify-content:stretch}
  .pf-card-actions .pf-btn-ghost,.pf-card-actions .pf-btn-primary{
    flex:1 1 calc(50% - 4px);text-align:center;justify-content:center;white-space:nowrap}
}


/* ===== v12 — brand reads "FullView Safety" on every size ===== */
.pf-word-tail{font-weight:700;color:var(--pf-text);margin-left:6px;letter-spacing:-.2px}
@media (max-width:420px){.pf-word{font-size:16.5px}}

/* ===== v13 — unified brand mark (the admin "full-view lens", scaled) ===== */
.pf-mark{background:#0D1117;
  box-shadow:0 8px 18px -6px rgba(16,163,127,.7), inset 0 1px 0 rgba(255,255,255,.4)}
.pf-mark::before{inset:0;margin:auto;left:0;top:0;width:20px;height:12px;background:#fff;
  border-radius:0 0 13px 13px / 0 0 12px 12px;
  -webkit-mask:radial-gradient(10.5px 12.5px at 50% 0, transparent 98%, #000 100%);
          mask:radial-gradient(10.5px 12.5px at 50% 0, transparent 98%, #000 100%)}
.pf-mark::after{left:50%;top:50%;width:7.5px;height:7.5px;border-radius:50%;
  background:#0B7A5F;transform:translate(-50%,-30%);box-shadow:0 0 0 2.8px rgba(255,255,255,.92)}
.pf-login-mark{background:linear-gradient(140deg,#34D3A6 0%,#10A37F 52%,#0B7A5F 100%);
  box-shadow:0 10px 24px -8px rgba(16,163,127,.6), inset 0 1px 0 rgba(255,255,255,.4)}
.pf-login-mark::before{inset:0;margin:auto;left:0;top:0;width:29px;height:18px;background:#fff;
  border-radius:0 0 19px 19px / 0 0 18px 18px;
  -webkit-mask:radial-gradient(15px 18px at 50% 0, transparent 98%, #000 100%);
          mask:radial-gradient(15px 18px at 50% 0, transparent 98%, #000 100%)}
.pf-login-mark::after{left:50%;top:50%;width:11px;height:11px;border-radius:50%;
  background:#0B7A5F;transform:translate(-50%,-30%);box-shadow:0 0 0 4px rgba(255,255,255,.92)}

/* ===== v14/v17 — ink tile + the Vi monogram (2026 brand) ===== */
/* The monogram in TWO layers (Cole 2026-09-13), so its green can breathe with
   the wordmark. A raster PNG's pixels are not animatable, but a background
   colour is — so the flat two-colour artwork (#F2F2F2 for the V, #17BD92 for
   the wedge) is split into a body image and an alpha mask, and the mask is
   painted with a colour that shares the wordmark's keyframes. Composited back
   together the pair is within 5 levels of the original on one pixel of 1296 at
   the 36px it renders at. */
.pf-mark,.pf-login-mark{background:#0D1117!important;position:relative}
.pf-mark::before,.pf-login-mark::before,
.pf-mark::after,.pf-login-mark::after{
  content:""!important;display:block!important;position:absolute;inset:0;
  width:auto;height:auto;margin:0;transform:none;border-radius:inherit;
  box-shadow:none;pointer-events:none}
.pf-mark::before,.pf-login-mark::before{
  background:url("/static/brand/viritium-mark-body.png?v=19") center/76% no-repeat;
  -webkit-mask:none;mask:none}
.pf-mark::after,.pf-login-mark::after{
  background-color:#20BE95;
  -webkit-mask:url("/static/brand/viritium-mark-accent.png?v=19") center/76% no-repeat;
          mask:url("/static/brand/viritium-mark-accent.png?v=19") center/76% no-repeat;
  animation:pfLogoBreathe 10.4s ease-in-out infinite}

/* ===== kill page-level horizontal scroll (inner scrollers like tables keep theirs) ===== */
html,body{overflow-x:hidden;overflow-x:clip;max-width:100vw}

/* Unhighlightable UI (Cole, 2026-07-12): no text selection anywhere; form
   fields stay editable/selectable so typing + cursor placement still work. */
*{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;user-select:text}

/* ==== Site Pulse ticker + Cmd+K palette (July 2026 wave) ==== */
/* VIEWPORT-FIXED (Cole, 2026-07-23): the ticker is a direct child of <body>,
   position:fixed at the very top of the screen — it stays put no matter what
   the navbar does on scroll. It must NOT live inside the header: the header's
   backdrop-filter would re-bind fixed positioning to the header box. The
   body:has rule reserves the bar's height (login page has no ticker → no
   reservation) and the navbar sticks just below the fixed bar. z 1300 = over
   the navbar (1200), under drawer (4410) / kbar (6000); map fullscreen lifts
   it above the fullscreen map (map template). */
.pf-pulse{position:fixed;top:0;left:0;right:0;z-index:1300;
  overflow:hidden;white-space:nowrap;
  /* A quiet rail, not a coloured band (Cole 2026-09-13, final pass).
     Earlier versions painted the whole bar the brand green — first literally,
     then at 60% over the ink — which put a saturated stripe above a near-black
     navbar and fought everything below it. The rest of this product spends
     emerald in small doses: the wordmark's four letters, the monogram's wedge,
     a LIVE dot. So the bar went back to being chrome, and the brand moved into
     a 5px dot on each event, which still breathes on the wordmark's own
     keyframes. #080A0E sits one shade under --pf-bg so the top rail reads as
     the deepest layer, with a hairline where the navbar starts. */
  background:#080A0E;
  border:0;border-bottom:1px solid var(--pf-hairline);box-shadow:none;
  font-size:12px;padding:0;color:var(--pf-muted);font-weight:600;
  letter-spacing:.005em}
body:has(.pf-pulse){padding-top:var(--pf-pulse-h,28px)}   /* default = bar height so first paint never overlaps; JS zeroes it when the bar is hidden */
body:has(.pf-pulse) .pf-top{top:var(--pf-pulse-h,28px)}
.pf-pulse .tk{display:inline-block;animation:pfTick 74.1s linear infinite;padding-left:100%}
/* quiet state sits still; the marquee only runs when there's a stream */
.pf-pulse .tk.static{animation:none;padding-left:14px}
.pf-pulse:hover .tk{animation-play-state:paused}
@keyframes pfTick{to{transform:translateX(-50%)}}
/* Events carry no wash of their own (Cole 2026-09-13). Each one used to sit on
   a 520x64 emerald comet; the blobs were wider than the gaps between events so
   they overlapped continuously, and the bar simply ran lighter wherever there
   was content. The emerald now lives in the dot instead, where a small amount
   of it reads as brand rather than as a background. */
.pf-pulse .ev{display:inline-flex;align-items:center;gap:9px;
  padding:7px 0;margin-right:34px;vertical-align:middle}
/* The brand, in the smallest dose that still registers. Runs pfLogoBreathe —
   the monogram wedge's own keyframes — so the header has one heartbeat. */
.pf-pulse .ev::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background-color:#20BE95;animation:pfLogoBreathe 10.4s ease-in-out infinite}
/* Solid, not faded: opacity over a coloured surface is how the old tail ended
   up at ~1.9:1. Muting belongs in the choice of colour. */
.pf-pulse .ev i{font-style:normal;font-weight:500;color:var(--pf-faint)}
/* SOS borrows the product's own status-chip shape (.pf-tag): a tinted fill
   with matching text, rather than the solid slab it was. Its dot holds still —
   an alarm should not pulse along with the branding. */
.pf-pulse .ev.sos{background:rgba(229,72,77,.14);color:#FF9AA0;font-weight:700;
  border-radius:999px;padding:5px 14px}
.pf-pulse .ev.sos::before{background-color:#E5484D;animation:none}
.pf-pulse .ev.sos i{color:#D98A90}
.pf-kbar{position:fixed;inset:0;z-index:6000;display:none;background:rgba(6,10,9,.55);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.pf-kbar.open{display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}
.pf-kbar .box{width:min(560px,92vw);background:var(--pf-surface);border:1px solid var(--pf-border);
  border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.pf-kbar input{width:100%;box-sizing:border-box;font:inherit;font-size:15.5px;padding:15px 17px;
  border:0;outline:0;background:transparent;color:var(--pf-text)}
.pf-kbar .res{max-height:44vh;overflow-y:auto;border-top:1px solid var(--pf-hairline)}
.pf-kbar .it{display:flex;align-items:center;gap:10px;padding:10px 15px;font-size:13.5px;
  color:var(--pf-text);text-decoration:none}
.pf-kbar .it.on,.pf-kbar .it:hover{background:rgba(16,163,127,.1)}
.pf-kbar .it .k{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0B7A5F;background:rgba(16,163,127,.12);border-radius:6px;padding:2px 7px}


/* v67: global Site Pulse hide (drawer "Hide live banner"; localStorage
   pf-pulse-hide). display:none beats the ticker's inline display reset,
   and anchor() reads offsetHeight 0 so the top chrome closes up. */
.pf-pulse.pf-pulse-off{display:none!important}

/* v68: header live-banner toggle (desktop home for the drawer option) —
   dimmed with a hint of strike when the banner is hidden */
.pf-pulse-btn.pulse-off{opacity:.45}
.pf-pulse-btn.pulse-off svg{transform:rotate(0)}

/* v69: the shared "sf" kit — tabs, filter pills, forms, messages, badges.
   Canonical home; the safety pages (observations/certifications/daily-log)
   and workforce each used to carry a copy-pasted <style> block. */
.sf-tabs{display:flex;gap:6px;margin:0 0 18px;flex-wrap:wrap}
.sf-tab{font-size:13px;font-weight:700;text-decoration:none;padding:8px 15px;border-radius:999px;
  color:var(--pf-muted);background:var(--pf-surface);border:1px solid var(--pf-border)}
.sf-tab.on{color:#fff;background:var(--pf-cta);border-color:transparent}
.sf-head h1{font-size:21px;margin:0}
.sf-head .sub{color:var(--pf-muted);font-size:13px;margin:2px 0 14px}
.sf-msg{padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;font-weight:600}
.sf-msg.ok{background:var(--pf-ok-bg);color:var(--pf-ok-fg)}
.sf-msg.err{background:var(--pf-bad-bg);color:var(--pf-bad-fg)}
.sf-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.sf-pill{font-size:12.5px;font-weight:700;text-decoration:none;padding:6px 12px;border-radius:999px;
  color:var(--pf-muted);background:var(--pf-surface);border:1px solid var(--pf-border)}
.sf-pill.on{color:#fff;background:var(--pf-accent);border-color:transparent}
.sf-pill .n{opacity:.65;margin-left:5px}
.sf-form{padding:0 16px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.sf-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--pf-muted)}
.sf-form input,.sf-form select,.sf-form textarea{padding:8px 10px;border-radius:9px;border:1px solid var(--pf-border);
  background:var(--pf-surface);color:var(--pf-text);font:inherit;font-size:13px}
.sf-form .full{grid-column:1/-1}
.sf-btn{padding:9px 16px;border-radius:10px;border:0;background:var(--pf-cta);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.sf-empty{padding:34px;text-align:center;color:var(--pf-muted);background:var(--pf-surface);border:1px solid var(--pf-border);border-radius:14px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
details.sf-add{margin-bottom:18px;background:var(--pf-surface);border:1px solid var(--pf-border);border-radius:14px}
details.sf-add>summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:14px;list-style:none}
details.sf-add>summary::-webkit-details-marker{display:none}

/* ---- The living emerald (Cole 2026-08-02) — CSS port of the iOS
   FVGlowClock: 10.4s cycle, emerald #20BE95 <-> jade #0D8568, eased,
   soft glow. (The abyss stop #08624D was dropped 2026-08-03 — the
   darkest shade read as the wordmark dimming out, not breathing.) Wordmark accent +
   the mark's aura ONLY — the navbar itself deliberately stays still
   (motion in this product carries meaning; chrome shouldn't). Reduced
   motion gets the static brand emerald. */
@keyframes pfAccBreathe{
  0%,100%{color:#20BE95;text-shadow:0 0 7px rgba(32,190,149,.38)}
  50%{color:#0D8568;text-shadow:0 0 5px rgba(13,133,104,.28)}
}
@keyframes pfMarkBreathe{
  0%,100%{box-shadow:0 6px 18px -4px rgba(32,190,149,.62), inset 0 1px 0 rgba(255,255,255,.35)}
  50%{box-shadow:0 6px 15px -4px rgba(13,133,104,.48), inset 0 1px 0 rgba(255,255,255,.35)}
}
/* Same 10.4s, same easing, same phase as pfAccBreathe — the monogram's wedge
   and the live banner ride the wordmark's heartbeat rather than running their
   own. Stops chosen so all three peak and trough together: emerald at 0/100%,
   jade at 50%. */
@keyframes pfLogoBreathe{
  0%,100%{background-color:#20BE95}
  50%{background-color:#0D8568}
}
.pf-acc{animation:pfAccBreathe 10.4s ease-in-out infinite}
.pf-mark{animation:pfMarkBreathe 10.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .pf-acc,.pf-mark,.pf-pulse .ev::before,
  .pf-mark::after,.pf-login-mark::after{animation:none}
}

/* ============================================================================
   Auto-hiding page scrollbar (desktop only)
   ==========================================================================
   The right-hand scrollbar stays invisible until the pointer is near the
   right edge, then fades in.

   Gated on (hover:hover) and (pointer:fine): touch devices already overlay
   their scrollbar and hide it on their own, and a coarse pointer has no
   hover state to reveal it with — applying this there would hide the
   scrollbar permanently.

   The TRACK KEEPS ITS WIDTH at all times and only the thumb's colour
   changes. Collapsing the scrollbar to zero would reflow the whole page
   every time the pointer approached the edge, which is far worse than the
   scrollbar it was hiding.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* Reserve the gutter so revealing the thumb never shifts layout. */
  html { scrollbar-gutter: stable; }

  /* Firefox: it only offers auto/thin/none, and no thumb transition, so it
     gets the honest version — thin, and coloured only while revealed. */
  html { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  html.pf-sb-near { scrollbar-color: var(--pf-border) transparent; }

  /* WebKit / Blink */
  html::-webkit-scrollbar { width: 12px; }
  html::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 8px;
    /* Inset via a transparent border so the thumb reads as a slim pill
       rather than filling the gutter edge to edge. */
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color .18s ease;
  }
  html.pf-sb-near::-webkit-scrollbar-thumb {
    background-color: var(--pf-faint);
  }
  html.pf-sb-near::-webkit-scrollbar-thumb:hover {
    background-color: var(--pf-muted);
  }
}

/* ---- Records / Reports segmented control ----
   Two lists live under one tab: the meeting records that arrive on their own,
   and the period safety reports someone (or a schedule) asks for. A segment
   rather than a second nav item — same question, different resolution.
   Built from the same tokens as the filter chips so it reads as part of the
   page furniture rather than a control bolted on. */
.pf-seg {
  display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 4px;
  border: 1px solid var(--pf-border); border-radius: 999px;
  background: var(--pf-surface);
}
.pf-seg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px;
  color: var(--pf-muted); white-space: nowrap;
}
.pf-seg-btn:hover { color: var(--pf-accent); background: var(--pf-row-hover); text-decoration: none; }
.pf-seg-btn.on { background: var(--pf-cta); color: #fff; }
.pf-seg-btn.on:hover { background: var(--pf-cta-hover); color: #fff; }
/* The count rides inside the segment: it answers "is there anything in the
   other half" without making the reader click to find out. */
.pf-seg-n {
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--pf-row-hover); color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}
.pf-seg-btn.on .pf-seg-n { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* On-demand generation sits directly above the list it files into, so the
   relationship between "generate" and "these are your reports" is visible
   rather than explained. */
.pf-reportbar { margin-bottom: 18px; }
.pf-reportbar form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--pf-border);
  border-radius: 12px; background: var(--pf-surface);
}
.pf-reportbar label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--pf-muted);
}
.pf-reportbar input[type="date"] {
  font: inherit; font-weight: 500; color: var(--pf-text);
  padding: 7px 10px; border: 1px solid var(--pf-border);
  border-radius: 8px; background: var(--pf-bg);
}
.pf-reportbar input[type="date"]:focus-visible {
  outline: 2px solid var(--pf-accent); outline-offset: 1px;
}
.pf-reportbar .pf-slug { margin-left: auto; }
@media (max-width: 560px) {
  .pf-seg { display: flex; width: 100%; }
  .pf-seg-btn { flex: 1; justify-content: center; }
  .pf-reportbar .pf-slug { margin-left: 0; flex-basis: 100%; }
}

/* Site picker sits inline with the date range — same visual weight as the
   inputs beside it, since choosing "this site" or "all sites" changes the
   document as much as the dates do. */
.pf-reportbar select {
  font: inherit; font-weight: 500; color: var(--pf-text);
  padding: 7px 10px; border: 1px solid var(--pf-border);
  border-radius: 8px; background: var(--pf-bg); max-width: 220px;
}
.pf-reportbar select:focus-visible {
  outline: 2px solid var(--pf-accent); outline-offset: 1px;
}