/* The technical guide (docs/adr/0035): a calm technical manual, printed
   on the paper the hub and the puzzles are (games/house/paper.css, loaded
   before this; ADR 0036): cream and graphite whatever the reader's
   dark-mode setting, Gloock for titles, Figtree for words and IBM Plex Mono
   for code (OFL, in fonts/). The skeleton is the house's (house.css, loaded
   after this: the gutter, the bar, the column, the type roles); this sheet
   is the guide's own colors (its links, code, notes) and the shapes of a
   manual: a contents column, code figures, tables, notes. */

@font-face { font-family: "IBM Plex Mono"; font-display: swap; src: url("fonts/ibm-plex-mono-latin.814fe1615d4d.woff2") format("woff2"); }

:root {
  /* the guide's names on the paper */
  --card: var(--paper-2);
  --rule: var(--paper-edge);
  --code-bg: #f0ebdf;
  --accent: #2348a0;         /* links, the contents' mark: 7.6:1 on the paper */
  --mark: #fff0b8;
  --warn-bg: #fdecd9;
  --warn-ink: #7a3a10;
  --ui-font: var(--ui);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 400;
  /* the house rules' tokens (docs/design-system.md) */
  --t-display: 44px;
  --t-heading: 20px;
  --t-body: 16px;
  --t-label: 16px;
  --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 12%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;
  --panel-radius: 10px;
  /* the house kit's names for them */
  --house-surface: var(--card);
  --house-ink: var(--ink);
  --house-soft: var(--soft);
  --house-edge: 1px solid var(--rule);
  --house-display: var(--display);
  --house-font: var(--ui-font);
  --house-focus: var(--accent);
  /* code, by Pygments' token classes */
  --c-key: #7a2f6b;
  --c-str: #1f6b4f;
  --c-num: #9a3d1c;
  --c-com: #6b6456;
  --c-name: #22509c;
  --c-type: #7a4a10;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s4); }
html, body { margin: 0; }
body { background: var(--paper) var(--paper-grain); color: var(--ink); font: var(--t-body)/var(--lh-body) var(--ui-font); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* ── the skeleton: the bar, the column, the foot ──────────────────────── */
.g-bar { display: flex; align-items: center; gap: var(--s2); height: var(--bar-h); margin: var(--bar-top) 0 0; padding: 0 var(--gutter); }
.g-bar .house-back { color: var(--ink); }
.g-bar .title { flex: 1; min-width: 0; margin: 0; font-size: var(--t-bar); line-height: 1.2; font-weight: 700; }
.g-bar .title a { color: inherit; text-decoration: none; }
.g-bar .tools { display: flex; gap: var(--s1); }
.g-bar .tools .quiet { display: inline-flex; align-items: center; min-height: var(--tool-h); padding: 0 var(--tool-pad); border-radius: 8px; font: var(--w-tool) var(--t-tool)/1.1 var(--ui-font); color: var(--ink); text-decoration: none; }
.g-bar .tools .quiet[hidden] { display: none; }
@media (hover: hover) { .g-bar .tools .quiet:hover { background: var(--pick-tint); } }
.g-wrap { max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--bar-gap) var(--gutter) var(--s5); }
.g-wrap.wide { max-width: calc(var(--page-max-wide) + 2 * var(--gutter)); }
.g-foot { max-width: calc(var(--page-max-wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s3) var(--gutter) max(var(--s4), env(safe-area-inset-bottom, 0px)); font-size: var(--t-note); color: var(--soft); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; border-top: 1px solid var(--rule); }
.g-foot a { color: var(--soft); }

.kicker { margin: 0 0 var(--s2); font-size: var(--t-kicker); font-weight: 700; line-height: 1.3; letter-spacing: var(--kicker-spacing); text-transform: uppercase; color: var(--soft); }
h1 { margin: 0 0 var(--s2); font: var(--display-weight) var(--t-display)/var(--lh-display) var(--display); letter-spacing: -.005em; text-wrap: balance; }
.lead { margin: 0 0 var(--s4); max-width: 38em; font-size: var(--t-lead); color: var(--soft); }
.note { font-size: var(--t-note); line-height: var(--lh-note); color: var(--soft); }
@media (max-width: 640px) { :root { --t-display: 32px; } }

/* ── the index: search, then the chapters ─────────────────────────────── */
.g-search { margin: 0 0 var(--s4); }
.g-search label { display: block; margin-bottom: var(--s1); font-weight: var(--w-label); }
.g-search input { width: 100%; min-height: var(--btn-h); padding: 0 var(--s3); font: inherit; color: var(--ink); background: var(--card); border: 1.5px solid var(--rule); border-radius: 8px; }
.g-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-search .note { margin: var(--s1) 0 0; }
.g-results { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.g-results a { display: block; padding: 12px var(--s3); background: var(--card); border: 1px solid var(--rule); border-radius: var(--panel-radius); text-decoration: none; color: var(--ink); }
.g-results a:hover, .g-results a:focus-visible { border-color: var(--accent); }
.g-results b { display: block; }
.g-results .where { display: block; font-size: var(--t-note); color: var(--soft); }
.g-results .what { display: block; margin-top: var(--s1); font-size: var(--t-note); color: var(--soft); }
.g-results mark { background: var(--mark); color: inherit; border-radius: 2px; }

.g-group { margin: 0 0 var(--s5); }
.g-group h2 { margin: 0 0 var(--s3); font-size: var(--t-heading); line-height: var(--lh-heading); }
.g-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--panel-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.g-list li { display: flex; }
.g-item { position: relative; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); align-content: start; padding: var(--panel-pad); background: var(--card); border: 1px solid var(--rule); border-radius: var(--panel-radius); text-decoration: none; color: var(--ink); }
.g-item:hover, .g-item:focus-visible { border-color: var(--accent); }
.g-item .n { grid-row: span 2; font: 700 var(--t-heading)/1.2 var(--mono); color: var(--soft); min-width: 1.6em; }
.g-item b { font-size: var(--t-label); line-height: 1.35; }
.g-item span { font-size: var(--t-note); line-height: var(--lh-note); color: var(--soft); }
.g-item.stub { background: transparent; border-style: dashed; }
.g-games .g-item { grid-template-columns: minmax(0, 1fr); }

/* ── a chapter: its contents beside it, the text in a reading measure ─── */
.g-chapter { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.g-toc { position: sticky; top: var(--s3); max-height: calc(100vh - 2 * var(--s3)); overflow: auto; padding: 0 var(--s1) var(--s3) 0; font-size: var(--t-note); line-height: var(--lh-note); }
.g-toc-title, .g-toc-small summary { margin: 0 0 var(--s2); font-size: var(--t-kicker); font-weight: 700; letter-spacing: var(--kicker-spacing); text-transform: uppercase; color: var(--soft); }
.g-toc ol, .g-toc-small ol { list-style: none; margin: 0; padding: 0; }
.g-toc ol ol, .g-toc-small ol ol { padding-left: var(--s3); }
.g-toc a, .g-toc-small a { display: block; padding: 3px 0 3px var(--s2); color: var(--soft); text-decoration: none; border-left: 2px solid transparent; }
.g-toc a:hover { color: var(--ink); }
.g-toc a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
.g-toc-small { display: none; margin: 0 0 var(--s4); padding: 0 var(--panel-pad); background: var(--card); border: 1px solid var(--rule); border-radius: var(--panel-radius); font-size: var(--t-note); }
.g-toc-small summary { display: flex; align-items: center; min-height: var(--btn-h); margin: 0; cursor: pointer; }
.g-toc-small[open] { padding-bottom: var(--s2); }
.g-toc-small summary { list-style: none; }
.g-toc-small:not([open]) > ol { display: none; }
.g-toc-small summary::-webkit-details-marker { display: none; }
.g-toc-small summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; translate: 0 -2px; rotate: 45deg; }
.g-toc-small[open] summary::after { translate: 0 2px; rotate: 225deg; }
.g-toc-small a { min-height: 36px; display: flex; align-items: center; }
@media (max-width: 1000px) {
  .g-chapter { grid-template-columns: minmax(0, 1fr); }
  .g-toc { display: none; }
  .g-toc-small { display: block; }
}
@media (pointer: coarse) {
  .g-toc-small a { min-height: 44px; }
  /* (the bar's title is pressed anywhere in the 44px round its line, without moving it) */
  .g-bar .title a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}

.g-meta { margin: calc(-1 * var(--s3)) 0 var(--s4); font-size: var(--t-note); color: var(--soft); }
.g-article { max-width: 46em; min-width: 0; }
.g-body { overflow-wrap: break-word; }
.g-body > :first-child { margin-top: 0; }
.g-body p, .g-body ul, .g-body ol, .g-body dl, .g-body blockquote { margin: 0 0 var(--s3); }
.g-body li { margin: 0 0 var(--s1); }
.g-body li > p { margin-bottom: var(--s2); }
.g-body ul, .g-body ol { padding-left: 1.4em; }
.g-body h2 { margin: var(--s5) 0 var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: var(--t-heading); line-height: var(--lh-heading); }
.g-body h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-label); line-height: 1.35; }
.g-body h4 { margin: var(--s3) 0 var(--s1); font-size: var(--t-body); }
.g-body h2, .g-body h3 { scroll-margin-top: var(--s4); }
.g-anchor { margin-left: .35em; color: var(--soft); text-decoration: none; font-weight: 400; opacity: 0; }
.g-body h2:hover .g-anchor, .g-body h3:hover .g-anchor, .g-anchor:focus-visible { opacity: 1; }
/* (on a touch screen the contents are the way to a section: no small # to miss) */
@media (pointer: coarse) { .g-anchor { display: none; } }
.g-body strong { font-weight: 700; }
.g-body blockquote { padding: var(--s2) var(--s3); border-left: 3px solid var(--rule); color: var(--soft); }
.g-body dt { font-weight: 700; }
.g-body dd { margin: 0 0 var(--s2) var(--s3); }
.g-body hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s4) 0; }
.g-body img, .g-body svg { max-width: 100%; height: auto; }

/* inline code, paths and ADRs */
.g-body code { font-family: var(--mono); font-size: .875em; padding: .1em .3em; background: var(--code-bg); border-radius: 4px; overflow-wrap: anywhere; }
.g-body pre code, .g-code code { padding: 0; background: none; border-radius: 0; overflow-wrap: normal; }
.g-adr { white-space: nowrap; }

/* code blocks: a fenced block, and a live snippet with where it's from */
.g-body .hl, .g-code { margin: 0 0 var(--s3); background: var(--code-bg); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.g-body pre { margin: 0; padding: 12px var(--s3); overflow-x: auto; font: 14px/1.55 var(--mono); tab-size: 4; }
.g-body pre:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.g-code figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); padding: 6px var(--s3); border-bottom: 1px solid var(--rule); font-size: var(--t-note); line-height: var(--lh-note); color: var(--soft); background: color-mix(in srgb, var(--card) 55%, var(--code-bg)); }
.g-code .g-path { font-size: 13px; background: none; padding: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.g-code .g-where { min-width: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.g-code-note { margin: 0; padding: 6px var(--s3); border-top: 1px solid var(--rule); font-size: var(--t-note); color: var(--soft); }
.hl .k, .hl .kn, .hl .kd, .hl .kr, .hl .ow, .hl .kc { color: var(--c-key); }
.hl .kc, .hl .kt { color: var(--c-type); }
.hl .s, .hl .s1, .hl .s2, .hl .sb, .hl .sd, .hl .se, .hl .si, .hl .sa, .hl .sr, .hl .ss, .hl .sh, .hl .sc, .hl .dl { color: var(--c-str); }
.hl .sd { font-style: italic; }
.hl .m, .hl .mi, .hl .mf, .hl .mh, .hl .mo, .hl .il { color: var(--c-num); }
.hl .c, .hl .c1, .hl .cm, .hl .ch, .hl .cs, .hl .cp, .hl .cpf { color: var(--c-com); font-style: italic; }
.hl .nf, .hl .fm, .hl .nc, .hl .nn, .hl .nd, .hl .ne { color: var(--c-name); }
.hl .nb, .hl .bp, .hl .vm { color: var(--c-type); }
.hl .nt { color: var(--c-key); }
.hl .na { color: var(--c-name); }
.hl .gd { color: var(--c-num); }
.hl .gi { color: var(--c-str); }
.hl .err { color: inherit; background: none; }

/* tables: in a box of their own that scrolls sideways on a phone */
.g-table { margin: 0 0 var(--s3); overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
.g-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.g-table th, .g-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.g-table tr:last-child td { border-bottom: 0; }
.g-table th { font-weight: 700; background: color-mix(in srgb, var(--card) 55%, var(--code-bg)); }
.g-data { margin: 0 0 var(--s3); }
.g-data .g-table { margin-bottom: var(--s1); }
.g-data figcaption, .g-figure figcaption { font-size: var(--t-note); color: var(--soft); }
.g-data figcaption code { font-size: 13px; }
/* A token's name is one word: it never breaks at its hyphens. */
.g-tokens td:first-child code { white-space: nowrap; }

/* figures: diagrams drawn in the page's own ink */
.g-figure { margin: 0 0 var(--s4); padding: var(--s3); background: var(--card); border: 1px solid var(--rule); border-radius: var(--panel-radius); }
.g-figure svg { display: block; width: 100%; height: auto; color: var(--ink); font-family: var(--ui-font); }
.g-figure figcaption { margin-top: var(--s2); }

/* asides: a callout in the text (> **Note:** …), and a directive out of date */
.g-body .g-callout { padding: 12px var(--s3); background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 8px; color: var(--ink); }
.g-warn { margin: 0 0 var(--s3); padding: 12px var(--s3); background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; font-size: var(--t-note); }
.g-warn code { background: none; padding: 0; }
.g-warn b { display: block; }

/* the chapters either side */
.g-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--panel-gap); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.g-pager a { display: block; height: 100%; padding: 12px var(--s3); background: var(--card); border: 1px solid var(--rule); border-radius: var(--panel-radius); text-decoration: none; color: var(--ink); }
.g-pager a:hover, .g-pager a:focus-visible { border-color: var(--accent); }
.g-pager span { display: block; font-size: var(--t-note); color: var(--soft); }
.g-pager b { display: block; }
.g-pager .next { grid-column: 2; text-align: right; }
@media (max-width: 560px) { .g-pager { grid-template-columns: minmax(0, 1fr); } .g-pager .next { grid-column: 1; } }

@media print {
  .g-bar, .g-toc, .g-toc-small, .g-pager, .g-foot, .g-anchor { display: none; }
  .g-chapter { display: block; }
}