/* Shared typography and accessible controls; component palettes stay local. */
:root {
  --reading-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --reading-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --reading-ink: #172033;
  --reading-muted: #475569;
  --reading-surface: #fff;
  --reading-border: #cbd5e1;
  --reading-focus: #1d4ed8;
  --reading-success: #166534;
  --reading-error: #991b1b;
  --reading-radius: 12px;
}

/* Wide technical content scrolls inside its own keyboard-accessible region.
   Prevent those internal scroll widths from creating a second, page-level
   horizontal scrollbar in Chromium. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}
html[data-theme="dark"], body.dark-mode {
  --reading-ink: #e2e8f0;
  --reading-muted: #cbd5e1;
  --reading-surface: #111c2e;
  --reading-border: #64748b;
  --reading-focus: #67e8f9;
  --reading-success: #86efac;
  --reading-error: #fca5a5;
}
html { scroll-padding-top: 5rem; }
body { font-family: var(--reading-font); text-rendering: optimizeLegibility; }
.container { font-size: 1.0625rem; line-height: 1.75; }
.container h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.25; margin-block: .5rem 1.5rem; }
.container h2 { font-size: clamp(1.375rem, 2.3vw, 1.75rem); line-height: 1.35; margin-block: 2rem 1rem; }
.container h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.4; }
.container p, .container ul, .container ol { margin-block: 1rem; }
.container .question h3 { font-size: 1.125rem; line-height: 1.6; }
pre, .code-block, .opt-code { font-family: var(--reading-mono); font-size: .9375rem; line-height: 1.7; max-width: 100%; overflow-x: auto; tab-size: 2; }
pre code { font: inherit; white-space: inherit; }
.container pre code { white-space: inherit; overflow-wrap: normal; word-break: normal; }
#flashcard #result[data-status="correct"] { color: var(--reading-success) !important; }
#flashcard #result[data-status="incorrect"] { color: var(--reading-error) !important; }
.container table { font-size: .9375rem; line-height: 1.6; }
.container th, .container td { padding: .75rem; }
.question label { min-height: 44px; }
button, input, select, textarea { font: inherit; }
button, [role="button"], summary { touch-action: manipulation; }
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--reading-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--reading-surface);
}
.skip-link { position: fixed; left: 1rem; top: -12rem; z-index: 100000; padding: .75rem 1rem; background: #fff; color: #172033; border: 3px solid #1d4ed8; border-radius: 8px; }
.skip-link:focus { top: .75rem; }
.learning-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem; padding: .5rem 1rem; position: static; background: var(--reading-surface); border-bottom: 1px solid var(--reading-border); box-shadow: none; }
.learning-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .65rem; color: var(--reading-ink) !important; font-size: .9375rem; font-weight: 600; text-decoration: none; border-radius: 6px; }
.learning-nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
.svg-readable-scroll, .nt-topo { scrollbar-gutter: stable; }
.svg-readable-scroll svg { font-size: 16px; }
html:not([data-theme="dark"]) .answers button, html[data-theme="dark"] .answers button,
html:not([data-theme="dark"]) .cat-btn, html[data-theme="dark"] .cat-btn { border-color: #64748b; }
.svg-readable-scroll:focus-visible, .nt-topo:focus-visible { outline-offset: -3px; }
.page-quiz { --text2: #b6c9dc; --text3: #a7bdd0; --reading-focus: #67e8f9; --reading-surface: #132640; }
.page-quiz .badge { background: #075985; color: #fff; }
.page-quiz .option-btn { border-color: #64748b; }
.page-quiz .option-btn.selected { border-color: #38bdf8; }
.theme-control { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 2px solid #64748b; border-radius: 8px; background: #172554; color: #fff; cursor: pointer; }
.question input[type="radio"] { width: 20px; height: 20px; accent-color: #1d4ed8; flex-shrink: 0; }
#main-footer .svg-button { width: 44px !important; height: 44px !important; }
a.btn, .donate-nav-btn { background: #1d4ed8 !important; color: #fff !important; }
.donate-nav-btn { background: #be123c !important; }
.page-quiz .learning-nav { background: #0d1e30; border-color: #64748b; }
.page-quiz .learning-nav a { color: #e2e8f0 !important; }
.page-quiz .question-text { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; }
.page-quiz .option-btn { min-height: 52px; align-items: flex-start; font-family: var(--reading-font); font-size: 1rem; line-height: 1.65; }
.page-quiz .option-letter { color: #a5f3fc; border-color: #64748b; min-width: 40px; }
.page-quiz .option-btn.selected .option-letter { color: #fff; background: #075985; border-color: #67e8f9; }
.page-quiz :is(.diagram-wrap,.review-diagram,#static-question-library .q-diagram) { background: #132640; border: 1px solid #64748b; border-radius: var(--reading-radius); padding: 1rem; }
.page-quiz :is(.diagram-wrap,.review-diagram,.q-diagram) svg { background: #132640; }
.page-quiz #static-question-library ol.q-options { list-style-type: none; padding-left: 0; }
.page-quiz #static-question-library .q-options li { padding: .5rem .75rem; border-left: 3px solid #94a3b8; }
.page-quiz #static-question-library .q-options .q-correct { border-left-color: #15803d; }
.page-quiz .nav-btn { min-height: 48px; }
.page-quiz .result-title { font-family: var(--reading-font); font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.3; }
.page-quiz .code-block, .page-quiz .opt-code { font-size: .9375rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cat-card-header[role="button"]:focus-visible { outline: 3px solid var(--reading-focus); outline-offset: -4px; }
@media (max-width: 600px) {
  .container { font-size: 1rem; }
  .container th, .container td { padding: .625rem; }
  .learning-nav { justify-content: flex-start; gap: .125rem; padding: .375rem; }
  .learning-nav a { font-size: .875rem; padding-inline: .5rem; }
  .page-quiz main { padding: 1.25rem .75rem; width: 100%; }
  .page-quiz .question-card { padding: 1.25rem .875rem; }
  .page-quiz .option-btn { padding: .75rem .625rem; gap: .625rem; }
  .page-quiz .diagram-wrap { padding: .5rem; justify-content: flex-start; }
  .page-quiz header { padding: .75rem; gap: .5rem; flex-wrap: wrap; }
  .page-quiz .logo { font-size: 1.5rem; }
  .page-quiz .progress-wrap { padding: .75rem; }
  .page-quiz .progress-info { flex-wrap: wrap; gap: .5rem; }
  .nav-toggle { padding: 12px 8px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body { transition: none; }
/* Theme changes must not briefly retain the previous text colour. */
.container a, .learning-nav a, .skip-link, .container .question label { transition: none !important; }
body .learning-nav a { color: var(--reading-ink) !important; }
html body a.skip-link { color: #172033 !important; background: #fff !important; }
html:not([data-theme="dark"]) .container a { color: #155e75 !important; }
html[data-theme="dark"] .container a { color: #93c5fd !important; }
html:not([data-theme="dark"]) .container th a, html[data-theme="dark"] .container th a { color: inherit !important; }
html[data-theme="dark"] .container :is(.warning,.tip,.note,.highlight) a { color: inherit !important; }
html .container a.btn { color: #fff !important; }
#main-footer .svg-button.whatsapp { background: #067647 !important; }
#main-footer .svg-button.facebook { background: #1d4ed8 !important; }
.page-error { background: #f3f6fb; }
.page-error .container { background: var(--reading-surface); color: var(--reading-ink); }
.page-error .error-container :is(h1,h2,p), .page-error .error-page :is(h1,h2,p) { color: var(--reading-ink) !important; }
.page-error .error-container a, .page-error a.btn-primary { background: #1d4ed8; color: #fff !important; min-height: 44px; }
html body.page-error .container .error-container a { color: #fff !important; }
.page-error .error-box { background: var(--reading-surface); color: var(--reading-ink); }
.page-error .error-box :is(h1,h2,p) { color: var(--reading-ink) !important; }
html body a.btn, html body nav a.donate-nav-btn { color: #fff !important; }
html:not([data-theme="dark"]) .container :is(pre,.code-block,.cisco-terminal) a,
html[data-theme="dark"] .container :is(pre,.code-block,.cisco-terminal) a { color: inherit !important; }
.nav-inner .dark-toggle { background: #172554; color: #fff; border: 2px solid #94a3b8; min-width: 44px; min-height: 44px; border-radius: 8px; }
#nt-anim-legend { background: #1e293b; }
#nt-anim-legend .nt-leg-item { color: #e2e8f0; font-size: .875rem; }
.separator { color: inherit !important; }
.alpha-bar a { color: #fff !important; background: #1d4ed8 !important; min-width: 44px; min-height: 44px; }
html[data-theme="dark"] .cat-title { color: #e2e8f0 !important; }
html[data-theme="dark"] .cat-icon-wrap { color: #1e293b; }
html[data-theme="dark"] .link-chip { background: #172554 !important; color: #dbeafe !important; border-color: #64748b !important; }
html[data-theme="dark"] .footer-trust-links a { color: #bfdbfe !important; }
html[data-theme="dark"] .container em { color: #99f6e4 !important; }
html[data-theme="dark"] .container span[data-tone="amber"] { color: #fde68a !important; }
.cat-btn { min-height: 44px; font-size: .9375rem; }
.answers button { min-height: 48px; font-size: 1rem; }
html[data-theme="dark"] #static-flashcard-library > h2 { color: #e2e8f0; }
html[data-theme="dark"] #static-flashcard-library .lib-intro { color: #cbd5e1; }
html[data-theme="dark"] #static-flashcard-library details.category { background: #172033; border-color: #64748b; }
html[data-theme="dark"] #static-flashcard-library details.card { background: #111c2e; border-color: #64748b; }
html[data-theme="dark"] #static-flashcard-library summary { color: #e2e8f0 !important; }
html[data-theme="dark"] #static-flashcard-library .card-answer { color: #86efac; }
html[data-theme="dark"] #static-flashcard-library .card-def { color: #cbd5e1; }
html:not([data-theme="dark"]) .container em { color: #047857 !important; }
html:not([data-theme="dark"]) .container .alpha-bar a,
html[data-theme="dark"] .container .alpha-bar a { color: #fff !important; }
html[data-theme="dark"] #main-footer .footer-trust-links a { color: #bfdbfe !important; }
.separator { display: inline-block; width: 1px; height: 1em; margin-inline: .25rem; border-left: 1px solid #64748b; vertical-align: middle; }
.diagram-instruction { border: 1px solid #bae6fd; background: #f0f9ff; color: #0c4a6e; padding: 1rem; border-radius: 8px; }
.diagram-instruction p { color: #0c4a6e !important; font-size: 1rem; line-height: 1.65; margin: .25rem 0; }
html body .container .diagram-instruction p { color: #0c4a6e !important; }
html body .container .light-panel-caption { color: #334155 !important; font-size: .875rem !important; }
/* Applied only to labels measured against their own component surface. */
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="nd"] { fill:#1e293b !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="nd"] { fill:#1e293b !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="nl"] { fill:#e2e8f0 !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="nl"] { fill:#e2e8f0 !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="white"] { fill:#ffffff !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="white"] { fill:#ffffff !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="black"] { fill:#000000 !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="black"] { fill:#000000 !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="rd"] { fill:#9f1239 !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="rd"] { fill:#9f1239 !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="rl"] { fill:#fda4af !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="rl"] { fill:#fda4af !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="ad"] { fill:#854d0e !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="ad"] { fill:#854d0e !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="al"] { fill:#fde68a !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="al"] { fill:#fde68a !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="gd"] { fill:#166534 !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="gd"] { fill:#166534 !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="gl"] { fill:#86efac !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="gl"] { fill:#86efac !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="cd"] { fill:#155e75 !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="cd"] { fill:#155e75 !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="cl"] { fill:#a5f3fc !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="cl"] { fill:#a5f3fc !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="bd"] { fill:#1e40af !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="bd"] { fill:#1e40af !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="bl"] { fill:#bfdbfe !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="bl"] { fill:#bfdbfe !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="pd"] { fill:#6b21a8 !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="pd"] { fill:#6b21a8 !important; fill-opacity:1 !important; opacity:1 !important; }
html:not([data-theme="dark"]) svg :is(text,tspan)[data-ink-light="pl"] { fill:#e9d5ff !important; fill-opacity:1 !important; opacity:1 !important; }
html[data-theme="dark"] svg :is(text,tspan)[data-ink-dark="pl"] { fill:#e9d5ff !important; fill-opacity:1 !important; opacity:1 !important; }

/* NetStuts foreignObject diagram sizing support */
.svg-diagram { max-width: 100%; overflow-x: auto; }
.svg-diagram svg:has(foreignObject) {
  height: auto !important;
  max-height: none !important;
  display: block;
}
.svg-diagram foreignObject .diag-pre {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  white-space: pre !important;
}
.svg-diagram foreignObject .diag-wrap {
  height: auto !important;
  max-height: none !important;
}