/* ============================================================================
   GENDI NOTES — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Modern documentation UI. One stylesheet drives every page; never style a
   page individually.

   FONTS (both SIL Open Font License 1.1):
     Inter           — UI and body text
     JetBrains Mono  — code blocks only. Diagrams use a local monospace stack;
                       see --font-diagram for why a webfont breaks box art.

   LAYOUT
     [ sidebar 264px ][ content 1fr, max 76ch ][ toc 220px ]
     Collapses to a single column below 1100px, drawer sidebar below 860px.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* neutrals */
  --bg:            #ffffff;
  --bg-subtle:     #f7f8fa;
  --bg-sunken:     #f1f3f6;
  --bg-hover:      #eceff3;
  --border:        #e3e6ea;
  --border-strong: #cfd4da;

  /* text */
  --text:          #14181f;
  --text-muted:    #5b6472;
  --text-subtle:   #858d9a;
  --text-inverse:  #ffffff;

  /* accent */
  --accent:        #3b5bdb;
  --accent-hover:  #2f4bc4;
  --accent-subtle: #eef1fd;
  --accent-border: #c3cdf7;

  /* semantic */
  --green:  #1a7f4b;  --green-bg:  #eaf6ef;  --green-border:  #b7e0c8;
  --amber:  #9a6700;  --amber-bg:  #fdf6e3;  --amber-border:  #f0dda4;
  --red:    #c02626;  --red-bg:    #fdefef;  --red-border:    #f3c4c4;
  --violet: #6741d9;  --violet-bg: #f2effd;  --violet-border: #d5cbf7;
  --cyan:   #0b7285;  --cyan-bg:   #e7f6f8;  --cyan-border:   #a9dde5;

  /* type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Code: a webfont is fine, the content is Latin-only. */
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas,
               "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace;

  /* Arabic: Inter has no Arabic coverage, so an Arabic block in --font-sans
     falls back to whatever the OS picks — Times-ish on Windows, and the note
     suddenly looks like a different document. Cairo is a Naskh-based UI face
     that sits well beside Inter at the same size. The local names after it
     are the good system Arabic faces, in order, for when the webfont is
     blocked or the site is read offline. */
  --font-ar: "Cairo", "Segoe UI", "Noto Naskh Arabic", "Geeza Pro",
             "Tahoma", sans-serif;

  /* Diagrams: NO webfont, deliberately. Google Fonts subsets JetBrains Mono
     to Latin, so box-drawing glyphs (U+2500 block) fall back to another font
     with a different advance width and every box visibly breaks apart.
     Measured: Latin 7.8px vs box 7.617px. Local monospace fonts carry both
     in one face. Do not add a webfont here.
     Related rule for authors: use the arrows -> <- ^ v (U+2190 block), never
     the filled triangles (U+25B6) - those break in Consolas and Courier New. */
  --font-diagram: ui-monospace, "Cascadia Mono", "SF Mono", Consolas,
                  "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md:   1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.375rem;   /* 22px */
  --fs-2xl:  1.75rem;    /* 28px */
  --fs-3xl:  2.25rem;    /* 36px */

  --lh-tight: 1.25;
  --lh-body:  1.7;

  /* space — 4px base */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  /* shape */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);

  /* layout */
  --sidebar-w: 264px;
  --toc-w:     220px;
  --header-h:  56px;
  --content-max: 76ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0e1117;
    --bg-subtle:     #151a22;
    --bg-sunken:     #1a2029;
    --bg-hover:      #212936;
    --border:        #262e3a;
    --border-strong: #38414f;

    --text:          #e7ebf0;
    --text-muted:    #9aa4b2;
    --text-subtle:   #6e7885;

    --accent:        #7c93f5;
    --accent-hover:  #93a6f8;
    --accent-subtle: #171e33;
    --accent-border: #2d3a63;

    --green:  #5fd18f;  --green-bg:  #10201a;  --green-border:  #23503a;
    --amber:  #e0b45e;  --amber-bg:  #201b10;  --amber-border:  #4e3f1d;
    --red:    #f08a8a;  --red-bg:    #201313;  --red-border:    #572626;
    --violet: #a992f5;  --violet-bg: #1a1630;  --violet-border: #392f63;
    --cyan:   #5cc5d6;  --cyan-bg:   #0f1e22;  --cyan-border:   #23474f;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:#0e1117; --bg-subtle:#151a22; --bg-sunken:#1a2029; --bg-hover:#212936;
  --border:#262e3a; --border-strong:#38414f;
  --text:#e7ebf0; --text-muted:#9aa4b2; --text-subtle:#6e7885;
  --accent:#7c93f5; --accent-hover:#93a6f8; --accent-subtle:#171e33; --accent-border:#2d3a63;
  --green:#5fd18f; --green-bg:#10201a; --green-border:#23503a;
  --amber:#e0b45e; --amber-bg:#201b10; --amber-border:#4e3f1d;
  --red:#f08a8a; --red-bg:#201313; --red-border:#572626;
  --violet:#a992f5; --violet-bg:#1a1630; --violet-border:#392f63;
  --cyan:#5cc5d6; --cyan-bg:#0f1e22; --cyan-border:#23474f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------- 2. BASELINE */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

img, svg { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--accent); color: #fff;
  padding: var(--s2) var(--s4); border-radius: var(--r-md);
}
.skip-link:focus { left: var(--s4); top: var(--s4); }

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

/* --------------------------------------------------------------- 3. HEADER */
.header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s5);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .header { background: var(--bg); } }

.brand {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 650; font-size: var(--fs-md);
  color: var(--text); letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand-mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-md);
  background: var(--accent); color: #fff;
  font-size: var(--fs-sm); font-weight: 700;
}

.header-spacer { flex: 1 1 auto; }

.header-actions { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }

.icon-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); color: var(--text-muted);
  cursor: pointer; padding: 0;
  font-size: var(--fs-base);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* mobile drawer toggle — hidden on desktop */
.nav-toggle { display: none; }

/* ---------------------------------------------------------------- 4. SHELL */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 0;
  max-width: 1560px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1180px) { .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } }
@media (max-width: 860px)  { .shell { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- 5. SIDEBAR */
.sidebar {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s5) var(--s3) var(--s7) var(--s5);
  border-right: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.nav-search {
  width: 100%; margin-bottom: var(--s4);
  padding: var(--s2) var(--s3);
  font: inherit; font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.nav-search::placeholder { color: var(--text-subtle); }
.nav-search:focus { background: var(--bg); border-color: var(--accent-border); }

.nav-group { margin-bottom: var(--s4); }
.nav-group-title {
  display: block;
  font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-subtle);
  padding: var(--s1) var(--s2);
  margin-bottom: var(--s1);
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: block;
  padding: 5px var(--s3);
  border-radius: var(--r-md);
  color: var(--text-muted);
  line-height: 1.45;
  border-left: 2px solid transparent;
}
.nav-list a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav-list a[aria-current="page"] {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 550;
  border-left-color: var(--accent);
}
.nav-empty { color: var(--text-subtle); padding: var(--s2) var(--s3); font-style: italic; }

/* mobile: sidebar becomes a drawer driven by a checkbox, no JS required */
@media (max-width: 860px) {
  .nav-toggle + .header .nav-toggle-label { display: grid; }
  .sidebar {
    position: fixed; inset: var(--header-h) auto 0 0;
    width: min(86vw, 320px);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%);
    transition: transform .22s ease;
    z-index: 45;
  }
  .nav-toggle:checked ~ .shell .sidebar { transform: translateX(0); }
  .nav-toggle:checked ~ .scrim { opacity: 1; pointer-events: auto; }
  .scrim {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: rgba(8,12,20,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
    z-index: 44;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .scrim { transition: none; }
}

/* --------------------------------------------------------------- 6. CONTENT */
.content {
  min-width: 0;
  padding: var(--s6) var(--s6) var(--s8);
}
@media (max-width: 640px) { .content { padding: var(--s5) var(--s4) var(--s7); } }

.prose { max-width: var(--content-max); }

/* breadcrumbs */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1);
  font-size: var(--fs-sm); color: var(--text-subtle);
  margin-bottom: var(--s3);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb .sep { color: var(--border-strong); }

/* page title block */
.page-head { margin-bottom: var(--s6); }
.page-title {
  font-size: var(--fs-3xl); line-height: var(--lh-tight);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 0 0 var(--s3);
}
@media (max-width: 640px) { .page-title { font-size: var(--fs-2xl); } }

.page-lede {
  font-size: var(--fs-lg); line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 var(--s4);
  max-width: 62ch;
}

.page-meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 550;
  padding: 2px var(--s2);
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted); background: var(--bg-subtle);
  white-space: nowrap;
}
.badge-lvl-1 { color: var(--green);  border-color: var(--green-border);  background: var(--green-bg); }
.badge-lvl-2 { color: var(--cyan);   border-color: var(--cyan-border);   background: var(--cyan-bg); }
.badge-lvl-3 { color: var(--amber);  border-color: var(--amber-border);  background: var(--amber-bg); }
.badge-lvl-4 { color: var(--red);    border-color: var(--red-border);    background: var(--red-bg); }
.badge-lvl-5 { color: var(--violet); border-color: var(--violet-border); background: var(--violet-bg); }

/* headings */
.prose h2 {
  font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  margin: var(--s7) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + var(--s4));
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: var(--fs-md); font-weight: 650;
  margin: var(--s5) 0 var(--s2);
  line-height: var(--lh-tight);
  scroll-margin-top: calc(var(--header-h) + var(--s4));
}
.prose h4 {
  font-size: var(--fs-base); font-weight: 650; color: var(--text-muted);
  margin: var(--s4) 0 var(--s2);
}

/* anchor links on hover */
.prose h2 .anchor, .prose h3 .anchor {
  opacity: 0; margin-left: var(--s2);
  color: var(--text-subtle); font-weight: 400; text-decoration: none;
}
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }

/* body copy */
.prose p { margin: 0 0 var(--s4); }
.prose strong { font-weight: 650; color: var(--text); }
/* Lists use logical inline properties throughout, not left/right. A list item
   the renderer marked dir="auto" because it contains Arabic then carries its
   own bullet over to the right-hand side and reads correctly, instead of
   stranding the marker on the left with the text flung to the far margin. */
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-inline-start: var(--s5); }
.prose li { margin-bottom: var(--s2); }
.prose li > ul, .prose li > ol { margin: var(--s2) 0 0; }
.prose ul { list-style: none; padding-inline-start: var(--s4); }
.prose ul > li { position: relative; padding-inline-start: var(--s4); }
.prose ul > li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 0.68em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border-strong);
}
.prose ul.checklist > li::before {
  content: "✓"; background: none; color: var(--green);
  width: auto; height: auto; top: 0; inset-inline-start: 0;
  font-weight: 700; font-size: var(--fs-sm);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--s6) 0; }

/* -------------------------------------------------------- 7. CODE + DIAGRAMS */
.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.15em 0.4em;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  word-break: break-word;
}

.code-block { margin: 0 0 var(--s4); }
.code-label {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-subtle);
  padding: var(--s2) var(--s4);
  background: var(--bg-sunken);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.prose pre {
  margin: 0;
  padding: var(--s4);
  overflow-x: auto;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.code-label + pre { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.prose pre code {
  font-family: var(--font-mono);
  font-size: inherit;
  background: none; border: 0; padding: 0;
  color: var(--text);
  white-space: pre;
}

/* .diagram — ASCII box art. Monospace is mandatory or alignment collapses. */
.diagram {
  font-family: var(--font-diagram);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4);
  margin: 0 0 var(--s4);
  tab-size: 4;
}

/* ------------------------------------------------------------- 8. CALLOUTS */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  padding: var(--s4);
  margin: 0 0 var(--s4);
  border: 1px solid var(--border);
  /* Logical, not border-left: the Arabic callout is dir="rtl", and the accent
     edge has to move to the right with the text or it points at nothing. */
  border-inline-start: 3px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  font-size: var(--fs-base);
}
.callout-icon { grid-row: 1 / span 2; font-size: var(--fs-md); line-height: 1.5; }
.callout-label {
  font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
}
/* A title may contain `code` — it names flags and commands. Strip the usual
   code chrome down so it reads as part of the label rather than a box inside
   a box, and stop the uppercase transform mangling the identifier. */
.callout-label code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: none;
  border: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
.callout-label strong { font-weight: 800; color: inherit; }

.callout-body { min-width: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body > :first-child { margin-top: 0; }

.callout.is-tip     { background: var(--accent-subtle); border-color: var(--accent-border); border-inline-start-color: var(--accent); }
.callout.is-tip     .callout-label { color: var(--accent); }
.callout.is-key     { background: var(--green-bg);  border-color: var(--green-border);  border-inline-start-color: var(--green); }
.callout.is-key     .callout-label { color: var(--green); }
.callout.is-warn    { background: var(--amber-bg);  border-color: var(--amber-border);  border-inline-start-color: var(--amber); }
.callout.is-warn    .callout-label { color: var(--amber); }
.callout.is-danger  { background: var(--red-bg);    border-color: var(--red-border);    border-inline-start-color: var(--red); }
.callout.is-danger  .callout-label { color: var(--red); }
.callout.is-note    { background: var(--violet-bg); border-color: var(--violet-border); border-inline-start-color: var(--violet); }
.callout.is-note    .callout-label { color: var(--violet); }

/* .is-ar — the Egyptian-Arabic explainer.
   The renderer puts dir="rtl" lang="ar-EG" on the aside, which is what flips
   the grid columns (icon to the right) and the accent edge. Everything here
   is about making Arabic *legible*, not about direction:
     · Arabic has no capitals and taller ascenders/descenders, so it needs a
       larger size and a looser line than the same paragraph in Latin.
     · Latin runs inside it — command names, `kubectl`, product names — are
       handed back to the Latin stack so they do not render in a fallback.
     · Code, diagrams and tables of commands are forced back to LTR: box art
       mirrored right-to-left is unreadable, and a shell command is not text. */
.callout.is-ar {
  background: var(--cyan-bg);
  border-color: var(--cyan-border);
  border-inline-start-color: var(--cyan);
  font-family: var(--font-ar);
  font-size: var(--fs-md);
  line-height: 2;
}
.callout.is-ar .callout-label {
  color: var(--cyan);
  /* Arabic is unicase: uppercasing does nothing and the tracking only pulls
     the letters out of their joins. */
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
}
.callout.is-ar code,
.callout.is-ar kbd { font-family: var(--font-mono); line-height: 1.4; }
.callout.is-ar strong { font-weight: 700; }
.callout.is-ar .diagram,
.callout.is-ar .code-block,
.callout.is-ar pre { direction: ltr; text-align: left; }
.callout.is-ar .table-wrap { direction: rtl; }

/* ------------------------------------------------------ 8b. INTERVIEW Q&A */
/* :::q renders a <details>. Collapsed by default so an interview page is a
   quiz on the first pass and a reference on the second. No JavaScript: the
   answer text is always in the DOM, so it prints and Ctrl-F finds it even
   while it is visually closed. */
.qa {
  margin: 0 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  overflow: hidden;
}
.qa > summary {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s4);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  /* Kill the native triangle in every engine; ::before below replaces it,
     because the native marker cannot be positioned or coloured. */
  list-style: none;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::before {
  content: "+";
  flex: none;
  width: 1.1em;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-md);
  color: var(--accent);
  text-align: center;
}
.qa[open] > summary::before { content: "\2212"; }   /* real minus, not hyphen */
.qa > summary:hover { background: var(--bg-hover); }
.qa > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.qa[open] > summary { border-bottom: 1px solid var(--border); }
.qa-answer { padding: var(--s4) var(--s4) var(--s2); background: var(--bg); }
.qa-answer > :last-child { margin-bottom: var(--s2); }
/* Callouts nest inside answers constantly — the model answer, then what the
   interviewer is really testing. Tighten them so a card stays scannable. */
.qa-answer .callout { margin-bottom: var(--s3); }

/* --------------------------------------------------------------- 9. TABLES */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.prose th, .prose td {
  padding: var(--s3) var(--s4);
  /* start, not left: a cell the renderer marked dir="auto" for its Arabic
     aligns to its own reading edge, so an Arabic column right-aligns as a
     column instead of hugging the English one beside it. */
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.prose th {
  font-weight: 650; font-size: var(--fs-xs);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-subtle);
  white-space: nowrap;
}
/* Arabic is unicase and cursive: uppercase does nothing, and the tracking
   above pulls the letters out of their joins. dir="auto" is present only when
   the renderer found an Arabic letter, so this targets exactly those headers. */
.prose th[dir="auto"] {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-sm);
  white-space: normal;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: var(--bg-subtle); }
.prose td code { font-size: 0.85em; }

/* ---------------------------------------------------------------- 10. CARDS */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s4);
}
.card {
  display: block;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: inherit;
}
a.card:hover {
  border-color: var(--accent-border);
  background: var(--bg-subtle);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.card-title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  font-weight: 650; font-size: var(--fs-base);
  color: var(--text);
  margin-bottom: var(--s1);
}
.card-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin: 0; }

/* ------------------------------------------------------------- 11. TOC (right) */
.toc {
  position: sticky; top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--s6) var(--s5) var(--s7) var(--s3);
  font-size: var(--fs-sm);
}
@media (max-width: 1180px) { .toc { display: none; } }
.toc-title {
  font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--s2);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 3px 0 3px var(--s3);
  color: var(--text-muted);
  border-left: 2px solid var(--border);
  line-height: 1.4;
}
.toc a:hover { color: var(--text); text-decoration: none; border-left-color: var(--border-strong); }
.toc a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 550; }
.toc .toc-h3 a { padding-left: var(--s5); font-size: var(--fs-xs); }

/* ---------------------------------------------------------- 12. PAGE FOOTER */
.page-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) { .page-nav { grid-template-columns: 1fr; } }
.page-nav a {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--text);
}
.page-nav a:hover { border-color: var(--accent-border); background: var(--bg-subtle); text-decoration: none; }
.page-nav .dir { display: block; font-size: var(--fs-xs); color: var(--text-subtle); margin-bottom: 2px; }
.page-nav .ttl { font-weight: 600; font-size: var(--fs-sm); color: var(--accent); }
.page-nav .next { text-align: right; }

.related-strip { margin-top: var(--s6); }
.related-strip .label {
  font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: var(--s2);
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font-size: var(--fs-sm);
  padding: 3px var(--s3);
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-subtle); color: var(--text-muted);
}
.chip:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-subtle); text-decoration: none; }

.updated { margin-top: var(--s6); font-size: var(--fs-xs); color: var(--text-subtle); }

/* ------------------------------------------------------------ 13. HOME PAGE */
.hero {
  padding: var(--s8) 0 var(--s7);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s6);
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1; font-weight: 750; letter-spacing: -0.035em;
  margin: 0 0 var(--s4);
}
.hero p {
  font-size: var(--fs-lg); color: var(--text-muted);
  max-width: 60ch; margin: 0 0 var(--s5);
}
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--s6); }
.stat .n { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.stat .l { font-size: var(--fs-sm); color: var(--text-subtle); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  font-size: var(--fs-sm); font-weight: 600;
  border-radius: var(--r-md); border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.btn-ghost { border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--bg-hover); text-decoration: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------------------------------------------------------------- 14. PRINT */
@media print {
  .header, .sidebar, .toc, .page-nav, .scrim, .nav-toggle, .no-print { display: none !important; }
  .shell { grid-template-columns: 1fr; max-width: none; }
  .content { padding: 0; }
  .prose { max-width: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .callout, .diagram, pre, .table-wrap, tr, .qa { break-inside: avoid; }
  .prose h2, .prose h3 { break-after: avoid; }
  /* A printed quiz with every answer hidden is a stack of blank cards, so
     override the UA rule that collapses a closed <details>. */
  .qa > summary::before { content: "Q "; }
  .qa-answer { display: block !important; border-top: 1px solid #ccc; }
  a { color: #000; text-decoration: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}