/* ============================================================================
   Tribastion CRM — design system
   Magenta #EC008C primary, indigo secondary accent.
   Light is the default; dark via toggle / system.

   TYPOGRAPHY. The house faces are Mont (display) and Aptos (text), the two
   families the official presentation template is built on. Neither is ours to
   redistribute, so the stacks below ASK FOR THEM FIRST — anyone on the
   corporate build sees the real brand faces — and fall through to Montserrat
   and Inter, which are self-hosted here under the SIL Open Font Licence and
   therefore render identically for everybody else, including customers opening
   an exported document on a machine that has never heard of Mont.

   Latin subsets only, four weights each: 172KB for the whole set, which is less
   than one of the icons on the deck this palette came from. Licences ship
   beside the files in /lib/fonts/.
   ============================================================================ */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../lib/fonts/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../lib/fonts/montserrat-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../lib/fonts/montserrat-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../lib/fonts/montserrat-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../lib/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../lib/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../lib/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../lib/fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Brand (magenta — matches the Tribastion product family) */
  --brand: #EC008C;
  --brand-600: #D4007E;
  --brand-700: #A3238E;
  --brand-tint: rgba(236, 0, 140, 0.10);
  --brand-tint-2: rgba(236, 0, 140, 0.16);
  /* The glyph inside a tinted badge. Its own token because it has to FLIP:
     the badge ground is the tint composited over the surface, #fde6f4 in
     light and #381835 in dark, and one colour cannot serve both. #A3238E
     reads 5.58:1 on the light ground but only 2.36:1 on the dark one —
     under the 3:1 a non-text glyph needs, so it sinks into the card. */
  --ico-fg: #A3238E;
  /* The table-header band. Deep magenta rather than the hot pink: white text
     on #EC008C measures 4.25:1, under the 4.5:1 that small text needs, while
     white on #A3238E measures 6.59:1. */
  --th-bg: #A3238E;
  --th-fg: #FFFFFF;

  /* Secondary accent (indigo) — used sparingly for specific badges/tags */
  --secondary: #6366F1;
  --secondary-tint: rgba(99, 102, 241, 0.14);

  /* Light theme surfaces */
  --bg: #F5F6F8;
  --bg-2: #EEF1F5;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --elev: #FFFFFF;
  --border: #E3E8EF;
  --border-strong: #D2D9E3;

  /* Text */
  --text: #1B2430;
  --text-dim: #5A6675;
  --text-faint: #8993A2;
  --on-brand: #FFFFFF;

  /* Semantic */
  --crit: #DC2626;
  --high: #EA580C;
  --med: #EAB308;
  --low: #0EA5E9;
  --info: #0EA5E9;
  --ok: #16A34A;
  --warn: #EA580C;
  --bad: #DC2626;

  /* Chart/heat cell fills (light) */
  --cell-prevented: #dff4e8; --cell-prevented-bd: #9fe0bd; --cell-prevented-fg: #146c43;
  --cell-detected:  #dcecfd; --cell-detected-bd: #a8ccf7; --cell-detected-fg: #1d4ed8;
  --cell-succeeded: #fde0e2; --cell-succeeded-bd: #f4b2b6; --cell-succeeded-fg: #b42318;
  --cell-none:      #f1f4f8; --cell-none-bd: #e3e8ef; --cell-none-fg: #8993a2;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
  --ring: 0 0 0 3px rgba(236, 0, 140, 0.28);

  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  /* Text: Aptos if the machine has it (Microsoft 365 / Windows 11), else the
     self-hosted Inter, which is metrically close enough that line breaks do not
     move between the two. */
  --sans: 'Aptos', 'Aptos Narrow', 'Inter', 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  /* Display: Mont is the brand face on the presentation template; Montserrat is
     the self-hosted stand-in and is already used in that deck, so the two sit
     together without looking like a substitution. */
  --display: 'Mont', 'Montserrat', 'Aptos Display', 'Aptos', 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  color-scheme: light;
}

/* ---- Dark theme: system default when not explicitly set to light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1218;
    --bg-2: #0A0D12;
    --surface: #161C25;
    --surface-2: #1B222D;
    --elev: #1A212C;
    --border: #28313E;
    --border-strong: #354150;
    --text: #E7ECF3;
    --text-dim: #9AA7B8;
    --text-faint: #667081;
    --brand-tint: rgba(236, 0, 140, 0.16);
    --brand-tint-2: rgba(236, 0, 140, 0.24);
    /* BRIGHTER on a dark ground, not deeper — the reverse of the instinct.
       #A3238E against the dark surface #161C25 separates by only 2.60:1, under
       the 3:1 a boundary needs, so the band sinks into the card. #BB2FA4 keeps
       white text at 5.18:1 and lifts off the surface at 3.31:1. */
    --th-bg: #BB2FA4;
    /* 5.76:1 on the dark badge ground, against 2.36:1 for the light value. */
    --ico-fg: #F06FC4;
    --secondary: #818CF8; --secondary-tint: rgba(129, 140, 248, 0.18);
    --crit: #FF6B72; --high: #FBBF4D; --med: #FCD34D; --low: #6BA6FF; --ok: #3ECf8e; --warn: #FBBF4D; --bad: #FF6B72;
    --cell-prevented: rgba(62,207,142,.16); --cell-prevented-bd: rgba(62,207,142,.4); --cell-prevented-fg: #7ee7b8;
    --cell-detected:  rgba(107,166,255,.16); --cell-detected-bd: rgba(107,166,255,.42); --cell-detected-fg: #a9caff;
    --cell-succeeded: rgba(255,107,114,.18); --cell-succeeded-bd: rgba(255,107,114,.45); --cell-succeeded-fg: #ffb0b4;
    --cell-none:      #141a22; --cell-none-bd: #28313e; --cell-none-fg: #5a6675;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 6px 20px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

/* ---- Dark theme: explicit toggle ---- */
:root[data-theme="dark"] {
  --bg: #0E1218; --bg-2: #0A0D12; --surface: #161C25; --surface-2: #1B222D; --elev: #1A212C;
  --border: #28313E; --border-strong: #354150;
  --text: #E7ECF3; --text-dim: #9AA7B8; --text-faint: #667081;
  --brand-tint: rgba(236, 0, 140, 0.16); --brand-tint-2: rgba(236, 0, 140, 0.24);
  --th-bg: #BB2FA4;
  --ico-fg: #F06FC4;
  --secondary: #818CF8; --secondary-tint: rgba(129, 140, 248, 0.18);
  --crit: #FF6B72; --high: #FBBF4D; --med: #FCD34D; --low: #6BA6FF; --ok: #3ECf8e; --warn: #FBBF4D; --bad: #FF6B72;
  --cell-prevented: rgba(62,207,142,.16); --cell-prevented-bd: rgba(62,207,142,.4); --cell-prevented-fg: #7ee7b8;
  --cell-detected:  rgba(107,166,255,.16); --cell-detected-bd: rgba(107,166,255,.42); --cell-detected-fg: #a9caff;
  --cell-succeeded: rgba(255,107,114,.18); --cell-succeeded-bd: rgba(255,107,114,.45); --cell-succeeded-fg: #ffb0b4;
  --cell-none: #141a22; --cell-none-bd: #28313e; --cell-none-fg: #5a6675;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-family: var(--display); }
h1 { font-size: 1.55rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
p { margin: 0 0 .75rem; }
code, .mono { font-family: var(--mono); font-size: .85em; }
img { max-width: 100%; }
::selection { background: var(--brand-tint-2); }

/* ---- Layout shell ---- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  /* width lives with the collapse rules at the foot of this file, so the
     expanded, collapsed and drawer states cannot disagree about it. */
  flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.15rem .85rem; }
.brand-lockup { display: flex; align-items: center; gap: .55rem; }
.brand-logo { height: 22px; width: auto; display: block; }
/* Every Tribastion wordmark image in the app (sidebar, landing nav/footer,
   login, request-access) — not just the sidebar's .brand-logo — must invert
   in dark mode, and must do so for BOTH an explicit dark toggle AND a system
   dark preference with no explicit choice (the two cases every other themed
   rule in this file already handles). Missing either half of this used to
   leave the logo showing its light-background colours on a dark background
   outside the authenticated shell. */
:root[data-theme="dark"] .brand-logo, [data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .lnav-logo, [data-theme="dark"] .lnav-logo,
:root[data-theme="dark"] .login-brand .m, [data-theme="dark"] .login-brand .m,
:root[data-theme="dark"] .lfoot-brand img, [data-theme="dark"] .lfoot-brand img {
  filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo,
  :root:not([data-theme="light"]) .lnav-logo,
  :root:not([data-theme="light"]) .login-brand .m,
  :root:not([data-theme="light"]) .lfoot-brand img {
    filter: brightness(0) invert(1);
  }
}
.brand-divider { width: 1px; align-self: stretch; min-height: 22px; background: var(--border-strong); }
.product-mark { flex-shrink: 0; display: flex; }
.product-name { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: var(--text); }
.brand-sub { font-size: .68rem; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.nav { display: flex; flex-direction: column; padding: .5rem .6rem; gap: 2px; overflow-y: auto; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 500; font-size: .89rem; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.is-active { background: var(--brand-tint); color: var(--brand-600); font-weight: 600; }
.nav-ico { width: 1.4rem; display: inline-flex; align-items: center; justify-content: center; opacity: .85; }
.icon { flex: none; display: inline-block; vertical-align: middle; }
.sidebar-foot { padding: .85rem; border-top: 1px solid var(--border); }
.org-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .75rem; }
.org-name { font-size: .82rem; font-weight: 700; }
.org-meta { font-size: .68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-top: 2px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem clamp(1rem, .6rem + 1.1vw, 1.9rem); border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  position: sticky; top: 0; backdrop-filter: blur(10px); z-index: 20;
}
.topbar-title { font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; }
.topbar-right { display: flex; align-items: center; gap: .9rem; }
.user-badge { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.user-name { font-size: .85rem; font-weight: 600; }
.user-role { font-size: .68rem; color: var(--text-faint); }
/*
   The content column.

   IT MUST GROW WHEN THE SIDEBAR SHRINKS. This was capped at 1320px, so on a
   1440px screen collapsing the sidebar recovered only part of the space and on
   a 1920px screen it recovered NONE of it — the freed 182px simply became dead
   margin on the right. Collapsing the menu appeared to do nothing to the page,
   which reads as a broken layout rather than a preference.

   1800px because this is a data application: tables, boards and dashboards want
   the width. The places that carry prose keep their own reading measure
   (.form, .page-head .sub), so raising this does not produce 200-character
   lines. Beyond 1800 the column centres rather than stretching, because a table
   row three thousand pixels wide is its own readability problem.

   Padding scales with the viewport so the page is neither cramped on a laptop
   nor marooned in whitespace on a large monitor.
*/
.content {
  padding: clamp(1rem, .6rem + 1.1vw, 1.9rem);
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  /* Matches the sidebar's own transition, so the two move together instead of
     the content snapping after the menu has finished. */
  transition: max-width .16s ease;
}
.appfoot {
  margin-top: auto; padding: 1rem clamp(1rem, .6rem + 1.1vw, 1.9rem); border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; color: var(--text-faint); font-size: .74rem; gap: 1rem; flex-wrap: wrap;
}

/* ---- Theme toggle ---- */
.theme-toggle {
  width: 41px; height: 41px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-dim); cursor: pointer; display: grid; place-items: center;
  font-size: 1.2rem; transition: all .12s;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }

/* ---- Cards & grid ---- */
/* THE grid. Defined here and only here — a second definition in another file
   silently wins by load order and takes the breakpoints below with it.

   `.grid-2` and friends are also usable without `.grid`, because roughly half
   the views write `class="grid grid-2"` and half write `class="grid-2"`, and a
   layout that depends on remembering both is a layout that renders two ways. */
.grid, .grid-2, .grid-3, .grid-4 { display: grid; gap: 1.1rem; align-items: start; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1400px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.card-head h3 { margin: 0; }
.card-sub { color: var(--text-faint); font-size: .78rem; }

/* ---- KPI stat ---- */
.stat { display: flex; flex-direction: column; gap: .25rem; position: relative; overflow: hidden; }
.stat-label { color: var(--text-dim); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-family: var(--display); }
.stat-sub { font-size: .78rem; color: var(--text-faint); }
.stat-value.ok { color: var(--ok); } .stat-value.warn { color: var(--warn); } .stat-value.bad { color: var(--bad); }
.stat-value.brand { color: var(--brand); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
/* The header row carries the brand colour, which is what makes it read as the
   TOP of the table rather than as one more row.

   The size went up with it, from .7rem to .78rem. A heading set smaller than
   the data beneath it is the wrong way round, and .7rem uppercase with .05em
   tracking was the least readable text on any screen in the product; the
   colour block now does the separating that the uppercase was doing. */
thead th {
  text-align: left; padding: .68rem .9rem; color: var(--th-fg); font-weight: 600;
  font-size: .78rem; letter-spacing: .01em;
  border-bottom: 1px solid var(--th-bg); background: var(--th-bg);
}
thead th a { color: var(--th-fg); text-decoration: underline; }
tbody td { padding: .7rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
.t-right { text-align: right; } .t-center { text-align: center; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; padding: .16rem .55rem; border-radius: 20px; font-size: .71rem;
  font-weight: 600; text-transform: capitalize; letter-spacing: .01em; border: 1px solid transparent; white-space: nowrap;
}
.sev-critical { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 35%, transparent); }
.sev-high { background: color-mix(in srgb, var(--high) 16%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--high) 35%, transparent); }
.sev-medium { background: color-mix(in srgb, var(--med) 18%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--med) 35%, transparent); }
.sev-low { background: color-mix(in srgb, var(--low) 14%, transparent); color: var(--low); border-color: color-mix(in srgb, var(--low) 35%, transparent); }
.sev-info { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.outcome-prevented { background: var(--cell-prevented); color: var(--cell-prevented-fg); }
.outcome-detected { background: var(--cell-detected); color: var(--cell-detected-fg); }
.outcome-succeeded { background: var(--cell-succeeded); color: var(--cell-succeeded-fg); }
.outcome-refused { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
.outcome-error, .outcome-skipped { background: var(--surface-2); color: var(--text-faint); }
.status-active, .status-completed, .status-closed, .status-effective, .status-reported, .status-connected { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.status-running, .status-scheduled, .status-in-remediation, .status-partial { background: var(--brand-tint-2); color: var(--brand-600); }
.status-draft, .status-paused, .status-not-tested, .status-queued, .status-unknown { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }
.status-blocked, .status-failed, .status-open, .status-ineffective, .status-suspended, .status-revoked, .status-retest-failed, .status-error { background: color-mix(in srgb, var(--crit) 15%, transparent); color: var(--crit); }
.status-triaged, .status-awaiting-retest, .status-pending-authorization, .status-risk-accepted { background: color-mix(in srgb, var(--med) 18%, transparent); color: var(--warn); }
.chip { display:inline-block; padding:.12rem .55rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-size:.73rem; color: var(--text-dim); font-weight: 500; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .52rem .95rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit;
  transition: all .12s; box-shadow: var(--shadow-sm);
}
.btn:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* Deep magenta at rest, hot pink on hover. Same reasoning as the header: white
   on #EC008C is 4.25:1, under the 4.5:1 floor, and white on #A3238E is 6.59:1.
   The brighter tone is better spent on the hover, where it reads as the button
   answering rather than as label text nobody can quite read. */
.btn-primary { background: var(--brand-700); border-color: var(--brand-700); color: var(--on-brand); box-shadow: 0 2px 8px rgba(163,35,142,.30); }
.btn-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-danger { background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 40%, transparent); color: var(--crit); box-shadow: none; }
.btn-danger:hover { background: color-mix(in srgb, var(--crit) 20%, transparent); color: var(--crit); border-color: var(--crit); }
.btn-ghost { background: transparent; box-shadow: none; border-color: var(--border); }
.btn-sm { padding: .34rem .7rem; font-size: .78rem; }
/* The affirmative ghost — "Won" on a deal, and anywhere else a positive action
   should read as green rather than brand. It was defined only inside the
   landing page's own <style> block, which is scoped to that one public page, so
   the Won button on /pipeline/{id} silently rendered as a plain button. */
.btn-ok-ghost { background: transparent; border: none; box-shadow: none; color: var(--ok); font-weight: 700; }
.inline { display: inline; }
.actions { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }

/* ---- Forms ---- */
.form { max-width: 780px; }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: var(--text-dim); }
.field .hint { font-size: .74rem; color: var(--text-faint); margin-top: .28rem; }
input[type=text], input[type=email], input[type=password], input[type=datetime-local], input[type=date],
input[type=number], select {
  width: 100%; padding: .58rem .75rem; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: .88rem; transition: border-color .12s, box-shadow .12s;
}
/* A textarea shares the box but not the type: it holds notes and pasted lists,
   which read better monospaced. Split out rather than set-then-override, so
   the value that applies is the only one written. */
textarea {
  width: 100%; padding: .58rem .75rem; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text); transition: border-color .12s, box-shadow .12s;
  min-height: 96px; resize: vertical; font-family: var(--mono); font-size: .82rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.field-error { color: var(--crit); font-size: .76rem; margin-top: .28rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .86rem; }
.check input { width: auto; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; } .row > * { flex: 1; min-width: 160px; }
.checklist { display: grid; grid-template-columns: repeat(2,1fr); gap: .4rem; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem; background: var(--surface-2); }

/* ---- Alerts ---- */
.alert { padding: .8rem 1.05rem; border-radius: var(--radius-sm); margin-bottom: 1.1rem; font-size: .86rem; border: 1px solid; display: flex; gap: .5rem; align-items: flex-start; }
.alert-info { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--text); }
.alert-warn { background: color-mix(in srgb, var(--med) 12%, transparent); border-color: color-mix(in srgb, var(--med) 35%, transparent); color: var(--text); }
.alert-bad { background: color-mix(in srgb, var(--crit) 10%, transparent); border-color: color-mix(in srgb, var(--crit) 32%, transparent); color: var(--text); }
.alert-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--text); }

/* ---- Page header ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.4rem; gap: 1rem; flex-wrap: wrap; }
.page-head .sub { color: var(--text-dim); font-size: .88rem; margin-top: .25rem; max-width: 760px; }
.section { margin-bottom: 1.6rem; }
.muted { color: var(--text-faint); }
.dim { color: var(--text-dim); }
.empty { padding: 2.5rem; text-align: center; color: var(--text-faint); }

/* ---- Bars / meters ---- */
/* THE meter. There were two .mini-bar rules in this file with two different
   child APIs — one styling `span`, one styling `> i` — and the later one won,
   so the five views written against `span` drew an empty track with an
   invisible fill. One rule now, and it styles EITHER child, because fixing the
   CSS and leaving fifteen views to be edited by hand is how the next
   inconsistency starts. */
.mini-bar {
  height: 6px; min-width: 60px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.mini-bar > span, .mini-bar > i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--brand);
}
.mini-bar.ok > span,  .mini-bar.ok > i,  .mini-bar > .ok  { background: var(--ok); }
.mini-bar.warn > span, .mini-bar.warn > i, .mini-bar > .warn { background: var(--warn); }
.mini-bar.bad > span, .mini-bar.bad > i, .mini-bar > .bad { background: var(--bad); }
.mini-bar .accent { background: var(--brand); }
.stack { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--surface-2); min-width: 120px; }
.stack .s-prevented { background: var(--ok); } .stack .s-detected { background: var(--low); } .stack .s-succeeded { background: var(--crit); }

/* ---- Resilience ring ---- */
.ring-wrap { display: flex; align-items: center; gap: 1.3rem; }
.ring { --p: 0; width: 116px; height: 116px; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--p)*1%), var(--surface-2) 0);
  display: grid; place-items: center; position: relative; }
.ring::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
.ring-inner { position: relative; z-index: 1; text-align: center; }
.ring-inner .n { font-size: 1.8rem; font-weight: 700; letter-spacing: -.03em; font-family: var(--display); }
.ring-inner .l { font-size: .64rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ---- Sparkline ---- */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.spark .b { flex: 1; background: linear-gradient(180deg, var(--brand), var(--brand-tint-2)); border-radius: 3px 3px 0 0; min-height: 4px; transition: height .3s; }

/* ---- Heat tiles (dashboard tactic summary) ---- */
.heat { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.heat-cell { padding: .6rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.heat-cell .t { font-size: .7rem; color: var(--text-dim); text-transform: capitalize; font-weight: 600; }
.heat-cell .v { font-size: 1.1rem; font-weight: 800; }

/* ============================================================================
   ATT&CK MATRIX HEATMAP
   ============================================================================ */
.attack-wrap { overflow-x: auto; padding-bottom: 10px; }
.attack { display: flex; gap: 10px; min-width: max-content; }
.attack-col { min-width: 164px; flex: 0 0 164px; display: flex; flex-direction: column; }
.attack-col-head {
  font-size: .7rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .02em;
  padding: .5rem .5rem; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--border);
  margin-bottom: 6px; text-align: center; position: sticky; top: 0;
}
.attack-col-head .c { display: block; font-weight: 600; color: var(--text-faint); font-size: .64rem; margin-top: 2px; text-transform: none; }
.tcell {
  display: block; padding: .45rem .55rem; border-radius: var(--radius-xs); margin-bottom: 5px;
  border: 1px solid var(--cell-none-bd); background: var(--cell-none); color: var(--cell-none-fg);
  font-size: .73rem; line-height: 1.28; transition: transform .1s, box-shadow .1s; cursor: default;
}
.tcell:hover { transform: translateY(-1px); box-shadow: var(--shadow); z-index: 2; position: relative; }
.tcell .tid { font-family: var(--mono); font-size: .64rem; opacity: .8; display: block; }
.tcell .tn { display: block; font-weight: 600; color: var(--text); }
.tcell.st-prevented { background: var(--cell-prevented); border-color: var(--cell-prevented-bd); }
.tcell.st-prevented .tn { color: var(--cell-prevented-fg); }
.tcell.st-detected { background: var(--cell-detected); border-color: var(--cell-detected-bd); }
.tcell.st-detected .tn { color: var(--cell-detected-fg); }
.tcell.st-succeeded { background: var(--cell-succeeded); border-color: var(--cell-succeeded-bd); }
.tcell.st-succeeded .tn { color: var(--cell-succeeded-fg); }
.tcell.st-not_tested { opacity: .72; }
.tcell.st-not_tested .tn { color: var(--text-faint); font-weight: 500; }
.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .78rem; align-items: center; color: var(--text-dim); }
.legend .sw { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 5px; vertical-align: middle; border: 1px solid var(--border-strong); }

/* ---- Misc ---- */
.kv { display: grid; grid-template-columns: 190px 1fr; gap: .45rem 1rem; font-size: .86rem; }
.kv dt { color: var(--text-faint); font-weight: 500; } .kv dd { margin: 0; }
.tag-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.divider { height: 1px; background: var(--border); margin: 1.3rem 0; }
.list-reset { list-style: none; padding: 0; margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); }
.timeline li { padding: .3rem 0 .8rem 1.1rem; position: relative; font-size: .84rem; }
.timeline li::before { content:''; position:absolute; left:-5px; top:.55rem; width:8px; height:8px; border-radius:50%; background: var(--brand); }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; }
.countdown.overdue { color: var(--crit); }
.countdown.soon { color: var(--warn); }

.g-recaptcha { margin: 1rem 0; }

/* ---- Login / public ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(1200px 500px at 50% -10%, var(--brand-tint), transparent), var(--bg); }
.login-card { width: 100%; max-width: 410px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.2rem; box-shadow: var(--shadow-lg); }
.login-brand { text-align: center; margin-bottom: 1.6rem; }
.login-brand .m { height: 32px; margin: 0 auto .9rem; }
.login-brand h1 { font-size: 1.35rem; margin-top: .2rem; font-family: var(--display); }
.login-brand .s { color: var(--text-faint); font-size: .82rem; }
.login-product { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .3rem; }
/* ---- RBAC matrix (Roles & Access) ---- */
.matrix { width: 100%; border-collapse: collapse; font-size: .84rem; }
.matrix th, .matrix td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
.matrix thead th { position: sticky; top: 0; background: var(--surface); text-align: center; font-weight: 600;
  color: var(--text-dim); border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
.matrix thead th:first-child { text-align: left; }
.matrix tbody tr:hover { background: var(--brand-tint); }
.matrix .matrix-group td { background: var(--bg); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: .72rem; color: var(--text-faint); border-bottom: 1px solid var(--border-strong); }
.matrix .matrix-perm { white-space: nowrap; }
.matrix .matrix-res { color: var(--text); font-weight: 500; }
.matrix input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.chip.act-create { background: rgba(59,130,246,.14); color: #3b82f6; }
.chip.act-read   { background: var(--brand-tint); color: var(--text-dim); }
.chip.act-update { background: rgba(234,179,8,.16); color: #b7860b; }
.chip.act-delete { background: rgba(239,68,68,.14); color: var(--bad); }
.chip.act-approve, .chip.act-publish, .chip.act-decide, .chip.act-fulfill, .chip.act-import, .chip.act-push {
  background: rgba(16,185,129,.14); color: #0d9488; }

/* ---- Toggle switch ---- */
.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; font-size: .88rem; }
.switch input { width: 40px; height: 22px; appearance: none; background: var(--border-strong); border-radius: 999px;
  position: relative; cursor: pointer; transition: background .15s; flex: none; }
.switch input:checked { background: var(--brand); }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked::after { transform: translateX(18px); }

/* ---- Posture bars (client portal) ---- */
.posture { display: flex; flex-direction: column; gap: .55rem; }
.posture-row { display: flex; align-items: center; gap: .6rem; }
.posture-row .lbl { width: 84px; }
.posture-row .val { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Search / dropdown trigger buttons ---- */
kbd {
  display: inline-block; font-family: var(--mono); font-size: .68rem; padding: .05rem .35rem;
  border-radius: 4px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-dim);
  margin-left: .2rem; line-height: 1.4;
}

/* ---- Notification bell + dropdown ---- */
.dropdown { position: relative; }
.bell-btn { position: relative; }
.bell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: var(--crit); color: #fff; font-size: .62rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1; border: 2px solid var(--surface);
}
.dropdown-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw;
  background: var(--elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 40; overflow: hidden;
}
.dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.dropdown-head strong { font-size: .85rem; }
.dropdown-list { max-height: 320px; overflow-y: auto; }
.dropdown-item { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .9rem; border-bottom: 1px solid var(--border); color: var(--text); }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-item-title { font-size: .82rem; font-weight: 600; }
.dropdown-item-time { font-size: .7rem; }
.dropdown-item.is-unread { background: var(--brand-tint); }
.dropdown-item.is-unread .dropdown-item-title::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: .4rem; vertical-align: middle; }
.dropdown-empty { padding: 1.4rem; text-align: center; font-size: .82rem; }
.dropdown-foot { display: block; text-align: center; padding: .6rem; font-size: .78rem; font-weight: 600; border-top: 1px solid var(--border); background: var(--surface-2); }

/* ---- Quick search (Ctrl+K) ---- */
.qs-overlay {
  position: fixed; inset: 0; background: rgba(14, 18, 24, .5); z-index: 100;
  align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem;
}
/* [hidden] must win when present — a bare `display:flex` above would out-rank the
   browser's own `[hidden]{display:none}` and the overlay could never be closed. */
.qs-overlay:not([hidden]) { display: flex; }
.qs-box { width: 100%; max-width: 560px; background: var(--elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.qs-head { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.qs-input { flex: 1; border: none; border-bottom: none; border-radius: 0; font-size: 1rem; padding: 1rem 1.2rem; }
.qs-input:focus { box-shadow: none; border-color: var(--border); }
.qs-close {
  flex: none; width: 34px; height: 34px; margin-right: .7rem; border-radius: 8px; border: none;
  background: var(--surface-2); color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
}
.qs-close:hover { background: var(--brand-tint); color: var(--brand-600); }
.qs-results { max-height: 50vh; overflow-y: auto; }
.qs-item { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; border-bottom: 1px solid var(--border); color: var(--text); }
.qs-item:last-child { border-bottom: none; }
.qs-item:hover { background: var(--surface-2); text-decoration: none; }
.qs-type { flex: none; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: var(--brand-tint); border-radius: 5px; padding: .15rem .4rem; }
.qs-label { flex: 1; font-size: .87rem; font-weight: 600; }
.qs-sub { font-size: .76rem; }
.qs-empty { padding: 1.5rem; text-align: center; color: var(--text-faint); font-size: .85rem; }
.qs-hint { padding: .55rem 1.2rem; border-top: 1px solid var(--border); font-size: .72rem; background: var(--surface-2); }

/* ---- Accordion (Training & Help) ---- */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.accordion-item + .accordion-item { border-top: 1px solid var(--border); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.15rem; background: none; border: none; text-align: left; cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--text);
}
.accordion-trigger:hover { background: var(--surface-2); }
.accordion-trigger .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-600); font-size: .89rem; font-weight: 700; margin-right: .6rem; flex: none; }
.accordion-trigger .chev { transition: transform .15s; color: var(--text-faint); flex: none; }
.accordion-trigger.is-open .chev { transform: rotate(90deg); }
.accordion-body { padding: 0 1.15rem 1.1rem 2.75rem; font-size: .85rem; color: var(--text-dim); }
.accordion-body p { margin: 0 0 .6rem; }

/* ---- Findings board (drag-and-drop) ---- */
.board-wrap { overflow-x: auto; padding-bottom: 10px; }
.board { display: flex; gap: 12px; min-width: max-content; align-items: flex-start; }
.board-col { width: 240px; flex: 0 0 240px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; transition: background .12s, border-color .12s; }
.board-col.is-dragover { background: var(--brand-tint); border-color: var(--brand); }
.board-col-head { display: flex; align-items: center; justify-content: space-between; padding: .3rem .4rem .7rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); }
.board-col-count { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .5rem; font-size: .7rem; color: var(--text-faint); }
.board-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.board-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .7rem .8rem; box-shadow: var(--shadow-sm); cursor: grab; display: flex; flex-direction: column;
}
.board-card[draggable="true"]:active { cursor: grabbing; }
.board-card.is-dragging { opacity: .4; }
.board-card-title { font-size: .82rem; font-weight: 600; color: var(--text); margin: .1rem 0 .3rem; }
.board-card-title:hover { color: var(--brand); text-decoration: none; }
.board-card-meta { font-size: .68rem; color: var(--text-faint); }

/* ---- Flip cards (front summary / back detail, hover or click) ---- */
.flip-card { perspective: 1200px; }
.flip-card-inner {
  position: relative; width: 100%; height: 100%; min-height: inherit;
  transition: transform .5s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner, .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 14px; border: 1px solid var(--border); padding: 1.3rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.flip-card-front { background: var(--surface); }
.flip-card-back { background: var(--brand); border-color: var(--brand); color: #fff; transform: rotateY(180deg); }
.flip-card-back h4, .flip-card-back p, .flip-card-back b { color: #fff; }
.flip-card-hint { position: absolute; bottom: .6rem; right: .7rem; font-size: .64rem; color: var(--text-faint); }

/* ---- Onboarding checklist (dashboard) ---- */
.onboard-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 900px) { .onboard-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .onboard-list { grid-template-columns: 1fr; } }
.onboard-item {
  display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.onboard-item:hover { border-color: var(--brand); text-decoration: none; }
.onboard-item.is-done { background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.onboard-mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: .74rem; font-weight: 700; border: 1.5px solid var(--border-strong); color: transparent;
}
.onboard-item.is-done .onboard-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.onboard-text { display: flex; flex-direction: column; gap: .1rem; font-size: .83rem; }
.onboard-text .muted { font-size: .74rem; }
.onboard-item.is-done .onboard-text b { text-decoration: line-through; text-decoration-color: var(--text-faint); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border); }
.tabs .tab { padding: .5rem .9rem; text-transform: capitalize; color: var(--text-dim); text-decoration: none;
  border-bottom: 2px solid transparent; font-size: .88rem; font-weight: 500; }
.tabs .tab:hover { color: var(--text); }
.tabs .tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* ==========================================================================
   Pipeline board
   Built for a real book of business (hundreds of deals), not a demo of five:
   columns scroll inside a fixed height so the page never becomes a mile long,
   the funnel bar shows where the value actually sits, and every card leads
   with the number a salesperson is looking for.
   ========================================================================== */

.pipe-toolbar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
  padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.pipe-toolbar .field { margin: 0; }
.pipe-toolbar .field label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); margin-bottom: .2rem; display: block;
}
.pipe-toolbar select, .pipe-toolbar input[type="text"] { padding: .38rem .55rem; font-size: .84rem; }
.pipe-toolbar .grow { flex: 1 1 200px; min-width: 160px; }

/* Active filters as removable chips, so it is always obvious why the board is
   showing fewer deals than the tenant actually has. */
.pipe-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .7rem; }
.pipe-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .5rem;
  border-radius: 9999px; background: var(--brand-tint); color: var(--brand-600);
  font-size: .72rem; font-weight: 600; text-decoration: none;
}
.pipe-chip em { opacity: .7; font-weight: 500; font-style: normal; }
.pipe-chip:hover { filter: brightness(.96); }
.pipe-chip .x { font-weight: 700; opacity: .55; }
.pipe-chip:hover .x { opacity: 1; }

/* The funnel as one proportional bar. */
.funnel-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--border); }
.funnel-seg { height: 100%; transition: width .3s ease; }
.funnel-seg.s-suspect     { background: color-mix(in srgb, var(--brand) 28%, transparent); }
.funnel-seg.s-lead        { background: color-mix(in srgb, var(--brand) 50%, transparent); }
.funnel-seg.s-prospect    { background: color-mix(in srgb, var(--brand) 74%, transparent); }
.funnel-seg.s-opportunity { background: var(--brand); }
.funnel-key { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .55rem; font-size: .72rem; }
.funnel-key i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: .35rem; }

/* Columns ------------------------------------------------------------------ */
.pipe-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; align-items: start; }
@media (max-width: 1100px) { .pipe-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pipe-board { grid-template-columns: 1fr; } }

.pipe-col {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0;
}
.pipe-col-head {
  position: sticky; top: 0; z-index: 2; padding: .7rem .8rem .6rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.pipe-col-head .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.pipe-col-name { font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: -.01em; }
.pipe-col-count {
  font-size: .7rem; font-weight: 700; color: var(--text-faint);
  background: var(--bg-2); border-radius: 9999px; padding: .1rem .45rem;
}
.pipe-col-value { font-size: .95rem; font-weight: 700; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.pipe-col-sub { font-size: .68rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pipe-col-rule { height: 3px; border-radius: 2px; margin-top: .5rem; }
.pipe-col-gate {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .35rem;
  font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-600); font-weight: 700;
}

/* The scroll area. A tall viewport gets more rows; it never grows unbounded. */
.pipe-col-body { padding: .6rem; overflow-y: auto; max-height: min(62vh, 720px); }
.pipe-col-body::-webkit-scrollbar { width: 8px; }
.pipe-col-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.pipe-col-body::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Cards -------------------------------------------------------------------- */
.deal {
  display: block; text-decoration: none; color: inherit; position: relative;
  background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 8px; padding: .55rem .6rem .5rem; margin-bottom: .45rem;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.deal:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.deal:focus-visible { outline: none; box-shadow: var(--ring); }
.deal.is-hold { border-left-color: var(--low); }
.deal.is-big  { border-left-color: var(--brand); }

.deal-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.deal-value { font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.deal-prob { font-size: .66rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.deal-title { font-size: .81rem; font-weight: 600; line-height: 1.3; margin-top: .15rem; }
.deal-client { font-size: .72rem; color: var(--text-faint); margin-top: .1rem; }
.deal-meta { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.deal-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .1rem .35rem; border-radius: 4px; background: var(--bg-2); color: var(--text-faint);
}
.deal-tag.t-practice { background: var(--brand-tint); color: var(--brand-600); }
.deal-tag.t-closing  { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.deal-tag.t-hold     { background: color-mix(in srgb, var(--low) 20%, transparent); color: var(--low); }
.deal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  margin-top: .4rem; font-size: .68rem; color: var(--text-faint);
}
.deal-owner { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.deal-avatar {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  background: var(--brand-tint); color: var(--brand-600);
  font-size: .56rem; font-weight: 700; display: grid; place-items: center;
}
.deal-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pipe-more {
  text-align: center; font-size: .7rem; color: var(--text-faint);
  padding: .45rem; border-top: 1px dashed var(--border); margin-top: .2rem;
}
.pipe-empty {
  text-align: center; font-size: .74rem; color: var(--text-faint);
  padding: 1.4rem .6rem; border: 1px dashed var(--border); border-radius: 8px;
}

/* List view ---------------------------------------------------------------- */
.pipe-list td { vertical-align: middle; }
.pipe-list .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pipe-list .bar { width: 68px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.pipe-list .bar > i { display: block; height: 100%; background: var(--brand); }

/* View toggle -------------------------------------------------------------- */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg a {
  padding: .32rem .7rem; font-size: .78rem; font-weight: 600; text-decoration: none;
  color: var(--text-faint); background: var(--surface);
}
.seg a + a { border-left: 1px solid var(--border); }
.seg a.on { background: var(--brand-tint); color: var(--brand-600); }

/* Dashboard funnel strip --------------------------------------------------- */
.dfunnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 720px) { .dfunnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dfunnel-step {
  border: 1px solid var(--border); border-radius: 8px; padding: .75rem .8rem;
  position: relative; overflow: hidden;
}
.dfunnel-step .n { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.dfunnel-step .l { font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.dfunnel-step .v { font-size: .78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-top: .1rem; }
.dfunnel-step .fill { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--brand); }
.dfunnel-step.gated { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.dfunnel-gate { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-600); margin-top: .3rem; }

/* ==========================================================================
   Workflow editor + "pending with whom?" health
   ========================================================================== */

.card.wf-alarm { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }

.wf-issues { display: flex; flex-direction: column; gap: .5rem; }
.wf-issue {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--border); border-left: 3px solid var(--text-faint);
  border-radius: 8px; padding: .6rem .7rem; background: var(--bg);
}
.wf-issue.is-blocking { border-left-color: var(--bad); }
.wf-issue.is-risk     { border-left-color: var(--low); }
.wf-issue-ico { flex: none; margin-top: 1px; }
.wf-issue.is-blocking .wf-issue-ico { color: var(--bad); }
.wf-issue.is-risk .wf-issue-ico     { color: var(--low); }
.wf-issue-title  { font-weight: 700; font-size: .86rem; }
.wf-issue-detail { font-size: .8rem; color: var(--text-faint); margin-top: .1rem; }
.wf-issue-fix {
  font-size: .74rem; margin-top: .25rem; color: var(--brand-600);
  display: inline-flex; align-items: center; gap: .25rem;
}

/* Stage ownership ---------------------------------------------------------- */
.wf-stage { border: 1px solid var(--border); border-radius: 10px; padding: .75rem .8rem; }
.wf-stage.is-empty { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.wf-stage-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.wf-stage-name { font-family: var(--display); font-weight: 700; font-size: .9rem; }
.wf-stage-count {
  font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 9999px;
  background: var(--bg-2); color: var(--text-faint); text-decoration: none;
}
.wf-stage-count:hover { background: var(--brand-tint); color: var(--brand-600); }
.wf-owners { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.wf-owner {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem;
  background: var(--bg-2); border-radius: 9999px; padding: .12rem .5rem .12rem .12rem;
}
.wf-nobody {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem;
  font-size: .74rem; font-weight: 700; color: var(--bad);
}
.wf-picker {
  max-height: 190px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; padding: .45rem .55rem; background: var(--bg);
}

/* The approval chain, drawn as a chain -------------------------------------- */
.wf-chain {
  display: flex; align-items: stretch; gap: .35rem; flex-wrap: nowrap;
  overflow-x: auto; padding: .3rem .1rem .5rem;
}
.wf-chain-node {
  display: flex; flex-direction: column; gap: .1rem; min-width: 168px; flex: none;
  border: 1px solid var(--border); border-radius: 9px; padding: .55rem .65rem;
  background: var(--bg);
}
.wf-chain-node.is-start { border-style: dashed; }
.wf-chain-node.is-end   { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.wf-chain-node.is-broken{ border-color: var(--bad); }
.wf-chain-level {
  font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brand-600);
}
.wf-chain-label { font-weight: 700; font-size: .84rem; }
.wf-chain-cond {
  font-size: .66rem; margin-top: .2rem; align-self: flex-start;
  background: var(--brand-tint); color: var(--brand-600);
  padding: .05rem .35rem; border-radius: 4px; font-weight: 700;
}
.wf-chain-link { display: grid; place-items: center; color: var(--text-faint); flex: none; }
.wf-actions { border-top: 1px solid var(--border); margin-top: .8rem; padding-top: .8rem; }
.wf-level-form { max-width: 420px; margin-top: .6rem; }

/* ==========================================================================
   Deal page
   ========================================================================== */

/* A real progress rail rather than a row of loose badges. */
.deal-rail { display: flex; align-items: stretch; gap: 0; overflow-x: auto; }
.deal-rail-step {
  flex: 1 1 0; min-width: 118px; position: relative;
  padding: .6rem .8rem .6rem 1.5rem;
  border: 1px solid var(--border); border-right: none; background: var(--bg);
  text-decoration: none; color: inherit;
}
.deal-rail-step:first-child { border-radius: 9px 0 0 9px; padding-left: .8rem; }
.deal-rail-step:last-child  { border-radius: 0 9px 9px 0; border-right: 1px solid var(--border); }
/* The chevron notch between steps. */
.deal-rail-step::after {
  content: ""; position: absolute; right: -9px; top: 50%; z-index: 1;
  width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg);
  background: inherit; border-top: 1px solid var(--border); border-right: 1px solid var(--border);
}
.deal-rail-step:last-child::after { display: none; }
.deal-rail-step .s-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.deal-rail-step .s-name  { font-weight: 700; font-size: .88rem; font-family: var(--display); }
.deal-rail-step.is-done    { background: color-mix(in srgb, var(--ok) 10%, var(--bg)); }
.deal-rail-step.is-current { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.deal-rail-step.is-current::after { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.deal-rail-step.is-current .s-name { color: var(--brand-600); }
.deal-rail-gate {
  display: inline-flex; align-items: center; gap: .2rem; font-size: .6rem;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-600);
}

/* The headline strip: the four numbers people came for. */
.deal-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 820px) { .deal-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.deal-fact {
  border: 1px solid var(--border); border-radius: 9px; padding: .6rem .7rem;
  display: block; text-decoration: none; color: inherit;
}
a.deal-fact:hover { border-color: var(--brand); background: var(--brand-tint); }
.deal-fact .k { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.deal-fact .v { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.deal-fact .m { font-size: .72rem; color: var(--text-faint); }

/* Primary actions belong at the top of the record, not buried under history. */
.deal-actionbar {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow);
}
.deal-actionbar .spacer { flex: 1 1 auto; }
.deal-actionbar form { margin: 0; }

/* Approval chain progress on the deal itself. */
.appr-chain { display: flex; flex-direction: column; gap: .4rem; }
.appr-step {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .45rem .55rem; border-radius: 8px; border: 1px solid var(--border);
}
.appr-step.is-approved { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.appr-step.is-waiting  { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: var(--brand-tint); }
.appr-step.is-rejected { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.appr-step.is-upcoming { opacity: .62; }
.appr-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: .64rem; font-weight: 800; background: var(--bg-2); color: var(--text-faint);
}
.appr-step.is-approved .appr-dot { background: var(--ok); color: #fff; }
.appr-step.is-waiting .appr-dot  { background: var(--brand-700); color: #fff; }
.appr-step.is-rejected .appr-dot { background: var(--bad); color: #fff; }
.appr-name { font-weight: 700; font-size: .82rem; }
.appr-meta { font-size: .72rem; color: var(--text-faint); }

/* Responsible-person strip: never leave "who?" unanswered. */
.who-strip {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .7rem; border-radius: 8px; font-size: .8rem;
  background: var(--bg-2); border: 1px solid var(--border);
}
.who-strip.is-nobody {
  background: color-mix(in srgb, var(--bad) 8%, transparent);
  border-color: color-mix(in srgb, var(--bad) 40%, var(--border));
}
.who-strip .who-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }

/* ==========================================================================
   Workspaces: every figure is a link somewhere
   ========================================================================== */
a.stat, .card.stat a.stat-value { text-decoration: none; color: inherit; }
a.card.stat { display: flex; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; }
a.card.stat:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
a.card.stat .stat-value { color: inherit; }

/* A number that leads somewhere gets a quiet affordance rather than link blue. */
.lnk-num {
  text-decoration: none; color: inherit; border-bottom: 1px dashed transparent;
  font-variant-numeric: tabular-nums;
}
.lnk-num:hover { color: var(--brand-600); border-bottom-color: currentColor; }

tr.row-link { cursor: pointer; }
tr.row-link:hover { background: var(--brand-tint); }

/* (the second .mini-bar definition that used to sit here is merged into the
   one near the top of this file) */

tr.row-stuck { background: color-mix(in srgb, var(--bad) 7%, transparent); }
tr.row-stuck:hover { background: color-mix(in srgb, var(--bad) 11%, transparent); }

/* The tinted glyph badge that fronts a card.
   Lived only inside the landing page's own <style> block, so every OTHER page
   that used the class got the markup and none of the styling — a bare 20px
   glyph floating at the corner of the card. Defined here once, it works
   wherever it is used. */
.mod-ico {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 11px;
  background: var(--brand-tint); color: var(--ico-fg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}

/* ---- workspace cards ---- */
.ws-card {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ws-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.ws-card:hover .mod-ico { background: var(--brand-tint-2); }

/* NOT .row, deliberately.
   .row is the FORM primitive: `.row > * { flex: 1; min-width: 160px }` gives
   every child an equal share and a 160px floor, which is right for fields side
   by side. Inside a card three columns wide that is 640px of minimum demanded
   from about 330px, so the header wrapped: the icon took half a line, the
   title started at the midpoint and read as centred, and the chevron was
   stranded on a line of its own. This header sizes to its content instead. */
.ws-head { display: flex; align-items: center; gap: .8rem; }
.ws-head strong {
  font-family: var(--display); font-size: .97rem; font-weight: 650;
  letter-spacing: -.01em; line-height: 1.25;
}
/* The affordance sits hard right and leans toward the reader on hover, which is
   what says "this whole card is a link" without a second cue. */
.ws-go { margin-left: auto; flex: none; color: var(--text-faint); transition: color .12s, transform .12s; }
.ws-card:hover .ws-go { color: var(--brand); transform: translateX(3px); }
.ws-blurb { color: var(--text-dim); font-size: .82rem; line-height: 1.55; margin: 0; }

/* ==========================================================================
   SIDEBAR — collapsible to icons, and a drawer on small screens.

   It used to be `display: none` below 720px with nothing to bring it back, so
   every navigation link in the product was unreachable on a phone. That is the
   bug this section exists to fix; collapsing to icons on a desktop is the
   feature that came with it.

   The width is a custom property so the shell, the scrim and the transition
   all move together — three places that disagree about how wide the sidebar is
   is how a layout ends up with a gap down the middle.
   ========================================================================== */

:root {
  --sidebar-w: 244px;
  --sidebar-w-mini: 62px;
}

.sidebar {
  width: var(--sidebar-w);
  transition: width .16s ease;
}

/* ---- collapsed to icons ---- */

:root[data-sidebar="mini"] .sidebar { width: var(--sidebar-w-mini); }
:root[data-sidebar="mini"] .brand-sub,
:root[data-sidebar="mini"] .brand-divider,
:root[data-sidebar="mini"] .product-name,
:root[data-sidebar="mini"] .nav-group-label,
:root[data-sidebar="mini"] .nav-text,
:root[data-sidebar="mini"] .sidebar-collapse-text,
:root[data-sidebar="mini"] .sidebar-foot { display: none; }

:root[data-sidebar="mini"] .brand { padding: 1.1rem .5rem .6rem; }
:root[data-sidebar="mini"] .brand-lockup { justify-content: center; }
:root[data-sidebar="mini"] .brand-logo { display: none; }
:root[data-sidebar="mini"] .nav { padding: .5rem .35rem; align-items: center; }

:root[data-sidebar="mini"] .nav-item {
  justify-content: center;
  padding: .6rem 0;
  width: 100%;
}
:root[data-sidebar="mini"] .nav-ico { width: auto; }
:root[data-sidebar="mini"] .sidebar-collapse { justify-content: center; }
:root[data-sidebar="mini"] .sidebar-collapse-ico { transform: rotate(0deg); }

.sidebar-collapse {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 .6rem .2rem;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
}
.sidebar-collapse:hover { color: var(--brand); border-color: var(--brand); }
.sidebar-collapse-ico { display: inline-flex; transform: rotate(180deg); transition: transform .16s; }

/* The menu button belongs to small screens only. */
.sidebar-open {
  display: none;
  margin-right: .8rem;
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.sidebar-open:hover { color: var(--brand); border-color: var(--brand); }

.sidebar-scrim { display: none; }

/* ---- small screens: a drawer, not a disappearance ---- */

@media (max-width: 900px) {
  .sidebar-open { display: inline-flex; align-items: center; }
  .sidebar-collapse { display: none; }

  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--shadow-lg);
  }

  /* The collapsed-to-icons state is a desktop idea; on a phone the drawer is
     either open at full width or closed. */
  :root[data-sidebar="mini"] .sidebar { width: var(--sidebar-w); }
  :root[data-sidebar="mini"] .nav-text,
  :root[data-sidebar="mini"] .nav-group-label,
  :root[data-sidebar="mini"] .brand-sub,
  :root[data-sidebar="mini"] .sidebar-foot { display: revert; }
  :root[data-sidebar="mini"] .brand-logo { display: block; }
  :root[data-sidebar="mini"] .nav-item { justify-content: flex-start; padding: .55rem .75rem; }

  :root[data-sidebar-open="1"] .sidebar { transform: translateX(0); }

  :root[data-sidebar-open="1"] .sidebar-scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, .38);
  }
}

/* Somebody who does not want motion should not be given any. */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-collapse-ico { transition: none; }
}


/* ===========================================================================
   TABS
   ---------------------------------------------------------------------------
   Section switchers used to be built from `.chip`, which is a LABEL component
   — role badges, permission actions — at .73rem against body text at .88rem.
   That is why they read as a row of small pills rather than as tabs: they were
   pills.

   A tab bar is a rule the whole width of the content with the active tab
   sitting ON that rule. The indicator is what makes it read as a tab, and the
   rule is what makes the set read as one control rather than several buttons.

   --tab-size is a token so the size is set in one place, and because it is in
   rem it follows the tenant's display scale like everything else.
   =========================================================================== */
:root {
  --tab-size: .92rem;
  --tab-gap: .15rem;
}

.tabnav {
  display: flex; align-items: stretch; gap: var(--tab-gap);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tabnav::-webkit-scrollbar { height: 3px; }
.tabnav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.tabnav > a,
.tabnav > button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem .95rem;
  font-size: var(--tab-size);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-dim);
  text-decoration: none;
  background: transparent;
  border: 0;
  /* Sits ON the container's rule, so the active tab joins it. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s, border-color .12s;
}
.tabnav > a:hover,
.tabnav > button:hover { color: var(--text); border-bottom-color: var(--border); }

.tabnav > a.is-on,
.tabnav > button.is-on,
.tabnav > a[aria-current="page"] {
  /* Small text on white, so it takes the deep magenta like every other label
     that has to be read rather than just seen. */
  color: var(--brand-700);
  border-bottom-color: var(--brand-700);
  font-weight: 650;
}
.tabnav > a:focus-visible,
.tabnav > button:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* A count beside a tab label, e.g. how many entries that section holds. */
.tabnav .tab-count {
  font-size: .72em; font-weight: 600; padding: .05rem .35rem;
  border-radius: 999px; background: var(--surface-2); color: var(--text-dim);
}
.tabnav > .is-on .tab-count { background: var(--brand-tint); color: var(--brand-700); }
.tabnav .tab-count.is-alarm { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }