/* ===== Design tokens ===== */
:root {
  --navy: #0A1F44;
  --navy-dark: #061530;
  --navy-light: #14315e;
  --navy-tint: #eef1f6;
  --saffron: #FF9933;
  --saffron-dark: #e6821a;
  --saffron-tint: #fff4e6;
  --good: #1E9E45;
  --good-tint: #e8f8ec;
  --critical: #C0392B;
  --critical-tint: #fbebe9;
  --sky: #1C8FC9;
  --sky-dark: #14719f;
  --sky-tint: #e8f4fb;
  --violet: #7A3FBF;
  --violet-dark: #602f96;
  --violet-tint: #f2eafb;
  --ink: #1a1d24;
  --ink-secondary: #52525b;
  --ink-muted: #8a8a92;
  --page-bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e3e6ea;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow: 0 2px 6px rgba(10, 31, 68, 0.08), 0 1px 2px rgba(10, 31, 68, 0.06);
  --shadow-md: 0 14px 34px rgba(10, 31, 68, 0.16), 0 4px 10px rgba(10, 31, 68, 0.08);
  --shadow-lg: 0 24px 60px rgba(10, 31, 68, 0.22), 0 8px 20px rgba(10, 31, 68, 0.1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ===== Reset & base ===== */
* { box-sizing: border-box; }
body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--page-bg);
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--navy); font-weight: 800; margin: 0 0 12px; line-height: 1.15; letter-spacing: -0.025em; }
h1 { font-size: 34px; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 12px; }
a { color: var(--navy); }
small { color: var(--ink-muted); }

/* ===== Layout ===== */
.container {
  max-width: 640px;
  margin: 48px auto;
  padding: 36px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.container-auth { max-width: 440px; margin-top: 90px; position: relative; overflow: hidden; }
.container-auth::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--saffron); }
.container-lg { max-width: 800px; }
.container-xl { max-width: 940px; }

/* Signature strip under the nav - single accent, professional, not decorative */
.brand-strip { height: 3px; background: var(--saffron); }

/* Brand signature gradient bar - above the nav, on every page */
.brand-gradient-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--saffron) 50%, var(--good) 100%);
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 16px;
  background: var(--surface);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card.active { border-color: var(--navy); background: var(--navy-tint); }
.card-elevate:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Top-accent bars: functional signal, not decoration - what kind of thing this card is */
.accent-top-navy { border-top: 3px solid var(--navy); }
.accent-top-saffron { border-top: 3px solid var(--saffron); }
.accent-top-good { border-top: 3px solid var(--good); }
.accent-top-critical { border-top: 3px solid var(--critical); }
.accent-top-sky { border-top: 3px solid var(--sky); }
.accent-top-violet { border-top: 3px solid var(--violet); }

/* Left-accent bars: same idea, for wider cards (Billing, fieldsets) */
.accent-left-saffron { border-left: 4px solid var(--saffron); }
.accent-left-good { border-left: 4px solid var(--good); }
.accent-left-navy { border-left: 4px solid var(--navy); }
.accent-left-sky { border-left: 4px solid var(--sky); }
.accent-left-violet { border-left: 4px solid var(--violet); }
.accent-left-critical { border-left: 4px solid var(--critical); }

/* ===== Nav =====
   Not a flat navy bar - the same three brand accents that show up in the
   gradient strip above it (saffron/sky/violet) bleed in from the corners as
   soft glows, plus a faint dot texture, so it reads as one designed system
   rather than a generic dark corporate header. */
.site-nav {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, var(--navy-dark) 0%, var(--navy) 45%, var(--navy-light) 100%);
  height: 72px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 20px rgba(10, 31, 68, 0.18);
}
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 6% 130%, rgba(122, 63, 191, 0.4), transparent 58%),
    radial-gradient(circle at 94% -70%, rgba(28, 143, 201, 0.35), transparent 58%),
    radial-gradient(circle at 55% -140%, rgba(255, 153, 51, 0.22), transparent 62%);
  pointer-events: none;
}
.site-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.5;
  pointer-events: none;
}
.nav-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-brand svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.82;
  padding: 8px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.nav-links a:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.nav-links a.active { opacity: 1; background: rgba(255, 153, 51, 0.2); box-shadow: inset 0 -2.5px 0 var(--saffron), 0 2px 10px rgba(255, 153, 51, 0.25); }
.nav-right { flex-shrink: 0; display: flex; align-items: center; height: 100%; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.org-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none !important;
}
.org-badge:hover { background: rgba(255, 255, 255, 0.24); }

/* ===== Buttons =====
   Pill-shaped, gradient-filled, with a lift + glow on hover and a subtle
   press-down on click. Distinct tiers: solid (primary), accent (the one
   action per page that matters most), secondary (outline), ghost (quiet,
   text-only until hovered), danger, outline (for dark surfaces). */
button, .btn {
  background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 60%, var(--navy-dark) 100%);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 1px 2px rgba(10, 31, 68, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
button:hover, .btn:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 22px rgba(10, 31, 68, 0.24); filter: brightness(1.08); }
button:active, .btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 1px 2px rgba(10, 31, 68, 0.1); filter: brightness(0.98); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

.btn-accent {
  background: linear-gradient(135deg, #ffb35c 0%, var(--saffron) 55%, var(--saffron-dark) 100%);
  color: var(--navy);
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(255, 153, 51, 0.35);
}
.btn-accent:hover { color: #fff; box-shadow: 0 12px 26px rgba(255, 153, 51, 0.45); }

.btn-lg { padding: 14px 30px; font-size: 15.5px; }

.btn-secondary { background: var(--surface); color: var(--ink-secondary); border: 1.5px solid var(--border); box-shadow: none; }
.btn-secondary:hover { background: var(--page-bg); color: var(--navy); border-color: var(--navy); filter: none; }

.btn-ghost { background: transparent; color: var(--ink-secondary); border: none; box-shadow: none; padding: 8px 14px; }
.btn-ghost:hover { background: var(--navy-tint); color: var(--navy); transform: none; box-shadow: none; filter: none; }

.btn-danger { background: linear-gradient(135deg, #e0584a 0%, var(--critical) 60%, #9e2f22 100%); }
.btn-danger:hover { box-shadow: 0 10px 22px rgba(192, 57, 43, 0.35); }

.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.7); box-shadow: none; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.14); box-shadow: none; }

.btn-accent-outline { background: transparent; color: var(--saffron-dark); border: 1.5px solid var(--saffron); box-shadow: none; }
.btn-accent-outline:hover { background: var(--saffron-tint); box-shadow: none; filter: none; }

/* ===== Forms ===== */
label { font-size: 13px; font-weight: 600; color: var(--ink-secondary); display: block; margin-top: 10px; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
  width: 100%;
  padding: 9px 10px;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-tint);
}
input[type=text].inline, input[type=email].inline { width: auto; padding: 8px; margin: 6px 6px 12px 0; }
fieldset { border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-sm); margin-bottom: 16px; padding: 14px; }
fieldset.accent-saffron { border-left-color: var(--saffron); }
fieldset.accent-good { border-left-color: var(--good); }
fieldset.accent-navy { border-left-color: var(--navy); }
legend { font-weight: 700; color: var(--navy); padding: 0 6px; font-size: 13px; }
.fieldset-hint { font-size: 12.5px; color: var(--ink-muted); margin: -4px 0 10px; }

/* ===== Answer picker - segmented chip buttons replacing plain radio rows.
   Real <input type=radio> underneath (keyboard/no-JS safe), visually styled
   as color-coded pills so a questionnaire reads as an app control, not a
   bare HTML form. ===== */
.answer-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.answer-chip { position: relative; display: inline-flex; }
.answer-chip input[type=radio] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer; z-index: 1;
}
.answer-chip label {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 15px; margin: 0;
  border-radius: 999px; border: 1.5px solid var(--border);
  font-size: 12.5px; font-weight: 700; text-transform: none;
  color: var(--ink-secondary); background: #fff; cursor: pointer;
  transition: all 0.15s ease;
}
.answer-chip label:hover { border-color: var(--navy); color: var(--navy); }
.answer-chip input:focus-visible + label { outline: 2px solid var(--sky); outline-offset: 2px; }
.answer-chip input:checked + label { color: #fff; border-color: transparent; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.18); transform: translateY(-1px); }
.answer-chip.chip-yes input:checked + label { background: var(--good); }
.answer-chip.chip-partial input:checked + label { background: var(--saffron-dark); }
.answer-chip.chip-no input:checked + label { background: var(--critical); }
.answer-chip.chip-na input:checked + label { background: #6b7280; }

/* Sticky live-progress bar for long questionnaires */
.progress-bar-sticky {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
}
.progress-bar-sticky .progress-label { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.progress-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--page-bg); overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--saffron) 0%, var(--good) 100%); width: 0%; transition: width 0.25s ease; }

/* Answered/skipped indicator dot on each question row, driven by JS */
.question-row.is-answered { border-left: 3px solid var(--good); padding-left: 12px; }
.question-row { border-left: 3px solid transparent; transition: border-color 0.15s ease; }

/* ===== Report integrity (hash chain + blockchain anchoring) ===== */
.integrity-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.integrity-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.integrity-actions button, .integrity-actions a { font-size: 11.5px; padding: 4px 9px; }
.integrity-note { font-size: 12.5px; color: var(--ink-muted); background: var(--page-bg); border-radius: var(--radius-sm); padding: 10px 14px; margin: 6px 0 18px; line-height: 1.55; }
.verify-banner { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.verify-banner.valid { background: var(--good-tint); color: var(--good); }
.verify-banner.invalid { background: var(--critical-tint); color: var(--critical); }
form.inline { display: inline; }

/* Distinct treatment for repeated "add" patterns (Employees: single add vs bulk paste) */
.form-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; background: var(--surface); margin-bottom: 18px; }
.form-card h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 12px; }
.paste-zone { border: 2px dashed var(--good); border-radius: var(--radius-sm); padding: 16px; background: var(--good-tint); margin-bottom: 18px; }
.paste-zone h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 8px; }
.paste-zone textarea { background: #fff; }

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--ink-secondary); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
th .icon { opacity: 0.55; margin-right: 4px; }
tbody tr { transition: background 0.1s ease; }
tbody tr:nth-child(even) { background: rgba(10, 31, 68, 0.015); }
tbody tr:hover { background: var(--navy-tint); }

/* ===== Status / badges ===== */
.tag { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--navy-tint); color: var(--navy); font-weight: 600; }
.tag-accent { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--saffron-tint); color: var(--saffron-dark); font-weight: 700; }

/* Pill badges - light tint bg + colored text + icon. Palette used meaningfully:
   good = clean/active, warn(saffron) = needs attention, critical(red) = genuine danger only, neutral = informational */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.pill .icon { flex-shrink: 0; stroke: currentColor; }
.pill-good { background: var(--good-tint); color: var(--good); }
.pill-warn { background: var(--saffron-tint); color: var(--saffron-dark); }
.pill-critical { background: var(--critical-tint); color: var(--critical); }
.pill-neutral { background: var(--navy-tint); color: var(--navy); }
.error { color: var(--critical); background: var(--critical-tint); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.success { color: var(--good); background: var(--good-tint); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.password-notice { display: flex; align-items: center; gap: 10px; background: var(--saffron-tint); color: var(--saffron-dark); border-bottom: 1px solid rgba(230, 130, 26, 0.25); padding: 9px 24px; font-size: 13.5px; }
.password-notice .icon { stroke: var(--saffron-dark); flex-shrink: 0; }
.password-notice span { flex: 1; }
.password-notice a { color: var(--saffron-dark); font-weight: 600; text-decoration: underline; white-space: nowrap; }
.password-rules { list-style: none; margin: -6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.password-rules li { font-size: 12.5px; color: var(--ink-muted); padding-left: 18px; position: relative; }
.password-rules li::before { content: "\2022"; position: absolute; left: 4px; color: var(--ink-muted); }
.password-rules li.met { color: var(--good); }
.password-rules li.met::before { content: "\2713"; color: var(--good); left: 2px; }
.warn { color: var(--critical); }
.ok { color: var(--good); }
.dev-link { background: var(--page-bg); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px; font-size: 12px; word-break: break-all; margin-bottom: 12px; }

/* ===== Stat tiles ===== */
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.stat-tile {
  flex: 1 1 160px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
}
.stat-tile .stat-label { font-size: 12px; color: var(--ink-secondary); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.stat-tile .stat-value { font-size: 30px; font-weight: 700; color: var(--ink); }
.stat-tile.stat-good .stat-value { color: var(--good); }
.stat-tile.stat-critical .stat-value { color: var(--critical); }
.stat-tile .stat-icon { flex-shrink: 0; }

/* Stat ring - small circular proportion indicator, sits beside the number */
.stat-body { display: flex; align-items: center; gap: 14px; }
.stat-ring { width: 46px; height: 46px; flex-shrink: 0; transform: rotate(-90deg); }
.stat-ring circle { fill: none; stroke-width: 3.2; }
.stat-ring .stat-ring-bg { stroke: var(--border); }
.stat-ring .stat-ring-fg { stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
.stat-ring-navy .stat-ring-fg { stroke: var(--navy); }
.stat-ring-saffron .stat-ring-fg { stroke: var(--saffron); }
.stat-ring-good .stat-ring-fg { stroke: var(--good); }
.stat-ring-critical .stat-ring-fg { stroke: var(--critical); }
.stat-ring-sky .stat-ring-fg { stroke: var(--sky); }
.stat-ring-violet .stat-ring-fg { stroke: var(--violet); }

/* ===== Bold gradient stat tiles (Dashboard hero metrics) ===== */
.stat-row-bold { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.stat-tile-fill {
  flex: 1 1 200px;
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 26px 24px;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-tile-fill:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-tile-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% -10%, rgba(255, 255, 255, 0.22), transparent 55%);
  pointer-events: none;
}
.stat-tile-fill > * { position: relative; z-index: 1; }
.stat-tile-fill .stat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.stat-tile-fill .stat-icon-wrap .icon { stroke: #fff; }
.stat-tile-fill .stat-fill-label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.88); margin-bottom: 6px; }
.stat-tile-fill .stat-fill-value { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.stat-tile-fill .stat-fill-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.75); margin-top: 6px; }
.stat-fill-navy { background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy-dark) 100%); }
.stat-fill-sky { background: linear-gradient(135deg, var(--sky) 0%, #124f6d 100%); }
.stat-fill-saffron { background: linear-gradient(135deg, var(--saffron) 0%, var(--saffron-dark) 100%); }
.stat-fill-good { background: linear-gradient(135deg, #2bb857 0%, #146e30 100%); }
.stat-fill-critical { background: linear-gradient(135deg, #d9503f 0%, #8f2a1e 100%); }
.stat-fill-violet { background: linear-gradient(135deg, var(--violet) 0%, var(--violet-dark) 100%); }

/* Dashboard decorative glow - subtle sky/violet wash behind the card, purely ambient */
.dashboard-glow { position: relative; overflow: hidden; }
.dashboard-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(28, 143, 201, 0.08), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(122, 63, 191, 0.07), transparent 32%);
  pointer-events: none;
}
.dashboard-glow > * { position: relative; z-index: 1; }

.mini-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.mini-card-grid .card { margin-bottom: 0; }
.mini-card-grid h2 { font-size: 13.5px; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.risk-bar-row { margin-bottom: 12px; }
.risk-bar-row:last-child { margin-bottom: 0; }
.risk-bar-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-secondary); margin-bottom: 5px; }
.risk-bar-head strong { color: var(--ink); font-weight: 700; }
.risk-bar-track { height: 7px; border-radius: 999px; background: var(--page-bg); overflow: hidden; }
.risk-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.risk-bar-fill.risk-slack { background: var(--violet); }
.risk-bar-fill.risk-github { background: var(--navy); }
.risk-bar-fill.risk-microsoft { background: var(--saffron-dark); }
.risk-bar-fill.risk-okta { background: var(--navy-dark); }
.risk-bar-fill.risk-aws { background: var(--critical); }
.risk-bar-fill.risk-filestorage { background: var(--good); }
.risk-bar-fill.risk-zoom { background: var(--sky-dark); }
.risk-bar-fill.risk-onepassword { background: var(--violet-dark); }
.coverage-figure { font-size: 32px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.dashboard-subtitle { color: var(--ink-secondary); max-width: 640px; margin: 0 0 22px; font-size: 14.5px; }

/* ===== Page intro - explanatory context block under H1, used across every page ===== */
.page-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--navy-tint);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 22px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.page-intro .icon { flex-shrink: 0; margin-top: 2px; stroke: var(--navy); }
.page-intro strong { color: var(--ink); }
@media (max-width: 780px) {
  .mini-card-grid { grid-template-columns: 1fr; }
}

/* ===== Icons ===== */
.icon { display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ===== Empty states ===== */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-secondary);
}
.empty-state .icon { stroke: var(--ink-muted); margin-bottom: 14px; }
.empty-state h3 { color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; max-width: 380px; margin: 0 auto 18px; }

/* ===== Onboarding panel - a full "getting started" moment for a brand-new
   org, used instead of a bare empty-state line where the page would
   otherwise be mostly zeros/blank. Numbered steps + one clear CTA. ===== */
.onboarding-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  margin-bottom: 20px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.onboarding-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% 4%, rgba(255, 153, 51, 0.3), transparent 40%),
    radial-gradient(circle at 4% 96%, rgba(28, 143, 201, 0.22), transparent 42%);
  pointer-events: none;
}
.onboarding-panel > * { position: relative; z-index: 1; }
.onboarding-panel h2 { color: #fff; font-size: 20px; margin-bottom: 6px; }
.onboarding-panel > p { color: rgba(255, 255, 255, 0.8); font-size: 14px; max-width: 480px; margin: 0 0 22px; }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.onboarding-step {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  padding: 16px;
  backdrop-filter: blur(2px);
}
.onboarding-step .onboarding-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--saffron); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; margin-bottom: 10px;
}
.onboarding-step h4 { margin: 0 0 4px; font-size: 14px; color: #fff; }
.onboarding-step p { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 780px) { .onboarding-steps { grid-template-columns: 1fr; } }

/* Colored icon badges - used in empty states, activity rows, and step markers
   so icons read as intentional palette choices rather than gray placeholders */
.icon-badge { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; flex-shrink: 0; }
.icon-badge-navy { background: var(--navy-tint); color: var(--navy); }
.icon-badge-saffron { background: var(--saffron-tint); color: var(--saffron-dark); }
.icon-badge-good { background: var(--good-tint); color: var(--good); }
.icon-badge-critical { background: var(--critical-tint); color: var(--critical); }
.icon-badge-sky { background: var(--sky-tint); color: var(--sky-dark); }
.icon-badge-violet { background: var(--violet-tint); color: var(--violet-dark); }
.empty-state .icon-badge .icon { stroke: currentColor; margin-bottom: 0; }
.icon-badge-sm { width: 30px; height: 30px; margin: 0; }

/* ===== Recent activity (dashboard) ===== */
.activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  font-size: 13.5px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background 0.15s ease;
}
.activity-list li:last-child { border-bottom: none; }
.activity-list li:hover { background: var(--page-bg); }
.activity-list .icon { color: var(--ink-muted); flex-shrink: 0; }
.activity-list .activity-meta { color: var(--ink-muted); font-size: 12px; margin-left: auto; white-space: nowrap; padding-left: 10px; }
.activity-empty { font-size: 13px; color: var(--ink-muted); padding: 10px 0; }
.activity-list-good li { border-left-color: var(--good); }
.activity-list-navy li { border-left-color: var(--navy); }
.activity-list-sky li { border-left-color: var(--sky); }
.activity-list-violet li { border-left-color: var(--violet); }

/* ===== Error page ===== */
.error-page { text-align: center; margin-top: 80px; }
.error-page h1 { color: var(--critical); margin: 12px 0; }

/* ===== Toggle switches (Mock Mode, Automation) - replaces plain checkboxes ===== */
.toggle-row { display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: 14px; color: var(--ink); margin: 10px 0; }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 23px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.toggle-slider { position: absolute; inset: 0; background: #c7cad1; border-radius: 999px; transition: background 0.2s ease; pointer-events: none; }
.toggle-slider::before { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.toggle-switch input:checked + .toggle-slider { background: var(--saffron); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(17px); }
.toggle-switch.toggle-good input:checked + .toggle-slider { background: var(--good); }
.toggle-switch input:focus-visible + .toggle-slider { box-shadow: 0 0 0 3px var(--navy-tint); }
.toggle-row .toggle-label-text { font-weight: 500; }

/* ===== Connector status dots (Connections, Dashboard) ===== */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot-on { background: var(--good); box-shadow: 0 0 0 3px var(--good-tint); }
.status-dot-off { background: #c7cad1; }
legend.legend-with-status { display: flex; align-items: center; gap: 7px; }

/* ===== Connector status grid (Dashboard "Connected systems") ===== */
.connector-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.connector-status-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--ink-secondary); font-weight: 500; border-bottom: 1px solid var(--border); }
.connector-status-item:nth-last-child(-n+1), .connector-status-item:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 460px) { .connector-status-grid { grid-template-columns: 1fr; } }

/* ===== Subtle section background tinting - visual depth within long single-container pages ===== */
.section-tint { background: var(--page-bg); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.section-tint > h2:first-child { margin-top: 0; }
.fieldset-tint { background: rgba(10, 31, 68, 0.02); }
fieldset { transition: background 0.15s ease; }
fieldset:hover { background: rgba(10, 31, 68, 0.025); }

/* ===== Danger zone ===== */
.danger-zone { border: 1px solid var(--critical); border-radius: var(--radius-sm); padding: 18px; margin-top: 30px; background: var(--critical-tint); }
.danger-zone h2 { color: var(--critical); margin-top: 0; }

/* ===== Auth pages ===== */
.auth-brand { color: var(--navy); font-size: 20px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.container-auth button[type=submit] { width: 100%; padding: 10px 16px; justify-content: center; }

/* SSO button - deliberately NOT gradient/pill like the rest of the button
   system: provider sign-in buttons follow platform convention (white,
   bordered, provider mark + neutral text) so it reads as "the real Google
   button", not a themed impostor. */
.btn-google {
  width: 100%;
  background: #fff;
  color: #1a1d24;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(10, 31, 68, 0.06);
}
.btn-google:hover { background: #f8f9fa; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 31, 68, 0.1); filter: none; color: #1a1d24; }
.btn-google:active { transform: translateY(0); }
.btn-google + .btn-google { margin-top: 10px; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-muted); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ===== Landing page =====
   Hero background is a multi-hue sweep (navy -> violet -> sky), not one flat
   navy fill, with tight, saturated color pools instead of wide soft-edged
   haze - crisp pools of color, not a blur. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, var(--navy-dark) 0%, var(--navy) 32%, var(--violet-dark) 70%, var(--sky-dark) 100%);
  color: #fff;
  padding: 72px 24px 64px;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 153, 51, 0.5) 0%, transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(28, 143, 201, 0.42) 0%, transparent 32%),
    radial-gradient(circle at 80% 92%, rgba(30, 158, 69, 0.32) 0%, transparent 28%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.45;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: 46px; margin-bottom: 14px; letter-spacing: -0.03em; }
.hero p.lead { font-size: 18px; color: #dceeff; max-width: 620px; margin: 0 auto 28px; }
.hero-actions { margin-bottom: 36px; }
.hero-actions .btn { margin: 0 6px; padding: 12px 26px; font-size: 15px; }
.hero-actions .btn.btn-accent { color: var(--navy); }
.hero-actions .btn.btn-accent:hover { color: #fff; }

.hero-stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stat { display: flex; flex-direction: column; align-items: center; }
.hero-stat strong { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.hero-stat span { font-size: 12.5px; color: #b9c6dc; max-width: 150px; text-align: center; margin-top: 2px; }

/* Step badges - colored circle markers rotating through the palette, replaces plain numbering */
.step-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: var(--shadow);
}
.step-badge .icon { stroke: #fff; }
.step-badge-navy { background: var(--navy); }
.step-badge-saffron { background: var(--saffron); }
.step-badge-good { background: var(--good); }
.cards.steps .card { text-align: center; }
.cards.steps .card h3 { justify-content: center; }

.browser-frame {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #fff;
  text-align: left;
}
.browser-frame .browser-bar { background: #e7eaee; padding: 9px 12px; display: flex; gap: 6px; }
.browser-frame .browser-dot { width: 10px; height: 10px; border-radius: 50%; background: #c6cbd3; }
.browser-frame img { display: block; width: 100%; height: auto; }
/* Live CSS mockup instead of a raster screenshot - built from the real
   design-system classes, so it's pixel-crisp at any width and never goes
   stale against the actual product UI. */
.browser-frame-body { padding: 22px 26px 26px; background: var(--page-bg); }
.browser-frame-body h3 { color: var(--navy); font-size: 16px; margin: 0 0 14px; }
.browser-frame-body .stat-row-bold { margin-bottom: 14px; }
.browser-frame-body .stat-tile-fill { padding: 16px 14px; }
.browser-frame-body .stat-fill-value { font-size: 26px; }
.browser-frame-body .card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; flex-wrap: wrap; }
.browser-frame-body .card .btn { pointer-events: none; padding: 7px 16px; font-size: 12.5px; }

.section { padding: 56px 24px; }
.section:nth-of-type(even) { background: var(--surface); }
.section-inner { max-width: 900px; margin: 0 auto; }
.section h2 { font-size: 26px; text-align: center; margin-bottom: 36px; }
.cards { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.cards-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 640px) { .cards-grid-4 { grid-template-columns: 1fr; } }
.cards .card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; flex: 1; min-width: 230px; box-shadow: var(--shadow); }
.cards .card h3 { color: var(--navy); font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cards .card.problem { background: #fdf8f7; }
.cards .card p { color: var(--ink-secondary); margin: 0; font-size: 14px; }

.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 15.5px; color: var(--navy); margin-bottom: 6px; }
.faq-item p { color: var(--ink-secondary); font-size: 14px; margin: 0; }

footer { text-align: center; padding: 34px 24px; color: var(--ink-muted); font-size: 13px; }
footer a { color: var(--ink-muted); }

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .container, .container-auth, .container-lg, .container-xl { margin: 20px 12px; padding: 20px; max-width: none; }
  .hero { padding: 48px 18px 40px; }
  .hero h1 { font-size: 28px; }
  .nav-inner { padding: 0 14px; gap: 10px; }
  .nav-links a { padding: 8px 10px; font-size: 13px; }
  .activity-grid { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 460px) {
  /* Targets the brand's text label specifically, not "any span inside
     nav-brand" - the old generic selector happened to also match a
     span-wrapped icon on another product in this portfolio (HIPAA),
     hiding the icon along with the label there. This is narrower on
     purpose so it can only ever affect the label. */
  .brand-copy { display: none; }
}

/* ===== Offboarding Proof polish: access operations ledger ===== */
:root {
  --proof-ink: #111817;
  --proof-panel: #182321;
  --proof-green: #55d68b;
  --proof-green-soft: #e7f8ee;
  --proof-grid: #dce5e1;
  --page-bg: #f1f5f3;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(17,24,23,.06);
  --shadow-md: 0 10px 24px rgba(17,24,23,.09);
}
.proof-app { background-color: var(--page-bg); background-image: linear-gradient(rgba(17,24,23,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(17,24,23,.025) 1px, transparent 1px); background-size: 28px 28px; }
.proof-app .brand-gradient-bar { height: 3px; background: var(--proof-green); }
.proof-app .brand-strip { background: #263834; height: 1px; }
.proof-app .site-nav { height: 66px; background: var(--proof-ink); box-shadow: 0 4px 16px rgba(17,24,23,.14); }
.proof-app .nav-brand { min-width: 190px; }
/* The leaf glyph's own path data isn't centered in its 24x24 viewBox (it sits
   low, drawn between y=8.5 and y=22.5 instead of spanning the box evenly like
   the other nav icons do) - so flexbox centers the icon's bounding box
   correctly, but the visible leaf still reads as sitting below the
   "Offboarding Proof" wordmark next to it. Nudging it up here corrects for
   that without touching the SVG markup itself. */
.proof-app .nav-brand .icon { transform: translateY(-3px); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-size: 14px; }.brand-copy small { font-size: 9px; margin-top: 3px; color: #88a097; text-transform: uppercase; letter-spacing: .08em; }
.proof-app .nav-links a { border-radius: 5px; font-size: 12px; color: #c4d1cc; opacity: 1; }
.proof-app .nav-links a.active { background: #263834; box-shadow: inset 0 -2px 0 var(--proof-green); color: #fff; }
.proof-app .org-badge { border-radius: 5px; background: #263834; }
.nav-proof-action { white-space: nowrap; padding: 8px 11px; border: 1px solid var(--proof-green); border-radius: 5px; color: var(--proof-green); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.nav-proof-action:hover { color: #071b12; background: var(--proof-green); }
.proof-app .container, .proof-app .container-lg, .proof-app .container-xl { max-width: 1180px; border-radius: 10px; border: 1px solid var(--proof-grid); box-shadow: none; padding: 30px; }
.proof-app h1 { font-size: 27px; color: var(--proof-ink); }
.proof-app .card, .proof-app .form-card, .proof-app .paste-zone { border-radius: 7px; box-shadow: none; }
.proof-app button, .proof-app .btn { border-radius: 5px; background: var(--proof-panel); box-shadow: none; }
.proof-app .btn-accent { background: var(--proof-green); color: #10231b; box-shadow: none; }
.proof-app .btn-secondary { background: #fff; }.proof-app .btn-danger { background: var(--critical); }
.proof-app .stat-row-bold { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--proof-grid); border-radius: 7px; overflow: hidden; background: var(--proof-grid); }
.proof-app .stat-tile-fill { border-radius: 0; box-shadow: none; background: #fff !important; color: var(--proof-ink); padding: 20px; }
.proof-app .stat-tile-fill:hover { transform: none; box-shadow: none; }
.proof-app .stat-tile-fill::after { display: none; }
.proof-app .stat-icon-wrap { background: var(--proof-green-soft) !important; border-radius: 5px !important; }
.proof-app .stat-icon-wrap .icon { stroke: #16854a !important; }
.proof-app .stat-fill-label, .proof-app .stat-fill-sub { color: var(--ink-secondary) !important; }
.proof-app .stat-fill-value { color: var(--proof-ink); font-size: 36px; }
.proof-app table { border: 1px solid var(--proof-grid); background: #fff; border-collapse: separate; border-spacing: 0; border-radius: 7px; overflow: hidden; }
.proof-app th { background: #eef3f0; color: #52635d; }
.proof-app .page-intro { background: #f4f8f6; border-left: 3px solid var(--proof-green); border-radius: 3px; }
.page-command-bar { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; border-bottom: 1px solid var(--proof-grid); padding-bottom: 18px; margin-bottom: 18px; }
.page-command-bar h1 { margin: 3px 0 2px; }.page-command-bar p { margin: 0; color: var(--ink-muted); font-size: 12px; }
.page-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #16854a; }
.page-command-actions { display: flex; gap: 8px; }
.proof-app .dashboard-subtitle { max-width: 760px; }
.proof-public .hero { background: #111817; text-align: left; padding: 70px max(24px, calc((100vw - 1040px)/2)); }
.proof-public .hero::before { background-image: linear-gradient(rgba(85,214,139,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(85,214,139,.05) 1px, transparent 1px); background-size: 28px 28px; }
.proof-public .hero h1 { max-width: 720px; font-size: clamp(40px,5vw,60px); }.proof-public .hero p.lead { margin-left: 0; max-width: 700px; }
.proof-public .hero-actions, .proof-public .hero-stats { justify-content: flex-start; }.proof-public .hero-actions .btn { border-radius: 5px; }
.proof-public .browser-frame { margin-left: 0; max-width: 880px; border: 1px solid #32443e; border-radius: 7px; }

@media (max-width: 820px) {
  .nav-proof-action, .brand-copy small { display: none; }
  .proof-app .stat-row-bold { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-command-bar { align-items: flex-start; flex-direction: column; }.page-command-actions { width: 100%; flex-wrap: wrap; }
}

/* ---------- mobile nav (hamburger) ----------
   Below this breakpoint the in-app nav has far too many links (Dashboard,
   Companies, Employees, Contractors, Connections, Reports, Access Review,
   Getting Started, Billing, Team, Activity, Account, Logout) to fit as an
   inline row - .nav-links used to just scroll sideways to reach the rest.
   It now collapses behind a toggle into a full-width stacked panel
   instead. Desktop (.nav-links horizontal row, above this width) is
   untouched. */
@media (max-width: 640px) {
  .nav-toggle { display: flex; }
  .site-nav, .proof-app .site-nav { height: auto; }
  .nav-inner { flex-wrap: wrap; row-gap: 0; }
  .nav-links, .nav-right {
    display: none;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .site-nav.is-open .nav-links,
  .site-nav.is-open .nav-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .nav-links a, .proof-app .nav-links a {
    width: 100%;
    height: auto;
    padding: 11px 12px;
  }
  .site-nav.is-open .nav-right { margin-top: 6px; padding-top: 6px; border-top: 0; }
  .org-badge { width: 100%; justify-content: center; }
}

/* ---------- cramped-desktop nav guard ----------
   The link row's real width depends on role (Team/Activity only show for
   org admins) and the org name in the badge, so it can genuinely overflow
   above the mobile breakpoint too - previously that just silently clipped
   into the horizontal-scroll strip (e.g. "Billing" rendering as "Billin"
   at the edge) with nothing to signal more was reachable by scrolling.
   The inline script measures this and adds .nav-collapsed when the row
   doesn't actually fit, reusing the same dropdown as the mobile toggle
   at any width. Below the mobile breakpoint this is redundant with (and
   overridden by) the media query above; it only does anything extra
   between that breakpoint and whatever width a given account's nav
   actually fits at. */
.site-nav.nav-collapsed .nav-toggle { display: flex; }
.site-nav.nav-collapsed, .proof-app .site-nav.nav-collapsed { height: auto; }
.site-nav.nav-collapsed .nav-inner { flex-wrap: wrap; row-gap: 0; }
.site-nav.nav-collapsed .nav-links,
.site-nav.nav-collapsed .nav-right {
  display: none;
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
}
.site-nav.nav-collapsed.is-open .nav-links,
.site-nav.nav-collapsed.is-open .nav-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.site-nav.nav-collapsed .nav-links a,
.proof-app .site-nav.nav-collapsed .nav-links a {
  width: 100%;
  height: auto;
  padding: 11px 12px;
}
.site-nav.nav-collapsed.is-open .nav-right { margin-top: 6px; padding-top: 6px; border-top: 0; }
.site-nav.nav-collapsed .org-badge { width: 100%; justify-content: center; }

/* Reports: keep-your-files panel, per-report file tools, neutral verify notice */
.keep-panel { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px 28px; margin:14px 0 18px; padding:18px 20px; border:1px solid var(--border); border-left:4px solid var(--violet); border-radius:var(--radius-sm); background:var(--surface); }
.keep-panel__text { flex:1 1 320px; min-width:0; }
.keep-panel__text h2 { margin:0 0 6px; font-size:16px; color:var(--navy); }
.keep-panel__text p { margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-secondary); }
.keep-panel__actions { flex:0 1 330px; display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:0; }
.keep-panel__actions > .btn { justify-content:center; text-align:center; }
.keep-panel__retention { margin:0; }
.keep-panel__retention label { display:block; margin-bottom:5px; font-size:12.5px; font-weight:700; color:var(--ink-secondary); }
.keep-panel__row { display:flex; gap:8px; }
.keep-panel__row select { flex:1 1 auto; min-width:0; margin:0; }
.keep-panel__row .btn { flex:0 0 auto; white-space:nowrap; }
.keep-panel__retention small, .keep-panel__note { display:block; margin:6px 0 0; font-size:12px; line-height:1.45; color:var(--ink-muted); }
.verify-banner.neutral { background:var(--violet-tint); color:var(--violet); font-weight:600; align-items:flex-start; }
.verify-banner.neutral .icon { flex:0 0 auto; margin-top:2px; }
.files-removed { display:inline-block; padding:5px 10px; border-radius:999px; background:var(--navy-tint); color:var(--ink-secondary); font-size:12px; font-weight:700; }
.file-tools { margin-top:8px; font-size:13px; }
.file-tools > summary { cursor:pointer; width:max-content; max-width:100%; color:var(--violet); font-size:12.5px; font-weight:700; }
.file-tools > summary:focus-visible { outline:2px solid var(--violet); outline-offset:2px; border-radius:4px; }
.file-tools__form { display:grid; gap:6px; margin:10px 0 0; padding:12px; max-width:340px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--page-bg); }
.file-tools__form label { font-size:12px; font-weight:700; color:var(--ink-secondary); }
.file-tools__form input[type=file] { max-width:100%; font-size:12px; }
.file-tools__form .btn { justify-self:start; margin-top:4px; }
.file-tools__form small { font-size:11.5px; color:var(--ink-muted); }
.file-tools__delete { margin:10px 0 0; }
@media(max-width:600px){ .keep-panel { padding:16px; } .keep-panel__actions { flex-basis:100%; } .file-tools__form { max-width:none; } }

/* Employees: industry checklist card, per-employee checklist, roster CSV import */
.industry-card { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px 28px; margin:0 0 18px; padding:18px 20px; border:1px solid var(--border); border-left:4px solid var(--saffron); border-radius:var(--radius-sm); background:var(--surface); }
.industry-card[hidden] { display:none; }
.industry-card__text { flex:1 1 320px; min-width:0; }
.industry-card__text h2 { margin:0 0 6px; font-size:16px; color:var(--navy); }
.industry-card__text p, .industry-card__current { margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-secondary); }
.industry-card__form { flex:0 1 340px; min-width:0; margin:0; }
.industry-card__form label { display:block; margin-bottom:5px; font-size:12.5px; font-weight:700; color:var(--ink-secondary); }
.industry-card__row { display:flex; gap:8px; }
.industry-card__row select { flex:1 1 auto; min-width:0; margin:0; }
.industry-card__row .btn { flex:0 0 auto; white-space:nowrap; }
.industry-card__form small { display:block; min-height:1.4em; margin-top:6px; font-size:12px; line-height:1.45; color:var(--ink-muted); }
.checklist-row > td { padding:0 0 14px; background:var(--page-bg); }
.checklist-panel { position:sticky; left:0; box-sizing:border-box; padding:16px 18px; border-left:4px solid var(--saffron); }
.checklist-panel__head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; align-items:baseline; color:var(--navy); }
.checklist-panel__count { font-size:12.5px; font-weight:700; color:var(--ink-secondary); }
.checklist-panel__progress { display:block; width:100%; height:8px; margin:8px 0; accent-color:var(--good); }
.checklist-panel__note { margin:0 0 10px; font-size:12.5px; color:var(--ink-muted); }
.checklist-panel__error { margin:0 0 10px; padding:8px 12px; border-radius:var(--radius-sm); background:var(--critical-tint); color:var(--critical); font-size:13px; font-weight:600; }
.checklist-panel__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; }
.checklist-panel__group { margin:0; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); min-width:0; }
.checklist-panel__group legend { padding:0 4px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-secondary); }
.checklist-panel__list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.checklist-panel__list label { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:start; margin:0; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; }
.checklist-panel__list input[type=checkbox] { width:16px; height:16px; margin:2px 0 0; accent-color:var(--good); }
.checklist-panel__list small { grid-column:2; font-size:11.5px; color:var(--ink-muted); }
.roster-form { display:grid; gap:8px; max-width:460px; }
.roster-form label { font-size:12.5px; font-weight:700; color:var(--ink-secondary); }
.roster-form input[type=file] { max-width:100%; }
.roster-form__actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:8px; font-size:13px; }
.roster-result { margin-top:16px; padding:12px 16px; border-radius:var(--radius-sm); font-size:13.5px; line-height:1.5; }
.roster-result p { margin:0 0 6px; }
.roster-result--ok { background:var(--good-tint); color:var(--good); }
.roster-result--partial { background:var(--navy-tint); color:var(--ink); }
.roster-result--error { background:var(--critical-tint); color:var(--critical); font-weight:600; }
.roster-result__summary { font-weight:700; }
.roster-result__errors { margin:4px 0 8px; padding-left:20px; font-size:12.5px; }
@media(max-width:600px){ .industry-card { padding:16px; } .industry-card__form { flex-basis:100%; } .checklist-panel { padding:14px; } }
.pq-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:10px 0 0 !important; font-size:12.5px !important; }
.pq-line[hidden] { display:none; }
.pq-line__badge { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--good-tint); color:var(--good); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.pq-line a { color:var(--violet); font-weight:600; }
.rs-tabs.people-tabs { display:block; padding:0; margin:0; border:0; border-radius:0; background:none; }
.people-tabs .rs-tabs__list { flex-wrap:wrap; row-gap:4px; }
.people-tabs .rs-tabs__btn { white-space:nowrap; }
@media (max-width: 640px) { .proof-app table { overflow-x: auto; } }
.checklist-panel, .file-tools__form, .file-tools__delete, .files-removed { white-space:normal; }

/* Connections: every connector card (built-in and industry) follows one add-flow - name and status,
   what it needs, the fields, then one action row (Test connection + hint). */
.section-tint fieldset[id] { background: var(--surface); padding: 18px 20px; margin-bottom: 14px; }
.section-tint fieldset[id]:hover { background: var(--surface); }
.section-tint fieldset[id] .checkbox-note { display: flex; align-items: center; padding: 0; margin: -4px 0 12px; background: none; font-size: 12.5px; color: var(--ink-secondary); }
.section-tint fieldset[id] .checkbox-note input { margin: 0 6px 0 0; }
.connector-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.connector-test [role=status] { flex-basis: 100%; }
.connector-test button { margin: 0; padding: 8px 18px; font-size: 13.5px; }