/* ==========================================================================
   GitHub, Gently — shared stylesheet
   No frameworks, no build step. Just CSS.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  --bg: #fbfaf8;
  --bg-raised: #ffffff;
  --bg-sunken: #f2f0ec;
  --border: #e2ded7;
  --border-strong: #cfc9be;

  --text: #1f1d1a;
  --text-soft: #5b5650;
  --text-faint: #8a847b;

  --accent: #5b4bd6;
  --accent-soft: #ece9fb;
  --accent-ink: #3d31a8;

  --green: #1a7f45;
  --green-soft: #e4f4ea;
  --amber: #9a6511;
  --amber-soft: #fbf0dc;
  --red: #b3261e;
  --red-soft: #fbe9e7;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(31, 29, 26, .05), 0 6px 20px -12px rgba(31, 29, 26, .18);
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14151a;
    --bg-raised: #1b1d24;
    --bg-sunken: #101116;
    --border: #2c2f39;
    --border-strong: #3d414e;

    --text: #e8e6e3;
    --text-soft: #a9a69f;
    --text-faint: #78756e;

    --accent: #9c8dff;
    --accent-soft: #232049;
    --accent-ink: #b8adff;

    --green: #4ec27e;
    --green-soft: #16291f;
    --amber: #d9a441;
    --amber-soft: #2a2113;
    --red: #f08a80;
    --red-soft: #2c1815;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .7);
  }
}

/* Explicit override wins over the media query in both directions. */
:root[data-theme="light"] {
  --bg: #fbfaf8; --bg-raised: #ffffff; --bg-sunken: #f2f0ec;
  --border: #e2ded7; --border-strong: #cfc9be;
  --text: #1f1d1a; --text-soft: #5b5650; --text-faint: #8a847b;
  --accent: #5b4bd6; --accent-soft: #ece9fb; --accent-ink: #3d31a8;
  --green: #1a7f45; --green-soft: #e4f4ea;
  --amber: #9a6511; --amber-soft: #fbf0dc;
  --red: #b3261e; --red-soft: #fbe9e7;
  --shadow: 0 1px 2px rgba(31, 29, 26, .05), 0 6px 20px -12px rgba(31, 29, 26, .18);
}
:root[data-theme="dark"] {
  --bg: #14151a; --bg-raised: #1b1d24; --bg-sunken: #101116;
  --border: #2c2f39; --border-strong: #3d414e;
  --text: #e8e6e3; --text-soft: #a9a69f; --text-faint: #78756e;
  --accent: #9c8dff; --accent-soft: #232049; --accent-ink: #b8adff;
  --green: #4ec27e; --green-soft: #16291f;
  --amber: #d9a441; --amber-soft: #2a2113;
  --red: #f08a80; --red-soft: #2c1815;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .7);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

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

/* --- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
main { display: block; }
section { scroll-margin-top: 5.5rem; }

/* --- Site header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 60px;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 650; letter-spacing: -.01em; color: var(--text); text-decoration: none;
  font-size: 1rem; white-space: nowrap;
}
.brand svg { width: 22px; height: 22px; flex: none; }
.brand span em { font-style: normal; color: var(--text-faint); font-weight: 500; }

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
/* 44px tall even on desktop — an iPad in landscape is 1180pt wide, so it gets
   the full header and taps it with a finger. Fits inside the 60px header. */
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .4rem .7rem; border-radius: 999px;
  font-size: .92rem; font-weight: 500;
  color: var(--text-soft); text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--bg-sunken); color: var(--text); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

/* Three-state theme control: system → light → dark → system.
   The icon is driven by data-theme-pref, which the inline head script sets
   before first paint, so the button never flashes the wrong state. */
.theme-toggle {
  margin-left: .4rem; flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .72rem .34rem .6rem; min-height: 44px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-raised); color: var(--text-soft); cursor: pointer;
  font-family: inherit; font-size: .84rem; font-weight: 500;
  line-height: 1.2; white-space: nowrap;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.theme-toggle svg { width: 15px; height: 15px; flex: none; }

.theme-toggle .icon-system,
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
:root:not([data-theme-pref]) .theme-toggle .icon-system,
:root[data-theme-pref="system"] .theme-toggle .icon-system { display: block; }
:root[data-theme-pref="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme-pref="dark"] .theme-toggle .icon-moon { display: block; }

.nav-toggle { display: none; }

/* The nav has to collapse while there's still room for the brand and the
   theme control on one line — the labelled control needs more than the icon
   button it replaced, so this is wider than it looks like it needs to be. */
@media (max-width: 920px) {
  .site-header .wrap { flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
  .nav-toggle {
    display: grid; place-items: center; margin-left: auto;
    width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-raised); color: var(--text-soft); cursor: pointer;
  }
  .nav-toggle svg { width: 17px; height: 17px; }
  .nav {
    order: 3; margin-left: 0; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    display: none; padding: .35rem 0 .5rem;
    border-top: 1px solid var(--border); margin-top: .5rem;
  }
  .nav.open { display: flex; }
  /* Vertical list, so a taller target costs nothing visually. */
  .nav a { border-radius: var(--radius); padding: .6rem .75rem; min-height: 44px; display: flex; align-items: center; }
  .theme-toggle { margin-left: .4rem; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { padding: clamp(3rem, 9vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero-inner { max-width: 46rem; }

/* Brand insignia. The mark carries its own dark ground, so on the light theme
   it sits directly on the page; on the dark theme a faint halo keeps its plum
   interior from merging into the background. */
/* Centred, and given real space beneath it, so it presides over the page
   rather than reading as a badge attached to the eyebrow below. The ™ is
   offset by its own width so the mark itself lands on the centre line, not
   the mark-plus-symbol pair. */
.insignia {
  display: flex; align-items: flex-end; justify-content: center; gap: .06rem;
  max-width: none;          /* overrides the 68ch measure that p carries */
  margin: 0 0 2.4rem;
  padding-left: .75rem;     /* offsets the ™ so the disc lands on the centre line */
  line-height: 1;
}
.insignia img {
  width: 68px; height: 68px; display: block;
  border-radius: 50%;
}
@media (prefers-color-scheme: dark) {
  .insignia img { box-shadow: 0 0 0 1px rgba(228, 176, 93, .22), 0 4px 18px -6px rgba(0, 0, 0, .8); }
}
:root[data-theme="dark"] .insignia img {
  box-shadow: 0 0 0 1px rgba(228, 176, 93, .22), 0 4px 18px -6px rgba(0, 0, 0, .8);
}
:root[data-theme="light"] .insignia img { box-shadow: none; }
/* Set in type rather than baked into the image: stays crisp at any size, and
   matches where the mark carries it on coworkfieldguide.com. Sits at roughly
   four o'clock, tucked against the ring so it reads as part of the mark. The
   mark is pending registration, so ™ is correct — ® only once it issues. */
.insignia-tm {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  color: var(--text-soft); margin-bottom: .7rem;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1.1rem;
}
h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 700;
  margin: 0 0 1rem;
}
.lede { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--text-soft); margin: 0 0 1.75rem; max-width: 42rem; }
.lede strong { color: var(--text); font-weight: 600; }

h2 {
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  line-height: 1.2; letter-spacing: -.02em; font-weight: 680;
  margin: 3.25rem 0 .85rem;
}
h3 { font-size: 1.14rem; font-weight: 650; letter-spacing: -.01em; margin: 2rem 0 .6rem; }
h4 { font-size: .97rem; font-weight: 650; margin: 1.4rem 0 .4rem; }
p { margin: 0 0 1.05rem; max-width: var(--measure); }
ul, ol { max-width: var(--measure); padding-left: 1.3rem; margin: 0 0 1.05rem; }
li { margin-bottom: .45rem; }
li > ul, li > ol { margin-top: .45rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }

/* Duplicate of the bottom navigation, at the top — someone landing mid-guide
   shouldn't have to read to the end to find a way out. Home sits on one side
   and the sequential links mirror it on the other, all the same ghost pill
   used at the foot of the page. */
/* Previous · Home · Next, using the same ghost pill as the foot of the page.
   Left is backwards and right is forwards, which is the one spatial convention
   every reader already has. It also puts the two sequential destinations at
   opposite ends of the row, so a mis-tap between them is impossible — they are
   hundreds of pixels apart rather than adjacent. */
.topnav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .9rem;
  padding: 1.25rem 0 0;
}
.topnav .prev { justify-self: start; }
.topnav .home { justify-self: center; }
.topnav .next { justify-self: end; }

@media (max-width: 780px) {
  /* Three pills won't fit on one line. Home takes its own row; the sequential
     pair keeps its left/right meaning on the row beneath. Rows are explicit,
     since auto-placement staggers them. */
  .topnav { grid-template-columns: 1fr 1fr; gap: .6rem .9rem; }
  .topnav .home { grid-column: 1 / -1; grid-row: 1; }
  .topnav .prev { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .topnav .next { grid-column: 2; grid-row: 2; justify-self: stretch; }
  .topnav .prev, .topnav .next { justify-content: center; }
}

.page-head { padding: clamp(1.25rem, 3vw, 2rem) 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.page-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); }
.page-head .lede { margin-bottom: 1.25rem; }

/* --- Buttons ------------------------------------------------------------ */
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .68rem 1.15rem; border-radius: 999px;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); color: #fff; }
.btn-ghost { background: var(--bg-raised); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-sunken); color: var(--text); }
.btn svg { width: 16px; height: 16px; }

/* --- Cards -------------------------------------------------------------- */
.grid { display: grid; gap: 1rem; margin: 1.5rem 0; }
/* min(…, 100%) keeps a single column from overflowing a narrow viewport. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.35rem 1.4rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card p { max-width: none; font-size: .95rem; color: var(--text-soft); }

a.card { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; }
a.card .card-more { color: var(--accent); font-weight: 600; font-size: .9rem; display: inline-block; margin-top: .6rem; }

.card-num {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  margin-bottom: .8rem;
}

/* --- Callouts ----------------------------------------------------------- */
.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: .95rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0; max-width: var(--measure);
}
.note p { margin: 0; max-width: none; font-size: .95rem; }
.note p + p { margin-top: .6rem; }
.note strong:first-child { display: block; margin-bottom: .2rem; }
.note.warn { border-color: var(--amber); background: var(--amber-soft); }
.note.danger { border-color: var(--red); background: var(--red-soft); }
.note.good { border-color: var(--green); background: var(--green-soft); }

/* --- Code --------------------------------------------------------------- */
code {
  font-family: var(--mono); font-size: .875em;
  background: var(--bg-sunken); border: 1px solid var(--border);
  padding: .1em .38em; border-radius: 5px;
  word-break: break-word;
}
.terminal {
  position: relative;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); margin: 1.25rem 0;
  overflow: hidden;
}
.terminal-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-raised) 60%, transparent);
  font-size: .78rem; color: var(--text-faint); font-family: var(--mono);
}
.terminal-bar .dots { display: flex; gap: .3rem; }
.terminal-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: block; }
.terminal pre {
  margin: 0; padding: .9rem 1rem; overflow-x: auto;
  font-family: var(--mono); font-size: .84rem; line-height: 1.7;
  -webkit-overflow-scrolling: touch;
}
.terminal code { background: none; border: 0; padding: 0; font-size: inherit; }
.copy {
  position: absolute; top: .38rem; right: .45rem;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  padding: .25rem .55rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-soft);
  cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.terminal:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--text); border-color: var(--border-strong); }
.copy.done { color: var(--green); border-color: var(--green); }
@media (hover: none) { .copy { opacity: 1; } }

/* Terminal token colours */
.tok-cmd { color: var(--text); font-weight: 600; }
.tok-prompt { color: var(--accent); user-select: none; }
.tok-flag { color: var(--amber); }
.tok-str { color: var(--green); }
.tok-out { color: var(--text-faint); }
.tok-add { color: var(--green); }
.tok-del { color: var(--red); }

/* --- Steps -------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: step; max-width: none; }
.steps > li {
  position: relative; counter-increment: step;
  padding: 0 0 1.6rem 3rem; margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
}
.steps > li::after {
  content: ""; position: absolute; left: 13.5px; top: 30px; bottom: .2rem;
  width: 1px; background: var(--border);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.steps p:last-child, .steps .terminal:last-child { margin-bottom: 0; }

/* --- Tables ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .68rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--bg-sunken); font-weight: 650; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td code { white-space: nowrap; }

/* --- Diagrams ----------------------------------------------------------- */
.figure {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.25rem 1.1rem;
  margin: 1.75rem 0; box-shadow: var(--shadow);
}
.figure > svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border);
  font-size: .88rem; color: var(--text-soft);
}
.figure figcaption strong { color: var(--text); }

.d-line { stroke: var(--border-strong); stroke-width: 2; fill: none; }
.d-line-accent { stroke: var(--accent); stroke-width: 2; fill: none; }
.d-line-green { stroke: var(--green); stroke-width: 2; fill: none; }
.d-node { fill: var(--bg-sunken); stroke: var(--border-strong); stroke-width: 2; }
.d-node-accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.d-node-green { fill: var(--green-soft); stroke: var(--green); stroke-width: 2; }
.d-dot { fill: var(--bg-raised); stroke: var(--border-strong); stroke-width: 2.5; }
.d-dot-accent { fill: var(--accent); stroke: var(--accent); }
.d-dot-green { fill: var(--green); stroke: var(--green); }
/* Arrowheads: markers resolve currentColor against their own context, not the
   referencing element's, so each needs an explicit fill of its own. */
.d-arrow-line { fill: var(--border-strong); }
.d-arrow-accent { fill: var(--accent); }
.d-arrow-green { fill: var(--green); }
.d-text { fill: var(--text); font-family: var(--sans); font-size: 13px; font-weight: 600; }
.d-text-sm { fill: var(--text-soft); font-family: var(--sans); font-size: 11.5px; }
.d-text-mono { fill: var(--text-soft); font-family: var(--mono); font-size: 11.5px; }
.d-label-accent { fill: var(--accent-ink); font-family: var(--sans); font-size: 11.5px; font-weight: 650; }

/* --- Glossary / definition rows ---------------------------------------- */
.deflist { display: grid; gap: .1rem; margin: 1.5rem 0; }
.deflist > div {
  display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.deflist dt, .deflist > div > :first-child { font-weight: 650; font-size: .95rem; }
.deflist > div > :last-child { color: var(--text-soft); font-size: .95rem; }
@media (max-width: 640px) {
  .deflist > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* --- Pills / tags ------------------------------------------------------- */
.pill {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 650; letter-spacing: .02em;
  background: var(--bg-sunken); color: var(--text-soft); border: 1px solid var(--border);
  white-space: nowrap;
}
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.pill-green { background: var(--green-soft); color: var(--green); border-color: transparent; }
.pill-amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }

/* --- Details / FAQ ------------------------------------------------------ */
details {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-raised); padding: .2rem 1rem; margin: .6rem 0;
  max-width: var(--measure);
}
details[open] { padding-bottom: .8rem; }
summary {
  cursor: pointer; padding: .75rem 0; font-weight: 600; font-size: .97rem;
  list-style: none; display: flex; align-items: center; gap: .55rem;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg); transition: transform .15s ease;
}
details[open] > summary::before { transform: rotate(45deg); }
details > :not(summary) { font-size: .95rem; color: var(--text-soft); }
details > :last-child { margin-bottom: 0; }

/* --- Next / prev navigation -------------------------------------------- */
.pager {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
  margin: 3.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--border);
}
.pager a {
  display: block; padding: 1rem 1.15rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-raised);
  text-decoration: none; color: inherit; transition: border-color .15s ease;
}
.pager a:hover { border-color: var(--accent); color: inherit; }
.pager .dir { display: block; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .2rem; }
.pager .ttl { font-weight: 650; color: var(--accent); }
.pager .next { text-align: right; }

/* An escape hatch back to the start, separate from the sequential prev/next.
   The brand lockup links home too, but not everyone reads a wordmark as a
   button. */
.pager-home {
  display: flex; justify-content: center;
  margin: 1.1rem 0 0; max-width: none;
}
/* One declaration so the top and bottom pills are literally the same object.
   min-height meets the 44px minimum touch target — the padding alone left them
   at 43px, which is fine with a mouse and not fine with a thumb. */
.pager-home .btn,
.topnav .btn { font-size: .9rem; padding: .55rem 1.05rem; min-height: 44px; }

/* --- On-this-page ------------------------------------------------------- */
.toc {
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 2.5rem;
  max-width: var(--measure);
}
.toc p { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .5rem; font-weight: 650; }
.toc ol { margin: 0; padding-left: 1.15rem; font-size: .93rem; }
.toc li { margin-bottom: .25rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  margin-top: 5rem; border-top: 1px solid var(--border);
  padding: 2.5rem 0 3rem; background: var(--bg-sunken);
  font-size: .9rem; color: var(--text-soft);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.site-footer p { margin: 0; max-width: 34rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; margin-left: auto; }
/* Grown to the 44px touch minimum with padding rather than spacing, so the
   targets are comfortable without the row looking gappy. */
.site-footer nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--text-soft);
}
.site-footer nav a:hover { color: var(--accent); text-decoration: underline; }

/* --- Utilities ---------------------------------------------------------- */
.center { text-align: center; }
.muted { color: var(--text-soft); }
.small { font-size: .9rem; }
.mt0 { margin-top: 0; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}