/* =====================================================
   HARLA DATA ROOM — Stylesheet
   Derived from the Harla Design System.
   Dark mode is the only mode.
   ===================================================== */

/* ---- Self-hosted fonts (OFL, woff2 latin subset) ---- */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-tight-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-tight-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-tight-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-tight-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/inter-tight-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-tight-latin-500-italic.woff2') format('woff2'); }

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/manrope-latin-800-normal.woff2') format('woff2'); }

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/geist-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/geist-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/geist-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/geist-sans-latin-700-normal.woff2') format('woff2'); }

@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/geist-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/geist-mono-latin-600-normal.woff2') format('woff2'); }

/* =====================================================
   DESIGN SYSTEM TOKENS
   Full token set from the Harla Design System.
   All component and layout decisions reference these.
   ===================================================== */
:root {
  /* ---- Font families ---- */
  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-label:   'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Ink — the midnight ground ---- */
  --ink-950: #06090F;
  --ink-900: #0A0E18;
  --ink-850: #0B0F1B;
  --ink-800: #10141F;
  --ink-700: #161B29;
  --ink-600: #1F2535;
  --ink-500: #2B3243;

  /* ---- Cream — the brand light ---- */
  --cream:        #FFF9E8;
  --cream-200:    #F3ECDA;
  --cream-dim:    rgba(255, 249, 232, 0.74);
  --cream-mute:   rgba(255, 249, 232, 0.52);
  --cream-faint:  rgba(255, 249, 232, 0.34);
  --cream-line:   rgba(255, 249, 232, 0.12);
  --cream-line-strong: rgba(255, 249, 232, 0.20);

  /* ---- Gold / Amber — the single accent ---- */
  --gold:        #D4A35E;
  --gold-bright: #F0CE92;
  --gold-deep:   #A9783E;
  --gold-glow:   rgba(212, 163, 94, 0.55);
  --gold-wash:   rgba(212, 163, 94, 0.12);
  --gold-line:   rgba(212, 163, 94, 0.40);

  /* ---- Functional ---- */
  --positive: #7FB995;
  --warning:  #D9A865;
  --negative: #C97A66;

  /* ---- Semantic tokens ---- */
  --bg:            var(--ink-900);
  --bg-raised:     var(--ink-800);
  --surface:       var(--ink-700);
  --surface-hover: var(--ink-600);

  --fg:        var(--cream);
  --fg-muted:  var(--cream-dim);
  --fg-subtle: var(--cream-mute);
  --fg-faint:  var(--cream-faint);

  --accent:       var(--gold);
  --accent-hover: var(--gold-bright);
  --accent-press: var(--gold-deep);
  --on-accent:    #1A1206;

  --border:        var(--cream-line);
  --border-strong: var(--cream-line-strong);
  --divider:       rgba(255, 249, 232, 0.08);

  /* ---- Glass ---- */
  --glass-bg:       rgba(16, 20, 31, 0.62);
  --glass-bg-solid: rgba(13, 17, 27, 0.92);
  --glass-border:   rgba(255, 249, 232, 0.14);
  --glass-top:      rgba(255, 249, 232, 0.10);
  --glass-blur:     22px;

  /* ---- Radii ---- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);
  --shadow-glass: 0 24px 60px -24px rgba(0,0,0,0.75),
                  inset 0 1px 0 0 var(--glass-top);
  --ring: 0 0 0 3px var(--gold-wash), 0 0 0 1px var(--gold-line);

  /* ---- Spacing (4px base grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur:        240ms;
  --dur-slow:   520ms;
}

/* =====================================================
   LIGHT THEME OVERRIDES
   Derived directly from theme-light.css in the Harla Design System.
   ===================================================== */
[data-theme="light"] {
  /* Paper scale — warm ivory ground */
  --bg:            #FAF7EF;
  --bg-raised:     #FFFFFF;
  --surface:       #F4F0E4;
  --surface-hover: #E3DDCB;

  /* Ink as text */
  --fg:        #0A0E18;
  --fg-muted:  rgba(12, 16, 26, 0.72);
  --fg-subtle: rgba(12, 16, 26, 0.56);
  --fg-faint:  rgba(12, 16, 26, 0.40);

  --border:        rgba(12, 16, 26, 0.12);
  --border-strong: rgba(12, 16, 26, 0.20);
  --divider:       rgba(12, 16, 26, 0.08);

  /* Gold deepened for legibility on paper */
  --accent:        #9A6B30;
  --accent-hover:  #C28E45;
  --accent-press:  var(--gold-deep);

  /* Glass — frosted warm-white */
  --glass-bg:       rgba(255, 253, 247, 0.72);
  --glass-bg-solid: rgba(255, 255, 255, 0.88);
  --glass-border:   rgba(12, 16, 26, 0.10);
  --glass-top:      rgba(255, 255, 255, 0.90);

  /* Warm shadows — no cold black */
  --shadow-sm: 0 1px 2px rgba(31, 24, 12, 0.06);
  --shadow-md: 0 8px 24px -10px rgba(31, 24, 12, 0.14);
  --shadow-lg: 0 24px 60px -22px rgba(31, 24, 12, 0.20);
  --shadow-glass: 0 24px 60px -26px rgba(31, 24, 12, 0.18),
                  inset 0 1px 0 0 var(--glass-top);
  --ring: 0 0 0 3px rgba(212, 163, 94, 0.16), 0 0 0 1px rgba(169, 120, 62, 0.42);

  /* Functional — deepened for contrast on light */
  --positive: #3F7E5A;
  --warning:  #B5812F;
  --negative: #B0533B;
}

[data-theme="light"] body {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(212, 163, 94, 0.16), transparent 60%),
    var(--bg);
}

[data-theme="light"] .sidenav {
  border-right-color: rgba(12, 16, 26, 0.10);
}

[data-theme="light"] .sidenav__section-link:hover {
  background: rgba(12, 16, 26, 0.06);
  color: #0A0E18;
}

[data-theme="light"] .sidenav__section-link.is-active {
  background: rgba(212, 163, 94, 0.16);
  color: var(--accent);
}

[data-theme="light"] .sidenav__child-link:hover {
  background: rgba(12, 16, 26, 0.06);
  color: rgba(12, 16, 26, 0.72);
}

[data-theme="light"] .sidenav__child-link.is-active {
  color: var(--accent);
}

[data-theme="light"] .section-card:hover {
  background: rgba(244, 240, 228, 0.90);
  border-color: rgba(12, 16, 26, 0.18);
}

/* Logo swap helpers (from design system theme-light.css) */
.show-on-light { display: none !important; }
[data-theme="light"] .hide-on-light { display: none !important; }
[data-theme="light"] .show-on-light { display: block !important; }

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* =====================================================
   BASE
   ===================================================== */
body {
  background:
    radial-gradient(65% 75% at 80% 95%, var(--gold-glow), transparent 60%),
    radial-gradient(40% 55% at 82% 98%, rgba(240,206,146,0.16), transparent 55%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =====================================================
   LAYOUT
   ===================================================== */
.container {
  max-width: 1060px;
  margin-left: 0;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: 760px;
  margin-left: 0;
  padding: 0 var(--space-6);
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--fg);
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
}

h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-muted);
}

p + p {
  margin-top: var(--space-4);
}

.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-muted);
}

strong {
  font-weight: 700;
  color: var(--fg);
}

em {
  font-style: italic;
  color: var(--fg-muted);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover {
  color: var(--accent-hover);
}

/* ---- Labels / eyebrows ---- */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.label-sm {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.caption {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-subtle);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  color: var(--fg-muted);
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg-solid);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 56px;
}

/* ---- Wordmark ---- */
.wordmark {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--fg);
  text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
  transition: color var(--dur) var(--ease);
}

.wordmark:hover {
  color: var(--accent);
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.breadcrumb__sep {
  color: var(--fg-faint);
  font-size: 13px;
  flex-shrink: 0;
}

.breadcrumb__link {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-subtle);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.breadcrumb__link:hover {
  color: var(--fg-muted);
}

.breadcrumb__current {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================
   MAIN CONTENT AREA
   ===================================================== */
.main {
  padding: var(--space-8) 0 var(--space-9);
}

.page-header {
  margin-bottom: var(--space-7);
}

.page-header .eyebrow {
  margin-bottom: var(--space-3);
  display: block;
}

.page-header h1 {
  margin-bottom: var(--space-4);
}

.page-header .lead {
  max-width: 640px;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--r-sm);
  padding: 11px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--gold);
  color: var(--on-accent);
  border-color: transparent;
}

.btn--primary:hover {
  background: var(--gold-bright);
  color: var(--on-accent);
}

.btn--primary:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--fg-muted);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--bg-raised);
  color: var(--fg);
}

.btn--full {
  width: 100%;
}

/* =====================================================
   FORM ELEMENTS
   ===================================================== */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--space-2);
}

.form-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder {
  color: var(--fg-faint);
}

.form-input:focus {
  outline: none;
  border-color: var(--gold-line);
  box-shadow: var(--ring);
  background: var(--surface);
}

.form-error {
  display: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--negative);
  background: rgba(201, 122, 102, 0.10);
  border: 1px solid rgba(201, 122, 102, 0.28);
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.form-error.visible {
  display: block;
}

/* =====================================================
   TABLES
   ===================================================== */
.table-wrap {
  overflow-x: auto;
  margin: var(--space-5) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
}

thead th {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 500;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--divider);
  color: var(--fg-muted);
  line-height: 1.5;
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--divider);
}

td strong {
  color: var(--fg);
  font-weight: 600;
}

tfoot td {
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  color: var(--fg-faint);
  border-top: 1px solid var(--border);
  font-style: italic;
}

/* =====================================================
   CARDS / PANELS
   ===================================================== */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  padding: var(--space-6);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-5);
}

/* =====================================================
   NAVIGATION GRID (main index)
   ===================================================== */
.section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (max-width: 900px) {
  .section-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .section-grid {
    grid-template-columns: 1fr;
  }
}

.section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  padding: var(--space-5);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  position: relative;
}

.section-card:hover {
  background: rgba(22, 27, 41, 0.80);
  border-color: rgba(255, 249, 232, 0.22);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 0 var(--glass-top);
}

.section-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
}

.section-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.section-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
  flex: 1;
}

.section-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.section-card__arrow {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  transition: color var(--dur) var(--ease);
}

.section-card:hover .section-card__arrow {
  color: var(--accent);
}

/* =====================================================
   DOCUMENT LIST (section index pages)
   ===================================================== */
.doc-list {
  list-style: none;
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.doc-list__item {
  display: flex;
  align-items: center;
}

.doc-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.doc-list__link:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--fg);
}

.doc-list__link-icon {
  width: 14px;
  height: 14px;
  stroke: var(--fg-faint);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.doc-list__link:hover .doc-list__link-icon {
  stroke: var(--accent);
}

/* =====================================================
   PLACEHOLDER / TO BE COMPLETED
   ===================================================== */
.placeholder-block {
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--space-6) var(--space-5);
  opacity: 0.65;
}

.placeholder-block__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.badge-tbc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--negative);
  background: rgba(201, 122, 102, 0.10);
  border: 1px solid rgba(201, 122, 102, 0.30);
  border-radius: var(--r-xs);
  padding: 3px 8px;
}

.badge-tbc::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--negative);
  flex-shrink: 0;
}

.badge-in-progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warning);
  background: rgba(217, 168, 101, 0.10);
  border: 1px solid rgba(217, 168, 101, 0.30);
  border-radius: var(--r-xs);
  padding: 3px 8px;
}

.badge-in-progress::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}

.badge-complete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--positive);
  background: rgba(127, 185, 149, 0.10);
  border: 1px solid rgba(127, 185, 149, 0.30);
  border-radius: var(--r-xs);
  padding: 3px 8px;
}

.badge-complete::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--positive);
  flex-shrink: 0;
}

.placeholder-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg-faint);
}

.placeholder-desc {
  font-size: 13px;
  color: var(--fg-faint);
  line-height: 1.5;
}

/* ---- Placeholder doc-list item ---- */
.doc-list__item--tbc .doc-list__link {
  opacity: 0.55;
  pointer-events: none;
  border-style: dashed;
}

/* =====================================================
   BADGES / CHIPS
   ===================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  padding: 5px 12px;
}

.badge--pending {
  background: transparent;
  color: var(--fg-subtle);
  border: 1px solid var(--border);
}

.badge--pending::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fg-subtle);
}

.badge--live {
  background: var(--gold-wash);
  color: var(--gold-bright);
  border: 1px solid var(--gold-line);
}

.badge--live::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow);
}

/* =====================================================
   PROSE SECTIONS (content pages)
   ===================================================== */
.prose {
  max-width: 680px;
}

.prose h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.prose p {
  margin-bottom: var(--space-4);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose ul,
.prose ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.65;
}

.prose li + li {
  margin-top: var(--space-2);
}

/* =====================================================
   SECTION DIVIDER
   ===================================================== */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-7) 0 var(--space-5);
}

.section-divider span {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}

.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--divider);
}

/* =====================================================
   NOTICE / CONFIDENTIALITY
   ===================================================== */
.notice {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-faint);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--divider);
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
  border-top: 1px solid var(--divider);
  padding: var(--space-6) 0;
  margin-top: var(--space-7);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.site-footer__meta {
  font-size: 12px;
  color: var(--fg-faint);
  line-height: 1.7;
}

.site-footer__meta a {
  color: var(--fg-faint);
}

.site-footer__meta a:hover {
  color: var(--fg-subtle);
}

/* =====================================================
   LOGIN PAGE
   ===================================================== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--glass-bg-solid);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-glass);
  padding: var(--space-7) var(--space-7);
}

.login-card__head {
  margin-bottom: var(--space-7);
}

.login-card__logo {
  margin-bottom: var(--space-4);
}

.login-card__logo-img {
  display: block;
  height: 36px;
  width: auto;
}

.login-card__descriptor {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-subtle);
}

.login-card__footer {
  margin-top: var(--space-6);
}

.login-card__access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
}

.login-card__access-text {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-faint);
  margin: 0;
}

.login-card__access-link {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
  flex-shrink: 0;
}

.login-card__access-link:hover {
  color: var(--accent);
  border-color: var(--gold-line);
  background: var(--gold-wash);
}

.request-success {
  padding: var(--space-5) 0 var(--space-2);
}

.request-success__message {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* =====================================================
   WELCOME BLOCK (index page)
   ===================================================== */
.welcome {
  max-width: 680px;
  padding: 0 0 var(--space-6);
}

.welcome .eyebrow {
  display: block;
  margin-bottom: var(--space-4);
}

.welcome h1 {
  margin-bottom: var(--space-5);
}

.welcome .lead {
  margin-bottom: var(--space-5);
}

/* =====================================================
   SUBSECTION HEADER (content pages)
   ===================================================== */
.subsection {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
}

.subsection:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.subsection h2 {
  margin-bottom: var(--space-4);
}

.subsection h3 {
  margin-bottom: var(--space-3);
}

.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.detail-list dt {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.detail-list dd {
  margin: 0;
  color: var(--fg);
}

/* =====================================================
   TABLE NOTE / FOOTNOTE
   ===================================================== */
.table-note {
  font-size: 12px;
  color: var(--fg-faint);
  font-style: italic;
  margin-top: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--divider);
}

/* =====================================================
   SIDEBAR LAYOUT
   ===================================================== */
.site-layout {
  display: flex;
  min-height: 100vh;
}

.sidenav {
  width: 220px;
  flex: none;
  border-right: 1px solid var(--border);
  background: var(--glass-bg-solid);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-6) 0;
  transition: background var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
}

.sidenav__logo {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--space-5);
  display: flex;
  justify-content: center;
}

.sidenav__wordmark {
  display: block;
  line-height: 0;
}

.sidenav__logo-img {
  display: block;
  height: 44px;
  width: auto;
}

.sidenav__sublabel {
  display: none;
}

.sidenav__theme-toggle {
  display: flex;
  margin: 0 var(--space-5) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.sidenav__theme-btn {
  flex: 1;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  background: transparent;
  border: none;
  padding: 7px 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease);
  line-height: 1;
}

.sidenav__theme-btn.is-active {
  background: var(--surface);
  color: var(--fg);
}

.sidenav__theme-btn:hover:not(.is-active) {
  color: var(--fg-subtle);
}

.sidenav__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.sidenav__section-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--space-5);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--fg-muted);
  background: transparent;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease);
  line-height: 1.3;
}

.sidenav__section-link:hover {
  background: var(--ink-800);
  color: var(--fg);
}

.sidenav__section-link.is-active {
  background: var(--gold-wash);
  color: var(--gold-bright);
}

.sidenav__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.55;
  flex-shrink: 0;
  min-width: 18px;
}

.sidenav__children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 1px 0 3px var(--space-5);
}

.sidenav__child-link {
  display: flex;
  align-items: center;
  padding: 6px var(--space-5);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  color: var(--fg-subtle);
  background: transparent;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.sidenav__child-link:hover {
  background: var(--ink-800);
  color: var(--fg-muted);
}

.sidenav__child-link.is-active {
  color: var(--gold-bright);
}

.sidenav__footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-top: 1px solid var(--divider);
}

.sidenav__logout-btn {
  width: 100%;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px var(--space-4);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  line-height: 1;
}

.sidenav__logout-btn:hover {
  background: var(--surface);
  color: var(--negative);
  border-color: rgba(201, 122, 102, 0.30);
}

.site-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.site-content.is-navigating {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
  .sidenav {
    display: none;
  }
}

@media (max-width: 720px) {
  .container,
  .container--narrow {
    padding: 0 var(--space-4);
  }

  .main {
    padding: var(--space-6) 0 var(--space-7);
  }

  .welcome {
    padding: 0 0 var(--space-5);
  }

  .login-card {
    padding: var(--space-6) var(--space-5);
  }

  .site-header__inner {
    height: 48px;
  }

  h1 {
    font-size: clamp(24px, 6vw, 36px);
  }
}