/* ===================================================================
   CS Fundamentals — Interactive Handbook
   Mobile-first, bilingual (English & Turkish), self-hosted fonts.
   Chapter/lab numbering and callout labels are CSS-generated
   (counters + :lang()) so content JSON stays clean.
=================================================================== */

:root {
  --paper: #EDF0F4;
  --card: #FFFFFF;
  --ink: #142033;
  --ink2: #42536B;
  --ink3: #6C7C93;

  --blue: #1B4CA1;
  --blue-soft: #E4EBF7;
  --red: #BE3B2E;
  --red-soft: #FBE9E7;
  --green: #1B7A58;
  --green-soft: #E3F2EC;
  --amber: #9A6B12;
  --amber-soft: #FBF0DC;

  --grid: rgba(20, 32, 51, 0.07);
  --line: rgba(20, 32, 51, 0.14);
  --line2: rgba(20, 32, 51, 0.08);
  --shadow: 0 1px 2px rgba(20, 32, 51, 0.06), 0 8px 24px -12px rgba(20, 32, 51, 0.22);

  --sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Literata', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --sidebar-w: 290px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
}

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

body {
  /* clip (not hidden) — prevents horizontal bleed without creating a new
     scroll container, which would break position:sticky on the sidebar */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  counter-reset: chapter lab;
  font-size: 16px;
  line-height: 1.72;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
}

@media (min-width: 700px) {
  body {
    font-size: 16.5px;
  }
}

h1, h2, h3, h4, .u {
  font-family: var(--sans);
  letter-spacing: -0.01em;
}

a {
  color: var(--blue);
}

code, pre, kbd {
  unicode-bidi: isolate;
  direction: ltr;
  text-align: start;
}

/* ===================================================================
   Layout
=================================================================== */

.wrap {
  display: block;
  min-height: 100vh;
}

aside {
  background: #FBFCFD;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px 16px;
}

main {
  min-width: 0;
  padding: 0 0 90px;
  position: relative;
}

.inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 961px) {
  .wrap {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
  }

  aside {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-bottom: 0;
    border-inline-end: 1px solid var(--line);
    padding: 20px 16px 60px;
  }

  main {
    padding-bottom: 120px;
  }

  .inner {
    padding-inline: 28px;
  }

  /* Red notebook margin rule */
  main::before {
    content: "";
    position: absolute;
    inset-inline-start: max(28px, calc(50% - 440px + 8px));
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(190, 59, 46, 0.22);
    pointer-events: none;
  }
}

/* ===================================================================
   Sidebar: Brand, Search, Progress, Lang Switcher, Nav
=================================================================== */

.brand {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.2;
  margin: 4px 0 2px;
}

.brand span {
  color: var(--red);
}

.brand-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 14px;
}

#q {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  min-height: 44px;
}

@media (min-width: 700px) {
  #q {
    font-size: 13.5px;
    padding: 9px 11px;
    min-height: 0;
  }
}

#q:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.progwrap {
  margin: 14px 0 6px;
}

.progbar {
  height: 6px;
  background: var(--line2);
  border-radius: 99px;
  overflow: hidden;
}

.progbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  transition: width 0.3s;
}

.progtxt {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink3);
  margin-top: 5px;
  letter-spacing: 0.04em;
}

/* Reading Mode Switcher (Continuous vs Focus) */
.view-mode {
  display: flex;
  gap: 4px;
  margin: 10px 0 2px;
}

.view-mode button {
  flex: 1;
  min-height: 32px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.view-mode button.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.view-mode button:hover:not(.on) {
  background: var(--blue-soft);
  border-color: var(--blue);
}

/* Language Switcher */
.langsw {
  display: flex;
  gap: 4px;
  margin: 14px 0 2px;
  flex-wrap: wrap;
}

.langsw button {
  flex: 1;
  min-width: 44px;
  min-height: 38px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink2);
  border-radius: 7px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s;
}

.langsw button.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.langsw button:hover:not(.on) {
  background: var(--blue-soft);
  border-color: var(--blue);
}

/* Nav Menu */
nav ol {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

nav .chap {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 10px 8px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  min-height: 44px;
}

@media (min-width: 700px) {
  nav .chap {
    padding: 7px 8px;
    font-size: 14px;
    min-height: 0;
  }
}

nav .chap:hover {
  background: var(--blue-soft);
}

nav .chap.on {
  background: var(--blue);
  color: #fff;
}

nav .num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink3);
  min-width: 18px;
}

nav .chap.on .num {
  color: #cfe0ff;
}

nav .subs {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 30px;
  display: none;
}

nav .subs.open {
  display: block;
}

nav .subs a {
  display: block;
  padding: 6px;
  font-family: var(--sans);
  font-size: 12.6px;
  color: var(--ink2);
  text-decoration: none;
  border-inline-start: 1px solid var(--line);
  border-radius: 0 5px 5px 0;
  min-height: 32px;
}

nav .subs a:hover {
  color: var(--blue);
  background: var(--blue-soft);
}

.sideNote {
  margin-top: 20px;
  padding: 11px 12px;
  border: 1px dashed rgba(190, 59, 46, 0.35);
  border-radius: 8px;
  background: var(--red-soft);
  font-size: 12.5px;
  line-height: 1.55;
  color: #7d2a20;
}

/* Mobile Nav Drawer & Toggle */
#navToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
}

#navToggle .nav-toggle-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: start;
}

#navToggle .nav-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink3);
  font-weight: 400;
}

#navToggle .chev {
  display: inline-block;
  font-size: 12px;
  color: var(--ink2);
  transition: transform 0.2s ease;
  transform-origin: center;
  line-height: 1;
}

#navToggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

#navWrap {
  display: none;
}

#navWrap.open {
  display: block;
}

@media (min-width: 961px) {
  #navToggle {
    display: none;
  }
  #navWrap {
    display: block;
  }
  .sideNote {
    margin-top: 20px;
  }
}

/* ===================================================================
   Header & Hero
=================================================================== */

header.hero {
  padding: 34px 0 26px;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 700px) {
  header.hero {
    padding: 54px 0 30px;
  }
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

h1 {
  font-size: clamp(26px, 7vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 14px;
}

.lede {
  font-size: 16.5px;
  color: var(--ink2);
  max-width: 60ch;
  margin: 0;
}

@media (min-width: 700px) {
  .lede {
    font-size: 18px;
  }
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: var(--ink2);
}

/* ===================================================================
   Chapters & Typography
=================================================================== */

section.chapter {
  padding-top: 40px;
  counter-increment: chapter;
}

@media (min-width: 700px) {
  section.chapter {
    padding-top: 52px;
  }
}

section.chapter.appendix {
  counter-increment: none;
}

/* Focus Mode (One Chapter at a Time) */
html.focus-mode header.hero,
body.focus-mode header.hero {
  display: none;
}

html.focus-mode section.chapter,
body.focus-mode section.chapter {
  display: none;
}

html.focus-mode section.chapter.active-focus,
body.focus-mode section.chapter.active-focus {
  display: block;
}

/* Chapter Bottom Nav (Focus Mode Only) */
.chapter-nav {
  display: none;
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

html.focus-mode .chapter-nav,
body.focus-mode .chapter-nav {
  display: flex;
}

.chapter-nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
}

.chapter-nav .nav-space {
  flex: 1;
}

.chead {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 6px;
}

.chead .cnum {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  padding-top: 9px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.chead .cnum::before {
  content: "CHAPTER " counter(chapter, decimal-leading-zero);
}

.chead .cnum.appendix::before {
  content: "APPENDIX";
}

:lang(tr) .chead .cnum::before {
  content: "BÖLÜM " counter(chapter, decimal-leading-zero);
}

:lang(tr) .chead .cnum.appendix::before {
  content: "EK";
}

.chead h2 {
  font-size: clamp(21px, 5vw, 31px);
  font-weight: 800;
  margin: 0;
}

.chead p {
  margin: 3px 0 0;
  font-size: 14px;
  color: var(--ink3);
}

h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 32px 0 8px;
  scroll-margin-top: 76px;
}

@media (min-width: 700px) {
  h3 {
    font-size: 20px;
  }
}

h3 .kx {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink3);
  font-weight: 400;
  margin-inline-end: 8px;
}

h4 {
  font-size: 15.5px;
  font-weight: 700;
  margin: 20px 0 6px;
}

p {
  margin: 11px 0;
}

ul, ol {
  margin: 11px 0;
  padding-inline-start: 22px;
}

li {
  margin: 5px 0;
}

strong {
  font-weight: 600;
}

.en {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--blue);
  unicode-bidi: isolate;
}

/* ===================================================================
   Components: Cards, Callouts, Tables, Big-O
=================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 18px 0;
  box-shadow: var(--shadow);
}

.def {
  border-inline-start: 3px solid var(--blue);
  background: #fff;
  padding: 13px 16px;
  margin: 16px 0;
  border-radius: 0 9px 9px 0;
  box-shadow: var(--shadow);
}

.def b {
  font-family: var(--sans);
}

.warn {
  border-inline-start: 3px solid var(--red);
  background: var(--red-soft);
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 0 9px 9px 0;
  font-size: 15px;
}

.warn::before {
  content: "COMMON PITFALL";
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--red);
  margin-bottom: 4px;
}

:lang(tr) .warn::before {
  content: "SIK HATA";
}

.tip {
  border-inline-start: 3px solid var(--green);
  background: var(--green-soft);
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 0 9px 9px 0;
  font-size: 15px;
}

.tip::before {
  content: "KEY TAKEAWAY";
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--green);
  margin-bottom: 4px;
}

:lang(tr) .tip::before {
  content: "ANAHTAR NOKTA";
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 13.5px;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 9px;
  overflow: hidden;
}

th, td {
  padding: 8px 11px;
  text-align: start;
  border-bottom: 1px solid var(--line2);
  vertical-align: top;
}

th {
  background: #F4F7FB;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

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

td code, p code, li code {
  font-family: var(--mono);
  font-size: 12.8px;
  background: #F1F4F8;
  padding: 1px 5px;
  border-radius: 4px;
  unicode-bidi: isolate;
}

pre {
  background: #0F1A2B;
  color: #DCE6F5;
  padding: 13px 15px;
  border-radius: 9px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  direction: ltr;
  text-align: start;
}

pre .c { color: #7E93B3; }
pre .k { color: #7FB0FF; }
pre .s { color: #9CD3A0; }

.big-o {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.o1 {
  background: var(--green-soft);
  color: var(--green);
}

.olog {
  background: #E6F0FA;
  color: var(--blue);
}

.on {
  background: var(--amber-soft);
  color: var(--amber);
}

.on2 {
  background: var(--red-soft);
  color: var(--red);
}

/* ===================================================================
   Interactive Labs Container & Controls
=================================================================== */

.lab {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 4px 4px 10px 10px;
  margin: 42px 0 26px;
  box-shadow: var(--shadow);
  counter-increment: lab;
}

.lab-tab {
  position: absolute;
  top: -3px;
  inset-inline-start: 18px;
  transform: translateY(-100%);
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 3px 9px;
  border-radius: 4px 4px 0 0;
}

.lab-tab::before {
  content: "LAB " counter(lab, decimal-leading-zero);
}

:lang(tr) .lab-tab::before {
  content: "DENEY " counter(lab, decimal-leading-zero);
}

.lab-head {
  padding: 14px 18px 0;
}

@media (max-width: 699px) {
  .lab-head {
    padding-inline: 12px;
  }
}

.lab-head h4 {
  margin: 0;
  font-size: 16px;
}

.lab-head p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink3);
}

.lab-body {
  padding: 14px 18px 18px;
}

@media (max-width: 699px) {
  .lab-body {
    padding: 10px 8px 14px;
  }
}

.ctrl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

button.b {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: 42px;
}

@media (min-width: 700px) {
  button.b {
    font-size: 13px;
    padding: 7px 13px;
    min-height: 0;
  }
}

button.b:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
}

button.b:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

button.b.pri {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

button.b.pri:hover {
  background: #153C81;
}

button.b.dan {
  background: #fff;
  border-color: rgba(190, 59, 46, 0.4);
  color: var(--red);
}

button.b.dan:hover {
  background: var(--red-soft);
}

button.b.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

button.b:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

input.n, select.n {
  font-family: var(--mono);
  font-size: 16px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  min-height: 42px;
}

select.n {
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 700px) {
  input.n, select.n {
    font-size: 13px;
    padding: 6.5px 9px;
    min-height: 0;
  }
}

input.n {
  width: 80px;
}

label.lb {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink2);
  font-weight: 600;
}

.readout {
  font-family: var(--mono);
  font-size: 12.5px;
  background: #F4F7FB;
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 11px;
  color: var(--ink2);
  line-height: 1.65;
  overflow-x: auto;
}

.readout b {
  color: var(--ink);
  font-weight: 600;
}

.stage {
  background: #FAFBFD;
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

svg {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

svg text {
  font-family: var(--mono);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 700px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================================================================
   Quiz & Glossary
=================================================================== */

.qz {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  margin: 10px 0;
  overflow: hidden;
}

.qz > button {
  width: 100%;
  text-align: start;
  background: none;
  border: 0;
  padding: 13px 15px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 11px;
  min-height: 44px;
}

.qz > button:hover {
  background: #F4F7FB;
}

.qz .qn {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--red);
  padding-top: 3px;
  flex-shrink: 0;
}

.qz .ans {
  display: none;
  padding: 0 15px 14px 41px;
  font-size: 14.5px;
  color: var(--ink2);
  border-top: 1px dashed var(--line);
}

.qz .ans.open {
  display: block;
  padding-top: 11px;
}

.qz .ans b {
  color: var(--green);
}

/* Glossary */
.gl {
  column-count: 1;
  column-gap: 26px;
}

@media (min-width: 700px) {
  .gl {
    column-count: 2;
  }
}

.gl div {
  break-inside: avoid;
  padding: 5px 0;
  border-bottom: 1px solid var(--line2);
  font-size: 14px;
}

.gl b {
  font-family: var(--sans);
  font-weight: 600;
}

.gl span {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 12.5px;
  unicode-bidi: isolate;
}

.hide {
  display: none !important;
}

/* Progress Checkbox */
.done {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  padding: 13px 14px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: #fff;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink2);
  cursor: pointer;
  width: fit-content;
  min-height: 44px;
}

.done input {
  width: 19px;
  height: 19px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}

.toc-mini {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 16px;
  margin: 14px 0 0;
  font-size: 13.5px;
  box-shadow: var(--shadow);
}

.toc-mini b {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink3);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.toc-mini a {
  color: var(--ink2);
  text-decoration: none;
  margin-inline-end: 14px;
  display: inline-block;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}

.toc-mini a:hover {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding-top: 22px;
  font-size: 13.5px;
  color: var(--ink3);
}

.tocnote {
  font-size: 13.5px;
  color: var(--ink3);
  font-style: italic;
}

.tw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
  border-radius: 9px;
}

.tw table {
  margin: 0;
  /* Let the table be as wide as it needs to be; .tw handles horizontal scrolling */
  min-width: max-content;
}

/* ===================================================================
   Floating Support Button
=================================================================== */

.support-btn {
  position: fixed;
  z-index: 40;
  bottom: calc(16px + var(--safe-b));
  inset-inline-end: calc(16px + var(--safe-r));
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px 16px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
  min-height: 44px;
}

.support-btn:hover {
  background: #0c1524;
}

.support-btn .ico {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 699px) {
  .support-btn {
    font-size: 0;
    padding: 12px;
    gap: 0;
  }
  .support-btn .ico {
    font-size: 19px;
  }
}

.support-btn[hidden] {
  display: none !important;
}

/* ===================================================================
   Privacy / Storage Disclosure Banner
=================================================================== */

.privacy-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  justify-content: center;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 -8px 24px -12px rgba(20, 32, 51, 0.4);
}

.privacy-banner[hidden] {
  display: none;
}

.privacy-banner p {
  margin: 0;
  max-width: 64ch;
  color: #dbe3ee;
}

.privacy-banner button {
  flex-shrink: 0;
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

body.has-banner .support-btn {
  bottom: calc(76px + var(--safe-b));
}

@media (min-width: 700px) {
  body.has-banner .support-btn {
    bottom: calc(64px + var(--safe-b));
  }
}

/* ===================================================================
   Semantic Helper & Utility Classes
=================================================================== */

.c-red { color: var(--red); }
.c-green { color: var(--green); }
.c-blue { color: var(--blue); }
.c-amber { color: var(--amber); }
.c-ink2 { color: var(--ink2); }
.c-ink3 { color: var(--ink3); }
.c-dim { color: #B9C4D2; }

.font-mono { font-family: var(--mono); }
.font-sans { font-family: var(--sans); }
.text-center { text-align: center; }
.text-sm { font-size: 14.5px; }
.text-muted { font-size: 14px; color: var(--ink3); }

.stage-subhead {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 8px;
}

.stage-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink3);
  margin-top: 6px;
}

.stage-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.stage-desc {
  font-size: 14px;
  margin-bottom: 12px;
}

.stage-table-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--blue);
  margin: 10px 0 3px;
}

.stage-empty {
  padding: 22px;
  text-align: center;
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 12px;
}

.stage-err {
  padding: 14px;
  color: var(--red);
  font-size: 14px;
}

.split-sm { gap: 10px; }
.split-stage { gap: 12px; margin-top: 10px; align-items: start; }
.legend-item { font-weight: 600; margin-inline-end: 12px; }
.pre-compact { margin: 6px 0 0; font-size: 11.5px; }
.w-44 { width: 44%; }

.ctrl-range { flex: 1; min-width: 180px; }
.readout-inline { margin: 0; padding: 4px 9px; }
.input-sm { width: 62px; }
.input-wide { width: 210px; }
.gl-search { width: 100%; max-width: 320px; }
.gl-empty { color: var(--ink3); padding: 8px 0; font-style: italic; }
.load-err { padding: 40px 0; color: var(--red); font-family: var(--sans); }
.table-compact { margin: 0; font-size: 12.2px; box-shadow: none; }

.layers-grid {
  display: grid;
  gap: 5px;
}

.layer-btn {
  justify-content: flex-start;
  text-align: start;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
}

.layer-btn.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.layer-btn .layer-num {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.75;
}

.layer-btn .layer-name {
  font-weight: 700;
}

.layer-btn .layer-sub {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: 0.7;
}

/* ===================================================================
   Print Styles
=================================================================== */

@media print {
  aside { display: none; }
  body { background: #fff; font-size: 11pt; }
  .wrap { display: block; }
  main::before { display: none; }
  .lab .ctrl, .done, .support-btn, .langsw { display: none; }
  .qz .ans { display: block !important; padding-top: 8px; }
  .qz > button { cursor: default; }
  section.chapter { page-break-before: always; padding-top: 18px; }
  .card, .lab, table, .def, .warn, .tip, .qz { box-shadow: none; break-inside: avoid; }
  a { color: #142033; text-decoration: none; }
  .hero .meta, .toc-mini { display: none; }
}