:root {
  --bg-0: #05070c;
  --bg-1: #0b1220;
  --bg-2: #101a2e;
  --border: rgba(215, 221, 229, 0.16);
  --text-primary: #e7ecf3;
  --text-secondary: #9aa4b2;
  --accent: #4f8fff;
  --accent-2: #22d3ee;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  /* ---- responsive design tokens (device-class breakpoints, documentation +
     used inside a small number of @media (min-width: var(...)) is not
     supported by CSS, so these also exist as literal @media breakpoints
     below -- keep both in sync if you change one) ---- */
  --viewport-xs: 320px;   /* A. compact phone            320-479 */
  --viewport-sm: 480px;   /* B. large phone / fold cover  480-599 */
  --viewport-md: 600px;   /* C. foldable inner / small tablet 600-899 */
  --viewport-lg: 900px;   /* D. tablet / small laptop     900-1199 */
  --viewport-xl: 1200px;  /* E. laptop / desktop          1200-1919 */
  --viewport-2xl: 1920px; /* F. large monitor / TV        1920+ */

  --content-max-width: 1400px;
  --reading-max-width: 72ch;
  --sidebar-width: clamp(200px, 18vw, 260px);
  --page-gutter: clamp(14px, 4vw, 32px);
  --section-gap: clamp(20px, 4vw, 40px);
  --card-min-width: min(260px, 100%);
  --touch-target: 44px;

  --fs-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --fs-h1: clamp(1.55rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.15rem, 1.02rem + 0.7vw, 1.55rem);
  --fs-h3: clamp(1rem, 0.94rem + 0.35vw, 1.15rem);
  --fs-small: clamp(0.78rem, 0.76rem + 0.15vw, 0.88rem);

  --header-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
:root[data-theme="light"] {
  --bg-0: #f4f6fb;
  --bg-1: #ffffff;
  --bg-2: #eef1f8;
  --border: rgba(15, 23, 42, 0.12);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --accent: #2563eb;
  --accent-2: #0891b2;
}
* { box-sizing: border-box; min-width: 0; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Tamil", Helvetica, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  overflow-x: hidden;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}
html[lang="ta"] body { line-height: 1.8; word-break: normal; overflow-wrap: anywhere; letter-spacing: normal; }
a { color: var(--accent); text-decoration: none; }
img, svg { max-width: 100%; }

@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration: underline; }
  .site-nav a:hover { background: var(--bg-2); color: var(--text-primary); text-decoration: none; }
  #mode-toggle:hover, #theme-toggle:hover, #nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.boundary-banner {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #04101f;
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  text-align: center;
  padding: 6px calc(10px + var(--safe-l)) 6px calc(10px + var(--safe-r));
  padding-top: calc(6px + var(--safe-t));
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 16px);
  padding: 12px var(--page-gutter);
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 36px; height: 36px; min-width: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #04101f;
}
.brand-title { font-weight: 700; overflow-wrap: anywhere; }
.brand-subtitle { font-size: var(--fs-small); color: var(--text-secondary); }
.header-controls { display: flex; align-items: center; gap: 8px; position: relative; flex-wrap: wrap; }

#nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: var(--touch-target); height: var(--touch-target);
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-primary); cursor: pointer; font-size: 1.1rem;
}
#nav-toggle .bar { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
#nav-toggle .bar::before, #nav-toggle .bar::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
#nav-toggle .bar::before { top: -6px; } #nav-toggle .bar::after { top: 6px; }

#site-search {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-primary);
  padding: 9px 12px; border-radius: 8px; min-width: 0; width: clamp(120px, 22vw, 220px);
  font-size: var(--fs-small);
}
.search-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: min(320px, 92vw);
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px;
  max-height: min(320px, 60vh); overflow: auto; display: none; z-index: 30;
}
.search-results.open { display: block; }
.search-results a { display: block; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.85rem; min-height: var(--touch-target); }
.search-results a small { display: block; color: var(--text-secondary); }

#mode-toggle, #theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--text-primary);
  padding: 9px 12px; min-height: var(--touch-target); border-radius: 8px; cursor: pointer; font-size: var(--fs-small);
}

.lang-switch {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2);
}
.lang-option {
  background: transparent; border: none; color: var(--text-secondary);
  padding: 8px 10px; min-height: var(--touch-target); display: inline-flex; align-items: center;
  border-radius: 6px; cursor: pointer;
  font-size: var(--fs-small); font-weight: 600;
}
.lang-option[aria-pressed="true"] { background: var(--accent); color: #04101f; }
.lang-option:focus-visible, #mode-toggle:focus-visible, #theme-toggle:focus-visible, #nav-toggle:focus-visible,
.site-nav a:focus-visible, #site-search:focus-visible, .filter-chip:focus-visible, .copy-btn:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 2px;
}
.lang-sep { color: var(--text-secondary); font-size: 0.8rem; }
code.status-raw { margin-left: 6px; font-size: 0.68rem; opacity: 0.75; overflow-wrap: anywhere; }

/* ---- layout shell ---- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  min-height: 100svh;
  min-height: calc(100dvh - var(--header-h));
}
.nav-scrim {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 24;
}
.site-nav {
  border-right: 1px solid var(--border); padding: 18px 10px calc(18px + var(--safe-b));
  display: flex; flex-direction: column; gap: 2px; background: var(--bg-1);
}
.site-nav a {
  color: var(--text-secondary); padding: 11px 12px; min-height: var(--touch-target);
  display: flex; align-items: center; border-radius: 8px; font-size: 0.92rem;
}
.site-nav a.active { background: var(--bg-2); color: var(--accent); font-weight: 600; }

.site-main { padding: var(--section-gap) var(--page-gutter); max-width: var(--content-max-width); margin-inline: auto; width: 100%; }
.site-main h1 { font-size: var(--fs-h1); margin-top: 0; overflow-wrap: anywhere; }
.site-main h2 { margin-top: clamp(24px, 4vw, 34px); font-size: var(--fs-h2); border-bottom: 1px solid var(--border); padding-bottom: 8px; overflow-wrap: anywhere; }
.site-main h3 { font-size: var(--fs-h3); overflow-wrap: anywhere; }
.site-main p, .site-main li { max-width: var(--reading-max-width); }
.site-main .card p, .site-main .card li, .site-main table, .site-main .diagram-frame { max-width: none; }
.site-main p, .site-main li, .site-main td, .card-body, code { overflow-wrap: anywhere; }

.hero {
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 28px);
  margin-bottom: 10px;
  container-type: inline-size;
}
.hero p.lede { font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem); color: var(--text-secondary); max-width: var(--reading-max-width); }

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  overflow-wrap: anywhere;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr)); gap: clamp(12px, 2vw, 16px); margin: 16px 0; }
.card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px;
  padding: clamp(14px, 2.5vw, 18px); container-type: inline-size; min-width: 0;
}
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.card-header h3 { margin: 0; }
.card-body, .card-body * { min-width: 0; }
.badge {
  font-size: 0.72rem; padding: 3px 9px; border-radius: 999px; font-weight: 700;
  background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success);
  overflow-wrap: anywhere;
}
.badge.warn { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.badge.info { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.badge.na { background: color-mix(in srgb, var(--text-secondary) 20%, transparent); color: var(--text-secondary); }

/* ---- tables: horizontal-scroll wrapper (headers preserved, never shrunk below readable size) ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; border-radius: 10px; }
table { width: 100%; border-collapse: collapse; margin: 0; font-size: max(0.82rem, var(--fs-small)); }
.table-scroll table { min-width: 480px; margin: 0; }
.card table { min-width: 0; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
th { color: var(--text-secondary); font-weight: 600; }

.code-derived-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em;
  color: var(--accent-2); border: 1px solid var(--accent-2); padding: 2px 8px; border-radius: 6px; margin-bottom: 8px;
}
.captured-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em;
  color: var(--success); border: 1px solid var(--success); padding: 2px 8px; border-radius: 6px; margin-bottom: 8px;
}

.step-flow { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.step-flow li {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; min-height: var(--touch-target);
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px;
}
.step-flow li span:last-child { overflow-wrap: anywhere; }
.step-index {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #04101f;
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
  margin-top: 2px;
}

/* ---- diagrams: fluid by default, scrollable fallback so labels never clip ---- */
.diagram-frame { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: clamp(10px, 3vw, 16px); margin: 14px 0; container-type: inline-size; }
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.diagram-frame svg { width: 100%; height: auto; display: block; min-width: 480px; }
.diagram-caption { color: var(--text-secondary); font-size: var(--fs-small); margin-top: 8px; overflow-wrap: anywhere; }
@container (max-width: 420px) {
  .diagram-frame { padding: 10px; border-radius: 10px; }
}

.code-detail-row { display: grid; gap: 10px; margin: 18px 0; }
.code-detail-meta h3 { margin-bottom: 4px; }
.code-detail-meta p { margin-top: 0; color: var(--text-secondary); font-size: var(--fs-small); }
@media (min-width: 1200px) {
  /* Code Explorer split-pane: file/purpose rail on the left, code on the
     right -- this is the "split-pane module tree and detail view" tier. */
  .code-detail-row { grid-template-columns: minmax(200px, 260px) 1fr; align-items: start; }
  .code-detail-meta { position: sticky; top: calc(var(--header-h) + 16px); }
}

.code-excerpt { position: relative; background: #04070d; border: 1px solid var(--border); border-radius: 12px; padding: 14px; padding-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.8rem; }
.code-excerpt pre { margin: 0; white-space: pre; }
:root[data-theme="light"] .code-excerpt { background: #0d1520; color: #dce4f0; }
.copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 6px; padding: 6px 10px; min-height: 32px; font-size: 0.72rem; cursor: pointer;
}
.copy-btn[data-copied="true"] { color: var(--success); border-color: var(--success); }

details.advanced { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; margin: 14px 0; }
details.advanced summary { cursor: pointer; padding: 10px 0; font-weight: 600; min-height: var(--touch-target); display: flex; align-items: center; }

.limitation-note { border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 10px 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.evidence-note { border-left: 3px solid var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, transparent); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 10px 0; font-size: 0.85rem; overflow-wrap: anywhere; }

.not-verified { color: var(--warning); font-style: italic; }

.site-footer { padding: 18px var(--page-gutter) calc(18px + var(--safe-b)); color: var(--text-secondary); font-size: var(--fs-small); border-top: 1px solid var(--border); }

body.beginner-mode .engineering-only { display: none !important; }
body:not(.beginner-mode) .beginner-only { display: none !important; }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.filter-chip {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-secondary);
  padding: 8px 14px; min-height: var(--touch-target); border-radius: 999px; font-size: 0.78rem; cursor: pointer;
}
.filter-chip.active { color: var(--accent); border-color: var(--accent); }

/* =========================================================================
   DEVICE-CLASS BREAKPOINTS
   Authored desktop-first (the default rules above already suit tiers E/F);
   each tier below narrows the layout further. A. compact phone is the
   innermost (narrowest) query and always applies on top of B/C/D.
   ========================================================================= */

/* F -> E: below the large-monitor/TV tier, nothing to undo (base IS tier E). */

/* E -> D: tablet / small laptop (900-1199px) */
@media (max-width: 1199px) {
  .site-main { max-width: 100%; }
}

/* D: foldable inner / small tablet boundary + nav becomes a drawer below this */
@media (max-width: 899px) {
  .layout { grid-template-columns: 1fr; min-height: auto; }
  #nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 25;
    width: min(78vw, 320px); transform: translateX(-100%);
    transition: transform 0.22s ease; box-shadow: 2px 0 24px rgba(0,0,0,0.35);
    padding-top: calc(18px + var(--safe-t) + var(--header-h));
    overflow-y: auto;
  }
  body.nav-open .site-nav { transform: translateX(0); }
  body.nav-open .nav-scrim { display: block; }
  body.nav-open { overflow: hidden; }
}

/* C: foldable cover / large phone (below 600px) -- tighter type + spacing */
@media (max-width: 599px) {
  .site-header { padding: 10px var(--page-gutter); }
  .brand-subtitle { display: none; }
  #site-search { width: 100%; order: 10; }
  .header-controls { width: 100%; justify-content: space-between; }
  .grid { grid-template-columns: 1fr; }
  .card-header { flex-direction: column; align-items: flex-start; }
}

/* A: compact phone (below 480px) -- single column everywhere, no clipping */
@media (max-width: 479px) {
  :root { --page-gutter: 12px; }
  .lang-sep { display: none; }
  .lang-switch { gap: 2px; }
  table { min-width: 0; }
  .diagram-frame svg { min-width: 360px; }
}

/* F: large monitor / TV (1920px+) -- modest scale-up, generous focus, capped card growth */
@media (min-width: 1920px) {
  :root { --fs-base: 1.08rem; --content-max-width: 1600px; --page-gutter: 48px; }
  .card { padding: 22px 26px; }
  .lang-option, #mode-toggle, #theme-toggle, .site-nav a { font-size: 1rem; }
  .lang-option:focus-visible, #mode-toggle:focus-visible, #theme-toggle:focus-visible, .site-nav a:focus-visible {
    outline-width: 4px; outline-offset: 3px;
  }
}

/* Coarse pointer (touch, TV remote D-pad-as-pointer): bigger targets, no hover reliance */
@media (pointer: coarse) {
  .site-nav a, #mode-toggle, #theme-toggle, .lang-option, .filter-chip, .search-results a, .copy-btn {
    min-height: var(--touch-target);
  }
}

/* Landscape phones/foldable-cover: reclaim vertical space from the sticky header */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  .site-header { position: static; }
  .boundary-banner { position: static; }
}

/* Foldable / dual-screen: keep content out of the hinge seam when the
   browser exposes viewport segments (Chromium foldable API). Falls back to
   the single-column phone layout above when unsupported -- no Samsung-only
   API is used. */
@media (horizontal-viewport-segments: 2) {
  .layout { grid-template-columns: env(viewport-segment-width 0 0, 1fr) env(viewport-segment-width 1 0, 1fr); column-gap: env(viewport-segment-width 0 0, 0px); }
  .site-nav { grid-column: 1; }
  .site-main { grid-column: 2; }
}
@media (vertical-viewport-segments: 2) {
  .site-header, .boundary-banner { position: static; }
}

@media print {
  .site-header, .site-nav, .nav-scrim, .boundary-banner, #mode-toggle, #theme-toggle, #site-search, .lang-switch, #nav-toggle, .copy-btn { display: none !important; }
  .layout { display: block; }
  body { background: #fff; color: #000; }
  .card, .diagram-frame, .code-excerpt { border: 1px solid #999; }
  .table-scroll { overflow: visible; }
  table { min-width: 0; }
  a[href]:after { content: none !important; }
}