/* ═══════════════════════════════════════════════════════════
   FSG-A v2.0 — DESIGN TOKENS
   Light mode only. Sans-serif throughout.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #F0F4F8;
  --surf: #FFFFFF;
  --surf-2: #E8EEF5;
  --surf-3: #DCE8F0;
  --overlay: rgba(240,244,248,.95);

  --border: #C0CDD8;
  --border-2: #A0B5C8;

  --blue: #1A6FC4;
  --blue-dim: #C0D8F0;
  --blue-bright: #1055A0;
  --green: #007040;
  --green-dim: #D0F0E0;
  --red: #CC2020;
  --red-dim: #FCE0E0;
  --amber: #B86800;
  --amber-dim: #FFF0D0;
  --purple: #7040C0;
  --cyan: #0080A0;
  --code: #5A3000;
  --code-bg: #0A1A2A;
  --code-text: #E8F0F8;

  --text: #1A2A3A;
  --text-dim: #4A6070;
  --text-mid: #2A4A60;
  --text-bright: #0A1A2A;

  /* ── Typography — Sans-serif system ── */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Cascadia Code', monospace;

  /* ── Spacing ── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* ── Layout ── */
  --sidebar-w: 280px;
  --topbar-h: 56px;
  --content-max: 960px;
  --touch-min: 44px;

  /* ── Motion ── */
  --ease: 0.15s ease;
  
  /* ── Depth & Elevation ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.06);

  /* ── Terminal/console block tokens ── */
  --term-bg: #0a0e17;
  --term-bg-header: #0d1320;
  --term-border: #1a2744;
  --term-text: #c8ccd4;
  --term-cyan: #4fc3f7;
  --term-green: #66bb6a;
  --term-red: #f44336;
  --term-amber: #ffa726;
  --term-dim: #78909c;
}

/* ═══════════════════════════════════════════════════════════
   FSG-A v2.0 — RESET & BASE
   Mobile-first. Base = 320px phone. Desktop = override.
   ═══════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--blue-bright); }
strong, b { color: var(--text-bright); }
table { border-collapse: collapse; width: 100%; }

/* Selection */
::selection { background: var(--blue); color: #fff; }

/* Focus visible */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════
   FSG-A v2.0 — LAYOUT
   Base = mobile (320px). Desktop = min-width override.
   ALL navigation links in HTML source for Googlebot.
   NO display:none on nav elements.
   ═══════════════════════════════════════════════════════════ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 var(--s4);
  background: var(--overlay);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  gap: var(--s3);
}

/* Sidebar — always in DOM, off-screen on mobile */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 85vw;
  max-width: 340px;
  height: 100dvh;
  z-index: 1100;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar.open {
  transform: translateX(0);
  visibility: visible;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.main {
  min-height: 100vh;
  padding: var(--s4) var(--s3) var(--s8);
}

.content-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.menu-btn {
  position: fixed;
  bottom: var(--s4);
  right: var(--s4);
  z-index: 900;
  width: 48px;
  height: 48px;
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

.quicknav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s4);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--overlay);
  border-top: 1px solid var(--border);
  z-index: 800;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
}

.quicknav a {
  color: var(--text-mid);
  text-decoration: none;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  padding: 0 var(--s3);
}

.quicknav a:hover { color: var(--blue); }

.to-top {
  position: fixed;
  bottom: calc(var(--s7) + env(safe-area-inset-bottom));
  right: var(--s4);
  z-index: 850;
  width: 40px;
  height: 40px;
  background: var(--surf-2);
  border: 1px solid var(--border);
  color: var(--text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  text-decoration: none;
  font-size: 16px;
}

.skip-nav {
  position: absolute;
  top: -100px;
  left: var(--s4);
  background: var(--blue);
  color: #fff;
  padding: var(--s2) var(--s4);
  font-family: var(--font-display);
  font-size: 10px;
  z-index: 9999;
  transition: top 0.1s;
}

.skip-nav:focus { top: var(--s4); }

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1200;
  background: transparent;
  pointer-events: none;
}

.progress-bar__fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.1s linear;
}

/* ═══ DESKTOP ═══ */
@media (min-width: 901px) {
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--topbar-h));
    max-width: none;
    transform: none;
    visibility: visible;
    transition: none;
    z-index: 900;
  }

  .sidebar-overlay { display: none; }
  .main { margin-left: var(--sidebar-w); padding: var(--s6) var(--s6) var(--s8); }
  .quicknav { left: var(--sidebar-w); }
  .menu-btn { display: none; }
}

@media (min-width: 1440px) {
  .content-wrap { max-width: var(--content-max); margin: 0 auto; }
}

/* ═══ OVERFLOW PROTECTION ═══ */
html, body { overflow-x: hidden; max-width: 100vw; }
.main { overflow-x: hidden; max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }

/* ── Depth: body background subtle gradient ── */
body {
  background: linear-gradient(180deg, var(--surf-2) 0px, var(--bg) 300px);
  background-attachment: fixed;
}

/* ── Depth: main content area is elevated surface ── */
@media (min-width: 901px) {
  .content-wrap {
    background: var(--surf);
    padding: var(--s6);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
  }
}

/* ═══════════════════════════════════════════════════════════
   FSG-A v2.0 — TYPOGRAPHY
   Inter for everything. Tight, modern, technical.
   ═══════════════════════════════════════════════════════════ */

h1, .page-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--text-bright);
  margin-bottom: var(--s4);
}

.page-title span { color: var(--blue); }

h2 {
  font-family: var(--font-display);
  font-size: clamp(17px, 3vw, 22px);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text-bright);
  margin: var(--s7) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--border);
}

h3 {
  font-family: var(--font-display);
  font-size: clamp(14px, 2.2vw, 17px);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-bright);
  margin: var(--s5) 0 var(--s3);
}

h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: var(--s4) 0 var(--s2);
}

p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: var(--s4);
  color: var(--text);
  font-weight: 400;
}

.chapter-desc {
  font-size: clamp(15px, 2.5vw, 17px);
  font-weight: 400;
  color: var(--text-mid);
  max-width: 680px;
  line-height: 1.5;
  margin-bottom: var(--s6);
  border-left: 3px solid var(--blue);
  padding-left: var(--s4);
}

.chapter-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: var(--s3);
  text-transform: uppercase;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--blue);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.section-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
}

code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surf-2);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--blue-bright);
  font-weight: 500;
}

pre {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.8vw, 14px);
  line-height: 1.8;
  background: var(--code-bg);
  color: var(--code-text);
  border: none;
  padding: var(--s4);
  overflow-x: auto;
  margin: var(--s4) 0;
  border-radius: 6px;
  position: relative;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  font-weight: 400;
}

blockquote {
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--blue);
  background: var(--surf);
  margin: var(--s4) 0;
  color: var(--text-mid);
  font-style: normal;
  font-size: 14px;
}

/* Cyrillic tuning */
html[lang="uk"] p,
html[lang="uk"] .chapter-desc,
html[lang="uk"] td { line-height: 1.75; }

/* ═══════════════════════════════════════════════════════════
   FSG-A v2.0 — COMPONENTS
   Every reusable UI element. One definition per selector.
   ═══════════════════════════════════════════════════════════ */

/* ── TOPBAR COMPONENTS ── */
.logo {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--text-bright);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--blue); }

.logo-sub {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  display: none;
}
@media (min-width: 901px) { .logo-sub { display: block; } }

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
  white-space: nowrap;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumb a { color: var(--text-mid); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb__sep { color: var(--border-2); margin: 0 2px; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  text-decoration: none;
}
.lang-btn:hover { background: var(--surf-2); color: var(--text-bright); }

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
}

.status-text {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
}

/* ── SIDEBAR COMPONENTS ── */
.sidebar-header {
  background: var(--blue);
  padding: var(--s2) var(--s4);
  flex-shrink: 0;
}

.sidebar-header__title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
}

.sidebar-header__sub {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.65);
  margin-top: var(--s1);
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--s4);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-dim);
  line-height: 2;
}
.sidebar-footer a { color: var(--blue); }

/* Nav sections (collapsible) */
.nav-section { border-bottom: 1px solid var(--border); }

.nav-section__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  min-height: var(--touch-min);
  transition: background var(--ease);
  user-select: none;
}
.nav-section__label:hover { background: rgba(200,213,224,.05); }

.nav-section__chevron { transform: rotate(90deg);
  font-size: 14px;
  color: var(--text-dim);
  transition: transform var(--ease);
}
.nav-section.open .nav-section__chevron { transform: rotate(90deg); transform: rotate(90deg); }

.nav-section__items { padding: var(--s1) 0; overflow: hidden; max-height: 2000px; transition: max-height 0.3s ease; }
.nav-section.collapsed .nav-section__items { max-height: 0; padding: 0; }

/* Nav item */
.nav-item {
  display: flex;
  align-items: center;
  padding: var(--s2) var(--s4) var(--s2) var(--s5);
  min-height: var(--touch-min);
  color: var(--text-mid);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  transition: all var(--ease);
  border-left: 3px solid transparent;
}
.nav-item:hover { color: var(--text-bright); background: var(--surf-2); }
.nav-item.active { color: var(--blue); border-left-color: var(--blue); background: var(--surf); }
.nav-item:active { transform: scale(.97); transition: transform 60ms; }

.nav-item__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  min-width: 28px;
  margin-right: var(--s2);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--s2) var(--s5);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--blue);
  border: 1px solid var(--blue);
  background: none;
  border-radius: 6px;
  cursor: pointer;
  min-height: var(--touch-min);
  text-decoration: none;
  transition: all var(--ease);
}
.btn:hover { background: var(--blue-bright); color: var(--bg); border-color: var(--blue-bright); }

.btn--primary {
  background: var(--blue);
  color: #fff;
  border: none;
}
.btn--primary:hover { background: var(--blue-bright); color: #fff; }

/* ── CARDS ── */
.card {
  background: var(--surf);
  border: 1px solid var(--border);
  padding: var(--s4);
  border-radius: 6px;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin: var(--s4) 0;
}
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 901px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }

/* Domain cards (colored top border) */
.domain-card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-2);
  padding: var(--s5);
  border-radius: 6px;
}
.domain-card.air { border-top-color: var(--blue); }
.domain-card.gnd { border-top-color: var(--amber); }
.domain-card.sea { border-top-color: var(--cyan); }
.domain-card.ew  { border-top-color: var(--red); }
.domain-card.arc { border-top-color: var(--purple); }

.domain-card__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.domain-card.air .domain-card__label { color: var(--blue); }
.domain-card.gnd .domain-card__label { color: var(--amber); }
.domain-card.sea .domain-card__label { color: var(--cyan); }
.domain-card.ew  .domain-card__label { color: var(--red); }
.domain-card.arc .domain-card__label { color: var(--purple); }

.domain-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: var(--s3);
  line-height: 1.3;
}

.domain-card__desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.65;
}

/* ── TABLES ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--s4) 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.table-wrap table { width: 100%; min-width: 400px; }

.table-wrap th {
  background: var(--surf-2);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-align: left;
  padding: var(--s2) var(--s3);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.table-wrap td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
  vertical-align: top;
}

.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap tr:hover td { background: rgba(45,140,240,.03); }

/* ── CALLOUT BOXES ── */
.callout {
  border-left: 4px solid var(--blue);
  background: var(--surf);
  padding: var(--s3) var(--s4);
  margin: var(--s4) 0;
  border-radius: 0 2px 2px 0;
}
.callout.warn { border-left-color: var(--amber); background: rgba(232,148,10,.05); }
.callout.danger { border-left-color: var(--red); background: rgba(240,64,64,.05); }
.callout.success { border-left-color: var(--green); background: rgba(0,217,126,.05); }

.callout__title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.callout.warn .callout__title { color: var(--amber); }
.callout.danger .callout__title { color: var(--red); }

.callout__body { 
  font-size: 14px; 
  color: var(--text-mid); 
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* ── TAGS ── */
/* .tag removed — unified in badge-row */

.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }

/* ── DOMAIN BADGES ── */
/* .badge removed — unified in badge-row */

/* ── SPEC BOX ── */
.specbox {
  background: var(--surf);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  margin: var(--s5) 0;
}

.specbox__title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--amber);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}

.specbox__row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border);
  min-height: 36px;
}
.specbox__row:last-child { border-bottom: none; }

/* Small tablet: allow wider key column */
@media (min-width: 600px) and (max-width: 900px) {
  .specbox__row { grid-template-columns: minmax(180px, 260px) 1fr; }
  .specbox__key { border-right: 1px solid var(--border); }
}

/* Desktop: wider key column with minmax guard so long multilingual labels fit */
@media (min-width: 901px) {
  .specbox__row { grid-template-columns: minmax(220px, 320px) 1fr; }
  .specbox__key { border-right: 1px solid var(--border); }
}

.specbox__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: flex-start;
  /* Allow long keys (Swedish, Ukrainian) to wrap cleanly */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  min-width: 0;
}

.specbox__val {
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
  padding: var(--s2) var(--s5);
  /* Prevent long unbroken strings (URLs, UK compound terms) from overflowing */
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
}

/* ── STEPS ── */
.steps { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s4) 0; }

.step {
  display: flex;
  gap: var(--s4);
  padding: var(--s4);
  background: var(--surf);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  align-items: flex-start;
}

.step__num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  min-width: 24px;
  flex-shrink: 0;
}

.step__title {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-bright);
  margin-bottom: var(--s2);
  text-transform: uppercase;
}

.step__body { font-size: 13px; color: var(--text-mid); line-height: 1.6; }

/* ── TOC ── */
.toc {
  background: var(--surf);
  border: 1px solid var(--border);
  padding: var(--s4);
  margin: var(--s5) 0;
  border-radius: 6px;
}

.toc__title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: var(--s3);
}

.toc__list { list-style: none; padding: 0; }
.toc__list li { padding: var(--s1) 0; }
.toc__list a { color: var(--text-mid); font-size: 14px; }
.toc__list a:hover { color: var(--blue); }

/* ── PREV/NEXT NAV ── */
.page-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--border);
}
@media (min-width: 600px) { .page-nav { grid-template-columns: 1fr 1fr; } }

/* ── STATS GRID ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin: var(--s6) 0;
}
@media (min-width: 600px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 901px) { .stats-grid { grid-template-columns: repeat(6, 1fr); } }

.stat-cell {
  padding: var(--s4) var(--s3);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.stat-cell__value {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px); font-weight: 700;
  color: var(--blue);
  letter-spacing: 2px;
  line-height: 1;
}

.stat-cell__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: var(--s2);
}

/* ── IDENTITY BANNER ── */
.identity-banner {
  padding: var(--s4) var(--s5);
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: var(--s5);
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
}

.identity-banner__mark {
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
}

/* ── PHOTO GRID ── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
  margin: var(--s4) 0;
}
.photo-grid img {
  width: 100%;
  border-radius: 6px;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* ── FIELD VERIFIED MARKER ── */
.verified {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 1px;
}
.verified::before { content: '✓ '; }

.theoretical {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.theoretical::before { content: '◇ '; }

/* ── COPY BUTTON (on pre blocks) ── */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0.6;
  z-index: 5;
  background: var(--surf-2);
  border: 1px solid var(--border);
  color: var(--text-mid);
  border-radius: 6px;
}
.copy-btn:hover { opacity: 1; }

/* ── SEARCH ── */
.search-input {
  width: 100%;
  max-width: 500px;
  padding: var(--s3);
  font-size: 16px;
  background: var(--surf);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-family: var(--font-mono);
}
.search-input:focus { border-color: var(--blue); outline: none; }

/* ── Inline style elimination ── */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
a.domain-card { text-decoration: none; color: inherit; }
a.domain-card:hover { border-color: var(--blue); }
.footer-section { margin-top: var(--s6); padding: var(--s4); border-top: 1px solid var(--border); }

/* ── Memorial link in sidebar ── */
.nav-item--memorial {
  border-left: 3px solid var(--text-dim);
  margin-top: var(--s2);
}

/* ── Sidebar sections: crawlable but collapsible ── */
/* All items visible in HTML source for Googlebot */
/* JS adds .collapsed class for UX, CSS hides visually */
.nav-section__items {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.3s ease;
}
.nav-section.collapsed .nav-section__items {
  max-height: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   CREDIBILITY ARCHITECTURE — Added per Brand Guidelines §4
   ═══════════════════════════════════════════════════════════ */

/* Classification marking */
.classification {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
  text-align: center;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s4);
}

.classification--footer {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
  text-align: center;
  padding: var(--s4) 0;
  border-top: 1px solid var(--border);
  margin-top: var(--s8);
}

/* Author attribution line */
.author-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: var(--s3);
}

.author-line a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}

.author-line a:hover {
  text-decoration-color: var(--blue);
}

/* Verification + domain badge row */
/* .badge-row base — see unified system below */

/* Quick answer box — above the fold, always */
.quick-answer {
  background: var(--surf);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  padding: var(--s4);
  margin-bottom: var(--s5);
  border-radius: 0 2px 2px 0;
}

.quick-answer__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: var(--s2);
}

.quick-answer__text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Page footer with full attribution */
.page-footer {
  text-align: center;
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
  margin-top: var(--s8);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 2;
  letter-spacing: 1px;
}

.page-footer a {
  color: var(--text-mid);
}

.page-footer__classification {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: var(--s3);
  display: block;
}

/* ── Modern card hover ── */
a.domain-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-lg);
}

/* ── Modern identity banner ── */
.identity-banner {
  padding: var(--s4) var(--s5);
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: var(--s5);
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   TOC — Inline in article flow, full content-column width
   ═══════════════════════════════════════════════════════════ */
.toc {
  background: var(--surf);
  border: 1px solid var(--border);
  padding: var(--s4);
  margin: var(--s5) 0;
  border-radius: 6px;
}

@media (min-width: 1200px) {
  .toc {
    max-width: 720px;
    margin: var(--s5) 0;
  }
}

.toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: var(--s3);
}

.toc__list { list-style: none; padding: 0; }
.toc__list li { padding: 3px 0; }
.toc__list a {
  color: var(--text-mid);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.toc__list a:hover { color: var(--blue); }
.toc__list .toc--h3 { padding-left: var(--s4); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════
   CHAPTER STATUS INDICATOR
   ═══════════════════════════════════════════════════════════ */
/* .status-badge removed — unified */

/* ═══════════════════════════════════════════════════════════
   READ TIME
   ═══════════════════════════════════════════════════════════ */
/* .read-time removed — unified */

/* ═══════════════════════════════════════════════════════════
   COPYABLE SPEC VALUES
   ═══════════════════════════════════════════════════════════ */
.specbox__val--copy {
  cursor: pointer;
  position: relative;
}

.specbox__val--copy:hover {
  color: var(--blue);
}

.specbox__val--copy::after {
  content: '⎘';
  font-size: 11px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  color: var(--text-dim);
}

.specbox__val--copy:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   FLOW DIAGRAM (ASCII-style in pre, or structured)
   ═══════════════════════════════════════════════════════════ */
.flow-diagram {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s5);
  margin: var(--s5) 0;
  overflow-x: auto;
}

.flow-diagram__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: var(--s4);
}

/* ═══════════════════════════════════════════════════════════
   DECISION LEVEL CARDS
   ═══════════════════════════════════════════════════════════ */
.level-card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s4);
  margin-bottom: var(--s3);
  border-left: 4px solid var(--border-2);
}

.level-card--l1 { border-left-color: var(--amber); }
.level-card--l2 { border-left-color: var(--blue); }
.level-card--l3 { border-left-color: var(--red); }

.level-card__header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.level-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 3px;
}

.level-card--l1 .level-card__tag { background: var(--amber-dim); color: var(--amber); }
.level-card--l2 .level-card__tag { background: var(--blue-dim); color: var(--blue); }
.level-card--l3 .level-card__tag { background: var(--red-dim); color: var(--red); }

.level-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-bright);
}

.level-card__body {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════
   UNIFIED BADGE SYSTEM — THE ONLY badge definition
   All badges, tags, status indicators use this.
   Symmetry is non-negotiable. Same height, padding, font.
   ═══════════════════════════════════════════════════════════ */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s3) 0 var(--s5);
  align-items: center;
}

.badge-row > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surf);
  color: var(--text-dim);
  line-height: 1;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  white-space: nowrap;
  box-sizing: border-box;
  margin: 0;
}

/* Color-only overrides */
.badge-row .status-badge--complete { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.badge-row .status-badge--draft { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.badge-row .status-badge--placeholder { border-color: var(--border); color: var(--text-dim); }
.badge-row .air { border-color: var(--blue); color: var(--blue); background: transparent; }
.badge-row .gnd { border-color: var(--amber); color: var(--amber); background: transparent; }
.badge-row .sea { border-color: var(--cyan); color: var(--cyan); background: transparent; }
.badge-row .ew { border-color: var(--red); color: var(--red); background: transparent; }
.badge-row .arc { border-color: var(--purple); color: var(--purple); background: transparent; }

/* ═══════════════════════════════════════════════════════════
   DEPTH SYSTEM — Layered elevation throughout
   ═══════════════════════════════════════════════════════════ */

/* Topbar: ground layer, shadow separates from content */
.topbar {
  box-shadow: var(--shadow-md);
}

/* Sidebar: elevated panel */
.sidebar {
  box-shadow: var(--shadow-lg);
}

/* Cards: lifted off surface */
.domain-card {
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

a.domain-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Specbox: prominent reference block */
.specbox {
  box-shadow: var(--shadow-md);
}

/* Callout boxes: subtle lift */
.callout {
  box-shadow: var(--shadow-sm);
}

/* Quick answer: elevated priority */
.quick-answer {
  box-shadow: var(--shadow-md);
}

/* Level cards: layered with left accent */
.level-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.level-card:hover {
  box-shadow: var(--shadow-md);
}

/* Step cards: subtle depth */
.step {
  box-shadow: var(--shadow-sm);
}

/* Code blocks: recessed into surface */
pre {
  box-shadow: var(--shadow-inset);
}

/* Tables: contained surface */
.table-wrap {
  box-shadow: var(--shadow-sm);
}

/* Stats grid: structured elevation */
.stats-grid {
  box-shadow: var(--shadow-sm);
  border-radius: 6px;
  overflow: hidden;
}

/* TOC: floating reference */
.toc {
  box-shadow: var(--shadow-md);
}

/* Identity banner: grounded */
.identity-banner {
  box-shadow: var(--shadow-sm);
}

/* Sidebar sections on hover: subtle lift */
.nav-item:hover {
  box-shadow: inset 3px 0 0 var(--blue);
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--blue);
  background: var(--surf);
}

/* Page sections: alternating depth */
h2 {
  margin-top: var(--s8);
  padding-top: var(--s6);
}

/* Content area: subtle inset on main */
.content-wrap {
  background: transparent;
}

/* Badge row container: grounded */
.badge-row {
  padding: var(--s2) 0;
}

/* Menu button: floating action */
.menu-btn {
  box-shadow: var(--shadow-lg);
}

/* Footer: recessed */
.page-footer {
  background: var(--surf-2);
  border-radius: 6px;
  padding: var(--s5);
  box-shadow: var(--shadow-inset);
}

.classification {
  background: var(--surf-2);
  border-radius: 4px;
  box-shadow: var(--shadow-inset);
}

/* ═══ INTERACTIVE TOOLS ═══ */
.tool{background:var(--surf);border:2px solid var(--border);border-radius:8px;padding:var(--s5);margin:var(--s5) 0;font-family:var(--font-mono)}
.tool__title{font:700 14px/1.2 var(--font-display);color:var(--blue);margin:0 0 var(--s4);text-transform:uppercase;letter-spacing:0.5px}
.tool__grid{display:grid;gap:var(--s3)}
.tool__grid--2{grid-template-columns:1fr 1fr}
.tool__grid--3{grid-template-columns:1fr 1fr 1fr}
.tool__grid--4{grid-template-columns:1fr 1fr 1fr 1fr}
.tool__label{font:600 11px/1.4 var(--font-display);color:var(--text-dim);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:var(--s1)}
.tool__input{width:100%;background:var(--surf-2);border:1px solid var(--border);border-radius:4px;padding:var(--s2) var(--s3);font:400 13px/1.4 var(--font-mono);color:var(--text)}
.tool__select{width:100%;background:var(--surf-2);border:1px solid var(--border);border-radius:4px;padding:var(--s2) var(--s3);font:400 13px/1.4 var(--font-mono);color:var(--text);min-height:var(--touch-min)}
.tool__range{width:100%;accent-color:var(--blue)}
.tool__btn{background:var(--blue);color:#fff;border:none;border-radius:4px;padding:var(--s3) var(--s5);font:700 13px/1 var(--font-display);cursor:pointer;min-height:var(--touch-min);text-transform:uppercase;letter-spacing:0.5px;transition:background var(--ease)}
.tool__btn:hover{background:var(--blue-bright)}
.tool__output{background:var(--surf-2);border:1px solid var(--border);border-radius:6px;padding:var(--s4);margin-top:var(--s4)}
.tool__metric{text-align:center;padding:var(--s3)}
.tool__metric-label{font:500 10px/1.2 var(--font-display);color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px}
.tool__metric-value{font:700 28px/1.2 var(--font-mono);margin-top:var(--s1)}
.tool__metric-value--green{color:var(--green)}
.tool__metric-value--amber{color:var(--amber)}
.tool__metric-value--red{color:var(--red)}
.tool__metric-value--blue{color:var(--blue)}
.tool__bar{height:20px;background:var(--surf-3);border-radius:10px;overflow:hidden;margin:var(--s2) 0}
.tool__bar-fill{height:100%;border-radius:10px;transition:width 0.4s ease}
.tool__bar-fill--green{background:var(--green)}
.tool__bar-fill--amber{background:var(--amber)}
.tool__bar-fill--red{background:var(--red)}
.tool__bar-fill--blue{background:var(--blue)}
.tool__row{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--surf-3)}
.tool__row:last-child{border-bottom:none}
.tool__row-label{width:140px;font:500 12px/1.3 var(--font-display);color:var(--text)}
.tool__row-bar{flex:1;height:16px;background:var(--surf-3);border-radius:3px;overflow:hidden}
.tool__row-val{width:50px;text-align:right;font:600 12px/1 var(--font-mono);color:var(--text-dim)}
.tool__status{text-align:center;padding:var(--s4);font:700 18px/1.2 var(--font-display);border-radius:6px;margin-top:var(--s3)}
.tool__status--green{background:var(--green-dim);color:var(--green)}
.tool__status--amber{background:var(--amber-dim);color:var(--amber)}
.tool__status--red{background:var(--red-dim);color:var(--red)}
.tool__timeline{display:flex;gap:2px;height:24px;margin:var(--s2) 0}
.tool__timeline-block{border-radius:2px;transition:background 0.3s}
.tool__timeline-block--active{background:var(--green)}
.tool__timeline-block--idle{background:var(--surf-3)}
.tool__formula{font:400 11px/1.4 var(--font-mono);color:var(--text-dim);margin-top:var(--s2);padding:var(--s2) var(--s3);background:var(--surf-3);border-radius:4px}
@media(max-width:640px){.tool__grid--2,.tool__grid--3,.tool__grid--4{grid-template-columns:1fr}}
.tool-link{background:var(--blue-dim);border-left:3px solid var(--blue)}
.tool-link a{color:var(--blue-bright);font-weight:600;text-decoration:none}
.tool-link a:hover{text-decoration:underline}

.tool-download{text-align:center;margin:var(--s5) 0}
.download-btn{display:inline-block;background:var(--blue);color:#fff;padding:var(--s3) var(--s6);border-radius:4px;text-decoration:none;font:700 13px/1 var(--font-display);letter-spacing:0.5px;min-height:var(--touch-min);line-height:var(--touch-min)}
.download-btn:hover{background:var(--blue-bright)}
.tool-download__meta{font:400 11px/1.4 var(--font-mono);color:var(--text-dim);margin-top:var(--s2)}

/* Terminal/console output blocks (replaces inline styles on validation/briefing pages) */
.terminal-output{background:var(--term-bg);border:1px solid var(--term-border);border-radius:4px;padding:14px 18px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--term-text);line-height:1.6;overflow-x:auto}

/* Status tables (e.g. proof runs, validation matrices) */
.status-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:12px}
.status-table thead{background:var(--term-bg-header)}
.status-table th{padding:8px 12px;text-align:left;border-bottom:1px solid var(--term-border);color:var(--term-cyan)}
.status-table th.status-th--pass{color:var(--term-green)}
.status-table th.status-th--fail{color:var(--term-red)}
.status-table td{padding:6px 12px;border-bottom:1px solid var(--term-border)}
.status-table td.status-td--pass{color:var(--term-green)}
.status-table td.status-td--fail{color:var(--term-red)}
.status-table td.status-td--warn{color:var(--term-amber)}
.status-table td.status-td--mono{font-family:monospace}
.status-table td.status-td--dim{color:var(--term-dim)}
/* Mobile: wrap status-table in scrollable container to handle wide tables (5+ cols) */
@media (max-width: 640px) {
  .status-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .status-table thead, .status-table tbody, .status-table tr { display: table; width: 100%; table-layout: auto; }
}

/* Column width utilities for status tables */
.w-10{width:10%}
.w-12{width:12.5%}
.w-16{width:16.6%}
.w-20{width:20%}
.w-25{width:25%}
.w-33{width:33.3%}
.w-50{width:50%}

/* Inline text-color utilities (for status markers in prose) */
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.text-amber{color:var(--amber)}

/* Breadcrumb cluster segment (non-linked, distinct styling) */
.breadcrumb__cluster {
  color: var(--text-mid);
  font-weight: 500;
}

/* Prev/Next navigation at page bottom */
.prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 48px 0 32px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.prev-next__prev, .prev-next__next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  background: var(--card);
  transition: border-color 0.15s, background 0.15s;
}
.prev-next__next {
  align-items: flex-end;
  text-align: right;
}
.prev-next__prev:hover, .prev-next__next:hover {
  border-color: var(--blue);
  background: var(--card-hover, var(--card));
}
.prev-next__disabled {
  pointer-events: none;
  opacity: 0;
}
.prev-next__dir {
  font-size: 12px;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.prev-next__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
@media (max-width: 600px) {
  .prev-next { grid-template-columns: 1fr; }
  .prev-next__next { align-items: flex-start; text-align: left; }
}

/* ═══ NO DARK MODE ═══
   This site is light-mode only. Per design decision, we do NOT honor
   prefers-color-scheme: dark — the professional engineering content
   with its citations, specboxes, and mathematical formulas is
   specifically designed for and tested in light mode. Dark mode
   previously caused button readability issues and contrast problems
   with the color-coded badges (blue/amber/red/green/purple).
   If a user needs dark viewing, their browser's per-site dark-mode
   extension or OS-level invert accessibility feature can handle it
   without compromising the designed presentation.
   ═══ */

/* ═══ PRINT STYLESHEET ═══ */
@media print {
  @page { size: A4; margin: 20mm; }
  body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
  .topbar, .sidebar, .sidebar-overlay, .progress-bar, .skip-nav,
  .badge-row, .nav-section, .lang-btn, .status-dot, .status-text,
  .ext-ref, .breadcrumb { display: none; visibility: hidden; height: 0; overflow: hidden; }
  main, .content { margin: 0; padding: 0; max-width: 100%; }
  .page-title { font-size: 22pt; margin-bottom: 10pt; }
  h2 { font-size: 14pt; page-break-after: avoid; margin-top: 16pt; }
  p { orphans: 3; widows: 3; }
  .quick-answer, .callout, .specbox {
    border: 1px solid var(--border); padding: 8pt; margin: 8pt 0;
    page-break-inside: avoid;
  }
  pre { border: 1px solid var(--border); padding: 6pt; font-size: 8pt;
    white-space: pre-wrap; word-wrap: break-word;
    page-break-inside: avoid;
  }
  table { border-collapse: collapse; width: 100%; font-size: 9pt; }
  th, td { border: 1px solid var(--border); padding: 4pt; }
  a { color: var(--text); text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: var(--text-muted); }
  .chapter-meta { font-size: 8pt; color: var(--text-muted); }
}

/* ═══ TOUCH TARGETS ═══ */
.nav-item { min-height: 44px; display: flex; align-items: center; }
.lang-btn { min-width: 44px; min-height: 44px; }
.breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 768px) {
  .nav-item { padding: 12px 16px; }
  a { padding: 2px 0; }
}

/* ═══════════════════════════════════════════════════════════
   CHAPTER TABLE OF CONTENTS
   Auto-generated from h2/h3 headings at build time.
   - Desktop (≥1200px): sticky right column
   - Tablet (900-1199px): collapsible at top of article
   - Mobile (<900px): collapsible drawer, default collapsed
   ═══════════════════════════════════════════════════════════ */

.chapter-toc {
  display: block;
  margin: 0 0 var(--s5) 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  contain: layout style;
}

.chapter-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s3) var(--s4);
  background: var(--surf-2);
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-bright);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}

.chapter-toc__toggle:hover,
.chapter-toc__toggle:focus-visible {
  background: var(--surf-3);
  outline: none;
}

.chapter-toc__label {
  flex: 1;
}

.chapter-toc__count {
  display: inline-block;
  padding: 2px 8px;
  background: var(--blue-dim);
  color: var(--blue-bright);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.chapter-toc__toggle::after {
  content: '▸';
  margin-left: var(--s3);
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.chapter-toc__toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.chapter-toc__list {
  list-style: none;
  margin: 0;
  padding: var(--s3) 0;
  counter-reset: toc-h2;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Collapsed state — driven by JS toggling aria-expanded on button */
.chapter-toc__toggle[aria-expanded="false"] + .chapter-toc__list {
  display: none;
}

.chapter-toc__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chapter-toc__item--h2 {
  counter-increment: toc-h2;
  border-left: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.chapter-toc__item--h2 > .chapter-toc__link::before {
  content: counter(toc-h2) ".";
  display: inline-block;
  min-width: 22px;
  color: var(--text-dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.chapter-toc__link {
  display: block;
  padding: 6px var(--s4) 6px var(--s3);
  color: var(--text-mid);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
  word-break: break-word;
}

.chapter-toc__link:hover,
.chapter-toc__link:focus-visible {
  background: var(--surf-2);
  color: var(--blue-bright);
  outline: none;
}

.chapter-toc__link.is-active {
  background: var(--blue-dim);
  color: var(--blue-bright);
  border-left-color: var(--blue-bright);
  font-weight: 600;
}

.chapter-toc__sublist {
  list-style: none;
  margin: 2px 0 4px 0;
  padding: 0 0 0 var(--s5);
  border-left: 1px solid var(--border);
  margin-left: var(--s4);
}

.chapter-toc__item--h3 .chapter-toc__link {
  padding: 4px var(--s3) 4px var(--s3);
  font-size: 13px;
  color: var(--text-dim);
}

.chapter-toc__item--h3 .chapter-toc__link:hover,
.chapter-toc__item--h3 .chapter-toc__link:focus-visible {
  color: var(--blue-bright);
}

.chapter-toc__item--h3 .chapter-toc__link.is-active {
  font-weight: 600;
}

/* Desktop: inline, full width of content column, kept readable */
@media (min-width: 1200px) {
  .chapter-toc {
    max-width: 720px;
    margin: 0 0 var(--s5) 0;
  }
  /* Always expanded on desktop — no toggle needed at this size */
  .chapter-toc__toggle[aria-expanded="false"] + .chapter-toc__list {
    display: block;
  }
  .chapter-toc__toggle {
    cursor: default;
  }
  .chapter-toc__toggle::after {
    display: none;
  }
}

/* Tablet: full-width collapsible, expanded by default */
@media (min-width: 900px) and (max-width: 1199px) {
  .chapter-toc {
    max-width: 100%;
  }
}

/* Mobile: collapsed by default for faster page access */
@media (max-width: 639px) {
  .chapter-toc {
    margin: 0 0 var(--s4) 0;
    font-size: 13px;
  }
  .chapter-toc__list {
    max-height: 60vh;
  }
  .chapter-toc__link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Print: hide TOC in print output */
@media print {
  .chapter-toc {
    display: none;
  }
}

/* Smooth scroll offset for sticky headers */
.chapter-toc__link:focus,
.chapter-toc [id],
:target {
  scroll-margin-top: var(--s5);
}

h2[id],
h3[id] {
  scroll-margin-top: var(--s5);
}