/*
 * wardroom-base.css
 * The Wardroom by NGC Risk — Base Design System
 * Version: 1.0 | Phase 5 Frontend
 *
 * USAGE RULES FOR CLAUDE CODE:
 * - Every HTML page links this file as the first stylesheet
 * - Never hardcode hex values in page stylesheets — always use var(--token-name)
 * - Bootstrap is used for layout/grid only (container, row, col-*)
 * - All visual styling — color, typography, borders, radius — comes from this file
 * - Do not modify this file during feature builds; propose changes to the design session first
 */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */

:root {

  /* Brand */
  --brand-dark:        #03232C;   /* Primary brand — nav, headers, key chrome */
  --brand-dark-hover:  #054258;   /* Hover state on brand-dark surfaces */
  --brand-dark-text:   #FFFFFF;   /* Text on brand-dark backgrounds */

  /* Warm accent — teak/wood tone, used sparingly */
  --accent-warm:       #5C3D2E;   /* Active states, nav border, section dividers */
  --accent-warm-lt:    #EDE0D8;   /* Tint — active sidebar item fill */
  --accent-warm-text:  #3A2218;   /* Text on accent-warm-lt backgrounds */

  /* Page surfaces */
  --bg-page:           #F5F0E8;   /* Main page background — warm parchment */
  --bg-surface:        #FFFFFF;   /* Cards, panels, content areas */
  --bg-secondary:      #F0EBE3;   /* Alt rows, input backgrounds, sidebar */
  --bg-tertiary:       #E8E0D4;   /* Deeper tint — dividers, disabled states */

  /* Borders */
  --border:            #DDD5C8;   /* Default border — cards, tables, inputs */
  --border-strong:     #C4B8A8;   /* Emphasis border — card headers, active inputs */
  --border-subtle:     #EDE8E0;   /* Subtle — zebra rows, section separators */

  /* Text */
  --text-primary:      #1A1A1A;   /* Body text, headings */
  --text-secondary:    #4A4540;   /* Supporting text, labels */
  --text-tertiary:     #7A7268;   /* Hints, timestamps, metadata */
  --text-disabled:     #B0A898;   /* Disabled fields and labels */

  /* Status — Warning (red band) */
  --status-warning:    #A32D2D;
  --status-warning-lt: #FCEBEB;
  --status-warning-mid:#F09595;

  /* Status — Caution (amber band) */
  --status-caution:    #BA7517;
  --status-caution-lt: #FAEEDA;
  --status-caution-mid:#EF9F27;

  /* Status — Optimal (green band) */
  --status-optimal:    #3B6D11;
  --status-optimal-lt: #EAF3DE;
  --status-optimal-mid:#97C459;

  /* Status — Sub-optimal (purple band) */
  --status-subopt:     #534AB7;
  --status-subopt-lt:  #F5F0FF;
  --status-subopt-mid: #AFA9EC;

  /* Status — Unassessed */
  --status-unassessed:    #7A7268;
  --status-unassessed-lt: #F0EBE3;

  /* Informational / neutral */
  --info:              #185FA5;
  --info-lt:           #E6F1FB;

  /* Typography */
  --font-sans:         'Helvetica Neue', Arial, sans-serif;
  --font-serif:        Georgia, 'Times New Roman', serif;
  --font-mono:         'Courier New', monospace;

  /* Font sizes */
  --fs-base:           15px;   /* Body — up from mockup implied ~13px */
  --fs-sm:             13px;   /* Supporting text, table cells */
  --fs-xs:             12px;   /* Metadata, timestamps, badges */
  --fs-xxs:            10px;   /* Eyebrow labels, uppercase tags */
  --fs-h1:             22px;
  --fs-h2:             18px;
  --fs-h3:             16px;
  --fs-nav:            12px;

  /* Border radius */
  --r-sm:              4px;
  --r-md:              6px;
  --r-lg:              10px;
  --r-xl:              14px;
  --r-pill:            100px;

  /* Spacing scale */
  --sp-1:              4px;
  --sp-2:              8px;
  --sp-3:              12px;
  --sp-4:              16px;
  --sp-5:              20px;
  --sp-6:              24px;
  --sp-8:              32px;

  /* Shadows — functional only, no decorative shadows */
  --shadow-focus:      0 0 0 3px rgba(3, 35, 44, 0.15);

  /* Nav dimensions */
  --nav-height:        52px;
  --sidebar-width:     200px;
}


/* ─────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* Narrative text blocks use serif — generated LLM output only */
.narrative-text,
.narrative-block p {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-primary);
}


/* ─────────────────────────────────────────────
   3. NAVIGATION
───────────────────────────────────────────── */

.w-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--brand-dark);
  border-bottom: 2px solid var(--accent-warm);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-5);
  gap: 0;
}

.w-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-right: var(--sp-8);
  flex-shrink: 0;
  text-decoration: none;
}

.w-nav-logo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* Fallback when no custom logo SVG provided */
.w-nav-logo-placeholder {
  width: 30px;
  height: 30px;
  background: var(--accent-warm);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  flex-shrink: 0;
}

.w-nav-wordmark {
  line-height: 1;
}

.w-nav-name {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.w-nav-byline {
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.w-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

/* Dropdown triggers are real <button> elements now (keyboard-accessibility follow-up,
   2026-08-19) — strip UA button chrome so they render identically to the <span> they
   replaced. Same convention as .w-logout-btn (wardroom-base.css, logout follow-up).
   Placed BEFORE .w-nav-link, not after — load-bearing: font: inherit is a shorthand,
   and at equal specificity a later rule wins ties. Placed after, font: inherit would
   beat .w-nav-link's font-size: var(--fs-nav) (nothing else in the cascade sets
   font-size on this element), rendering the triggers at the inherited body size
   instead of the nav's 12px. Same ordering reasoning as .w-logout-btn vs
   .w-sidebar-item below — measured with getComputedStyle against a fresh render, not
   assumed (browser walk, nav_dropdown_keyboard_accessibility_2026-08-19). */
.w-nav-trigger-btn {
  background: none;
  border: none;
  font: inherit;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.w-nav-link {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-nav);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.w-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.w-nav-link.active {
  color: #fff;
  background: var(--accent-warm);
  font-weight: 500;
}

.w-nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

/* Client org logo slot — right side of nav */
.w-nav-client-logo {
  height: 28px;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.9;
}

/* Fallback when no client logo uploaded */
.w-nav-org-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 3px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.w-nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-warm);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   4. PAGE SHELL — sidebar + content layout
───────────────────────────────────────────── */

.w-shell {
  display: flex;
  min-height: 100vh;
  padding-top: var(--nav-height);
}

.w-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding: var(--sp-4) 0;
}

.w-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: var(--sp-6);
  max-width: 1200px;
}

/* Pages without sidebar (login, intake wizard) */
.w-content-full {
  flex: 1;
  padding: var(--sp-6);
  max-width: 800px;
  margin: 0 auto;
}

.w-sidebar-section {
  margin-bottom: var(--sp-5);
}

.w-sidebar-label {
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-1);
  font-weight: 500;
}

/* Sign-out control is a real <button> now (progressive-enhancement fix, follow-up to
   #99) — strip UA button chrome so it renders identically to the <a> it replaced.
   Deliberately placed BEFORE .w-sidebar-item: `font` and `border` are shorthands, so
   after it they would beat .w-sidebar-item's own `font-size: var(--fs-xs)` (button
   would render at the inherited 16px, not 12px) and its `border-left: 2px solid
   transparent` (text would sit 2px left of every sibling link). The UA defaults this
   resets are a lower cascade origin, so order costs it nothing against them. The nav
   dropdown copy is unaffected either way — .w-nav-dropdown-item lives in base.html's
   own <style>, which loads after this file and wins regardless. */
.w-logout-btn {
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  width: 100%;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.w-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  cursor: pointer;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.w-sidebar-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.w-sidebar-item.active {
  color: var(--brand-dark);
  background: var(--accent-warm-lt);
  border-left-color: var(--accent-warm);
  font-weight: 500;
}

.w-sidebar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.w-sidebar-badge {
  margin-left: auto;
  font-size: var(--fs-xxs);
  background: var(--status-warning-lt);
  color: var(--status-warning);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-weight: 500;
}

.w-sidebar-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--sp-2) var(--sp-4);
}

/* Sidebar collapse — smooth transition on both elements */
.w-sidebar           { transition: width 0.2s; }
.w-content           { transition: margin-left 0.2s; }

.w-sidebar.w-sidebar--collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border-right: none;
}

.w-sidebar--collapsed + .w-content {
  margin-left: 0;
}

.w-sidebar-toggle {
  position: fixed;
  top: calc(var(--nav-height) + var(--sp-3));
  left: calc(var(--sidebar-width) - 12px);
  z-index: 90;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-tertiary);
  transition: color 0.15s, border-color 0.15s;
  padding: 0;
  line-height: 1;
  align-self: flex-start;
  flex-shrink: 0;
  transform: none;
}

.w-sidebar-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

#w-sidebar.w-sidebar--collapsed + button.w-sidebar-toggle {
  left: var(--sp-1);
}


/* ─────────────────────────────────────────────
   5. PAGE HEADER
───────────────────────────────────────────── */

.w-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.w-page-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--brand-dark);
  line-height: 1.2;
  margin-bottom: 2px;
}

.w-page-sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.w-page-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   6. BUTTONS
───────────────────────────────────────────── */

.btn-primary {
  background: var(--brand-dark);
  color: #fff;
  border: 1px solid var(--brand-dark);
  padding: 7px var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.btn-primary:hover {
  background: var(--brand-dark-hover);
  border-color: var(--brand-dark-hover);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-danger {
  background: var(--bg-surface);
  color: var(--status-warning);
  border: 1px solid var(--status-warning-mid);
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-danger:hover {
  background: var(--status-warning-lt);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* Disabled buttons. Added 2026-07-27 (pre-trial polish batch, Fix E).

   Before this rule the `disabled` attribute changed NOTHING visually: the
   button kept its live fill, kept the pointer cursor, and silently swallowed
   the click. On the 2026-07-26 staging dry run the in-meeting "Regenerate
   pack" button read as broken rather than as deliberately unavailable, and
   every disabled control in the app had the same defect — this is a design
   system gap, not a one-button patch, so it is fixed here rather than in the
   template.

   No new token: --bg-tertiary and --text-disabled were reserved for exactly
   this state when the palette was written. The :hover neutralisation matters —
   CSS :hover still matches a disabled element, so without it a disabled button
   still lights up under the cursor and reads as clickable again. */
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-danger[disabled],
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  background: var(--bg-tertiary);
  color: var(--text-disabled);
  border-color: var(--border);
  cursor: not-allowed;
}

.btn-primary[disabled]:hover,
.btn-secondary[disabled]:hover,
.btn-danger[disabled]:hover,
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover,
.btn-danger:disabled:hover {
  background: var(--bg-tertiary);
  color: var(--text-disabled);
  border-color: var(--border);
}

.btn-group {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}


/* ─────────────────────────────────────────────
   7. CARDS
───────────────────────────────────────────── */

.w-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.w-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.w-card-title {
  font-size: var(--fs-xxs);
  font-weight: 600;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.w-card-body {
  padding: var(--sp-4);
}

.w-card-footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ─────────────────────────────────────────────
   8. STAT CARDS
───────────────────────────────────────────── */

.w-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.w-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
}

.w-stat-label {
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-1);
  font-weight: 500;
}

.w-stat-val {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
}

.w-stat-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}


/* ─────────────────────────────────────────────
   9. TABLES
───────────────────────────────────────────── */

.w-table {
  width: 100%;
  border-collapse: collapse;
}

.w-table th {
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-align: left;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.w-table td {
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.w-table tr:last-child td {
  border-bottom: none;
}

.w-table tr:hover td {
  background: var(--bg-secondary);
  cursor: pointer;
}

.w-table .col-id {
  color: var(--text-tertiary);
  font-size: 11px;
  width: 44px;
}

.w-table .col-actions {
  width: 80px;
  text-align: right;
}

.risk-title {
  font-weight: 500;
  font-size: var(--fs-sm);
  margin-bottom: 1px;
}

.risk-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Grounding score bar */
.grounding-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.grounding-track {
  flex: 1;
  height: 5px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  min-width: 50px;
}

.grounding-fill {
  height: 5px;
  border-radius: 3px;
  background: var(--brand-dark);
}

.grounding-val {
  font-size: 11px;
  color: var(--text-tertiary);
  width: 28px;
  text-align: right;
}


/* ─────────────────────────────────────────────
   10. BADGES
───────────────────────────────────────────── */

.badge {
  display: inline-block;
  font-size: var(--fs-xxs);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-weight: 500;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.badge-warning  { background: var(--status-warning-lt);   color: var(--status-warning);  }
.badge-caution  { background: var(--status-caution-lt);   color: var(--status-caution);  }
.badge-optimal  { background: var(--status-optimal-lt);   color: var(--status-optimal);  }
.badge-subopt   { background: var(--status-subopt-lt);    color: var(--status-subopt);   }
.badge-unassessed { background: var(--status-unassessed-lt); color: var(--status-unassessed); }
.badge-cat      { background: var(--accent-warm-lt);      color: var(--accent-warm-text);}
.badge-info     { background: var(--info-lt);             color: var(--info);            }
.badge-neutral  { background: var(--bg-tertiary);         color: var(--text-secondary);  }


/* ─────────────────────────────────────────────
   11. FORMS
───────────────────────────────────────────── */

.w-form-group {
  margin-bottom: var(--sp-4);
}

.w-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--sp-1);
}

.w-label-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: var(--sp-2);
}

.w-input,
.w-select,
.w-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px var(--sp-3);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.w-input:focus,
.w-select:focus,
.w-textarea:focus {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: var(--shadow-focus);
}

/* Placeholders. Added 2026-07-27 (pre-trial polish batch, Fix B).

   The design system had no placeholder rule, so every field fell through to
   the browser default — roughly #757575, which sits between --text-secondary
   (#4A4540) and --text-tertiary (#7A7268). A placeholder therefore rendered in
   the same weight and near the same colour as real supporting text, and read
   as a value already in the field: on the 2026-07-26 staging dry run the faded
   "CISO" in the risk owner field looked set, and had to be discovered empty and
   overwritten.

   Two signals rather than one, because colour alone is what failed here:
   --text-disabled (#B0A898, the token the palette reserved for empty and
   unavailable fields) plus italic, which no committed value in this app ever
   uses. The field-level idiom is the other half — an "e.g. …" prefix marks the
   text as an example, not an answer. */
.w-input::placeholder,
.w-textarea::placeholder,
.w-intake-notes::placeholder {
  color: var(--text-disabled);
  font-style: italic;
  opacity: 1; /* Firefox dims placeholders by default; the token already is the dim value. */
}

.w-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

/* Intake notes field — larger, autosave feel */
.w-intake-notes {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  resize: vertical;
  min-height: 400px;
  line-height: 1.75;
  transition: border-color 0.15s;
}

.w-intake-notes:focus {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: var(--shadow-focus);
}

.w-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.w-form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
}

.w-field-error {
  font-size: 11px;
  color: var(--status-warning);
  margin-top: var(--sp-1);
}

/* Range slider */
.w-range {
  width: 100%;
  accent-color: var(--brand-dark);
}


/* ─────────────────────────────────────────────
   12. ALERTS & CALLOUTS
───────────────────────────────────────────── */

.w-alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  border-left: 3px solid;
}

.w-alert-warning {
  background: var(--status-warning-lt);
  border-color: var(--status-warning);
  color: var(--status-warning);
}

.w-alert-caution {
  background: var(--status-caution-lt);
  border-color: var(--status-caution);
  color: var(--status-caution);
}

.w-alert-info {
  background: var(--info-lt);
  border-color: var(--info);
  color: var(--info);
}

.w-alert-neutral {
  background: var(--bg-secondary);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}


/* ─────────────────────────────────────────────
   13. EMPTY STATES
───────────────────────────────────────────── */

.w-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  color: var(--text-tertiary);
}

.w-empty-title {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.w-empty-sub {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}


/* ─────────────────────────────────────────────
   14. PAGE FOOTER (Wardroom branding)
───────────────────────────────────────────── */

.w-footer {
  margin-top: var(--sp-8);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
}

.w-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-tertiary);
  font-size: 11px;
  text-decoration: none;
}

.w-footer-brand strong {
  color: var(--brand-dark);
  font-weight: 500;
}


/* ─────────────────────────────────────────────
   15. POSITION / GROUNDING COMPONENT
   Shared partial: partials/position_grounding.html
   Lifted from decision_packet extra_css (Gate 2 — 2026-06-27)
───────────────────────────────────────────── */

/* Appetite vs exposure gauge */
.w-pos-wrap { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.w-pos-row { display: flex; align-items: center; gap: var(--sp-2); }
.w-pos-lbl { font-size: var(--fs-xs); color: var(--text-secondary); width: 64px; flex-shrink: 0; text-align: right; }
.w-pos-track { flex: 1; height: 10px; background: var(--bg-secondary); border-radius: 5px; position: relative; }
.w-pos-fill { height: 10px; border-radius: 5px; position: absolute; top: 0; left: 0; }
.w-pos-dot { position: absolute; top: -3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bg-surface); transform: translateX(-50%); }
.w-pos-val { font-size: var(--fs-xs); font-weight: 500; width: 80px; flex-shrink: 0; }
.w-pos-sep { border: none; border-top: 1px dashed var(--border-subtle); margin: 2px 0; }
.w-pos-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-4); background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); }

/* Grounding score */
.w-grd { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.w-grd-bar-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.w-grd-bar { flex: 1; height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; }
.w-grd-fill { height: 8px; border-radius: 4px; }
.w-grd-val { font-size: var(--fs-sm); font-weight: 500; width: 28px; text-align: right; }
.w-grd-f { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); padding: 3px 0; border-bottom: 1px solid var(--border-subtle); }
.w-grd-f:last-child { border-bottom: none; }


/* ─────────────────────────────────────────────
   16. UTILITY
───────────────────────────────────────────── */

.text-warning   { color: var(--status-warning);  }
.text-caution   { color: var(--status-caution);  }
.text-optimal   { color: var(--status-optimal);  }
.text-subopt    { color: var(--status-subopt);   }
.text-muted     { color: var(--text-tertiary);   }
.text-brand     { color: var(--brand-dark);      }

.font-serif     { font-family: var(--font-serif); }
.font-mono      { font-family: var(--font-mono);  }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   17. SECTION CARDS & SHARED PAGE COMPONENTS
   UI polish Part 0 (docs/specs/ui_polish_2026-07_spec.md) — 2026-07-07
───────────────────────────────────────────── */

/* Section card — bordered container for grouped page sections.
   Replaces the page-local stripe-header dialects
   (od-section-hdr / ag-section-hdr / rp-section-hdr). */
.w-section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}

.w-section-card-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.w-section-card-hdr--warning { background: var(--status-warning-lt); color: var(--status-warning); }
.w-section-card-hdr--caution { background: var(--status-caution-lt); color: var(--status-caution); }
.w-section-card-hdr--info    { background: var(--info-lt);           color: var(--info);           }
.w-section-card-hdr--neutral { background: var(--bg-secondary);      color: var(--text-secondary); }

.w-section-card-body {
  padding: var(--sp-4);
}

.w-section-note {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* Collapse affordance — single platform-wide vocabulary. CSS chevron,
   points down when closed, rotates up when the .open class is set
   (adopted from the board/summary SVG-chevron behavior). */
.w-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
}

.w-collapse-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.w-collapse-toggle.open::after {
  transform: translateY(1px) rotate(225deg);
}

/* dp-card — promoted from committee/decision_packet.html page CSS.
   Consumed by partials/position_grounding.html, committee/decision_packet.html,
   and risks/detail.html (detail adds margin-bottom via a local override). */
.dp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.dp-card-hdr {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Auth brand block — extracted from auth/login.html, auth/mfa_verify.html,
   auth/mfa_enroll.html. mfa_enroll uses the --compact variant. */
.w-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.w-auth-logo {
  width: 44px;
  height: 44px;
  background: var(--brand-dark);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark-text);
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-sans);
  flex-shrink: 0;
}

.w-auth-wordmark-name {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.1;
}

.w-auth-wordmark-byline {
  font-size: var(--fs-xxs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.w-auth-brand--compact {
  justify-content: flex-start;
}

.w-auth-brand--compact .w-auth-logo {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.w-auth-brand--compact .w-auth-wordmark-name {
  font-size: var(--fs-h3);
}

.w-auth-brand--compact .w-auth-wordmark-byline {
  margin-top: 0;
}

/* ─────────────────────────────────────────────
   wardroom-base.css · v1.0 · Phase 5 Frontend
   The Wardroom by NGC Risk · Confidential
───────────────────────────────────────────── */