/* ─────────────────────────────────────────────────────────────────────────────
   THE DECK APPENDIX PAGES (2026-08-03).

   4 documents that used to be slides in the /gtm deck, moved out when the chairman
   capped it at 15 pages. They are DOCUMENTS, not slides: 1 scrolling column, no deck
   chrome, no theme picker. Light and dark follow the reader's own device.

   Palette values are copied from the deck's "slate" (light) and "growth" (dark)
   themes so the 2 surfaces look like 1 company. If the deck's palette changes, change
   this file too: there is no shared source, on purpose, because the deck's styles are
   inline and pulling them out is a bigger change than this warranted.

   🔒 TOP LOCK 7b: no em-dashes in anything a reader sees. Comments are exempt.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#f4f6fb; --bg2:#eceff7; --card:#ffffff; --card2:#f7f8fc;
  --line:rgba(20,30,60,.10); --line2:rgba(20,30,60,.18);
  --ink:#111731; --muted:#4a5578; --faint:#7c86a8;
  --accent:#0f766e; --accent2:#0891b2; --accent3:#6d28d9; --warn:#b45309; --bad:#be123c;
  --grad:linear-gradient(120deg,#0f766e 0%,#0891b2 50%,#6d28d9 100%);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0e1a; --bg2:#0e1424; --card:#121a2e; --card2:#16203a;
    --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
    --ink:#eef2fb; --muted:#9aa6c2; --faint:#8892ad;
    --accent:#2dd4bf; --accent2:#60a5fa; --accent3:#a78bfa; --warn:#fbbf24; --bad:#fb7185;
    --grad:linear-gradient(120deg,#2dd4bf 0%,#5eead4 40%,#a78bfa 100%);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:10px 18px;background:var(--bg2);border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:800;font-size:13px;color:var(--muted)}
.back{font-size:13px;font-weight:800;color:var(--accent);text-decoration:none;border:1px solid var(--line2);
  border-radius:999px;padding:7px 14px;background:var(--card)}
.back:hover{border-color:var(--accent)}

.wrap{max-width:1000px;margin:0 auto;padding:38px 22px 70px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:800}
h1{font-size:clamp(27px,4.4vw,42px);font-weight:850;letter-spacing:-.02em;line-height:1.14;margin:8px 0 14px}
h2{font-size:clamp(19px,2.6vw,25px);font-weight:850;letter-spacing:-.01em;margin:44px 0 10px;
  padding-top:22px;border-top:1px solid var(--line)}
h3{font-size:15px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:22px 0 6px}
p.lead{font-size:clamp(15px,2vw,19px);color:var(--muted);max-width:70ch;margin:0 0 20px}
p{max-width:78ch;font-size:15.5px}
.src{font-size:12.5px;color:var(--faint);font-style:italic;max-width:78ch;margin-top:18px}

ul.b{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px;max-width:78ch}
ul.b li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
ul.b li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:8px}

.note{margin-top:20px;border:1px solid var(--line2);border-radius:14px;padding:16px 18px;
  background:var(--card);font-size:14.5px;max-width:78ch}
.note b{color:var(--accent)}
.note.strong{border:2px solid var(--accent)}

/* tables scroll on their own, the page body never does */
/* 🔒 max-width:100% added 2026-08-10 and it is a real fix, not tidying. Without it the box grows
   to fit a wide table instead of clipping it, so the whole PAGE scrolls sideways on a phone rather
   than the table scrolling inside its own box. It went unnoticed because every table here was 8
   columns until the 200-topic matrix arrived at 22. The deck's own .tscroll always had it. */
.tscroll{overflow-x:auto;max-width:100%;margin-top:18px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px}
table th,table td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
table th{background:var(--card2);color:var(--accent);font-weight:800}
td.hl{font-weight:800;color:var(--ink)}
tr.bottomline td{border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);font-weight:800}
.gloss{display:block;font-size:11px;font-weight:400;color:var(--faint);margin-top:2px}
.tag{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--warn);color:var(--bg);margin-left:8px}

/* the engine-by-topic board */
table.heat{font-size:11px}
table.heat th,table.heat td{padding:4px 7px;text-align:center;line-height:1.2}
table.heat th{font-size:9.5px;text-transform:uppercase;letter-spacing:.01em}
table.heat td.engine{text-align:left;font-weight:700;color:var(--ink);white-space:nowrap}
table.heat td.tier{text-align:left;color:var(--faint);font-size:10px;white-space:nowrap}
.sc-hi{background:#0f766e;color:#ffffff;font-weight:800}
.sc-good{background:rgba(15,118,110,.20)}
.sc-mid{background:rgba(15,118,110,.09)}
.sc-weak{background:rgba(180,83,9,.16)}
.sc-bad{background:rgba(190,18,60,.16)}
@media (prefers-color-scheme: dark){
  .sc-good{background:rgba(45,212,191,.26)}
  .sc-mid{background:rgba(45,212,191,.10)}
  .sc-weak{background:rgba(251,191,36,.18)}
  .sc-bad{background:rgba(251,113,133,.20)}
}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.lg-hi{background:#0f766e}
.lg-good{background:rgba(15,118,110,.45)}
.lg-mid{background:rgba(15,118,110,.2)}
.lg-weak{background:rgba(180,83,9,.35)}
.lg-bad{background:rgba(190,18,60,.35)}
@media (prefers-color-scheme: dark){
  .lg-good{background:rgba(45,212,191,.5)}
  .lg-mid{background:rgba(45,212,191,.2)}
  .lg-weak{background:rgba(251,191,36,.35)}
  .lg-bad{background:rgba(251,113,133,.4)}
}

/* the competition map */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
@media(max-width:760px){.quad{grid-template-columns:1fr}}
.qcell{border:1px dashed var(--line2);border-radius:12px;padding:15px;background:var(--card)}
.qcell .qlabel{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.qcell .qco{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.55}
.qcell.us{border:1.5px solid var(--accent)}
.qcell.us .qlabel{color:var(--accent)}
.axes{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;gap:12px}

/* the user split bar */
.splitbar{display:flex;height:38px;border-radius:9px;overflow:hidden;margin-top:14px;max-width:78ch}
.splitbar span{display:grid;place-items:center;min-width:0}
.splitbar i{font-style:normal;font-size:11.5px;font-weight:800;color:#fff;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}

.footlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.footlinks a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--accent);
  text-decoration:none;border:1px solid var(--line2);border-radius:999px;padding:8px 16px;background:var(--card)}
.footlinks a:hover{border-color:var(--accent)}

/* ── ⓘ INFORMATION BUBBLES, added 2026-08-07 ────────────────────────────────────────────────
   Same component as the deck's, copied here rather than reinvented so the 2 behave identically.
   Shared by all 6 appendix pages, which is the point: the deck learned the hard way that scoping
   this to one context leaves every bubble outside it rendering as a black triangle and a letter i.
   The chairman's rule for these, and it governs the whole product: lead with 1 clean claim, put
   the detail 1 tap away, so a page stays readable for someone who bounces at a wall of words but
   is still complete for someone who wants the workings. */
/* ⚠️ A bubble must NEVER be written inside a <p>. The HTML parser auto-closes an open <p> when a
   <details> start tag appears, so `<p>text<details>…</details></p>` silently becomes
   `<p>text</p><details>…</details>`, and the bubble lands on its own line as a sibling block
   instead of sitting at the end of the sentence. Found 2026-08-18 with 6 of 8 bubbles ejected.
   Use `<div class="para">` (below) or put the bubble directly inside a .note div. */
.para{max-width:78ch;font-size:15.5px;margin:0 0 16px}
details.gl{display:inline}
details.gl>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;width:15px;height:15px;margin-left:6px;border-radius:50%;
  border:1px solid var(--line2);color:var(--faint);font-size:10px;font-weight:700;vertical-align:middle}
details.gl>summary::-webkit-details-marker{display:none}
details.gl[open]>summary{background:var(--accent);color:#fff;border-color:var(--accent)}
details.gl>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 🔴 FIXED 2026-08-18. `display:block` was applied unconditionally, which overrides the closed
   <details> hiding in WebKit: the gloss stayed laid out at full height while shut, so every bubble
   sat under a blank gap the size of its own hidden text. It was wrong on BOTH pages using the
   component, live, and read as a mystery hole in the page rather than as a broken bubble.
   Hide it when shut, lay it out only when open. */
details.gl .rowgloss{display:none}
details.gl[open] .rowgloss{display:block;font-size:12.5px;line-height:1.55;color:var(--muted);
  margin-top:8px;max-width:68ch;font-weight:400}