/* EBWS — Stamgegevens Handleiding — design system
   Extracted from the EBpos Canva template. Fonts loaded via Google Fonts in the HTML head. */
/* ============================================================
   EBpos — Stamgegevens Handleiding
   Design system: clean, professional, brand blue (#457CBF)
   ============================================================ */

:root {
  /* Brand */
  --blue:      #457CBF;   /* Electronic Brains blue (sampled from logo) */
  --blue-d:    #356099;
  --blue-dd:   #244a78;
  --blue-50:   #eef3fa;
  --blue-100:  #dde9f7;
  --blue-200:  #c3d8f0;

  /* Paper / ink — cool neutrals */
  --desk:      #e7eaef;   /* body behind the sheets */
  --sheet:     #ffffff;
  --ink:       #1a2230;
  --ink-2:     #3c4757;
  --muted:     #6b7585;
  --faint:     #9aa3b2;
  --line:      #e5e8ee;
  --line-2:    #eef0f4;

  /* Accents */
  --amber:     #b07e1d;
  --amber-bg:  #faf4e6;
  --amber-ln:  #ecdcb4;
  --green:     #2f7d4f;
  --red:       #c0392b;

  --r:  10px;
  --r-s: 6px;

  --ts: 1;   /* text-size scale (A-/A+ accessibility control) */

  --sans: "Libre Franklin", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --shadow: 0 1px 2px rgba(20,30,50,.04), 0 12px 30px -12px rgba(20,30,50,.18);
}

[data-theme="dark"] {
  --desk:      #0e1320;
  --sheet:     #161d2b;
  --ink:       #e9edf4;
  --ink-2:     #c3cbd8;
  --muted:     #97a2b3;
  --faint:     #6e798b;
  --line:      #28313f;
  --line-2:    #222a37;
  --blue:      #6ea2e0;
  --blue-d:    #8fb8ea;
  --blue-dd:   #b7d2f3;
  --blue-50:   #1a2436;
  --blue-100:  #1f2c42;
  --blue-200:  #2b3c58;
  --amber:     #e0b85a;
  --amber-bg:  #2a2418;
  --amber-ln:  #463a1f;
  --green:     #57b07c;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -16px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(15px * var(--ts));
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .35s ease, color .35s ease;
}

/* ---------- Layout shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 286px 1fr;
  align-items: start;
}

/* ---------- Table of contents ---------- */
.toc {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 34px 26px 40px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--sheet) 55%, var(--desk));
  backdrop-filter: blur(4px);
}
.toc__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.toc__brand img { width: 38px; height: 38px; }
.toc__brand b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.toc__brand span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.toc__lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--faint);
  font-weight: 700;
  margin: 22px 0 9px;
}
.toc a {
  display: block;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-s);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: background .15s, color .15s, border-color .15s;
}
.toc a:hover { background: var(--blue-50); color: var(--blue-d); }
.toc a.sub { padding-left: 24px; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.toc a.active {
  color: var(--blue-d);
  background: var(--blue-50);
  border-left-color: var(--blue);
  font-weight: 600;
}

/* ---------- Controls (top-right floating) ---------- */
.controls {
  position: fixed;
  top: 22px; right: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100vw - 40px);
  gap: 8px;
  z-index: 50;
}
.ctrl .az { font-weight: 800; letter-spacing: -.02em; }
.ctrl.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.ctrl.is-on:hover { color: #fff; }
.ctrl {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--sheet);
  color: var(--ink-2);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .15s, color .15s, transform .1s;
}
.ctrl:hover { color: var(--blue-d); }
.ctrl:active { transform: translateY(1px); }
.ctrl svg { width: 16px; height: 16px; }

/* ---------- Doc / pages ---------- */
.doc {
  padding: 56px 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.page {
  width: 816px;
  max-width: calc(100vw - 48px);
  background: var(--sheet);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 70px 72px;
  scroll-margin-top: 24px;
  transition: background .35s ease;
  overflow-wrap: break-word;   /* long unbreakable strings (paths, codes) wrap instead of overflowing */
}
.page img, .page svg { max-width: 100%; }
.page--cover {
  min-height: 1056px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- Cover ---------- */
.cover__band {
  background:
    radial-gradient(120% 120% at 85% -10%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 60%),
    linear-gradient(150deg, var(--blue-dd), var(--blue-d) 58%, var(--blue));
  color: #fff;
  flex: 1;
  padding: 78px 72px 64px;
  display: flex;
  flex-direction: column;
}
.cover__logo {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: #fff;
  padding: 8px;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.35);
}
.cover__logo img { width: 100%; height: 100%; }
.cover__eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 78%, var(--blue));
}
.cover__lead { margin: auto 0; }
.cover__tags { display: flex; gap: 10px; flex-wrap: wrap; }
.cover__tags span {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 38%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  padding: 5px 13px; border-radius: 999px;
}
.cover__title {
  font-size: calc(clamp(38px, 11vw, 66px) * var(--ts));   /* fluid: shrinks on narrow screens, capped at the desktop size */
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 14px 0 0;
  overflow-wrap: break-word;             /* never let a long word run off the frame */
}
.cover__sub {
  font-size: calc(clamp(16px, 4.4vw, 20px) * var(--ts));
  font-weight: 400;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 86%, var(--blue));
  margin: 22px 0 0;
  max-width: 30ch;
}
.cover__foot {
  padding: 30px 72px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--sheet);
  color: var(--muted);
  font-size: 13px;
}
.cover__foot .v { font-family: var(--mono); color: var(--ink-2); }
.cover__foot b { color: var(--ink); font-weight: 700; }

/* ---------- Typography ---------- */
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.kicker::before {
  content: ""; width: 26px; height: 2px; background: var(--blue); border-radius: 2px;
}
h1.sec {
  font-size: calc(clamp(26px, 6.5vw, 34px) * var(--ts));
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--ink);
  overflow-wrap: break-word;
}
h2.sub {
  font-size: calc(22px * var(--ts));
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 42px 0 12px;
  color: var(--ink);
  padding-top: 4px;
}
h3.subsub {
  font-size: calc(16px * var(--ts));
  font-weight: 700;
  margin: 28px 0 8px;
  color: var(--ink);
}
p { margin: 0 0 14px; color: var(--ink-2); max-width: 68ch; text-wrap: pretty; }
.lead {
  font-size: calc(18px * var(--ts));
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 62ch;
}
.muted { color: var(--muted); }
strong { font-weight: 700; color: var(--ink); }
a.inline { color: var(--blue-d); text-decoration: none; border-bottom: 1px solid var(--blue-200); }

/* UI term chip (Dutch labels / button text) */
.ui {
  font-family: var(--mono);
  font-size: .86em;
  font-weight: 500;
  background: var(--blue-50);
  color: var(--blue-d);
  border: 1px solid var(--blue-100);
  padding: .08em .42em;
  border-radius: 5px;
  white-space: nowrap;
}
.path {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.path b { color: var(--blue-d); font-weight: 600; }

/* inline toolbar icon */
.ic {
  height: 26px;
  vertical-align: -8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 1px;
  box-shadow: 0 1px 2px rgba(20,30,50,.08);
}

/* ---------- Steps ---------- */
ol.steps {
  list-style: none;
  counter-reset: s;
  padding: 0;
  margin: 16px 0 18px;
}
ol.steps > li {
  counter-increment: s;
  position: relative;
  padding: 0 0 16px 46px;
  margin: 0;
  color: var(--ink-2);
}
ol.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: -2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  display: grid; place-items: center;
}
ol.steps > li::after {
  content: "";
  position: absolute;
  left: 13.5px; top: 30px; bottom: 6px;
  width: 1px;
  background: var(--blue-100);
}
ol.steps > li:last-child { padding-bottom: 0; }
ol.steps > li:last-child::after { display: none; }
ol.steps > li b { color: var(--ink); }

ul.ticks { list-style: none; padding: 0; margin: 14px 0; }
ul.ticks li {
  position: relative; padding: 0 0 10px 28px; color: var(--ink-2);
}
ul.ticks li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--blue); transform: rotate(45deg);
}

/* ---------- Figures (window chrome) ---------- */
.fig { margin: 22px 0 26px; }
.win {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,30,50,.05), 0 20px 40px -22px rgba(20,30,50,.3);
  background: #f3f3f3;
}
.win__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 0 0 14px;
  background: linear-gradient(#fbfbfc, #eceef1);
  border-bottom: 1px solid #dfe2e7;
}
.win__title {
  font-size: 12.5px; font-weight: 600; color: #4a5160;
  display: flex; align-items: center; gap: 8px;
}
.win__title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.win__close {
  width: 46px; height: 34px;
  background: #c0392b; color: #fff;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 500;
}
.win__body { background: #fff; line-height: 0; }
.win__body img { width: 100%; display: block; }
figcaption {
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex; gap: 9px; align-items: baseline;
  line-height: 1.45;
}
figcaption .fc {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--blue-d); background: var(--blue-50);
  border: 1px solid var(--blue-100);
  padding: 1px 7px; border-radius: 4px; white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Tables ---------- */
/* Wide tables live inside a horizontally-scrollable wrapper (injected by lightbox.js on load,
   also usable by hand in a manual's markup). This keeps a wide grid inside its own scroll area
   instead of pushing the whole page wider than the screen — the cause of off-frame text. */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 16px 0 22px;
  max-width: 100%;
}
.tbl-scroll > .tbl { margin: 0; }   /* the wrapper owns the vertical rhythm */

.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 22px;
  font-size: calc(14px * var(--ts));
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.tbl caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 9px;
}
.tbl th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--blue-d);
  background: var(--blue-50);
  padding: 10px 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--blue-100);
}
.tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  vertical-align: top;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl td:first-child {
  width: 31%;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--blue-50) 40%, transparent); }
.req { color: var(--blue); font-weight: 700; }

/* ---------- Callouts ---------- */
.note {
  border-radius: var(--r);
  padding: 16px 18px 16px 20px;
  margin: 20px 0;
  font-size: calc(13.5px * var(--ts));
  line-height: 1.55;
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  position: relative;
}
.note p { margin: 0; color: var(--ink-2); max-width: none; }
.note p + p { margin-top: 8px; }
.note__h {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--blue-d);
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 7px;
}
.note__h svg { width: 16px; height: 16px; }
.note.tip   { border-color: var(--blue-100); background: var(--blue-50); }
.note.tip .note__h { color: var(--blue-d); }
.note.warn  { border-color: var(--amber-ln); background: var(--amber-bg); }
.note.warn .note__h { color: var(--amber); }

/* ---------- Quick-start cards ---------- */
.qs-path {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--sheet);
  border: 1px dashed var(--blue-200);
  border-radius: var(--r);
  padding: 14px 18px;
  margin: 4px 0 26px;
  font-family: var(--mono);
  font-size: 13.5px; font-weight: 500;
  color: var(--muted);
}
.qs-path .crumb {
  color: var(--blue-d); font-weight: 600;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  padding: 3px 10px; border-radius: 6px;
}
.qs-path .arr { color: var(--blue); font-weight: 700; }
.qs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 8px;
}
.qs-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 20px 22px;
  background: var(--sheet);
  position: relative;
  overflow: hidden;
}
.qs-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--blue);
}
.qs-card .n {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--blue); letter-spacing: .1em;
}
.qs-card h4 {
  font-size: 16px; font-weight: 700; margin: 6px 0 12px; color: var(--ink);
  letter-spacing: -.01em;
}
.qs-card ol {
  margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2);
  line-height: 1.5;
}
.qs-card ol li { margin-bottom: 7px; padding-left: 2px; }
.qs-card ol li::marker { color: var(--blue); font-family: var(--mono); font-weight: 600; }

/* type badge row */
.types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.type-row {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; background: var(--sheet);
}
.type-row .tag {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: #fff; background: var(--blue);
  padding: 3px 9px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
}
.type-row div p { margin: 0; font-size: 13px; color: var(--ink-2); }
.type-row div b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }

/* small toolbar legend */
.legend {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px;
  margin: 16px 0 22px;
}
.legend .row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--ink-2);
}
.legend .row b { color: var(--ink); }
.legend .row .gloss { color: var(--muted); font-size: 12.5px; }

.divider { height: 1px; background: var(--line); border: 0; margin: 34px 0; }

.foot-note {
  margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--faint); display: flex; justify-content: space-between;
}
.foot-note .v { font-family: var(--mono); }

.colofon__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.colofon__brand img { width: 46px; height: 46px; }
.colofon__brand b { font-size: 15px; font-weight: 700; color: var(--ink); display: block; }
.colofon__brand span { font-size: 12.5px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .shell { grid-template-columns: 1fr; }
  .toc { display: none; }
}

/* Phone/tablet-portrait. Scoped to `screen` so it NEVER affects the print / save-as-PDF layout
   (a printed A4/Letter page is narrower than 760px and would otherwise match this query). */
@media screen and (max-width: 760px) {
  body { overflow-x: hidden; }                 /* safety net: no sideways scroll / off-centre shift */
  .doc { padding: 22px 0 60px; gap: 16px; }
  .page { padding: 30px 20px; }
  .page--cover { min-height: 62vh; }
  .cover__band { padding: 44px 24px 40px; }
  .cover__logo { width: 62px; height: 62px; }
  .cover__eyebrow { font-size: 11px; letter-spacing: .16em; }
  .cover__tags { gap: 8px; }
  .cover__foot { flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 24px; }
  .lead { font-size: 16px; }
  h2.sub { font-size: 19px; margin-top: 32px; }
  ol.steps > li { padding-left: 40px; }
  .note { padding: 14px 15px; }
  .foot-note { flex-direction: column; gap: 4px; }

  /* Tables: let the first column wrap and tighten cells so most grids fit without scrolling;
     genuinely wide grids still scroll inside their .tbl-scroll wrapper. */
  .tbl { font-size: 12.5px; }
  .tbl th, .tbl td { padding: 9px 11px; }
  .tbl td:first-child { white-space: normal; }

  /* Stack the multi-column card/grid layouts (some are defined per-manual, hence !important). */
  .doc-cards { grid-template-columns: 1fr !important; }
  .qs-grid, .types, .legend { grid-template-columns: 1fr; }

  /* Keep the floating controls clear of the page edge; icon-only to save room (A-/A+ keep their glyph). */
  .controls { top: 12px; right: 12px; gap: 6px; }
  .ctrl { height: 34px; padding: 0 10px; font-size: 12px; }
  .ctrl > span:not(.az) { display: none; }
}

@media screen and (max-width: 400px) {
  .page { padding: 26px 15px; }
}

/* ---------- High-contrast mode (accessibility toggle) ---------- */
/* Light + high contrast: near-black ink, stronger lines, firmer chips/notes. */
:root[data-contrast="high"] {
  --ink:    #000000;
  --ink-2:  #14202f;
  --muted:  #33404f;
  --faint:  #45515f;
  --line:   #6b7480;
  --line-2: #8a929e;
}
/* Dark + high contrast: near-white ink on deeper paper. */
:root[data-theme="dark"][data-contrast="high"] {
  --desk:   #000000;
  --sheet:  #0a0f18;
  --ink:    #ffffff;
  --ink-2:  #eef2f8;
  --muted:  #cfd6e2;
  --faint:  #b3bcca;
  --line:   #8b95a4;
  --line-2: #6c7686;
  --blue-d: #b7d2f3;
}
:root[data-contrast="high"] a.inline { border-bottom-width: 2px; text-decoration: underline; }
:root[data-contrast="high"] .ui { border-color: var(--blue-d); border-width: 1px; }
:root[data-contrast="high"] .note { border-width: 2px; }
:root[data-contrast="high"] .tbl { border-width: 2px; }
:root[data-contrast="high"] .tbl th { border-bottom-width: 2px; }
:root[data-contrast="high"] .tbl td { border-bottom-color: var(--line); }
:root[data-contrast="high"] .toc a.active { border-left-width: 3px; }
:root[data-contrast="high"] .ctrl { border-color: var(--muted); }

/* ---------- Print ---------- */
@media print {
  :root { --desk: #fff; --ts: 1; }   /* keep the PDF at the canonical text size regardless of the on-screen A-/A+ choice */
  body { background: #fff; font-size: 11pt; }
  .toc, .controls { display: none !important; }
  .shell { display: block; }
  .doc { padding: 0; gap: 0; display: block; }
  .page {
    width: auto; max-width: none;
    box-shadow: none; border-radius: 0;
    padding: 0; margin: 0;
    break-after: page;
  }
  .page:last-child { break-after: auto; }
  .page--cover { min-height: 0; }
  .cover__band { min-height: 8.6in; }
  h1.sec, h2.sub, h3.subsub, figcaption, .qs-card, .note, .type-row, .tbl tr, ol.steps > li {
    break-inside: avoid;
  }
  .win { break-inside: avoid; box-shadow: none; }
  /* the on-screen horizontal scroll wrapper must not clip a wide table on paper */
  .tbl-scroll { overflow: visible !important; }
  .note, .qs-card, .tbl th, .tbl td, .type-row .tag, .qs-card::before, .qs-path .crumb,
  .cover__band, .ui, figcaption .fc, .ic {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  @page { margin: 0.7in; }
}

/* ---------- Manual switcher (sidebar) ---------- */
.toc__switch {
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.toc__switch a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sheet);
  transition: background .15s, color .15s, border-color .15s;
}
.toc__switch a:hover { color: var(--blue-d); border-color: var(--blue-200); background: var(--blue-50); }
.toc__switch a.here { color: #fff; background: var(--blue); border-color: var(--blue); }
.toc__switch a.home { color: var(--muted); }
.toc__switch a.home:hover { color: var(--blue-d); }

/* Home button in the floating controls */
.ctrl.home-ctrl svg { width: 16px; height: 16px; }

/* App SVG icon next to a section heading (mirrors the app's tile icons) */
h1.sec .sec-ic { width: 30px; height: 30px; vertical-align: -5px; margin-right: 12px; }
/* Small app icon inside a table cell (e.g. the menu overview) */
.tbl td .tile-ic { width: 20px; height: 20px; vertical-align: -5px; margin-right: 8px; }

/* Matrix table: wrap the first column, keep the type columns narrow so it fits the page */
.tbl.matrix td:first-child { white-space: normal; width: 28%; }
.tbl.matrix th.center, .tbl.matrix td.center, .tbl.matrix td.yes, .tbl.matrix td.no { width: 14.4%; }