/* Familjen Grotesk (UI) and IBM Plex Mono (code), latin only, same origin (CSP font-src 'self'). */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/familjen-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}

/* Dark tokens stay available. The page sets data-theme="light". */
:root {
  --bg: #0d111c;
  --fg: #e8ebf4;
  --muted: #9aa3b8;
  --panel: #131a2a;
  --card: var(--panel);
  --line: #232b3f;
  --accent: #b4a3ff;
  --accent-fg: #120e26;
  --chip: #182036;
  --row: #182036;
  --d0: #121829; --d1: #1f1e2a; --d2: #2b2430; --d3: #3a2b2f;
  --loop: #a78bfa; --if: #60a5fa; --guard: #fbbf24; --exit: #fb923c;
  --db: #5eead4; --db-bg: #0f2c2f; --http: #a5c0ff; --http-bg: #18254a;
  --add: #4ade80; --add-bg: #0f2a22; --del: #f87171; --del-bg: #331821;
  --good: #86efac; --good-bg: #14361f;
  --warn: #fcd34d; --warn-bg: #3a2a0a;
  --bad: #fca5a5; --bad-bg: #3d1515;
  --shadow: none;
  --ct-add: #4ade80; --ct-del: #f87171;
  --font-sans: "Familjen Grotesk", system-ui, sans-serif;
  --font-title: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ct-add: #1C6B45; --ct-del: #A8321C;
  --bg: #f6f7fb; --fg: #121726; --muted: #4f5870; --line: #d9dde8; --panel: #ffffff;
  --card: var(--panel);
  --accent: #5b45d6; --accent-fg: #ffffff;
  --chip: #eef0f6;
  --row: #ffffff; --d0: #eef0f6; --d1: #f5eee0; --d2: #f4e1c6; --d3: #efcfa6;
  --loop: #7c3aed; --if: #2563eb; --guard: #b45309; --exit: #c2410c;
  --db: #0f766e; --db-bg: #d8f1ed; --http: #1d4ed8; --http-bg: #e0e8fb;
  /* #15803d on #dcf3e3 is 4.29:1. Same hue, lower lightness. */
  --add: #147c3b; --add-bg: #dcf3e3; --del: #b91c1c; --del-bg: #f9e0e0;
  --good: #166534; --good-bg: #dcfce7;
  --warn: #92400e; --warn-bg: #fef3c7;
  --bad: #991b1b; --bad-bg: #fee2e2;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 15px/1.5 "Familjen Grotesk", system-ui, sans-serif; font-synthesis: none; }
b, strong { font-weight: 600; }
code { font-family: var(--font-mono); }
a { color: var(--accent); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.top { border-bottom: 1px solid var(--line); background: var(--card); }
.top .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--fg); text-decoration: none; }
.brand svg { align-self: center; }
.tag { margin: 0; color: var(--muted); }
.home { font-size: 14px; color: var(--muted); text-decoration: none; }
.home:hover { color: var(--fg); text-decoration: underline; }
.theme { font: inherit; font-size: 14px; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.theme.end { margin-left: auto; }
/* Icon buttons in the header: the settings cog and the sun / moon. The moon shows in light
   mode (it turns dark on), the sun in dark mode. */
.top .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 8px; }
.top .icon-btn::after { content: none; }
.top .icon-btn:hover, .top .icon-btn[aria-expanded="true"] { border-color: var(--muted); }
.theme .i-sun { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: block; }
:root[data-theme="dark"] .theme .i-moon { display: none; }
.top .settings .vopts-panel { left: auto; right: 0; }
.top .account { margin-right: 0; }
.top .grow { flex: 1; }
/* The footer, on every page: the landing page's. */
.foot { margin-top: 48px; border-top: 1px solid var(--line); color: var(--muted); font: 13px var(--font-mono); }
.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding-top: 24px; padding-bottom: 40px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot .foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; }
.foot a:hover { color: var(--fg); text-decoration: underline; }
body.focus .foot { display: none; }
.theme:hover { border-color: var(--muted); }
.account { margin-left: auto; display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.account .who { font-weight: 600; }
.account button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.account button:hover, .account a:hover { text-decoration: underline; }
.account a { text-decoration: none; }
.account .signin { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--fg); }

.ask { display: flex; gap: 8px; margin: 24px 0 8px; }
.box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.box:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.box input { flex: 1; min-width: 0; font: inherit; padding: 10px 2px; border: 0; background: transparent; color: var(--fg); outline: none; }
.scope { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--chip); font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 45%; }
.scope[hidden], .suggest[hidden] { display: none; }
.scope .label { overflow: hidden; text-overflow: ellipsis; }
.ask .scope button { border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1; padding: 2px 6px; }
.ask .scope button:hover { color: var(--fg); background: var(--line); }
.suggest { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .15); max-height: min(60vh, 520px); overflow: auto; }
.suggest .opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.suggest .opt[aria-selected="true"] { background: var(--chip); }
.suggest .main { font-family: var(--font-mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .opt.k-repo .main, .suggest .opt.k-action .main { font-family: inherit; font-size: 14px; font-weight: 600; }
.suggest .opt.k-action .main { color: var(--accent); }
.suggest .sub { grid-column: 1; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .aside { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 12px; white-space: nowrap; }
.suggest mark { background: none; color: var(--accent); font-weight: 700; }
.suggest .note { padding: 6px 10px; color: var(--muted); font-size: 13px; }
button { font: inherit; cursor: pointer; }
.ask button { padding: 10px 18px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-weight: 600; }
/* Its label follows the box (Draw PR #874, Map repository, Search): one width, so the box does not jump. */
.ask > button[type="submit"] { min-width: 10.5em; white-space: nowrap; }
/* The home page: the examples, then how it works. Both go once something is shown. */
body.has-results :is(.examples, .about, .priv) { display: none; }
/* ?u= in the address: loading.js marks <html> before first paint, so the picker never flashes. */
html.has-u :is(.examples, .about, .priv) { display: none; }
.examples { margin: 36px 0 40px; font-size: 14px; }
.examples > h2, .about > h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.01em; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.ex-lang { padding: 14px 16px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; }
.ex-lang h3 { margin: 0 0 6px; font-size: 15px; }
.ex-prs { grid-column: 1 / -1; }
.ex-prs h3 span { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 6px; }
.ex-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 28px; }
.ex-cols > div { min-width: 0; }
.ex-lang h4 { margin: 10px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ex-lang ul { list-style: none; margin: 0; padding: 0; }
.ex-lang li { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-lang li span { color: var(--muted); font-size: 12px; margin-left: 4px; }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 12px 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; position: sticky; top: 8px; z-index: 5; box-shadow: var(--shadow); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--fg); padding: 6px 12px; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.tgl { border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--fg); }
.tgl:hover { border-color: var(--muted); }
.tgl[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.tgl[hidden] { display: none; }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.opt { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.opt select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--fg); }
/* Its own line under the controls, so the Key and the ? stay in the first row's corner. */
.summary { order: 2; flex: 1 0 100%; margin: 0; color: var(--muted); font-size: 14px; }

.status { min-height: 1.5em; color: var(--muted); }
.status.error { color: var(--bad); }
.status a { color: inherit; font-weight: 600; }

.results { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.results > * { min-width: 0; }
.results.with-files { grid-template-columns: 280px minmax(0, 1fr); }
.results > .hotspots { grid-column: 1 / -1; }
.files { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 13px; }
.files a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 6px; color: var(--fg); text-decoration: none; }
.files a:hover { background: var(--chip); }
.files a .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.files a.empty { color: var(--muted); }
.files .path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }

.file { margin: 0 0 28px; scroll-margin-top: calc(var(--sticky-h, 104px) + 20px); } /* below the sticky controls (--sticky-h is measured in app.js) */
@media (max-width: 520px) { .file { scroll-margin-top: 8px; } }
.file.flash > h2 { animation: dflash 1.6s ease-out; }
.file > h2 { font-family: var(--font-title); font-size: 16px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
.file > h2 small { color: var(--muted); font-weight: 400; }
.file .note { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.cards { display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.card header { position: relative; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.card h3 { margin: 0; flex: 1 1 auto; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.45; overflow-wrap: break-word; min-width: 0; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card h3 .line { color: var(--muted); font-weight: 400; white-space: nowrap; }
.card h3 .params { color: var(--muted); font-weight: 400; }
.card .cog { flex: none; }
.card .cog[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
/* Folding: the disclosure button leads the name, and a folded card is its header alone. */
.card h3 .disclose { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 22px; height: 22px; margin: -2px 4px -2px -4px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.card h3 .disclose:hover { background: var(--chip); color: var(--fg); }
.card h3 .disclose::before { content: "▸"; font-size: 14px; line-height: 1; transition: transform .12s; }
.card h3 .disclose[aria-expanded="true"]::before { transform: rotate(90deg); }
.card:has(> header .disclose) > header { cursor: pointer; }
.card.collapsed > :not(header) { display: none; }
.card.collapsed > header { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .card h3 .disclose::before { transition: none; } }
/* A 44px touch target; the negative margins keep the header row its own height. */
@media (pointer: coarse), (max-width: 860px) { .card h3 .disclose { width: 44px; height: 44px; margin: -12px 0 -12px -14px; } }
/* Focus, the copy icon and the ⋯, one cluster at the end of the header. Copy and ⋯ show on hover and focus, and always for a finger. They keep their box so the row does not jump. */
.card-acts { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.card-acts .image, .card-acts .copylink { opacity: 0; transition: opacity .12s; }
.card:hover .card-acts .image, .card:focus-within .card-acts .image, .card-acts .image[open],
.card:hover .card-acts .copylink, .card:focus-within .card-acts .copylink, .card-acts .copylink:focus-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) { .card-acts .image, .card-acts .copylink { opacity: 1; } }
.card .image { position: relative; z-index: 3; }
.card .image summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; margin: 0; border-radius: 6px; color: var(--muted); font-size: 16px; line-height: 1; user-select: none; }
.card .image summary::-webkit-details-marker { display: none; }
.card .image summary:hover, .card .image[open] summary { color: var(--fg); background: var(--chip); }
.card .image-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 2; display: flex; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.card .image-menu a, .card .image-menu button { font: inherit; font-size: 12px; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); text-decoration: none; line-height: 22px; cursor: pointer; }
.card .image-menu a:hover, .card .image-menu button:hover { color: var(--fg); border-color: var(--muted); }
.frame { padding: 10px 12px 4px; min-height: 60px; max-width: 100%; overflow-x: auto; }
.frame > .note { color: var(--muted); font-size: 13px; margin: 0; }
/* The toolbar's right end: the Key, Settings and the docs link, in the corner whatever wraps before them. */
.tbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tbar-end .vopts-panel { left: auto; right: 0; }
.key-panel { width: min(420px, calc(100vw - 32px)); }
.key-panel .sx { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; overflow: visible; }
/* The key's last note says how nesting shows in the look in use. */
/* The Key in the code look: rails, marks and washes drawn from the same tokens and classes as the drawing. */
.key-panel .key-code { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 100%; font-size: 12.5px; color: var(--fg); }
.key-panel .key-sec .key-h { margin: 0 0 4px; font-size: 12px; font-weight: 650; color: var(--fg); }
.key-panel .key-sec .key-h span { font-weight: 400; color: var(--muted); }
.key-panel .key-sec .key-h span::before { content: "\00b7\00a0"; }
.key-panel .key-sec ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.key-panel .key-sec li { display: flex; align-items: center; gap: 8px; line-height: 18px; min-width: 0; }
.key-panel .kr { flex: none; width: 10px; height: 16px; box-sizing: border-box; border-left: 1px solid var(--sx-rail-branch); }
.key-panel .kr-loop { border-left: 2px solid var(--sx-rail-loop); }
.key-panel .kr-try { border-left: 2px dashed var(--sx-rail-try); }
.key-panel .kr-held { border-left: 3px double var(--sx-rail-held); }
.key-panel .kr-inner { border-left: 1px dotted var(--sx-rail-inner); }
.key-panel .key-code .sx-mk { position: static; display: block; flex: none; width: 2ch; font-family: var(--font-mono); }
.key-panel .kw { flex: none; width: 2ch; text-align: center; font-weight: 700; font-family: var(--font-mono); padding: 0 6px; box-sizing: content-box; }
.key-panel .kw-add { color: var(--sx-add); background: var(--sx-add-bg); box-shadow: inset 3px 0 0 var(--sx-add); }
.key-panel .kw-del { color: var(--sx-del); background: var(--sx-del-bg); box-shadow: inset 3px 0 0 var(--sx-del); }
.key-panel .key-note { margin: 6px 0 0; color: var(--muted); }
.key-panel .key-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.more { align-self: flex-start; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 8px; padding: 6px 12px; }
/* A card's quiet note after its name: the script's role, or the condition a function exists under. */
.card .when { margin-left: 10px; color: var(--muted); font-size: 12px; font-family: var(--font-mono); font-weight: 400; }
.ttext { color: var(--muted); }

.about { margin: 28px 0 8px; }
.about > h2 { margin-bottom: 14px; }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.how-card, .read { padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.how-card h3, .read h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 16px; }
.how-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--chip); color: var(--accent); font-size: 15px; line-height: 1; }
.how-card p { margin: 0 0 8px; font-size: 14px; }
.how-card p:last-child { margin-bottom: 0; }
.read { margin-top: 14px; }
.read-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.read-grid li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 12px; font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.read-grid span { color: var(--muted); }
.read-sub { margin: 16px 0 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
.zoom-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; counter-reset: z; }
.zoom-steps li { counter-increment: z; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.zoom-steps li::before { content: counter(z); color: var(--accent); font: 600 11px var(--font-mono); }
.zoom-steps span { color: var(--muted); }
.langs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 14px; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.langs-label { font-size: 14px; color: var(--muted); }
.priv { margin: 0 4px 0; font-size: 13px; color: var(--muted); }
.chips-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips-row li { padding: 3px 10px; font: 500 12px var(--font-mono); color: var(--fg); background: var(--chip); border: 1px solid var(--line); border-radius: 999px; }
.about .k-add { color: #147c3b; } .about .k-del { color: #b91c1c; }
:root:not([data-theme="light"]) .about .k-add { color: #4ade80; } :root:not([data-theme="light"]) .about .k-del { color: #f87171; }
.fine { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.about .k-loop { color: #a78bfa; } .about .k-if { color: #60a5fa; } .about .k-switch { color: #38bdf8; } .about .k-guard { color: #fbbf24; }
/* Light: darker shades of the same hues, for 4.5:1 on the light panel. */
:root[data-theme="light"] .about .k-loop { color: #6d28d9; } :root[data-theme="light"] .about .k-if { color: #1d4ed8; } :root[data-theme="light"] .about .k-switch { color: #075985; } :root[data-theme="light"] .about .k-guard { color: #92400e; }

@media (max-width: 860px) {
  .results.with-files { grid-template-columns: 1fr; }
  .files { position: static; max-height: 240px; }
  .summary { margin-left: 0; width: 100%; }
  .tbar-end { width: 100%; margin-left: 0; justify-content: flex-start; }
  .tbar-end .tgl, .tbar-end .vopts-btn, .listbar .tgl { height: 44px; min-height: 44px; }
  .listbar { justify-content: flex-start; }
  .card-acts { gap: 0; }
  .card-acts .spot-btn, .card-acts .copylink, .card .image summary { width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 0; }
  .card-acts .spot-btn { width: auto; padding: 0 10px; }
  .card .image-menu a, .card .image-menu button { height: 44px; min-width: 44px; line-height: 42px; }
}
@media (max-width: 520px) {
  .ask { flex-direction: column; }
  .scope { max-width: 55%; }
  .controls { position: static; }
}

/* ---------- views and location ---------- */
body[data-view="guide"] .fn-only { display: none; }
body:not([data-view="guide"]) .map-only { display: none; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 4px 0 0; font-size: 14px; font-family: var(--font-mono); }
.crumbs[hidden] { display: none; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--muted); }
.crumbs .here { margin-left: 8px; color: var(--muted); font-family: "Familjen Grotesk", system-ui, sans-serif; font-size: 13px; }
.crumbs .branch { position: relative; align-self: center; max-width: min(16em, 55vw); font-family: "Familjen Grotesk", system-ui, sans-serif; }
.crumbs .branch > summary { cursor: pointer; list-style: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; }
.crumbs .branch > summary::-webkit-details-marker { display: none; }
.crumbs .branch > summary::after { content: "▾"; margin-left: 6px; color: var(--muted); font-weight: 400; }
.crumbs .branch[open] > summary { border-color: var(--muted); }
.crumbs .branch-panel { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); width: min(320px, calc(100vw - 32px)); max-height: min(50vh, 360px); overflow: auto; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .15); }
.crumbs .branch-panel input { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--fg); }
.crumbs .branch-list { display: flex; flex-direction: column; }
.crumbs .branch-opt { display: block; width: 100%; text-align: left; font: inherit; font-family: var(--font-mono); font-size: 13px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs .branch-opt:hover, .crumbs .branch-opt:focus { background: var(--chip); }
.crumbs .branch-opt[aria-current="true"] { font-weight: 700; }
.crumbs .branch-note { margin: 4px 8px; color: var(--muted); font-size: 13px; }
.cmap-wrap[hidden], .results[hidden] { display: none; }

/* ---------- component map ---------- */
:root {
  --heat-calm: #22c55e; --heat-warm: #f59e0b; --heat-hot: #f87171;
  --edge: #64748b; --edge-type: #4b5563; --edge-cycle: #f87171; --edge-hl: #60a5fa;
}
:root[data-theme="light"] {
  --heat-calm: #16a34a; --heat-warm: #d97706; --heat-hot: #dc2626;
  --edge: #94a3b8; --edge-type: #a5b4c8; --edge-cycle: #dc2626; --edge-hl: #2563eb;
}

.cmap-summary { margin: 4px 0 6px; font-size: 14px; color: var(--muted); }
.cmap-summary .bad { color: var(--bad); }
.cmap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.cmap-legend .litem { display: inline-flex; align-items: center; gap: 6px; }
.cmap-legend .lheat { display: inline-flex; align-items: center; gap: 5px; }
.cmap-legend .lheat::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--h); }
.cmap-legend .lnote { flex-basis: 100%; }
.heat-calm { --h: var(--heat-calm); } .heat-warm { --h: var(--heat-warm); } .heat-hot { --h: var(--heat-hot); }

.cmap-scroll { overflow: auto; padding: 4px 4px 24px; margin: 0 -4px; }
.cmap { position: relative; margin: 0 auto; }
.cmap-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.cedge { fill: none; stroke: var(--edge); stroke-linecap: round; }
.cedge.type { stroke: var(--edge-type); stroke-dasharray: 5 4; }
.cedge.dynamic { stroke-dasharray: 1.5 4; }
.cedge.cycle { stroke: var(--edge-cycle); }
.chit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: help; }
.ahead { fill: var(--edge); } .ahead.type { fill: var(--edge-type); } .ahead.cycle { fill: var(--edge-cycle); }
.ccount { font: 600 12px var(--font-title); fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.cmap.focusing .cedge-g:not(.hl) { opacity: .15; }
.cmap.focusing .cnode:not(.hl) { opacity: .45; }
.cedge-g.hl .cedge:not(.cycle) { stroke: var(--edge-hl); }
.cedge-g.hl .ccount { fill: var(--fg); }
.cmap-loose { position: absolute; left: 0; right: 0; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 2px; }

.cnode {
  position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 8px 14px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  cursor: pointer; font-size: 12px; transition: opacity .12s, border-color .12s;
}
.cnode::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--h); }
.cnode:hover, .cnode:focus-visible { border-color: var(--accent); outline: none; }
.cnode.cycle { border-color: color-mix(in srgb, var(--edge-cycle) 55%, var(--line)); }
.cnode header { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.cname { display: flex; min-width: 0; font-family: var(--font-title); font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.cname b { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cname .cdir { color: var(--muted); overflow: hidden; text-overflow: ellipsis; direction: rtl; min-width: 0; }
.ckind { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cbar { height: 5px; border-radius: 3px; background: var(--chip); overflow: hidden; margin: 2px 0; }
.cbar i { display: block; height: 100%; background: var(--h); opacity: .8; }
.cstat { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstat.cx b { color: var(--fg); }
.cworst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cworst code { font-size: 12px; }
.cworst .chip { padding: 0 6px; font-size: 11px; }
.cio { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: auto; align-items: center; }
.ctag { font-size: 10px; font-weight: 600; line-height: 15px; padding: 0 6px; border-radius: 999px; }
.ctag.t-db { color: #5eead4; background: #0f2f2c; } .ctag.t-dbw { color: #fdba74; background: #3a210f; }
.ctag.t-http { color: #93c5fd; background: #172a4a; } .ctag.t-conc { color: #f9a8d4; background: #3d1530; }
.ctag.t-cycle { color: var(--bad); background: var(--bad-bg); }
.cext { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cinside { position: absolute; right: 8px; bottom: 7px; font-size: 11px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); }
.cinside:hover { color: var(--fg); border-color: var(--muted); }
:root[data-theme="light"] .ctag.t-db { color: #0f766e; background: #ccfbf1; } :root[data-theme="light"] .ctag.t-dbw { color: #9a3412; background: #ffedd5; }
:root[data-theme="light"] .ctag.t-http { color: #1d4ed8; background: #dbeafe; } :root[data-theme="light"] .ctag.t-conc { color: #be185d; background: #fce7f3; }
.cnode:has(.cinside) .cio { padding-right: 78px; }

/* change map: a pull request's components, what it added, changed and removed */
.cedge.added { stroke: var(--add); }
.cedge.removed { stroke: var(--del); stroke-dasharray: 6 4; }
.ahead.added { fill: var(--add); } .ahead.removed { fill: var(--del); }
.ccount.ch-added { fill: var(--add); } .ccount.ch-removed { fill: var(--del); } .ccount.ch-changed { fill: var(--fg); }
.cedge-g.hl .cedge.added, .cedge-g.hl .cedge.removed { stroke-width: 3; }
.cnode.unchg { opacity: .62; box-shadow: none; }
.cnode.unchg:hover, .cnode.unchg:focus-visible { opacity: 1; }
.cmap.focusing .cnode.unchg.hl { opacity: .85; }
.cnode.chg-added { border-color: var(--add); }
.cnode.chg-changed { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); }
.cnode.chg-removed { border-color: var(--del); border-style: dashed; }
.cnode.chg-removed .cname b { text-decoration: line-through; }
.cchg { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; min-height: 18px; font-size: 11px; }
.cchg-files { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cchg .bad { color: var(--bad); } .cchg .good { color: var(--good); }
.ctag.t-added { color: var(--add); background: var(--add-bg); }
.ctag.t-removed { color: var(--del); background: var(--del-bg); }
.ctag.t-changed { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cmap-legend .ctag { font-size: 11px; }
.dmapfold { margin: 0 0 22px; padding: 10px 0 0; border-top: 1px solid var(--line); }
.dmapfold > summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.dmapfold > summary span { font-weight: 400; font-size: 13px; color: var(--muted); }
.dguide { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 80ch; }
/* A pull request's files and changed functions, on the left. */
.files .dnav-top { font-weight: 600; }
.files .dnav-head { margin: 8px 6px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.files a.on { background: var(--chip); }
/* The explorer rows: a chevron on folders, a language badge on files, one indent per level. */
.files .ft-row { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; padding: 3px 6px 3px calc(6px + var(--d, 0) * 14px); border: 0; border-radius: 6px; background: transparent; color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.files .ft-row[hidden] { display: none; }
.files .ft-row:hover { background: var(--chip); }
.files .ft-row .path { direction: ltr; min-width: 0; flex: 1 1 auto; }
.files .ft-row .count { flex: none; }
.ft-dir { font-weight: 500; }
.ft-chev { flex: none; width: 14px; height: 14px; display: inline-grid; place-items: center; color: var(--muted); }
.ft-chev::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .1s; }
.ft-dir[aria-expanded="true"] .ft-chev::before { transform: rotate(45deg); }
.ft-ico { flex: none; width: 22px; height: 14px; display: inline-grid; place-items: center; border-radius: 3px; font: 600 8px/1 var(--font-mono); color: var(--muted); background: var(--chip); }
.ft-ico:empty::before { content: ""; width: 6px; height: 8px; border: 1.5px solid currentColor; border-radius: 1px; opacity: .6; }
.ft-ts { color: #3178c6; background: color-mix(in srgb, #3178c6 16%, transparent); }
.ft-js { color: #9a7b00; background: color-mix(in srgb, #d4a600 20%, transparent); }
.ft-py { color: #3572a5; background: color-mix(in srgb, #3572a5 16%, transparent); }
.ft-go { color: #0a8fb0; background: color-mix(in srgb, #00a5ce 16%, transparent); }
.ft-j { color: #b07219; background: color-mix(in srgb, #b07219 16%, transparent); }
.ft-kt { color: #8a5cf0; background: color-mix(in srgb, #a97bff 18%, transparent); }
.ft-cs { color: #178600; background: color-mix(in srgb, #178600 16%, transparent); }
:root:not([data-theme="light"]) .ft-ts { color: #6ea8f0; } :root:not([data-theme="light"]) .ft-js { color: #f0cf55; } :root:not([data-theme="light"]) .ft-py { color: #7fb3e6; } :root:not([data-theme="light"]) .ft-go { color: #5fd3ee; } :root:not([data-theme="light"]) .ft-j { color: #e6a25a; } :root:not([data-theme="light"]) .ft-kt { color: #c2a5ff; } :root:not([data-theme="light"]) .ft-cs { color: #6fd060; }
.dnav-st { flex: none; width: 1.6em; text-align: center; font: 600 11px var(--font-mono); border-radius: 4px; color: var(--muted); }
.dnav-st.st-added { color: var(--add); } .dnav-st.st-removed { color: var(--del); } .dnav-st.st-modified, .dnav-st.st-renamed { color: var(--accent); }
.dnav-file > a .path { flex: 1; }
.dnav-fns a { padding: 2px 6px 2px 30px; font: 12px var(--font-mono); justify-content: flex-start; }
.dnav-fns a .path { direction: ltr; }
.dnav-tests[hidden] { display: none; }
.dnav-mk { flex: none; width: 1.2em; font-weight: 700; color: var(--muted); }
.dnav-mk.st-added { color: var(--add); } .dnav-mk.st-removed { color: var(--del); } .dnav-mk.st-modified { color: var(--accent); }
.files .dnav-other { margin-top: 6px; color: var(--muted); }
.dcard.flash { animation: dflash 1.6s ease-out; }
.dmap .note { margin: 6px 0; }
.dfile, .dcard { scroll-margin-top: calc(var(--sticky-h, 84px) + 20px); } /* below the sticky controls */
@media (max-width: 520px) { .dfile, .dcard { scroll-margin-top: 8px; } }
.dfile.flash > h2 { animation: dflash 1.6s ease-out; }
@keyframes dflash { from { background: color-mix(in srgb, var(--accent) 25%, transparent); } to { background: transparent; } }
.controls[hidden] { display: none; }

/* ---------- zoom ---------- */
.zoom { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.zoom .zstep { border: 0; background: transparent; color: var(--fg); font-size: 16px; line-height: 1; padding: 0 12px; }
.zoom .zstep:hover:not(:disabled) { background: var(--chip); }
.zoom .zstep:disabled { color: var(--muted); opacity: .45; cursor: default; }
.zoom .zlevels { display: inline-flex; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.zoom .zlevels button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; font-size: 13px; position: relative; }
.zoom .zlevels button + button::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; border-left: 1px solid var(--line); }
.zoom .zlevels button:hover { color: var(--fg); }
.zoom .zlevels button[aria-checked="true"] { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.zoom .zlevels button[aria-checked="true"]::before, .zoom .zlevels button[aria-checked="true"] + button::before { border-color: transparent; }

/* The Denoised and Full levels: the function's own lines. */
/* The schematic's own font and line height (.sx), so zooming between Schematic and code changes what is drawn, not the text size. */
.sx-codeview pre { margin: 0; font: inherit; tab-size: 2; overflow-x: auto; } /* a tab indents as far as a block does in the schematic levels */
.sx-codeview .cl { display: block; white-space: pre; padding-right: 12px; }
.sx-codeview .cl i { display: inline-block; min-width: 4ch; font-style: normal; color: var(--muted); opacity: .6; padding: 0; user-select: none; text-align: right; } /* the same gutter as the schematic levels (--gut) */
/* Statement marks: a glyph column after the line number. Denoised also recolours the text. */
.sx-codeview .cl .cm { display: inline-block; margin-right: 1ch; width: 2ch; text-align: center; font-weight: 600; color: var(--sx-muted); font-style: normal; user-select: none; }
.sx-codeview .mk-throw .cm::before { content: "!"; color: var(--sx-mark-throw, #3F5B7D); }
.sx-codeview .mk-acquire .cm::before { content: "\228F"; color: var(--sx-mark-lock, #7A3F76); }
.sx-codeview .mk-release .cm::before { content: "\2290"; color: var(--sx-mark-lock, #7A3F76); }
.sx-codeview .mk-wait .cm::before { content: "\25F7"; } .sx-codeview .mk-notify .cm::before { content: "\2197"; }
.sx-codeview[data-level="denoised"] .mk-throw { color: var(--sx-mark-throw, #3F5B7D); font-weight: 500; }
.sx-codeview[data-level="denoised"] :is(.mk-acquire, .mk-release) { color: var(--sx-mark-lock, #7A3F76); font-weight: 500; }
.sx-codeview .mk-return .cm::before { content: "\23CE"; } .sx-codeview .mk-write .cm::before { content: "\25CF"; color: var(--sx-fg); }
.sx-codeview[data-level="denoised"] .cl.t1 { font-weight: 500; }
/* The contract under a card's name (plan 2026-10-30, 1.8c): one line while folded, rows when open. */
.card > header:has(> .contract) { flex-wrap: wrap; row-gap: 2px; } /* the contract takes a row of its own, after the name and the chips */
.card > header .contract-line { order: 9; flex: 0 0 100%; margin: 0; font-size: 13px; color: var(--muted); }
.card > header .contract { order: 9; flex: 0 0 100%; display: flex; flex-direction: column; gap: 1px; margin: 4px 0 4px; }
.card.collapsed > header .contract, .card:not(.collapsed) > header .contract-line { display: none; }
/* A row: glyph, label, then the items as running text that wraps under the label (a hanging indent). */
.contract .ct { --ctw: calc(2ch + 11ch + 16px); display: block; padding: 2px 8px 2px calc(8px + var(--ctw)); text-indent: calc(-1 * var(--ctw)); text-align: left; font: inherit; font-size: 14px; color: var(--fg); background: none; border: 0; border-radius: 8px; }
.contract .ct > * { text-indent: 0; }
.contract .ctm { display: inline-block; width: 2ch; margin-right: 8px; font-family: var(--font-mono); font-weight: 600; text-align: center; }
.contract .ctl { display: inline-block; width: 11ch; margin-right: 8px; color: var(--muted); white-space: nowrap; }
.contract .cti { font-family: var(--font-mono); font-size: 13px; margin-right: .6ch; }
.contract .cti:not(:last-child)::after { content: " \00B7"; color: var(--muted); }
.contract .cti.none { font-family: inherit; color: var(--muted); }
.contract .cg-raises .ctm { color: var(--sx-mark-throw, #3F5B7D); } .contract .cg-holds .ctm { color: var(--sx-mark-lock, #7A3F76); }
/* The contract as one line under a signature: a toggle per group; it wraps, it is never cut. */
.ctline { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.ctg { display: inline; margin: 0 1.5ch 0 0; padding: 1px 3px; font: inherit; font-family: var(--font-mono); color: inherit; text-align: left; background: none; border: 0; border-radius: 4px; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; overflow-wrap: anywhere; }
.ctg .ctm { font-weight: 600; }
.ctg:hover { color: var(--fg); }
.ctg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ctg[aria-pressed="true"] { color: var(--fg); background: color-mix(in srgb, var(--sx-pick, #2563eb) 16%, transparent); }
.ctg.cg-raises .ctm { color: var(--sx-mark-throw, #3F5B7D); } .ctg.cg-holds .ctm { color: var(--sx-mark-lock, #7A3F76); }
.ctg .chg-add { color: var(--add); } .ctg .chg-del { color: var(--del); }
#wrap-opt[hidden] { display: none; }

/* After a zoom, the code that stayed in place is marked for a moment. */
.zoom-focus { animation: zoom-focus .9s ease-out; }
@keyframes zoom-focus { from { box-shadow: inset 0 0 0 2px var(--accent); background-color: color-mix(in srgb, var(--accent) 14%, transparent); } to { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .zoom-focus { animation: none; } }
.zoom-q { align-self: center; color: var(--muted); font-size: 13px; font-style: italic; }
.zoom-help { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--line, currentColor); border-radius: 50%; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.zoom-help:hover, .zoom-help:focus-visible { color: var(--fg); border-color: var(--fg); }
.zr-q { display: none; }
@media (max-width: 520px) { .zoom .zlevels button { padding: 6px 7px; font-size: 12px; } .zoom .zstep { padding: 0 9px; } }

/* ---------- floating zoom slider (left edge, functions view) ---------- */
.zrail { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 16px rgba(15, 23, 42, .12); backdrop-filter: blur(6px); }
body:not(.has-results) .zrail, body:not([data-view="functions"]):not([data-view="diff"]) .zrail { display: none; }
.zr-step { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); font-size: 16px; line-height: 1; padding: 0; }
.zr-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.zr-step:disabled { opacity: .4; cursor: default; }
.zr-track { position: relative; display: flex; align-items: stretch; gap: 4px; height: 176px; }
/* A vertical range: top is the most zoomed in (Code). */
.zr-track input[type="range"] { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.zr-labels { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; justify-content: space-between; }
.zr-labels button { border: 0; background: transparent; color: var(--muted); font-size: 11px; padding: 0 4px; text-align: left; line-height: 1.2; border-radius: 4px; }
.zr-labels button:hover { color: var(--fg); }
.zr-labels button[aria-current="true"] { color: var(--accent); font-weight: 700; }
@media (max-width: 760px) {
  .zrail { left: 6px; padding: 6px 4px; }
  .zr-labels { display: none; }
  .zr-track { height: 140px; }
  .zr-step { width: 24px; height: 24px; }
  body.has-results:is([data-view="functions"], [data-view="diff"]) main.wrap { padding-left: 46px; }
}

/* ---------- diffs (pull requests, commits, comparisons) ---------- */
body[data-view="diff"] .list-only { display: none; }
:root { --add: #4ade80; --add-bg: #0f2a22; --del: #f87171; --del-bg: #331821; }
:root[data-theme="light"] { --add: #147c3b; --add-bg: #dcf3e3; --del: #b91c1c; --del-bg: #f9e0e0; }
.dhead { margin: 0 0 16px; }
.dhead h1 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.dhead h1 a { color: var(--fg); text-decoration: none; }
.dhead h1 a:hover { text-decoration: underline; }
.dnum { color: var(--muted); font-weight: 400; }
.dmeta { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.dmeta code { font-size: 12px; background: var(--chip); padding: 1px 6px; border-radius: 6px; color: var(--fg); }
.dstate { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: #64748b; text-transform: capitalize; }
.dstate.s-open { background: #16a34a; } .dstate.s-merged { background: #8250df; } .dstate.s-closed { background: #cf222e; } .dstate.s-draft { background: #6e7781; }
.dadd { color: var(--add); font-weight: 600; font-variant-numeric: tabular-nums; } .ddel { color: var(--del); font-weight: 600; font-variant-numeric: tabular-nums; }
.dbody { margin: 4px 0 8px; font-size: 14px; } .dbody .more { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; } .dbody p { white-space: pre-wrap; margin: 6px 0 0; }
.dsum { margin: 0; font-size: 14px; } .dsum .bad { color: var(--bad); } .dsum .good { color: var(--good); } .dprog { color: var(--muted); }
.dfile { margin: 0 0 22px; }
.dfile > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dfile > h2 a { color: var(--fg); font-family: var(--font-mono); }
.dfile > h2 small { color: var(--muted); font-weight: 400; }
.dst { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--muted); text-transform: capitalize; }
.dst.st-added { background: var(--add-bg); color: var(--add); } .dst.st-removed { background: var(--del-bg); color: var(--del); }
.dst.st-modified, .dst.st-renamed { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.dtoggle { margin-left: auto; font-size: 12px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); }
.dtoggle[aria-expanded="true"] { color: var(--fg); border-color: var(--muted); }
.dpatch { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.dpatch[hidden] { display: none; }
.dpatch-rows { margin: 0; padding: 4px 0; max-height: 60vh; overflow: auto; font: 12px/1.5 var(--font-mono); }
.pl { display: block; white-space: pre; padding-right: 12px; }
.pl i { display: inline-block; width: 4.5ch; font-style: normal; text-align: right; color: var(--muted); padding-right: 8px; user-select: none; }
.pl b { display: inline-block; width: 2ch; font-weight: 400; color: var(--muted); user-select: none; }
.pl.k-add { background: var(--add-bg); } .pl.k-add b { color: var(--add); }
.pl.k-del { background: var(--del-bg); } .pl.k-del b { color: var(--del); }
.pl.k-hunk { color: var(--muted); background: var(--chip); padding: 2px 12px; }
.dcards { display: flex; flex-direction: column; gap: 12px; }
.dcard .chips .dst { font-size: 11px; }
/* A changed function's header: the name keeps a readable width (about 26 characters) and the chips wrap below it. */
.dcard header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dcard header h3 { flex: 1 1 26ch; min-width: min(26ch, 100%); }
.dcard header .chips { flex: 0 1 auto; min-width: 0; }
.dcols { display: grid; grid-template-columns: 1fr 1fr; }
.dcols.one { grid-template-columns: 1fr; }
.dcol { min-width: 0; }
.dcol + .dcol { border-left: 1px solid var(--line); }
.dlabel { padding: 4px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.dlabel b { color: var(--fg); }
@media (max-width: 1100px) { .dcols { grid-template-columns: 1fr; } .dcol + .dcol { border-left: 0; border-top: 1px solid var(--line); } }
.dother { margin: 8px 0 24px; } .dother > summary { cursor: pointer; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
/* Changed rows and block headers: green after, red before. */
.sx .chg-add, .sx-codeview .chg-add { background-image: linear-gradient(var(--add-bg), var(--add-bg)); box-shadow: inset 3px 0 0 var(--add); }
.sx .chg-del, .sx-codeview .chg-del { background-image: linear-gradient(var(--del-bg), var(--del-bg)); box-shadow: inset 3px 0 0 var(--del); }

/* Unified function diffs */
.dunified .frame { padding-top: 8px; }
.dcols[hidden], .dunified[hidden] { display: none; }
.dside { font-size: 12px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); }
.dside[aria-pressed="true"] { color: var(--fg); border-color: var(--muted); }
.sx-codediff .cl i { width: 4.5ch; padding: 0; }
.sx-codediff .cl .cm { margin-right: 6px; }
.sx-codediff .cl .sx-g { width: 2ch; margin: 0; }
/* A folded run of unchanged lines (or the file around the function): its count and the ↓ ↑ Show all buttons. */
.sx-codediff .cl-gap { display: flex; align-items: center; gap: 6px; padding: 2px 12px; color: var(--muted); font-style: italic; background: color-mix(in srgb, var(--line) 35%, transparent); }
.sx-codediff .cl-gap button { font: 12px var(--font-sans); font-style: normal; padding: 0 8px; min-height: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; }
.sx-codediff .cl-gap button:hover { border-color: var(--accent); color: var(--accent); }
.sx-codediff .cl-gap button[hidden] { display: none; }
.sx-codediff .cl-out { opacity: .75; }
.sx-codeview .chg-add { background-image: linear-gradient(var(--sx-add-bg), var(--sx-add-bg)); box-shadow: inset 3px 0 0 var(--sx-add); }
.sx-codeview .chg-del { background-image: linear-gradient(var(--sx-del-bg), var(--sx-del-bg)); box-shadow: inset 3px 0 0 var(--sx-del); }

/* One function's change on its own (?fn=…). */
body.focus .top, body.focus .ask, body.focus .ex-lead, body.focus #examples, body.focus .crumbs, body.focus .controls, body.focus .zrail,
body.focus .dhead, body.focus .dmapfold, body.focus .files, body.focus .dother, body.focus .dfile > h2, body.focus .dfile .more, body.focus .about { display: none !important; }
body.focus main.wrap { padding: 12px !important; max-width: none; }

.prose { max-width: 760px; padding-top: 24px; padding-bottom: 48px; }
.prose h1 { font-size: 28px; margin: 8px 0 16px; }
.prose h2 { font-size: 18px; margin: 28px 0 8px; }
.prose li { margin-bottom: 8px; }

/* schematic.css loads first and still has GitHub-dark --sx-* tokens. These beat it. */
:root:not([data-theme="light"]) .sx {
  --sx-fg: var(--fg);
  --sx-muted: var(--muted);
  --sx-title: var(--fg);
  --sx-stroke: var(--line);
  --sx-d0: var(--d0); --sx-d1: var(--d1); --sx-d2: var(--d2); --sx-d3: var(--d3);
  --sx-d4: #4a3030; --sx-d5: #5a2c30; --sx-d6: #6a282c;
  --sx-bar-loop: var(--loop); --sx-bar-if: var(--if); --sx-guard: var(--guard);
  --sx-t-db: var(--db); --sx-t-db-bg: var(--db-bg);
  --sx-t-http: var(--http); --sx-t-http-bg: var(--http-bg);
  --sx-mark-throw: #8FB0D4; --sx-mark-lock: #D08FCB;
  --sx-add: #4ade80; --sx-add-bg: var(--add-bg);
  --sx-del: #f87171; --sx-del-bg: var(--del-bg);
}
:root[data-theme="light"] .sx {
  --sx-fg: var(--fg);
  --sx-muted: var(--muted);
  --sx-title: var(--fg);
  --sx-stroke: var(--line);
  --sx-mark-throw: #3F5B7D; --sx-mark-lock: #7A3F76;
  --sx-d0: var(--d0); --sx-d1: var(--d1); --sx-d2: var(--d2); --sx-d3: var(--d3);
  --sx-d4: #ffd6d6; --sx-d5: #ffc4c4; --sx-d6: #ffb3b3;
  --sx-bar-loop: var(--loop); --sx-bar-if: var(--if); --sx-guard: var(--guard);
  --sx-t-db: var(--db); --sx-t-db-bg: var(--db-bg);
  --sx-t-http: var(--http); --sx-t-http-bg: var(--http-bg);
  --sx-add: var(--add); --sx-add-bg: var(--add-bg);
  --sx-del: var(--del); --sx-del-bg: var(--del-bg);
}


.lanes-details { position: sticky; bottom: 8px; z-index: 5; }
.ldfns { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-family: var(--font-mono); font-size: 12px; max-height: 160px; overflow: auto; }
.dmapbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 6px 0 10px; }
.dmapbar select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--fg); }
.dmapbar select[hidden] { display: none; }

/* ---------- links to a function ---------- */
.card { scroll-margin-top: calc(var(--sticky-h, 104px) + 20px); }
.card.flash { animation: dflash 1.6s ease-out; }
.copylink { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; font: inherit; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.copylink:hover { color: var(--fg); background: var(--chip); }

/* ---------- a checkout on this machine (web/client/local-feedback.ts) ---------- */
body[data-local] a[href^="https://github.com/"] { pointer-events: none; color: inherit; text-decoration: none; }
.ask-claude { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; color: var(--accent); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.ask-claude:hover { background: var(--chip); }
.sig .ask-claude { width: 22px; height: 22px; margin-left: 6px; vertical-align: middle; opacity: 0; transition: opacity .12s; }
.fn:hover > .sig .ask-claude, .sig .ask-claude:focus-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) { .sig .ask-claude { opacity: 1; } }
.ask-claude-box { display: grid; gap: 8px; margin: 8px 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.ask-claude-box blockquote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--accent); color: var(--muted); font: 12px/1.4 var(--font-mono); white-space: pre-wrap; max-height: 8em; overflow: auto; }
.ask-claude-box textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px; resize: vertical; }
.ask-claude-box div { display: flex; gap: 8px; align-items: center; }
.ask-claude-box button { font: inherit; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--chip); color: var(--fg); cursor: pointer; }
.ask-claude-box button[type="submit"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.ask-claude-status { color: var(--muted); font-size: 12px; }
.card.collapsed > .ask-claude-box { display: grid; }
/* The two places of a local checkout (web/client/local-view.ts) */
.local-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--chip); }
.local-switch button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; padding: 4px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.local-switch button[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.local-count { font-weight: 400; font-size: 12px; color: var(--muted); }
.local-count:empty { display: none; }
.local-whole, .local-drop, .local-clear { font: inherit; font-size: 12px; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle; }
.local-drop { padding: 2px 6px; }
.local-whole:hover, .local-drop:hover, .local-clear:hover { color: var(--fg); background: var(--chip); }
@media (pointer: coarse) { .local-switch button { min-height: 44px; } .local-drop, .local-whole, .local-clear { min-height: 32px; } }
@media (pointer: coarse) { .card-acts .ask-claude { width: 44px; min-width: 44px; height: 44px; } }

/* ---------- toolbar: the zoom label and the View options panel ---------- */
.zoom-label { font-weight: 600; color: var(--fg); }
.vopts { position: relative; }
.vopts-btn { display: inline-flex; align-items: center; font: inherit; font-size: 14px; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; cursor: pointer; }
.vopts-btn::after { content: "▾"; margin-left: 6px; color: var(--muted); }
.vopts-btn[aria-expanded="true"], .vopts-btn:hover { border-color: var(--muted); }
.vopts-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 240px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.vopts-panel[hidden] { display: none; }
.vopts-panel .opt { color: var(--fg); }
/* Hotspots: the most complex functions so far, above the component map. */
.hotspots { margin: 0 0 14px; border: 1px solid var(--line, #d0d7de); border-radius: 8px; padding: 8px 12px; }
.hotspots[hidden] { display: none; }
.hotspots summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.hotspots ol { margin: 8px 0 0; padding-left: 26px; display: grid; gap: 4px; font-size: 13px; }
.hotspots li { padding-left: 2px; }
.hotspots .hs-name { font-family: ui-monospace, monospace; font-weight: 600; margin-right: 8px; }
.hotspots .chip { margin-right: 8px; }
.hotspots .hs-file { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.suggest .opt.k-function .main { font-family: ui-monospace, monospace; }
.status .linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

/* Accessibility: the keyboard ring and reduced motion, as on the landing page. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-fg, #fff); font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }
#results:focus, #map:focus, #guide:focus, #main:focus { outline: none; }
.phone-note { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--muted); }
.phone-note[hidden] { display: none; }
.phone-note p { margin: 0; flex: 1; }
.phone-note button { font: inherit; padding: 4px 12px; min-height: 28px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--fg); cursor: pointer; }
@media (min-width: 861px) { .phone-note { display: none !important; } }

/* Targets: at least 24x24 everywhere, 44px tall for a finger. */
.ex-lang li a { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; vertical-align: top; }
.ex-lang li { padding: 0; }
.dseg button { min-height: 24px; }
.dseen { min-height: 24px; }
.dseen input { width: 16px; height: 16px; margin: 4px; }
.copylink { min-height: 24px; min-width: 24px; }
.files a { min-height: 24px; align-items: center; }
.crumbs a { display: inline-block; min-height: 24px; line-height: 24px; }
@media (pointer: coarse) {
  .ex-lang li a, .crumbs a, .top a, .top button, .files a, .dseg button, .dseen, .copylink, .controls button, .controls summary, .vopts-btn, .phone-note button, .skip { min-height: 44px; }
  .ex-lang li a, .crumbs a, .top a { display: inline-flex; align-items: center; line-height: 1.2; }
  .top .icon-btn { width: 44px; height: 44px; padding: 0; }
  .ex-lang li { padding: 0; }
  .dseen { padding: 0 8px; }
  .dseen input { width: 22px; height: 22px; }
  .copylink { min-width: 44px; }
}

/* A pull request's changed functions match the file column: no box, no fill, a hairline between them. The head is the
   signature line (status and counts on it), then one contract line; Focus, copy and the image menu are the focus bar's. */
.dcards { gap: 0; background: transparent; border: 0; border-radius: 0; padding: 0; }
.card.dcard { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.dcards > .dcard + .dcard { border-top: 1px solid var(--line); }
.dcard > header { padding: 8px 0 2px; border-bottom: 0; }
.dcard > header .ctline { order: 9; flex: 0 0 100%; margin: 0; }
.dcard > header .card-acts { order: 1; margin-left: auto; } /* the Focus icon rides the signature row, right-aligned */
.dcard > header .ctdelta, .dcard > header .chips { order: 2; }
.dcard .frame { padding: 2px 0 8px; min-height: 0; }
.dcard .frame .sx-head, .dcard .frame .sx-calls { display: none; } /* the signature is the head's; the calls are the bar's */
.ctg .cti.chg-add { color: var(--ct-add); font-weight: 600; }
.ctg .cti.chg-del { color: var(--ct-del); text-decoration: line-through; }

/* A file is one column (file-view.ts): signatures, contract lines, drawings and the code between them, in source
   order, in one gutter (--gut, the code view's own: number, mark, text). No box, no rule, no fill: a function starts
   at its signature line, in weight 500, and the space above it. */
.file > .cards { display: block; }
.sx-file { --gut: 7ch; font: 13px/1.55 var(--font-mono); color: var(--fg); }
.sx-file .fn { scroll-margin-top: calc(var(--sticky-h, 104px) + 20px); position: relative; }
.sx-file .fn + .fn, .sx-file .between + .fn, .sx-file .fn + .between + .fn, .sx-file .clsrow + .fn { margin-top: .6em; }
.sx-file .sig, .sx-file .clsrow { position: relative; padding: 0 12px 0 calc(var(--gut) + var(--dep, 0px)); min-height: 1.55em; overflow-wrap: anywhere; }
.sx-file .sig { font-weight: 500; cursor: pointer; }
.sx-file .sig .name { cursor: pointer; border-radius: 3px; }
.sx-file .sig .name:hover { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.sx-file .sig .name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sx-file .sig .when { margin-left: 10px; color: var(--muted); font-size: 12px; font-weight: 400; }
.sx-file .ln { position: absolute; left: 0; width: calc(var(--gut) - 3ch); text-align: right; color: var(--muted); font-weight: 400; text-decoration: none; user-select: none; }
.sx-file .ln:hover, .sx-file .ln:focus-visible { color: var(--fg); text-decoration: underline; }
.sx-file .ctslot { padding: 0 12px 0 calc(var(--gut) + var(--dep, 0px)); }
.sx-file .ctline { margin: 0; font-weight: 400; }
.sx-file .ctg { margin-left: -3px; }
.sx-file .frame { padding: 0; min-height: 0; overflow-x: auto; }
.sx-file .frame > .note { padding: 2px 12px 2px calc(var(--gut) + var(--dep, 0px)); font-size: 12px; }
.sx-file .frame .sx-calls { display: none; }
.sx-file .frame .sx-codeview .cl { padding-right: 12px; }
.sx-file .gapmark { padding: 0 12px 0 calc(var(--gut) + var(--dep, 0px)); color: var(--muted); font-size: 12px; font-style: italic; }
.sx-file .between { margin: 0; }
.sx-file .between[hidden] { display: none; }
.sx-file .fn.collapsed > .frame, .sx-file .between.collapsed { display: none; }
/* A type's members are drawn one level in under its line (depth classes d1, d2, ... on the rows): the text moves, the
   line numbers and marks stay in the one gutter. The step is a column's worth of the mono face. */
.sx-file { --step: 2ch; }
.sx-file > .d1 { --dep: calc(1 * var(--step)); } .sx-file > .d2 { --dep: calc(2 * var(--step)); } .sx-file > .d3 { --dep: calc(3 * var(--step)); }
.sx-file > .d4 { --dep: calc(4 * var(--step)); } .sx-file > .d5 { --dep: calc(5 * var(--step)); } .sx-file > .d6 { --dep: calc(6 * var(--step)); }
/* A function's body sits one step in from its signature, as in the source. */
.sx-file .frame .sx[data-look="code"] .sx-tree { padding-left: calc(var(--gut) + var(--dep, 0px) + var(--step)); }
.sx-file .frame .sx-codeview .cl .cm { margin-right: calc(1ch + var(--dep, 0px)); }
/* The signature as the source writes it: one line per source line, each keeping its own indentation. */
.sx-file .sig .sline { display: block; white-space: pre-wrap; }
.sx-file .sig .sline:only-child, .sx-file .clsrow .sline:only-child { display: inline; }
.sx-file .clsrow .sline { display: block; white-space: pre-wrap; }
/* A type's closing line is set back one step, to where the source puts it. */
.sx-file .frame .sx-codeview .cl.out .cm { margin-right: max(1ch, calc(1ch + var(--dep, 0px) - var(--step))); }
/* A one-line member: the signature and what its body says, on one row. */
.sx-file .sig .brief { margin-left: 1.2ch; color: var(--muted); font-weight: 400; }
.sx-file .clsrow { font-weight: 500; }
.sx-file .clsrow .chead { color: var(--fg); }
.sx-file .clsrow + .fn, .sx-file .clsrow + .between { margin-top: 0; }
.sx-file .fn + .clsrow, .sx-file .between + .clsrow { margin-top: .6em; }
.sx[data-look="code"] .sx-body { padding-bottom: 12px; }
.sx-file .sx[data-look="code"] .sx-body { padding-bottom: 0; }
.sx[data-look="code"] .sx-calls { margin: 0 0 0 var(--gut); font-size: 12px; color: var(--sx-muted); }
.sx[data-look="code"] .sx-calls > summary { cursor: pointer; width: max-content; min-height: 24px; display: flex; align-items: center; font-family: var(--font-mono); list-style: none; }
@media (pointer: coarse) { .sx[data-look="code"] .sx-calls > summary { min-height: 44px; } }
.sx[data-look="code"] .sx-calls > summary::before { content: "▸ "; }
.sx[data-look="code"] .sx-calls[open] > summary::before { content: "▾ "; }
.sx[data-look="code"] .sx-calls .sx-deps { margin-top: 2px; border-top: 0; padding-top: 0; }
.sx[data-look="code"] .sx-calls .sx-dephead { display: none; }
.fn.flash > .sig { animation: dflash 1.6s ease-out; }

/* The toolbar's right end: small buttons of one height, in one row, in the corner. */
.tbar-end .tgl, .tbar-end .vopts-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.vopts-btn svg, .listbar .tgl svg { flex: none; }
.tbar-end .tgl[hidden] { display: none; }
.zoom-q { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Over the first file, at the right: how the functions are ordered. */
.listbar { display: flex; justify-content: flex-end; align-items: center; margin: 0 0 8px; }
.listbar .tgl { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; font-size: 13px; }
body:not(.has-results) .listbar { display: none; }

/* Focus (focus.js): one function alone. What is around it fades. Every control is a button; f, Esc, j and k are shortcuts. */
.spot-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: inherit; font-size: 12px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); cursor: pointer; white-space: nowrap; }
.spot-btn:hover, .spot-btn:focus-visible { color: var(--fg); border-color: var(--accent); }
.spot-icon { flex: none; color: var(--accent); }
.card-acts .spot-btn { height: 28px; margin: 0; padding: 0 8px; font-weight: 400; }
.spot-lambda { font: inherit; font-size: 11px; line-height: 1.2; margin-right: 6px; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--accent); cursor: pointer; vertical-align: 1px; }
.spot-lambda:hover, .spot-lambda:focus-visible { border-color: var(--accent); }
body[data-spot] .spot-dim, body[data-spot] .spot-row-dim { opacity: .35; transition: opacity .16s ease; }
body[data-spot] .spot-dim:hover { opacity: .7; }
body[data-spot] .card.spot-on { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
body[data-spot] .fn.spot-on { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.spot-bar { position: sticky; top: var(--sticky-h, 0px); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); font-size: 13px; }
.spot-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; flex: 1 1 14em; min-width: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }
.spot-crumb { font: inherit; border: 0; background: transparent; color: var(--accent); padding: 2px 4px; cursor: pointer; text-decoration: underline; }
.spot-here { font-weight: 650; padding: 2px 4px; }
.spot-sep { color: var(--muted); }
.spot-tools, .spot-acts { display: inline-flex; align-items: center; gap: 4px; }
.spot-bar button:not(.spot-crumb) { display: inline-flex; align-items: center; justify-content: center; height: 32px; font: inherit; font-size: 12px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; white-space: nowrap; }
.spot-bar button[aria-disabled="true"] { color: var(--muted); cursor: default; }
/* The function's own controls: its chip, copy and the image menu, then the contract and the calls on rows of their own. */
.spot-acts { margin-left: auto; }
.spot-bar .spot-acts .copylink { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); }
.spot-bar .image { position: relative; }
.spot-bar .image summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 16px; line-height: 1; user-select: none; }
.spot-bar .image summary::-webkit-details-marker { display: none; }
.spot-bar .image summary:hover, .spot-bar .image[open] summary { color: var(--fg); background: var(--chip); }
.spot-bar .image-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 2; display: flex; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.spot-bar .image-menu a, .spot-bar .image-menu button { display: inline-flex; align-items: center; font: inherit; font-size: 12px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer; }
.spot-bar .image-menu a:hover, .spot-bar .image-menu button:hover { color: var(--fg); border-color: var(--muted); }
.spot-bar .contract button.ct { flex: none; display: block; justify-content: flex-start; height: auto; min-height: 0; padding: 2px 8px 2px calc(8px + var(--ctw)); font-size: 14px; border: 0; border-radius: 8px; background: none; white-space: normal; text-align: left; }
.spot-bar .contract { flex: 1 0 100%; display: flex; flex-direction: column; gap: 1px; max-height: 38vh; overflow-y: auto; margin: 2px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.spot-bar button.spot-ctoggle { display: none; }
.spot-bar .spot-calls { flex: 1 0 100%; font-size: 12px; color: var(--muted); }
.spot-bar .spot-calls > summary { cursor: pointer; width: max-content; min-height: 24px; display: flex; align-items: center; font-family: var(--font-mono); list-style: none; }
.spot-bar .spot-calls > summary::-webkit-details-marker { display: none; }
.spot-bar .spot-calls > summary::before { content: "▸ "; white-space: pre; }
.spot-bar .spot-calls[open] > summary::before { content: "▾ "; }
.spot-bar .spot-calls-list { display: flex; flex-wrap: wrap; gap: 2px 12px; max-height: 20vh; overflow-y: auto; font-family: var(--font-mono); }
.spot-bar .sx-dep i { margin-left: 2px; font-style: normal; opacity: .7; }
.spot-bar .sx-dep[data-uses] { cursor: pointer; }
.spot-bar .sx-dep[data-uses]:hover, .spot-bar .sx-dep.on { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { body[data-spot] .spot-dim, body[data-spot] .spot-row-dim { transition: none; } }
@media (max-width: 860px) {
  .card header { flex-wrap: wrap; row-gap: 4px; }
  .card h3 { flex: 1 1 12rem; }
  .card-acts { margin-left: auto; }
  .listbar { justify-content: flex-start; }
  .listbar .tgl { height: 44px; min-height: 44px; }
  .spot-bar button:not(.ct, .png), .spot-bar .image summary { min-height: 44px; height: 44px; }
  .spot-bar .contract button.ct { min-height: 44px; align-content: center; }
  .spot-bar .spot-acts .copylink, .spot-bar .image summary { width: 44px; min-width: 44px; }
  .spot-bar .image-menu a, .spot-bar .image-menu button { height: 44px; min-width: 44px; justify-content: center; }
  .spot-bar .contract { max-height: 22vh; }
  .spot-bar { top: 0; align-items: center; }
  .spot-btn, .spot-lambda { min-height: 44px; }
  .spot-lambda { min-width: 44px; }
  .spot-btn { padding: 0 12px; }
  .card-acts .spot-btn { height: 44px; padding: 0 10px; }
}

/* Spotlight (plan 2026-10-30, 1.8d, D6): a chosen contract line dims every other line of its card's drawing; its own
   lines keep full ink and take the selection wash (the one hover uses). Changed rows keep their wash alone. */
:is(.card, .fn)[data-lit] .sx :is(.sx-row, .sx-exit, .sx-guard, .sx-fhead, .sx-ahead, .sx-clabel, .sx-bar, .cl) { opacity: .22; transition: opacity .15s ease-out; }
:is(.card, .fn)[data-lit="raises"] .sx .cg-raises, :is(.card, .fn)[data-lit="returns"] .sx .cg-returns, :is(.card, .fn)[data-lit="holds"] .sx .cg-holds,
:is(.card, .fn)[data-lit="waits"] .sx .cg-waits, :is(.card, .fn)[data-lit="wakes"] .sx .cg-wakes, :is(.card, .fn)[data-lit="changes"] .sx .cg-changes { opacity: 1; }
:is(.card, .fn)[data-lit] .sx .lit-row { opacity: 1; box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--sx-pick, #2563eb) 12%, transparent); }
:is(.card, .fn)[data-lit] .sx :is(.chg-add, .chg-del, .chg-mod) { box-shadow: none; }
.contract .ct[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.contract button.ct { cursor: pointer; } .contract button.ct:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { :is(.card, .fn)[data-lit] .sx * { transition: none; } }

/* Contract diff (plan 2026-10-30, 1.8g): + added in green, − removed in red and struck, "changed" on the line. */
.ctdelta { font-size: 13px; font-weight: 600; color: var(--accent); margin-left: 12px; } .ctdelta:not(.changed) { color: var(--muted); font-weight: 400; }
.contract .cti.chg-add { color: var(--ct-add); font-weight: 600; }
.contract .cti.chg-del { color: var(--ct-del); text-decoration: line-through; }
.contract .ct.changed::after { content: "changed"; float: right; font-size: 12px; font-weight: 600; color: var(--accent); }
/* The renderer's note under a folded Outline drawing sits in the column's gutter, like every other line. */
.sx-file .frame .sx-sub { margin: 0; padding: 0 12px 0 calc(var(--gut) + var(--dep, 0px)); font-size: 12px; color: var(--muted); }
/* On a phone the code wraps under its own number instead of running off the edge (a hanging indent the width of the gutter). */
@media (max-width: 860px) {
  .sx-file { --step: 1.5ch; }
  .sx-file .sx-codeview .cl { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: calc(var(--gut) + var(--dep, 0px)); text-indent: calc(-1 * (var(--gut) + var(--dep, 0px))); }
  .sx-file .sx-codeview .cl > i, .sx-file .sx-codeview .cl > b { text-indent: 0; }
}