/* Shoal. The outer form follows Kaggle (side navigation, pill buttons, cream accents, large radii, Google Sans
   Flex); the inner forms follow GitHub (file lists, diffs, timelines, merge boxes). Every colour is a token below;
   dark mode follows the system. The brand (design/brand-shoal) marks only what is the brand's own: the logo, the
   primary action and a few washes of light; the body keeps its neutral greys, and in dark mode the blue is an accent. */

/* Chinese characters at the page's light weight (300) are hairlines in every Chinese face: Shoal CJK is the system's
   Chinese face with 300 drawn as its regular, the rest as they are. Local fonts only; Latin never reaches it. */
@font-face { font-family: 'Shoal CJK'; font-weight: 100 400; src: local('NotoSansSC-Regular'), local('Noto Sans SC Regular'), local('PingFangSC-Regular'), local('PingFang SC Regular'), local('HiraginoSansGB-W3'), local('Microsoft YaHei'), local('MicrosoftYaHei'); unicode-range: U+2E80-2FDF, U+3000-303F, U+3100-312F, U+31A0-31BF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: 'Shoal CJK'; font-weight: 500; src: local('NotoSansSC-Medium'), local('Noto Sans SC Medium'), local('PingFangSC-Medium'), local('PingFang SC Medium'), local('HiraginoSansGB-W6'), local('Microsoft YaHei Bold'), local('MicrosoftYaHei-Bold'); unicode-range: U+2E80-2FDF, U+3000-303F, U+3100-312F, U+31A0-31BF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: 'Shoal CJK'; font-weight: 600 900; src: local('NotoSansSC-Bold'), local('Noto Sans SC Bold'), local('PingFangSC-Semibold'), local('PingFang SC Semibold'), local('HiraginoSansGB-W6'), local('Microsoft YaHei Bold'), local('MicrosoftYaHei-Bold'); unicode-range: U+2E80-2FDF, U+3000-303F, U+3100-312F, U+31A0-31BF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 300; src: url(/static/fonts/google-sans-flex-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/fonts/google-sans-flex-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/fonts/google-sans-flex-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/fonts/google-sans-flex-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 300; src: url(/static/fonts/google-sans-flex-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/fonts/google-sans-flex-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/fonts/google-sans-flex-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/fonts/google-sans-flex-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- tokens ------------------------------------------------------------------ */

:root {
  /* Chinese falls to Shoal CJK (below), then the brand manual's Noto Sans SC and the systems' own Chinese faces; Latin
     stays Google Sans Flex */
  --font: 'Google Sans Flex', 'Google Sans', 'Shoal CJK', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --bg: #fff; --fg: #1f1f1f; --fg-2: #3c4043; --muted: #5f6368; --faint: #9aa0a6;
  --line: #dadce0; --line-2: #ebedf0; --surface: #f8f9fa; --surface-2: #f1f3f4; --hover: #f6f7f8;
  --cream: #fbf7ef; --cream-2: #f4ecdb; --sun-soft: #f3e4c2; --sky-soft: #d6e5ec; --grid-line: rgba(31, 31, 31, .07);
  --ink: #1f1f1f; --on-ink: #fff; --ink-hover: #3c4043; --outline: #b8b8b8;
  --link: #1a73e8; --branch-bg: #e8f0fe; --branch-fg: #1967d2;
  --ok: #188038; --ok-bg: #e6f4ea; --bad: #d93025; --bad-bg: #fce8e6; --wait: #b06000; --wait-bg: #fef7e0; --wait-dot: #f9ab00;
  --done: #8430ce; --brass: #9c7424; /* adopted: brass, darker than the amber of pending */
  --open-solid: #1e8e3e; --done-solid: #8250df; --closed-solid: #d93025;
  --add-bg: #e6ffec; --add-num: #ccffd8; --del-bg: #ffebe9; --del-num: #ffd7d5; --hunk-bg: #eef5ff;
  --syn-comment: #6e7781; --syn-keyword: #cf222e; --syn-string: #0a3069; --syn-constant: #0550ae; --syn-entity: #8250df; --syn-tag: #116329; --syn-meta: #953800;
  --term-bg: #16181c; --term-fg: #e8eaed;
  --shadow: 0 1px 3px rgba(60, 64, 67, .16), 0 6px 20px rgba(60, 64, 67, .14);
  --page: 1680px; /* the widest the top bar, a page's column and the footer get, side padding included */
  /* the brand: lagoon for the logo and the primary action, sand for light that falls on it; the wash is light on shallow
     water (the current place in the navigation); the pool is the light behind a directory's figure */
  --brand: #03586f; --brand-ink: #03586f; --on-brand: #f5f7f2; --brand-glint: rgba(237, 214, 168, .55); --focus: #03586f;
  --wash: linear-gradient(100deg, rgba(237, 214, 168, .42), rgba(194, 210, 190, .26) 70%, rgba(168, 196, 214, .12));
  --pool: radial-gradient(30% 75% at 78% 42%, rgba(237, 214, 168, .34), transparent 70%), radial-gradient(28% 70% at 92% 78%, rgba(168, 196, 214, .36), transparent 70%);
  --fish-near: #03586f; --fish-far: #7fa6af;
  /* a request's cover, by the kind of work: pale tints of the lagoon, sand, sage and water, with a faint motif */
  --cover-code: #e3edf0; --cover-data: #f3ebd9; --cover-formal: #e5ece0; --cover-docs: #e5eaf3; --cover-design: #f1e6ee; --cover-media: #e9e4f2; --cover-office: #ebeee3; --cover-ink: rgba(31, 31, 31, .32);
  /* one easing and three durations for everything that moves (manual, chapter 08) */
  --shoal-ease: cubic-bezier(.32, .72, 0, 1); --shoal-fast: 120ms; --shoal-panel: 240ms; --shoal-scene: 480ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f2023; --fg: #e8eaed; --fg-2: #c4c7c5; --muted: #9aa0a6; --faint: #6f7479;
    --line: #3c4043; --line-2: #2e3033; --surface: #26282b; --surface-2: #2f3134; --hover: #292b2e;
    --cream: #2a2722; --cream-2: #35302a; --sun-soft: #3b3423; --sky-soft: #1f3238; --grid-line: rgba(232, 234, 237, .07);
    --ink: #e8eaed; --on-ink: #1f2023; --ink-hover: #fff; --outline: #5f6368;
    --link: #8ab4f8; --branch-bg: rgba(138, 180, 248, .14); --branch-fg: #a8c7fa;
    --ok: #81c995; --ok-bg: rgba(129, 201, 149, .14); --bad: #f28b82; --bad-bg: rgba(242, 139, 130, .14); --wait: #fdd663; --wait-bg: rgba(253, 214, 99, .12); --wait-dot: #fdd663;
    --done: #d7aefb; --brass: #c8913a;
    --open-solid: #238636; --done-solid: #8957e5; --closed-solid: #da3633;
    --add-bg: rgba(46, 160, 67, .15); --add-num: rgba(63, 185, 80, .3); --del-bg: rgba(248, 81, 73, .1); --del-num: rgba(248, 81, 73, .3); --hunk-bg: rgba(56, 139, 253, .12);
    --syn-comment: #8b949e; --syn-keyword: #ff7b72; --syn-string: #a5d6ff; --syn-constant: #79c0ff; --syn-entity: #d2a8ff; --syn-tag: #7ee787; --syn-meta: #ffa657;
    --term-bg: #121316;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .4);
    --brand: #0e5466; --brand-ink: var(--fg); --on-brand: #e8eaed; --brand-glint: rgba(111, 185, 201, .5); --focus: #6fb9c9;
    --wash: linear-gradient(100deg, rgba(111, 185, 201, .16), rgba(237, 214, 168, .05) 75%, transparent);
    --pool: radial-gradient(30% 75% at 78% 42%, rgba(111, 185, 201, .10), transparent 70%), radial-gradient(28% 70% at 92% 78%, rgba(201, 168, 103, .08), transparent 70%);
    --fish-near: #dce6e2; --fish-far: #5f8b95;
    --cover-code: #1c2a2e; --cover-data: #2c2720; --cover-formal: #212a22; --cover-docs: #202533; --cover-design: #2c2129; --cover-media: #252031; --cover-office: #262a1f; --cover-ink: rgba(232, 234, 237, .3);
  }
}

/* ---- base -------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
/* reduced motion: nothing moves, blinks or slides anywhere; pointing still lights and lifts things */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body { margin: 0; font: 400 16px/1.5 var(--font); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 36px; line-height: 1.12; }
h2, .h2 { font-size: 24px; }
h3 { font-size: 18px; }
.h3 { font-size: 18px; font-weight: 500; }
p { margin: 0; }
code, pre, kbd, .mono { font-family: var(--mono); }
code { font-size: .86em; background: var(--surface-2); padding: .12em .4em; border-radius: 6px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
.octicon { display: inline-block; vertical-align: text-bottom; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.avatar { display: inline-block; vertical-align: middle; border-radius: 50%; background: var(--surface-2); flex-shrink: 0; }
.avatar-agent { border-radius: 26%; }

.muted { color: var(--muted); }
.meta { color: var(--muted); font-size: 14px; }
.tiny { color: var(--muted); font-size: 12px; }
.small { font-size: 14px; }
.fg { color: var(--fg); }
.block { display: block; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.top { align-items: flex-start; }
.gap-3 { gap: 16px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow.tight { gap: 6px; }
.flow.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack.tight { gap: 6px; }
.scroll { overflow-x: auto; }
.quiet-link { color: inherit; }
.title-link, .who, .ref { color: var(--fg); font-weight: 500; }
.title-link.big { font-size: 20px; }
.more { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); font-size: 14px; font-weight: 500; }

/* ---- shell: side navigation and top bar (Kaggle) ----------------------------- */

.nav-toggle { position: fixed; opacity: 0; pointer-events: none; }
.side {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: 256px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px 16px; background: var(--bg); border-right: 1px solid var(--line-2); overflow-y: auto;
}
.side-top { display: flex; align-items: center; gap: 6px; height: 48px; padding-left: 4px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand .logo { display: block; height: 26px; width: auto; color: var(--brand-ink); }
/* The mark's five fish each keep their own heading. Pointing at the logo turns them halfway to the school's mean heading,
   the second of a school's three rules (match your neighbours), and lets them go again. */
.logo .fish { transform-box: fill-box; transform-origin: 50% 50%; transition: transform var(--shoal-scene) var(--shoal-ease); }
:is(.brand, .ln-brand, .ln-foot-brand, .foot-brand):is(:hover, :focus-visible) .fish { transform: rotate(calc(var(--turn) * .55)); }
.create { display: block; margin: 8px 0 14px 2px; }
.btn-create { height: 44px; padding: 0 24px 0 16px; font-size: 15px; }
.create .menu { width: 290px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item { display: flex; align-items: center; gap: 18px; height: 44px; padding: 0 12px 0 14px; border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 300; }
.side-item .octicon { color: var(--fg-2); }
.side-item:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.side-item[aria-current=page] { background: var(--wash); color: var(--fg); font-weight: 500; }
.side-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; }
.side-projects { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.side-label { padding: 10px 14px 6px; font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.side-project { height: 38px; gap: 14px; }
.side-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-2); }
.scrim { display: none; }
/* ZOOM (render.ts, --z) scales the whole page as the browser's zoom would, on screens from 768px (a phone keeps its
   size); lengths tied to the window divide by the scale in force, --zoom, so the page still fills it, and the site
   serves the breakpoints above 768px scaled to match (render.ts zoomed) */
@media (min-width: 768px) { html { --zoom: var(--z, 1); zoom: var(--zoom); } }
.main { margin-left: 256px; min-height: calc(100vh / var(--zoom, 1)); display: flex; flex-direction: column; }
.main > main { flex: 1; }
/* the top bar shares the content column, so the search lines up with the page below it */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.topbar-in { display: flex; align-items: center; gap: 16px; width: 100%; max-width: var(--page); height: 64px; margin-inline: auto; padding-inline: 48px; }
.search, .search-pill {
  flex: 1; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted);
}
.search:focus-within, .search-pill:focus-within { border-color: var(--fg); }
.search { min-width: 0; }
.search input, .search-pill input { flex: 1; width: 0; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font-size: 14px; font-weight: 300; }
.search-pill { flex: none; max-width: none; }
.top-account { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.brand-top { display: none; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: 50%; background: none; color: var(--fg-2); cursor: pointer;
}
.icon-btn:hover { background: var(--hover); text-decoration: none; }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.danger:hover { background: var(--bad-bg); color: var(--bad); }
.icon-btn.burger { display: none; }
.unread-dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--link); box-shadow: 0 0 0 2px var(--bg); }
.account > summary { display: flex; border-radius: 50%; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; width: calc(100% - 96px); max-width: calc(var(--page) - 96px); margin: 56px auto 0; padding: 28px 0 36px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 14px; }
.foot a { color: var(--muted); }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot-brand .logo { height: 12px; width: auto; color: var(--brand-ink); }
.foot .lang-link { margin-left: auto; font-size: inherit; }
/* Chinese headings keep their natural spacing: the Latin display face's tightening crowds Chinese characters */
:lang(zh) :is(.ln h1, .ln h2, .auth-art p) { letter-spacing: 0; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 48px; display: flex; flex-direction: column; gap: 16px; }
.wrap.mid > * { max-width: 912px; } /* narrower pages keep the column's left edge */
.wrap.narrow { max-width: 768px; }
main > .wrap { padding-top: 32px; }
.cols, .wrap.cols { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 48px; align-items: start; }
@media (min-width: 1280px) { .cols, .wrap.cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; } }
.col-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* ---- controls ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px;
  border: 1px solid var(--outline); border-radius: 999px; background: var(--bg); color: var(--fg);
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none !important;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--hover); border-color: var(--fg-2); }
/* The primary action is lagoon with sand light in it. On hover the light crosses from lower left to upper right, the way
   the school swims. */
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --gy { syntax: '<percentage>'; inherits: false; initial-value: 115%; }
.btn-primary, .btn-primary:hover {
  background: radial-gradient(90% 150% at var(--gx) var(--gy), var(--brand-glint), transparent 62%) var(--brand); border-color: var(--brand); color: var(--on-brand);
  transition: --gx var(--shoal-scene) var(--shoal-ease), --gy var(--shoal-scene) var(--shoal-ease);
}
.btn-primary { --gx: 12%; --gy: 115%; }
.btn-primary:hover { --gx: 86%; --gy: -15%; }
.btn-sm { height: 32px; padding: 0 14px; gap: 6px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 26px; font-size: 16px; }
.btn-quiet, .btn-quiet:hover { border-color: transparent; background: none; }
.btn-quiet:hover { background: var(--hover); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn-block { width: 100%; }
.btn-merge { background: var(--open-solid); border-color: var(--open-solid); color: #fff; }
.btn-merge:hover { background: var(--open-solid); filter: brightness(1.08); }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.copied { color: var(--ok) !important; border-color: var(--ok) !important; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lbl { font-size: 14px; font-weight: 500; color: var(--fg); }
.input { display: block; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); font-size: 15px; outline: 0; }
.input:focus { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
textarea.input { height: auto; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.input-sm { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.input-lg { height: 52px; font-size: 18px; }
.input-static { display: flex; align-items: center; gap: 8px; background: var(--surface); }
.select {
  width: auto; appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2380868b' d='M4.4 6.2a.6.6 0 0 1 .85 0L8 8.94l2.75-2.75a.6.6 0 1 1 .85.85L8.42 10.2a.6.6 0 0 1-.84 0L4.4 7.05a.6.6 0 0 1 0-.85Z'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.slash { padding-bottom: 8px; font-size: 24px; color: var(--muted); }

.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg-2); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.tag-ok { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
.tag-bad { border-color: transparent; background: var(--bad-bg); color: var(--bad); }
.tag-new { border-color: transparent; background: var(--fg); color: var(--bg); }
.tag-house { border-style: dashed; color: var(--muted); }
.branch {
  display: inline-block; max-width: 100%; padding: 1px 7px; vertical-align: middle; border-radius: 6px;
  background: var(--branch-bg); color: var(--branch-fg); font: 12.5px/1.6 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sha { font: 12.5px var(--mono); color: var(--fg-2); }
.state { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 500; }
.state-open { background: var(--open-solid); }
.state-done { background: var(--done-solid); }
.state-closed { background: var(--closed-solid); }
.status { display: inline-flex; }
.status.ok, .c-open, .c-add { color: var(--ok); }
.status.bad, .c-closed, .c-del { color: var(--bad); }
.status.wait { color: var(--wait-dot); }
.c-wait { color: var(--wait); }
.c-done { color: var(--done); }

/* menus are <details class="pop"> with a .menu */
.pop { position: relative; display: inline-block; }
.pop.inline { display: block; }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 240px; max-width: min(360px, calc(100vw / var(--zoom, 1) - 32px));
  display: flex; flex-direction: column; gap: 2px; padding: 8px; text-align: left;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow);
}
.menu-right { left: auto; right: 0; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--fg); font-size: 14px; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--hover); text-decoration: none; }
.menu-item > .octicon { color: var(--fg-2); }
.menu-item b { display: block; font-weight: 500; }
.menu-item small { display: block; color: var(--muted); font-size: 12px; }
.menu-head { padding: 8px 12px 6px; font-size: 12px; color: var(--muted); }
.menu-sep { height: 1px; margin: 6px 0; background: var(--line-2); }
.menu-foot { display: block; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--line-2); color: var(--fg); font-size: 13px; }
.panel { width: 340px; gap: 10px; padding: 18px; }
.panel-title { font-size: 18px; font-weight: 500; }
.clone { padding: 0 8px 4px; }
.picker { width: 320px; }
.picker form { padding: 0 4px 6px; }
.picker-list { display: flex; flex-direction: column; max-height: 300px; overflow: auto; }
.picker .menu-item { padding: 8px 12px; }
.picker .tick { visibility: hidden; }
.picker [aria-checked=true] .tick { visibility: visible; }

/* ---- surfaces ---------------------------------------------------------------- */

.box { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.box > :first-child { border-top-left-radius: 15px; border-top-right-radius: 15px; }
.box > :last-child { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.box-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
.box > .box-head:last-child { border-bottom: 0; }
.box-body { padding: 16px; }
.box-foot { padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; border-top: 1px solid var(--line-2); font-size: 14px; }
.box > .item:first-child, .box-head + .item, .box-head + .kv { border-top: 0; }
.item:hover { background: var(--hover); }
.kv { display: flex; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line-2); font-size: 14px; }
.box > .kv:first-child { border-top: 0; }
.kv .k { width: 136px; flex-shrink: 0; padding-top: 1px; color: var(--muted); font-size: 13px; }
.kv > :last-child { min-width: 0; overflow-wrap: anywhere; }
.card { border: 1px solid var(--line); border-radius: 20px; background: var(--bg); padding: 24px; }
.card-head { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.card-foot { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line-2); }
.empty-card { padding: 8px 24px 32px; }
.list { display: flex; flex-direction: column; }
.note { padding: 14px 18px; border-radius: 14px; background: var(--surface-2); font-size: 14px; line-height: 1.5; }
.note-success { background: var(--ok-bg); }
.note-warn { background: var(--wait-bg); }
.note-error { background: var(--bad-bg); color: var(--bad); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; color: var(--muted); text-align: center; }
.empty h3 { color: var(--fg); font-size: 20px; }
.empty p { max-width: 460px; font-size: 14px; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.page-head > .grow { flex: 1 1 320px; }
.page-head h1 { font-size: 36px; }
.page-head h2 { font-size: 28px; }
.page-head h1 a { color: var(--muted); }
.lead { margin-top: 8px; max-width: 760px; color: var(--fg-2); font-size: 15px; font-weight: 300; line-height: 1.55; }
.section { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.section-first { display: flex; flex-direction: column; gap: 16px; }
.section-title { margin-top: 16px; font-size: 24px; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subtabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; color: var(--fg-2); font-size: 15px; font-weight: 300; white-space: nowrap; }
.subtabs a:hover { color: var(--fg); text-decoration: none; }
.subtabs a[aria-current=page] { color: var(--fg); font-weight: 400; }
.subtabs a[aria-current=page]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--fg); }
.subtabs.big a { height: 48px; font-size: 16px; }
.count { color: var(--muted); font-size: 12px; font-weight: 400; }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.seg a { padding: 3px 12px; border-radius: 999px; color: var(--fg-2); font-size: 13px; }
.seg a.on { background: var(--fg); color: var(--bg); }
.pager { display: flex; justify-content: center; gap: 8px; }
.swatch { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; border-radius: 4px; background: var(--ok); }

/* ---- pills and live dots ------------------------------------------------------- */

/* One row of tabs answers one question (which problems, which agents); the current one is a black pill. */
.pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pills a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; color: var(--fg-2); font-size: 14px; }
.pills a:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.pills a[aria-current=page] { background: var(--ink); color: var(--on-ink); }
.pills .count { color: inherit; opacity: .7; }
/* a route's standing (web.ts standingOf), for its lamps and bars */
.st-ok { --st: var(--ok); } .st-bad { --st: var(--bad); } .st-wait { --st: var(--wait-dot); } .st-adopted { --st: var(--brass); }
/* working now: a ripple spreads from the dot, as from a fish just under the surface */
.live-dot { position: relative; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ok); animation: ripple 2.4s var(--shoal-ease) infinite; }
@keyframes ripple { from { transform: scale(1); opacity: .7; } to { transform: scale(3.4); opacity: 0; } }

/* ---- public directories: agents and runners ------------------------------------ */

.dir-head { padding-block: 24px 20px; border-bottom: 1px solid var(--line-2); }
.dir-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 48px; }
.dir-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dir-text h1 { font-size: 36px; line-height: 1.12; }
.dir-text .lead { max-width: 600px; margin: 0; color: var(--fg-2); font-weight: 300; }
.dir-figure { flex: 0 1 440px; min-width: 0; margin-block: -12px; }
@media (min-width: 1280px) { .dir-figure { flex-basis: 600px; margin-block: -20px; } } /* wide screens: the figure grows into the room */
.dir-list { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; }
.dir-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line-2); background: var(--bg); }
.dir-card:first-child { border-top: 0; }
.dir-avatar { display: inline-flex; flex-shrink: 0; padding: 3px; border-radius: 30%; box-shadow: inset 0 0 0 3px var(--line); }
.dir-avatar .avatar { display: block; }
.dir-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dir-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; }
.dir-title > a, .dir-title > b { color: var(--fg); font-weight: 500; }
.dir-stats { color: var(--muted); font-size: 13px; }
.dir-stats a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dir-icon { display: grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px; background: var(--surface-2); color: var(--muted); }
.dir-icon.on { background: var(--ok-bg); color: var(--ok); }
/* four weeks of activity, a bar a day; the last runs, a cell each */
.spark { width: 112px; height: 24px; flex-shrink: 0; fill: var(--fg-2); }
.spark .z { fill: var(--line); }
.strip { width: 120px; height: 24px; flex-shrink: 0; }
.strip .s-completed { fill: var(--ok); } .strip .s-failed, .strip .s-timeout, .strip .s-node_fail { fill: var(--bad); } .strip .s-running, .strip .s-pending { fill: var(--wait-dot); }
.strip .s-cancelled { fill: var(--faint); } .strip .s-none { fill: var(--line-2); }
.need { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--wait-bg); font-size: 14px; }
.need .octicon { flex-shrink: 0; color: var(--wait); }
/* Joining a problem is joining its school. The band is dawn light with the problem's school swimming in it (app.js); the
   two ways in sit under it as tiles. Pointing at "Bring your agent" sends your fish in to join the school; pointing at
   "Offer a runner" sends a current through the water that carries it along. */
.join-band { position: relative; height: 132px; margin: -20px -20px 2px; overflow: hidden; border-radius: 20px 20px 0 0;
  background: linear-gradient(rgba(14, 44, 51, 0) 45%, rgba(14, 44, 51, .16)), #c9d6d2 url(/static/brand/haze-dawn.jpg) 30% 55% / cover; }
.join-school { display: block; width: 100%; height: 100%; --fish-near: #fff; --fish-far: rgba(255, 255, 255, .8); --fish-you: #03586f; --current: rgba(255, 255, 255, .85); }
.join-ways { display: grid; gap: 8px; }
.join-ways form { display: contents; }
.join-way { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color var(--shoal-fast) var(--shoal-ease), box-shadow var(--shoal-panel) var(--shoal-ease), translate var(--shoal-panel) var(--shoal-ease); }
.join-way:is(:hover, :focus-visible) { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 6px 18px rgba(3, 88, 111, .12); translate: 0 -1px; }
.join-way-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; color: var(--on-brand);
  background: radial-gradient(70% 70% at 25% 20%, var(--brand-glint), transparent 70%), var(--brand); }
.join-way[data-way="runner"] .join-way-icon { color: #0e2c33; background: radial-gradient(70% 70% at 25% 20%, rgba(255, 255, 255, .7), transparent 70%), #e8d3a6; }
.join-way-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.join-way-text b { font-weight: 500; font-size: 15px; }
.join-way-text small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.join-way-go { flex-shrink: 0; color: var(--muted); transition: translate var(--shoal-panel) var(--shoal-ease), color var(--shoal-fast) var(--shoal-ease); }
.join-way:is(:hover, :focus-visible) .join-way-go { translate: 3px -2px; color: var(--brand-ink); }
@media (prefers-color-scheme: dark) {
  .join-band { background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .38)), url(/static/brand/haze-dusk.jpg); }
  .join-school { --fish-near: #e8eaed; --fish-far: rgba(232, 234, 237, .7); --fish-you: #6fb9c9; --current: rgba(200, 230, 236, .6); }
  .join-way { background: rgba(255, 255, 255, .03); }
  .join-way[data-way="runner"] .join-way-icon { background: radial-gradient(70% 70% at 25% 20%, rgba(255, 255, 255, .25), transparent 70%), #8a7a55; color: #1f2023; }
}

.agent-icon { display: inline-flex; align-self: center; color: var(--muted); }
@media (min-width: 819px) { .profile-card.agent:has(.profile-figure) { grid-template-columns: auto minmax(280px, 1fr) minmax(0, 440px); } }
@media (max-width: 818px) { .profile-figure { display: none; } }
/* the directories' figures (scripts/figures.ts): lamps lit while online or working, blinking while running */
.fig-lamp { fill: var(--anatomy-shade-0); stroke: var(--anatomy-lo); stroke-width: .6px; }
.fig-lamp[data-on="ok"], .fig-glow[data-on="ok"] { fill: var(--ok); stroke: none; }
.fig-lamp[data-on="busy"], .fig-glow[data-on="busy"] { fill: var(--wait-dot); stroke: none; animation: fig-blink 1.6s steps(1, end) infinite; }
.fig-glow { opacity: .5; filter: blur(2.5px); }
@keyframes fig-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.iso-line[data-dashed] { stroke-dasharray: 3 3; }
/* Motion in the figures, true to each mechanism. A needle is drawn in its own plane's coordinates about its origin, so a
   plain rotate() turns it in that plane: the compass needle swings and settles. Routes flow; the newest pins blink. */
.fig-swing { animation: fig-swing 6s cubic-bezier(.3, 1.6, .5, 1) infinite alternate; }
@keyframes fig-swing { from { transform: rotate(-14deg); } to { transform: rotate(4deg); } }
.iso-svg .iso-dots circle[data-pulse] { animation: iso-pulse 1600ms steps(1, end) infinite; animation-delay: var(--pulse-at, 0ms); }
.fig-ink { fill: var(--anatomy-mid); stroke: none; } .fig-needle { fill: var(--anatomy-hi); stroke: none; }

/* Signing in is an entrance: one card, centred in the window, with the brand's dawn light on its left (the lockup, the
   line, and a school swimming through the light) and the form on its right. */
.auth { display: grid; place-items: center; min-height: calc(100vh / var(--zoom, 1) - 210px); padding: 40px 24px; }
.auth-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(920px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); box-shadow: var(--shadow); }
.auth-art { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 480px; padding: 32px 34px; color: #fff; }
.auth-art::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(14, 44, 51, .1), transparent 40%, rgba(14, 44, 51, .3)), #c9d6d2 url(/static/brand/haze-dawn.jpg) 35% 50% / cover; }
.auth-school { position: absolute; inset: 0; width: 100%; height: 100%; --fish-near: #fff; --fish-far: #eef2ec; }
.auth-art > .logo { position: relative; display: block; align-self: flex-start; height: 30px; width: auto; }
.auth-art p { position: relative; max-width: 11em; font: 300 32px/1.2 'Outfit', var(--font); letter-spacing: -.01em; text-wrap: balance; }
.auth-card { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 44px 40px; }
.auth-card h1 { font-size: 28px; }
@media (prefers-color-scheme: dark) { .auth-art::before { background: linear-gradient(rgba(0, 0, 0, .1), transparent 40%, rgba(0, 0, 0, .3)), #1f2023 url(/static/brand/haze-dusk.jpg) 35% 50% / cover; filter: saturate(.7) brightness(.85); } }
@media (max-width: 760px) { .auth { padding: 24px 16px; } .auth-box { grid-template-columns: minmax(0, 1fr); } .auth-art { min-height: 200px; } .auth-art p { font-size: 26px; } }

/* ---- a problem: header, tabs, route map, overview ------------------------------ */

/* The header band: a drafting grid that fades in from the top left and is densest behind the cover. */
.proj { padding-top: 20px; }
.proj, .dir-head { position: relative; background: var(--bg); }
.proj::before, .dir-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 75% 140% at 88% 55%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 140% at 88% 55%, #000 25%, transparent 78%);
}
.proj > *, .dir-head > * { position: relative; }
.dir-head { background: var(--pool), var(--bg); } /* the light a directory's figure stands in */
.proj .wrap { gap: 10px; }
.proj-meta { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.proj-meta .avatar { display: block; }
.proj-meta a { color: inherit; }
.proj-row { display: flex; align-items: center; gap: 32px; }
.proj-up { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--fg-2); font-size: 14px; }
.proj-up a { color: inherit; font-weight: 500; overflow-wrap: anywhere; }
.proj-title { font-size: 36px; line-height: 1.12; overflow-wrap: anywhere; }
.proj-title a { color: var(--fg); }
.proj-sub { margin-top: 12px; color: var(--fg-2); font-weight: 300; }
.proj-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--fg-2); font-size: 14px; }
.proj-people a { color: inherit; }
.proj-people .dot { color: var(--faint); }
/* who is at work on a problem: a live dot, the count, and a bar per five minutes */
.at-work { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.at-work b { color: var(--fg); font-variant-numeric: tabular-nums; }
/* the dot ripples only while someone is at work (.live); otherwise it rests */
.at-work:not(.live) .live-dot { background: var(--faint); box-shadow: none; }
.at-work:not(.live) .live-dot::after { content: none; }
.pulse rect { fill: var(--ok); opacity: .5; }
.pulse rect.none { fill: var(--line); opacity: 1; }
.pulse rect[data-now] { opacity: 1; }
.fact .pulse { display: block; width: 100%; height: 44px; margin-top: 10px; }
.pulse-axis { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
.problem-foot .at-work { color: var(--ok); font-weight: 500; }
/* the task board above the issue list: BOARD.md, which the site writes */
.taskboard .box-body { max-height: 640px; overflow: auto; }
/* a problem's Now (src/work.ts): who is here over six hours, then the open issues as a tree, sub-issues under their
   parent. The dot is how an issue stands: ink, held by a route; amber, its pull request awaits review; a ring, free;
   dashed, worked on through its sub-issues; the rippling green dot, someone who holds it is on the problem now. */
.now .pulse { display: block; width: 100%; height: 32px; }
.now .sec-head { margin-bottom: 0; }
.stands { display: flex; flex-direction: column; gap: 16px; }
.wt { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wt .wt { margin: 4px 0 0 4px; padding-left: 18px; border-left: 1px solid var(--line); }
.wt-root { padding: 4px 16px; border: 1px solid var(--line); border-radius: 16px; }
.wt-node { padding: 9px 0; }
.wt-root > .wt-node + .wt-node { border-top: 1px solid var(--line-2); }
.wt .wt .wt-node { padding: 6px 0; }
.wt-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.wt-what { min-width: 0; }
.wt-dot { width: 10px; height: 10px; flex-shrink: 0; border: 2px solid var(--faint); border-radius: 50%; }
.wt-row .live-dot { margin-left: 1px; }
.wt-held { border-color: var(--fg); background: var(--fg); }
.wt-review { border-color: var(--wait-dot); background: var(--wait-dot); }
.wt-split { border-style: dashed; }
.wt-title { min-width: 0; color: var(--fg); font-weight: 500; overflow-wrap: anywhere; }
.wt-num, .wt-subs { color: var(--muted); font-size: 13px; }
.wt-subs { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; vertical-align: -2px; }
.wt-state { font-size: 13px; text-align: right; }
.wt-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0 20px; }
.wt-claim { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 10px 0 4px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); font-size: 13px; }
.wt-claim:hover { background: var(--hover); text-decoration: none; }
.wt-claim.here { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-bg); }
.wt-claim .who { color: var(--fg); }
.wt-loose { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* a short ranked list with a bar each (src/work.ts): contributors, models, clients; the leader's bar is accented */
.tops { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.tops li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; font-size: 14px; }
.tops .bm-bar { grid-column: 1 / -1; }
.tops-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tops-name a { color: var(--fg); }
.tops b { font-weight: 400; font-variant-numeric: tabular-nums; }
.tops li:first-child .bm-bar > i { background: var(--viz-accent); }
.contrib-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; margin-bottom: 24px; }
.contrib-groups .fact { display: flex; flex-direction: column; gap: 8px; }
.board.contrib + .meta, .board-wrap + .meta { margin-top: 12px; }
.board.contrib .flow { flex-wrap: nowrap; white-space: nowrap; } /* a name beside its avatar, the column as wide as it needs */
.land-cell { width: 180px; }
.land-cell b { font-weight: 500; font-variant-numeric: tabular-nums; }
.land-cell .bm-bar { margin-top: 6px; }
.results-by { margin: 4px 0 8px; }
main > .wrap:has(> .results-by) + .wrap { padding-top: 8px; } /* the page under the Results subtabs starts close to them */
main > .wrap:has(> .results-by) + .bm > .bm-tools:first-child { padding-top: 0; }
.board-wrap + .standing-head { margin-top: 36px; }
.taskboard .wt-root { padding: 0; border: 0; }
.now { margin-bottom: 40px; }
/* hot: among the problems with the most agent time in the last day */
.hot { display: inline-flex; align-items: center; gap: 3px; color: var(--wait); font-weight: 500; }
.prow-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.prow-stats .at-work, .pc-foot .at-work { color: var(--ok); }
@media (max-width: 767px) {
  .contrib-groups { grid-template-columns: minmax(0, 1fr); }
  .wt-state { grid-column: 2 / -1; text-align: left; }
}
.avatar-stack { display: inline-flex; gap: 4px; margin-right: 4px; }
.avatar-stack > a { display: flex; }
.proj-cover { display: block; width: 280px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: 0 1px 2px rgba(60, 64, 67, .06), 0 8px 24px rgba(60, 64, 67, .08); }
/* The header is a band and its tabs are folder tabs: the current one is cut from the page below, so the header and
   the content meet at one clear edge. */
.tabs-bar { position: relative; margin-top: 22px; }
.tabs-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.tabs.wrap { position: relative; z-index: 1; flex-direction: row; align-items: flex-end; gap: 2px; padding-top: 2px; overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 14px 14px 0 0; color: var(--fg-2); font-size: 15px; white-space: nowrap; }
.tab:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.tab[aria-current=page] { background: var(--bg); border-color: var(--line); color: var(--fg); font-weight: 500; }
.tab[aria-current=page]::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--fg); }
.tab-end { margin-left: auto; }
.subtabs a:first-child { margin-left: -12px; } /* the first label lines up with the heading */


.track { --stops: 5; position: relative; display: grid; grid-template-columns: repeat(var(--stops), minmax(0, 1fr)); margin: 4px 0 0; padding: 0; list-style: none; }
.track::before, .track::after { content: ""; position: absolute; left: 6px; bottom: 5px; height: 2px; background: var(--line); }
.track::before { right: calc(100% / var(--stops) - 6px); }
.track::after { width: calc((100% - 100% / var(--stops)) * var(--reached)); background: var(--fg); }
.track-stop { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 8px 30px 0; }
.track-stop b { font-weight: 400; }
.track-stop span { color: var(--muted); font-size: 13px; }
.track-stop::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 50%; background: var(--bg); }
.track-stop.on::after { border-color: var(--fg); background: var(--fg); }
.track-stop.last::after { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }

.readme { position: relative; display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.readme-edit { align-self: flex-start; }
.facts .fact { display: flex; flex-direction: column; gap: 8px; }
.fact h3 { font-size: 18px; }
.fact p { color: var(--fg-2); font-size: 14px; font-weight: 300; }
.avatars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.more-count { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 11px; font-weight: 700; }
.person { gap: 10px; font-size: 14px; }
.toc { display: flex; flex-direction: column; border-left: 2px solid var(--line-2); }
.toc a { padding: 5px 0 5px 14px; color: var(--fg-2); font-size: 14px; font-weight: 300; }
.toc a:hover { color: var(--fg); text-decoration: none; }
.toc .toc-sub { padding-left: 26px; }
.mini-events { display: flex; flex-direction: column; gap: 8px; color: var(--fg-2); font-size: 13px; line-height: 1.5; }
.join-card { gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--cream); }
.join-facts { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; }
.join-facts dt { color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.join-facts dd { margin: 1px 0 0; color: var(--fg); font-size: 13px; line-height: 1.45; }

/* ---- code (GitHub's inner form) --------------------------------------------- */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar-title { margin-left: 8px; font-size: 20px; }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.branch-menu-name { max-width: 180px; }
.files .file-row { gap: 12px; min-height: 42px; padding: 9px 16px; }
.file-name { flex: 0 1 auto; max-width: 45%; color: var(--fg); }
.file-name:hover { color: var(--link); }
.dir { color: var(--branch-fg); }
.lastbar { font-size: 13px; }
.lastbar .avatar { display: block; }
.history { margin-left: 8px; color: var(--fg); }
.readme-box .box-head { background: var(--bg); }
.readme-body { padding: 24px 32px; }
.file-head { flex-wrap: wrap; }
.code-table { width: 100%; border-collapse: collapse; font: 12px/20px var(--mono); tab-size: 4; }
.code-table .num { width: 1%; min-width: 48px; padding: 0 12px; text-align: right; vertical-align: top; color: var(--faint); white-space: nowrap; user-select: none; }
.code-table .num a { color: inherit; }
.code-table .code { padding: 0 12px; vertical-align: top; white-space: pre; }
.blob-table tbody tr:first-child td { padding-top: 8px; }
.blob-table tbody tr:last-child td { padding-bottom: 8px; }
.blob-table tr:target td { background: var(--wait-bg); }
.blob-image { max-width: 100%; }
.commit-body { margin: 12px 0 0; color: var(--fg-2); font-size: 13px; white-space: pre-wrap; }
.file-editor { min-height: 420px; font: 13px/20px var(--mono); }
.day-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 400; }
.compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.merge-hint { font-size: 14px; }
.check-row { font-size: 13px; }

.diff-sum { margin: 0; }
.diff > summary { position: sticky; top: 64px; z-index: 2; }
.diff:not([open]) > summary { border-bottom: 0; border-radius: 15px; }
.diff:not([open]) .chevron { transform: rotate(-90deg); }
.diffstat { font: 12px var(--mono); }
.diff-table tr.add td { background: var(--add-bg); }
.diff-table tr.add .num { background: var(--add-num); }
.diff-table tr.del td { background: var(--del-bg); }
.diff-table tr.del .num { background: var(--del-num); }
.diff-table tr.hunk td { background: var(--hunk-bg); color: var(--muted); }
.marker { display: inline-block; width: 14px; color: var(--muted); user-select: none; }

.hljs-comment, .hljs-quote { color: var(--syn-comment); }
.hljs-keyword, .hljs-selector-tag, .hljs-type, .hljs-doctag, .hljs-template-tag { color: var(--syn-keyword); }
.hljs-string, .hljs-regexp { color: var(--syn-string); }
.hljs-number, .hljs-literal, .hljs-built_in, .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-symbol, .hljs-attribute, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: var(--syn-constant); }
.hljs-title, .hljs-section { color: var(--syn-entity); }
.hljs-name, .hljs-tag, .hljs-selector-pseudo { color: var(--syn-tag); }
.hljs-params, .hljs-subst, .hljs-meta { color: var(--syn-meta); }
.hljs-addition { color: var(--ok); background: var(--add-bg); }
.hljs-deletion { color: var(--bad); background: var(--del-bg); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

.route-banner { border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.route-banner-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; }
.route-banner-main > .grow { flex: 1 1 260px; }
.route-banner-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--bg); color: var(--fg); }
.route-banner-title { font-size: 16px; font-weight: 500; }
.route-banner-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line-2); font-size: 13px; }
.route-banner-runs .more { margin-left: auto; }
.run-chip { display: inline-flex; align-items: center; gap: 6px; }

/* ---- routes: the branch tree. One 20px column per level, lines drawn like `tree` output; the dot sits where
   children branch off. Header and rows share one grid; on phones the checks and actions move to a second line. */

.route-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) 64px 48px 150px; column-gap: 16px; align-items: center; }
@media (min-width: 944px) { .route-grid { grid-template-columns: auto minmax(0, 1fr) 190px 64px 112px 48px 150px; } }
.route-cols { color: var(--muted); font-size: 13px; font-weight: 500; }
.route-head { grid-column: 1 / 3; }
.route-row { padding: 12px 16px; border-top: 1px solid var(--line-2); }
.route-row:hover { background: var(--hover); }
.route-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.next { color: var(--fg-2); font-size: 13px; }
.rails { display: flex; align-self: stretch; margin: -12px -12px -12px 0; }
.rail { position: relative; width: 20px; flex-shrink: 0; }
.rail::before, .rail::after { content: ''; position: absolute; box-sizing: border-box; }
.rail-pass::before, .rail-tee::before { left: 9px; top: 0; bottom: 0; border-left: 2px solid var(--line); }
.rail-tee::after { left: 9px; top: 22px; width: 17px; border-top: 2px solid var(--line); }
.rail-end::before { left: 9px; top: 0; width: 17px; height: 24px; border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); border-bottom-left-radius: 8px; }
.rail-down::before { left: 9px; top: 23px; bottom: 0; border-left: 2px solid var(--line); }
.rail-dot::after { left: 4px; top: 17px; width: 12px; height: 12px; border: 2.5px solid var(--rc, var(--muted)); border-radius: 50%; background: var(--bg); } /* the route's colour on the map */
.route-default .rail-dot::after { border-color: var(--fg); background: var(--fg); }
.route-dir { color: var(--fg); font: 12px/20px var(--mono); }
.col-check { text-align: center; white-space: nowrap; }
.col-act { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.col-del { width: 32px; flex-shrink: 0; }
.ab { display: flex; color: var(--muted); font-size: 11px; line-height: 14px; }
.ab-side { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ab-behind { align-items: flex-end; padding-right: 3px; border-right: 1px solid var(--line); }
.ab-ahead { padding-left: 3px; }
.ab-side i { display: block; height: 4px; min-width: 2px; border-radius: 0 2px 2px 0; background: var(--muted); }
.ab-behind i { border-radius: 2px 0 0 2px; opacity: .5; }

/* ---- results: Kaggle's leaderboard ------------------------------------------- */

.board-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.board { width: 100%; border-collapse: collapse; font-size: 14px; }
.board th { height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--fg-2); font-weight: 700; text-align: left; white-space: nowrap; }
.board td { padding: 14px 16px; border-top: 1px solid var(--line-2); font-weight: 300; vertical-align: middle; }
.board tbody tr:first-child td { border-top: 0; }
.board tbody tr:hover td { background: var(--hover); }
.board .rank { width: 56px; color: var(--fg-2); text-align: center; }
.board tr.adopted td:first-child { box-shadow: inset 6px 0 0 var(--ok); }
.board tr.pinned td { background: var(--cream); }
.route-cell { min-width: 220px; max-width: 400px; }
.route-cell .meta { margin-top: 4px; }
.result-cell { min-width: 200px; }
.result { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.result .status { margin-top: 2px; }
.result-ctx { font-weight: 500; }
.num-cell { text-align: right; white-space: nowrap; }
.ops td { vertical-align: top; }
.cmd { display: block; padding: 6px 8px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.rules-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rules-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--fg-2); }
.rules-list .octicon { margin-top: 4px; color: var(--fg); }
.runner-fact { flex-wrap: wrap; font-size: 14px; }

/* ---- issues and pull requests: Kaggle's discussion list, GitHub's timeline ----- */

.topic { display: flex; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line-2); }
.topic:hover { background: var(--hover); }
.topic-avatar { position: relative; display: flex; flex-shrink: 0; }
.topic-avatar .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line); }
.topic-badge { position: absolute; right: -6px; bottom: -6px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); }
.topic-badge .octicon { width: 14px; height: 14px; }
.topic-title { color: var(--fg); font-size: 16px; overflow-wrap: anywhere; }
.topic-by { margin-top: 3px; color: var(--fg-2); font-size: 12px; font-weight: 300; letter-spacing: .02em; }
.topic-by .who { color: var(--fg-2); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.topic-by a { color: var(--fg-2); }
.topic-side { display: flex; align-items: center; gap: 16px; color: var(--fg-2); font-size: 13px; white-space: nowrap; }
.topic-side > span { display: inline-flex; align-items: center; gap: 4px; }
.list > .empty { border-bottom: 1px solid var(--line-2); }

.issue-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.issue-title { font-size: 32px; overflow-wrap: anywhere; }
.timeline { gap: 0; }
.tl { position: relative; display: flex; gap: 16px; padding: 8px 0; }
.tl-avatar { flex-shrink: 0; width: 40px; }
.tl-avatar .avatar { display: block; }
.tl-comment > .comment { flex: 1; min-width: 0; }
.tl-event { align-items: center; gap: 12px; margin-left: 56px; padding: 10px 0; font-size: 14px; }
.tl-event::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.tl-badge { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 2px solid var(--bg); border-radius: 50%; background: var(--surface-2); color: var(--fg-2); }
.b-open { background: var(--open-solid); color: #fff; }
.b-done { background: var(--done-solid); color: #fff; }
.b-closed { background: var(--closed-solid); color: #fff; }
.comment { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.comment-head { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); border-radius: 15px 15px 0 0; background: var(--surface); font-size: 14px; }
.comment-body { padding: 16px; }
.comment-foot { padding: 12px 16px; border-top: 1px solid var(--line-2); }
.review-body { margin-top: 8px; }
.tl-indent, .parent-ref { margin-left: 56px; }
.tl-indent { margin-top: 8px; }
.merge-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line-2); }
.merge > .merge-row:first-child { border-top: 0; }
.merge .check-row { padding-left: 52px; }
.merge-ok { border-color: var(--ok); }
.merge-done { border-color: var(--done); }
.merge-icon { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 12px; background: var(--open-solid); color: #fff; }
.merge-icon.merged { background: var(--done-solid); }
.merge-icon.closed { background: var(--closed-solid); }
.side-items { gap: 0; }
.side-block { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.side-block:first-child { padding-top: 0; }
.side-block h3 { color: var(--fg-2); font-size: 14px; font-weight: 500; }
.dev { font-size: 13px; }
.progress { width: 80px; height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.progress span { display: block; height: 100%; background: var(--done-solid); }
.writer { display: flex; flex-direction: column; gap: 8px; }
.writer-tabs { display: flex; gap: 4px; }
.writer-tab { height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--fg-2); font-size: 13px; cursor: pointer; }
.writer-tab.on { border-color: var(--line); background: var(--bg); color: var(--fg); font-weight: 500; }
.writer-preview { min-height: 120px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }

/* ---- runs ---------------------------------------------------------------------- */

.run-row { gap: 14px; }
.run-summary { max-width: 280px; color: var(--fg-2); font: 13px var(--mono); }
.run-title { display: flex; align-items: center; gap: 10px; }
.run-state { font-weight: 500; }
.run-line { line-height: 1.8; }
.run-log { margin: 0; padding: 14px 18px; max-height: 560px; overflow: auto; border-radius: 0 0 15px 15px; background: var(--term-bg); color: var(--term-fg); font: 12px/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.run-menu { width: 340px; }
.run-op + .run-op { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.param { font-size: 13px; }
.param > span { width: 64px; flex-shrink: 0; }

/* ---- profiles: Kaggle's header card ------------------------------------------ */

.profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px; padding: 40px 56px; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(110deg, var(--cream) 0%, var(--cream) 42%, var(--sun-soft) 100%); }
.profile-card.agent { background: linear-gradient(110deg, var(--surface) 0%, var(--surface) 42%, var(--sky-soft) 100%); }
.profile-who { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.profile-avatar { display: inline-flex; flex-shrink: 0; padding: 6px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--line); }
.profile-avatar:has(.avatar-agent) { border-radius: 30%; }
.profile-avatar .avatar { display: block; }
.ring-working { box-shadow: inset 0 0 0 4px var(--ok); }
.profile-kind { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 14px; }
.profile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-text h1 { font-size: 40px; overflow-wrap: anywhere; }
.profile-facts { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; padding: 0; color: var(--fg-2); font-size: 15px; font-weight: 300; list-style: none; }
.profile-facts li { display: flex; align-items: center; gap: 14px; }
.profile-facts a:not(.branch) { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.stat-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.stat-values { display: grid; grid-template-columns: 1fr 1fr; padding-top: 14px; border-top: 1px solid var(--line-2); }
.stat-values > div { display: flex; flex-direction: column; }
.stat-values > div + div { padding-left: 14px; border-left: 1px solid var(--line-2); }
.stat-n { font-size: 28px; line-height: 1.2; }

/* ---- settings and connections ------------------------------------------------- */

.agent-slot { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px dashed var(--outline); border-radius: 12px; color: var(--muted); }
.agent-slot.solid { border-style: solid; border-color: var(--line); background: var(--surface); }
/* something on its way (an agent or a runner connecting, a run writing its log): grains settle, one on two, grain by grain */
.connect-pulse { position: relative; width: 14px; height: 10px; flex-shrink: 0; background: radial-gradient(circle at 3px 7.5px, var(--wait-dot) 2px, transparent 2.5px), radial-gradient(circle at 11px 7.5px, var(--wait-dot) 2px, transparent 2.5px); }
.connect-pulse::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--wait-dot); animation: settle 1.6s var(--shoal-ease) infinite; }
@keyframes settle { 0% { transform: translateY(-7px); opacity: 0; } 30% { opacity: 1; } 55%, 82% { transform: translateY(1.5px); opacity: 1; } 100% { transform: translateY(1.5px); opacity: 0; } }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { position: relative; padding: 0 0 22px 44px; counter-increment: step; }
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 500; line-height: 28px; text-align: center; }
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 34px; bottom: 6px; border-left: 2px solid var(--line-2); }
.steps > li > b { display: block; font-weight: 500; line-height: 28px; }
.steps > li > p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
/* connecting an agent: a request answered in place, the wait for one, and how far each agent has come */
.waiting-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--outline); border-radius: 12px; color: var(--muted); font-size: 14px; }
.code-form { margin-top: 10px; }
.code-form .input { width: 240px; font-family: var(--mono); text-transform: uppercase; }
.code-form .input::placeholder { font-family: var(--font); text-transform: none; }
.connect-req { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); animation: rise var(--shoal-fast, 240ms) var(--shoal-ease) both; }
.connect-req .input { width: 200px; font-weight: 500; }
.connect-req .meta { overflow-wrap: anywhere; }
@keyframes rise { from { opacity: 0; transform: translate(-6px, 6px); } to { opacity: 1; transform: none; } }
.agent-row { align-items: flex-start; }
.agent-row .stack { min-width: 0; }
.journey { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 2px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.journey li { display: inline-flex; align-items: center; gap: 6px; }
.journey li::before { content: ""; width: 10px; height: 10px; flex-shrink: 0; border: 1.5px solid var(--outline); border-radius: 50%; background: var(--bg); }
.journey li + li { margin-left: 6px; }
.journey li + li::after { content: ""; order: -1; width: 14px; height: 1.5px; margin-right: 0; background: var(--line); }
.journey li.done { color: var(--fg-2); }
.journey li.done::before { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 2px var(--bg); }
.journey li.now { color: var(--fg); font-weight: 500; }
.journey li.now::before { border-color: var(--fg); box-shadow: 0 0 0 3px var(--line-2); }
.next-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; }
.next-hint .grow { flex: 1 1 240px; min-width: 0; }
.token-alt > p { flex: 1 1 260px; margin: 0; }
.come-back > summary { display: inline-flex; align-items: center; gap: 6px; }
.come-back[open] > summary { margin-bottom: 8px; }
.client-card > summary .chevron { transition: transform 240ms var(--shoal-ease); }
.client-card[open] > summary .chevron { transform: rotate(180deg); }
.client-card .box-body p { margin: 0; font-size: 14px; color: var(--fg-2); }
.client-marks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.client-marks span { gap: 6px; }
@media (max-width: 640px) {
  .connect-req .input, .code-form .input { width: 100%; }
  .connect-req > .grow { flex-basis: calc(100% - 52px); }
  .connect-req > .flow { margin-left: 52px; }
  .agent-row { flex-wrap: wrap; }
  .agent-row > .grow { flex-basis: calc(100% - 56px); }
  .agent-row > form { margin-left: 56px; }
  .client-card > summary { flex-wrap: wrap; }
  .client-card > summary .meta { order: 3; flex-basis: 100%; }
}
.snippet { position: relative; }
.snippet-text { margin: 0; padding: 14px 96px 14px 16px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.snippet-copy { position: absolute; top: 8px; right: 8px; }
.runner-dot { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; vertical-align: 1px; border-radius: 50%; background: var(--faint); }
.runner-dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.report { font-weight: 500; }
.report::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: 1px; border-radius: 50%; background: currentColor; }
.report-working { color: var(--ok); }
.report-stale { color: var(--muted); }
.report-stale { font-weight: 400; }
.report-stale::before { border: 1px solid currentColor; background: none; }
.event { align-items: flex-start; line-height: 1.55; }
.event-icon { margin-top: 2px; color: var(--muted); }
.event .meta { white-space: nowrap; }
.notice-new { background: var(--cream); box-shadow: inset 3px 0 0 var(--fg); }

/* ---- markdown ---------------------------------------------------------------- */

.markdown-body { color: var(--fg); font-size: 16px; line-height: 1.65; overflow-wrap: break-word; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin: 1.6em 0 .6em; font-weight: 400; line-height: 1.3; }
.markdown-body h1 { font-size: 30px; }
.markdown-body h2 { font-size: 24px; }
.markdown-body h3 { font-size: 19px; font-weight: 500; }
.markdown-body h4 { font-size: 16px; font-weight: 500; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre, .markdown-body table { margin: 0 0 1em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.6em; }
.markdown-body li + li { margin-top: .3em; }
.markdown-body a { text-decoration: underline; text-underline-offset: 2px; }
.markdown-body blockquote { padding: .2em 1em; border-left: 4px solid var(--line); color: var(--fg-2); }
.markdown-body pre { padding: 14px 16px; overflow: auto; border-radius: 12px; background: var(--surface); font-size: 13px; line-height: 1.55; }
.markdown-body pre code { padding: 0; background: none; font-size: inherit; }
.markdown-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.markdown-body th, .markdown-body td { padding: 8px 14px; border: 1px solid var(--line); }
.markdown-body .front-matter { font: 12px/1.5 var(--mono); }
.markdown-body .front-matter th, .markdown-body .front-matter td { padding: 4px 10px; }
.markdown-body .front-matter th { color: var(--muted); font-weight: 400; text-align: left; }
.markdown-body th { background: var(--surface); font-weight: 500; }
.markdown-body hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--line); }
.markdown-body img { border-radius: 8px; }
.markdown-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

/* ---- narrow screens ------------------------------------------------------------ */

@media (max-width: 943px) { .hide-md { display: none; } }
@media (max-width: 818px) {
  .side { transform: translateX(-100%); transition: transform .2s ease; border-right: 0; box-shadow: var(--shadow); }
  .nav-toggle:checked ~ .side { transform: none; }
  .nav-toggle:checked ~ .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .32); }
  .main { margin-left: 0; }
  .topbar-in { gap: 8px; padding-inline: 24px; }
  .topbar .burger, .side .burger, .brand-top { display: inline-flex; }
  .wrap { padding-inline: 24px; }
  .foot { width: calc(100% - 48px); }
  .cols, .wrap.cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
  .hide-sm { display: none; }
  .proj-cover { display: none; }
  .proj-title, .issue-title { font-size: 28px; }
  .tl-avatar { display: none; }
  .tl-event, .tl-indent, .parent-ref { margin-left: 0; }
  .readme-body { padding: 16px; }
  .route-cols { display: none; }
  .route-grid { grid-template-columns: auto minmax(0, 1fr) auto auto auto; row-gap: 8px; column-gap: 12px; }
  .route-row > .rails { grid-row: span 2; margin-right: -8px; }
  .route-row > .route-body { grid-column: 2 / -1; }
  .route-row > .col-check { grid-area: 2 / 3; }
  .route-row > .col-pr { grid-area: 2 / 4; }
  .route-row > .col-act { grid-area: 2 / 5; }
  .profile-card { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .profile-who { flex-direction: row; }
  .profile-avatar .avatar { width: 96px; height: 96px; }
  .topic-side { gap: 10px; }
  .kv { flex-wrap: wrap; row-gap: 2px; }
  .kv .k { width: 100%; }
  .track-stop b { font-size: 14px; }
  .track-stop span { font-size: 12px; }
}
@media (max-width: 599px) {
  .wrap, .topbar-in { padding-inline: 16px; }
  .dir-card { flex-wrap: wrap; align-items: flex-start; padding: 14px 16px; }
  .dir-body { flex: 1 1 220px; }
  .dir-card .spark, .dir-card .strip { margin-left: 70px; }
  .dir-text h1 { font-size: 30px; }
  .foot { width: calc(100% - 32px); }
  .topbar .btn-quiet { display: none; }
  .page-head h1 { font-size: 30px; }
  .card { padding: 20px; }
  .auth-card { padding: 24px; }
  .topic { gap: 12px; padding: 14px 4px; }
  .topic-side > span:not(:last-child) { display: none; }
  .panel, .picker, .run-menu { width: min(340px, calc(100vw / var(--zoom, 1) - 32px)); }
  .track { grid-template-columns: 1fr; gap: 12px; }
  .track::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .track::after { left: 5px; top: 6px; bottom: auto; width: 2px; height: calc((100% - 12px) * var(--reached)); }
  .track-stop { flex-direction: row; align-items: baseline; gap: 8px; padding: 0 0 0 26px; }
  .track-stop::after { top: 5px; bottom: auto; }
  .board thead { display: none; }
  .board, .board tbody, .board tr, .board td { display: block; }
  .board tr { position: relative; padding: 12px 12px 12px 44px; border-top: 1px solid var(--line-2); }
  .board tbody tr:first-child { border-top: 0; }
  .board td, .board tbody tr:first-child td { padding: 2px 0; border: 0; }
  .board td.hide-sm { display: none; }
  .board.ops tr { padding-left: 12px; }
  .board .rank { position: absolute; left: 0; top: 14px; width: 40px; }
  .board tr.adopted { box-shadow: inset 5px 0 0 var(--ok); }
  .board tr.adopted td:first-child { box-shadow: none; }
  .board tr.pinned { background: var(--cream); }
  .board .num-cell { text-align: left; }
  .route-cell, .result-cell { min-width: 0; max-width: none; }
  .route-cell .truncate { white-space: normal; }
}

/* ---- landing: the signed-out home, after Kaggle's landing page ----------------------
   Monospace eyebrows (Google Sans Code), 44/32px headings, a full-bleed band with the summit model, then sections
   in the page column (--page). The isometric figures read the anatomy tokens below, so they follow the theme. */

@font-face { font-family: 'Google Sans Code'; font-style: normal; font-display: swap; font-weight: 300; src: url(/static/fonts/google-sans-code-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Google Sans Code'; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/fonts/google-sans-code-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Outfit, the brand's display face, sets the landing's headings (the wordmark itself is drawn, not set) */
@font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 300; src: url(/static/fonts/outfit-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/fonts/outfit-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* anatomy kit (scripts/figures/iso-kit.ts): tokens on :root so any inlined figure follows the theme; a container
   that changes the paper (the cream band) overrides them on its own .iso */
:root {
  --anatomy-paper: var(--bg); --anatomy-face: #fff; --anatomy-top: #fff;
  --anatomy-shade-0: #dedbd4; --anatomy-shade-1: #e7e4de; --anatomy-shade-2: #efede8; --anatomy-shade-3: #f6f5f2;
  --anatomy-lit-top: #fff; --anatomy-lit-shade: #efede8;
  --anatomy-hi: #26262a; --anatomy-mid: #8a8a8f; --anatomy-lo: #b4b4b8; --anatomy-faint: #d4d4d6; --anatomy-lit: #000;
  --anatomy-halo: #8a8a80; --anatomy-halo-opacity: .32; --anatomy-dot: #3a3a3e; --anatomy-red: #d93025; --anatomy-blue: #1a73e8;
  --anatomy-weight: .6px; --anatomy-ease: cubic-bezier(.32, .72, 0, 1); --anatomy-mono: 'Google Sans Code', var(--mono);
}
.ln-band .iso, .hub-art.iso, .cover {
  --anatomy-paper: var(--cream); --anatomy-face: #fffdf8; --anatomy-top: #fffdf8; --anatomy-lit-top: #fffdf8;
  --anatomy-shade-0: #e6dfcf; --anatomy-shade-1: #ece6d9; --anatomy-shade-2: #f2ede3; --anatomy-shade-3: #f8f4ec; --anatomy-lit-shade: #f2ede3;
  --anatomy-lo: #bdb5a6; --anatomy-faint: #ddd5c6; --anatomy-mid: #8f877a; --anatomy-halo: #8c7f63;
}
@media (prefers-color-scheme: dark) {
  :root {
    --anatomy-face: #2a2c30; --anatomy-top: #2c2e32; --anatomy-lit-top: #34363b; --anatomy-lit-shade: #2a2c30;
    --anatomy-shade-0: #1c1d20; --anatomy-shade-1: #202124; --anatomy-shade-2: #232528; --anatomy-shade-3: #27292c;
    --anatomy-hi: #d4d4d4; --anatomy-mid: #75777b; --anatomy-lo: #4a4c50; --anatomy-faint: #34363a; --anatomy-lit: #fff;
    --anatomy-halo: #000; --anatomy-halo-opacity: .7; --anatomy-dot: #e6e6e6; --anatomy-red: #f28b82; --anatomy-blue: #8ab4f8;
  }
  .ln-band .iso, .hub-art.iso, .cover {
    --anatomy-face: #35302a; --anatomy-top: #38332c; --anatomy-lit-top: #403a32;
    --anatomy-shade-0: #25221d; --anatomy-shade-1: #29261f; --anatomy-shade-2: #2d2a24; --anatomy-shade-3: #312d27; --anatomy-lit-shade: #35302a;
    --anatomy-hi: #e5dfd4; --anatomy-mid: #8a8274; --anatomy-lo: #5c564b; --anatomy-faint: #433e36; --anatomy-halo: #000;
  }
}
.iso-svg { display: block; width: 100%; height: auto; overflow: visible; }
.iso-svg path, .iso-svg circle { vector-effect: non-scaling-stroke; }
.iso-fill { fill: var(--anatomy-paper); stroke: none; }
.iso-solid[data-lit] > .iso-fill { fill: var(--anatomy-face); }
.iso-shade, .iso-top { stroke: none; }
.iso-shade[data-shade="0"] { fill: var(--anatomy-shade-0); }
.iso-shade[data-shade="1"] { fill: var(--anatomy-shade-1); }
.iso-shade[data-shade="2"] { fill: var(--anatomy-shade-2); }
.iso-shade[data-shade="3"] { fill: var(--anatomy-shade-3); }
.iso-top { fill: var(--anatomy-top); }
.iso-solid[data-lit] > .iso-top { fill: var(--anatomy-lit-top); }
.iso-solid[data-lit] > .iso-shade { fill: var(--anatomy-lit-shade); }
.iso-solid[data-lit] > .iso-edge { stroke: var(--anatomy-lit); }
.iso-halo { fill: var(--anatomy-halo); stroke: none; filter: blur(9px); opacity: var(--anatomy-halo-opacity); transform: translateY(3px); }
.iso-line { fill: none; stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); stroke-linecap: round; stroke-linejoin: round; }
.iso-line[data-tone="hi"] { stroke: var(--anatomy-hi); }
.iso-line[data-tone="mid"] { stroke: var(--anatomy-mid); }
.iso-line[data-tone="lo"] { stroke: var(--anatomy-lo); }
.iso-line[data-tone="faint"] { stroke: var(--anatomy-faint); }
.iso-line[data-tone="lit"] { stroke: var(--anatomy-lit); }
.iso-line[data-flow] { stroke-dasharray: 2 6; animation: iso-flow 1600ms linear infinite; }
.iso-line[data-tone="red"] { stroke: var(--anatomy-red); } /* colour only where colour is the subject: a Ramsey colouring */
.iso-line[data-tone="blue"] { stroke: var(--anatomy-blue); }
.motif-thread { stroke-width: .7px; }
.motif-key { stroke-width: 1.5px; }
.motif-strand { stroke-width: 1.3px; }
.motif-orbit { stroke-width: 1px; }
.motif-bar { stroke-width: 2.4px; }
/* a problem's cover (src/cover.ts): its subject alone, in one hue, its field's. A two-tone gradient of the hue with a soft
   light behind the subject; white surfaces shaded in the hue; lines in its ink; the parts that carry the problem (the
   smallest triangle, a one-colour triangle's threads, the theorem, a checked tile, a settled part) in the hue itself. */
.cover {
  --hue: var(--field, var(--f-none));
  --anatomy-paper: #fff; --anatomy-face: #fff; --anatomy-top: #fff;
  --anatomy-shade-3: color-mix(in srgb, var(--hue) 5%, #f8f9fa); --anatomy-shade-2: color-mix(in srgb, var(--hue) 9%, #f1f3f4);
  --anatomy-shade-1: color-mix(in srgb, var(--hue) 14%, #e8eaed); --anatomy-shade-0: color-mix(in srgb, var(--hue) 22%, #dadce0);
  --anatomy-hi: color-mix(in srgb, var(--hue) 40%, #202124); --anatomy-mid: color-mix(in srgb, var(--hue) 35%, #80868b);
  --anatomy-lo: color-mix(in srgb, var(--hue) 25%, #bdc1c6); --anatomy-faint: color-mix(in srgb, var(--hue) 15%, #dadce0);
  --anatomy-lit: var(--hue); --anatomy-red: var(--hue); --anatomy-blue: color-mix(in srgb, var(--hue) 28%, #bdc1c6);
  --anatomy-lit-top: color-mix(in srgb, var(--hue) 38%, #fff); --anatomy-lit-shade: color-mix(in srgb, var(--hue) 58%, #fff);
  --cv-shadow: color-mix(in srgb, var(--hue) 50%, #202124);
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: radial-gradient(52% 62% at 50% 46%, rgba(255, 255, 255, .85), transparent 72%),
    linear-gradient(155deg, color-mix(in srgb, var(--hue) 22%, #fff), color-mix(in srgb, var(--hue) 7%, #fff) 72%);
}
@media (prefers-color-scheme: dark) {
  .cover {
    --anatomy-paper: #2c2d31; --anatomy-face: #303136; --anatomy-top: #35363b;
    --anatomy-shade-3: color-mix(in srgb, var(--hue) 6%, #2a2b2f); --anatomy-shade-2: color-mix(in srgb, var(--hue) 8%, #26272b);
    --anatomy-shade-1: color-mix(in srgb, var(--hue) 10%, #222327); --anatomy-shade-0: color-mix(in srgb, var(--hue) 12%, #1c1d20);
    --anatomy-hi: color-mix(in srgb, var(--hue) 30%, #e8eaed); --anatomy-mid: color-mix(in srgb, var(--hue) 35%, #9aa0a6);
    --anatomy-lo: color-mix(in srgb, var(--hue) 30%, #5f6368); --anatomy-faint: color-mix(in srgb, var(--hue) 22%, #3c4043);
    --anatomy-blue: color-mix(in srgb, var(--hue) 30%, #5f6368);
    --anatomy-lit-top: color-mix(in srgb, var(--hue) 45%, #303136); --anatomy-lit-shade: color-mix(in srgb, var(--hue) 30%, #303136);
    --cv-shadow: #000;
    background: radial-gradient(52% 62% at 50% 46%, rgba(255, 255, 255, .05), transparent 72%),
      linear-gradient(155deg, color-mix(in srgb, var(--hue) 26%, #1f2023), color-mix(in srgb, var(--hue) 8%, #1f2023) 72%);
  }
}
.cover .cover-art { width: 100%; height: 100%; }
.cv-on { --anatomy-top: var(--anatomy-lit-top); --anatomy-shade-3: var(--anatomy-lit-shade); --anatomy-shade-2: var(--anatomy-lit-shade); }
.iso-wire-end { fill: var(--anatomy-paper); stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); }
.iso-wire[data-tone="hi"] .iso-wire-end { stroke: var(--anatomy-hi); }
.iso-wire[data-tone="mid"] .iso-wire-end { stroke: var(--anatomy-mid); }
.iso-dots circle { fill: var(--anatomy-dot); stroke: none; opacity: .32; }
.iso-dots[data-tone="hi"] circle { opacity: .85; }
.iso-dots[data-tone="mid"] circle { opacity: .45; }
.iso-dots[data-tone="lo"] circle { opacity: .22; }
.iso-face-text { fill: var(--anatomy-mid); font-family: var(--anatomy-mono); letter-spacing: .04em; }
.iso-face-text[data-tone="hi"] { fill: var(--anatomy-hi); }
@keyframes iso-flow { to { stroke-dashoffset: -32; } }

.ln { min-height: calc(100vh / var(--zoom, 1)); display: flex; flex-direction: column; font-weight: 300; }
.ln > main { flex: 1; }
.ln-in { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 48px; }
.ln-mono, .ln-eyebrow { font-family: var(--code); font-weight: 300; }
.ln-eyebrow { font-size: 14px; line-height: 1.2; color: var(--fg); }
.ln h1 { font: 300 56px/1.1 'Outfit', var(--font); letter-spacing: -.012em; }
.ln h2 { font: 400 34px/1.15 'Outfit', var(--font); letter-spacing: -.008em; }
.ln-big { font-size: 46px !important; font-weight: 300 !important; max-width: 880px; }
.ln-lead { color: var(--fg-2); font-size: 16px; line-height: 1.4; }
.ln-link { color: var(--fg); font-size: 14px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.ln-btn { height: 44px; padding: 0 24px; gap: 10px; border-color: var(--outline); font-size: 14px; font-weight: 400; white-space: nowrap; }
.ln-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* top bar */
.ln-nav { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.ln-nav .ln-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.ln-brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.ln-brand:hover { text-decoration: none; }
.ln-brand .logo { display: block; height: 28px; width: auto; color: var(--brand-ink); }
/* The landing is the site's splash: its lockup swims in once, each fish along its own heading, the front one first,
   then the word (manual, chapter 08). Everywhere else the logo stays still. */
.ln-brand .fish { animation: swim-in var(--shoal-scene) var(--shoal-ease) backwards; animation-delay: calc(var(--i) * 60ms); }
.ln-brand .word { animation: word-in var(--shoal-panel) var(--shoal-ease) var(--shoal-scene) backwards; }
@keyframes swim-in { from { transform: translate(var(--dx), var(--dy)); opacity: 0; } 45% { opacity: 1; } }
@keyframes word-in { from { transform: translateX(-60px); opacity: 0; } }
.ln-links { display: flex; gap: 8px; }
.ln-links a { padding: 0 8px; color: var(--fg); font-size: 14px; letter-spacing: .01em; }
.ln-account { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ln-search { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); }
.ln-search:hover { background: var(--hover); }
.ln-account .btn { height: 44px; padding: 0 24px; font-size: 14px; font-weight: 400; }

/* hero and band */
.ln-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 86px 24px 0; text-align: center; }
.ln-hero h1 { margin-top: 10px; }
/* The first screen says the one thing a newcomer comes for, standing in the dawn light (the manual's cover: one line
   over the haze); open science's line follows the band at section size, so one screen has one headline. */
.ln-wedge { gap: 40px; }
.ln-wedge h1 { max-width: 900px; margin: 0; }
.ln-sub { max-width: 740px; color: var(--fg-2); font-size: 18px; line-height: 1.5; }
/* The band: the shoal in its own paper, its water fading out into the brand's dawn light, which fades into the page
   above and below instead of ending at an edge. A school swims through the light behind it (app.js). */
.ln-band { position: relative; height: 300px; margin-top: 64px; overflow-x: clip; }
.ln-water { position: absolute; inset: -70px 0 -10px; background: #d9dccb url(/static/brand/haze-dawn.jpg) center 48% / cover;
  -webkit-mask-image: linear-gradient(transparent, #000 34%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 34%, #000 78%, transparent); }
.ln-school { display: block; width: 100%; height: 100%; }
.ln-band-art { position: absolute; z-index: 1; left: 50%; bottom: -4px; width: 1100px; transform: translateX(-50%); pointer-events: none; }
.ln-ticker { position: absolute; z-index: 2; right: max(48px, calc((100% - var(--page)) / 2 + 48px)); bottom: 24px; width: 340px; height: 100px; }
.ln-ticker-item {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 24px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 16px; color: var(--fg); opacity: 0;
  background: color-mix(in srgb, var(--bg) 76%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: ln-tick calc(var(--n) * 4s) infinite; animation-delay: calc(var(--i) * 4s - .4s);
}
.ln-ticker-item:hover { text-decoration: none; border-color: var(--fg); }
.ln-ticker-item:first-child { opacity: 1; }
/* news comes in from the lower left and leaves to the upper right, along the school's heading */
@keyframes ln-tick { 0% { opacity: 0; transform: translate(-14px, 6px); } 4%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translate(14px, -6px); } }
.ln-ticker-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--fg-2); }
.ln-ticker-text { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.ln-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid #b4cbd8; border-radius: 12px; background: #e9f1f4; color: var(--fg); font: 400 12px var(--font); white-space: nowrap; }
.ln-badge-sun { border-color: #e2c68a; background: #f8efdc; }

/* agents strip */
.ln-strip { display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 48px 24px 0; text-align: center; }
.ln-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 56px; color: var(--faint); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.ln-marks span, .client-marks span { display: inline-flex; align-items: center; gap: 10px; }
.ln-marks img { filter: grayscale(1); opacity: .75; }

/* sections */
.ln-sec { display: flex; flex-direction: column; gap: 24px; padding-top: 140px; }
.ln-head { display: flex; align-items: flex-end; gap: 24px; justify-content: space-between; }
.ln-head > div { display: flex; flex-direction: column; gap: 24px; }
.ln-center { align-items: center; text-align: center; }
.ln-center .ln-lead { max-width: 600px; }
.ln-card { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); overflow: hidden; }
.ln-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ln-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ln-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* tabs (radios, no script) */
.ln-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.ln-tab-labels { display: flex; gap: 8px; margin: 8px 0 24px; }
.ln-tab { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px; color: var(--fg); font-size: 16px; font-weight: 400; cursor: pointer; }
.ln-tab:hover { background: var(--hover); }
#ln-tab-0:checked ~ .ln-tab-labels label[for=ln-tab-0], #ln-tab-1:checked ~ .ln-tab-labels label[for=ln-tab-1], #ln-tab-2:checked ~ .ln-tab-labels label[for=ln-tab-2] { background: var(--ink); color: var(--on-ink); font-weight: 500; }
#ln-tab-0:focus-visible ~ .ln-tab-labels label[for=ln-tab-0], #ln-tab-1:focus-visible ~ .ln-tab-labels label[for=ln-tab-1], #ln-tab-2:focus-visible ~ .ln-tab-labels label[for=ln-tab-2] { outline: 2px solid var(--fg); outline-offset: 2px; }
.ln-tab-panel { display: none; }
#ln-tab-0:checked ~ [data-panel="0"], #ln-tab-1:checked ~ [data-panel="1"], #ln-tab-2:checked ~ [data-panel="2"] { display: grid; }

/* featured problem: Kaggle's benchmark card */
.ln-bench { display: flex; flex-direction: column; }
.ln-bench-top { display: flex; flex-direction: column; gap: 10px; min-height: 176px; padding: 16px; color: var(--fg); border-bottom: 1px solid var(--line); }
.ln-bench-top:hover { text-decoration: none; background: var(--hover); }
.ln-bench h3 { font-size: 16px; font-weight: 500; line-height: 1.4; }
.ln-bench-top p { color: var(--muted); font-size: 12px; line-height: 20px; letter-spacing: .02em; }
.ln-by { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 12px; }
.ln-rank { flex: 1; display: flex; flex-direction: column; padding: 8px 16px 12px; }
.ln-rank-row { position: relative; display: flex; align-items: center; gap: 6px; height: 40px; padding-bottom: 4px; color: var(--fg); font-size: 12px; letter-spacing: .02em; }
.ln-rank-row:hover { text-decoration: none; }
.ln-rank-row::before, .ln-rank-row::after { content: ''; position: absolute; left: 0; bottom: 4px; height: 3px; border-radius: 2px; }
.ln-rank-row::before { right: 0; background: var(--line-2); }
.ln-rank-row::after { width: var(--bar); background: var(--st, var(--faint)); }
.ln-rank-n { flex: none; }
.ln-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-rank-row:hover .ln-rank-name { text-decoration: underline; }
.ln-rank-val { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ln-rank-row:first-child .ln-rank-val { color: var(--fg); font-weight: 500; }
.ln-rank-more, .ln-rank-none { padding-top: 10px; color: var(--muted); font-size: 12px; }
.ln-bench-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.ln-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; }

/* open problem: Kaggle's competition card */
.ln-comp { display: grid; grid-template-columns: 226px minmax(0, 1fr); min-height: 262px; }
.ln-comp-cover { display: flex; align-items: center; background: var(--cream); }
.ln-comp-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ln-comp-host { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.ln-comp-host .truncate { flex: 1; }
.ln-comp h3 { margin-top: 12px; font-size: 18px; font-weight: 500; }
.ln-comp h3 a { color: var(--fg); }
.ln-comp-body > p { color: var(--fg-2); font-size: 15px; line-height: 1.4; }
.ln-comp-who { margin-top: auto; padding-top: 12px; color: var(--muted) !important; font-size: 12px !important; letter-spacing: .02em; }
.ln-comp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: 14px; }
.ln-comp-stake { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; white-space: nowrap; }

/* cream band with the wall of people and agents */
.ln-cream { margin-top: 140px; background: var(--cream); }
.ln-wall-sec { --t: min(88px, calc((100vw / var(--zoom, 1) - 48px) / 13 - 2px)); position: relative; min-height: calc(6 * (var(--t) + 2px) + 260px); padding-block: 128px 120px; }
.ln-wall-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 520px; }
.ln-wall { position: absolute; right: 24px; bottom: 80px; width: calc(13 * (var(--t) + 2px)); height: calc(6 * (var(--t) + 2px)); }
.ln-tile {
  position: absolute; left: calc(var(--c) * (var(--t) + 2px)); top: calc(var(--r) * (var(--t) + 2px)); width: var(--t); height: var(--t);
  display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--cream-2);
}
.ln-tile-face { background: var(--bg); box-shadow: 0 1px 2px rgba(60, 64, 67, .1), 0 6px 14px rgba(60, 64, 67, .1); }
.ln-tile-face .avatar { width: 56%; height: 56%; }
.ln-tile-sun { background: linear-gradient(135deg, var(--sun-soft), transparent 80%); }
.ln-tile-sky { background: linear-gradient(135deg, var(--sky-soft), transparent 80%); }

/* spotlight carousel: Kaggle's case studies */
.ln-spot-input { position: absolute; opacity: 0; pointer-events: none; }
.ln-spot-slide { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 480px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
#ln-spot-0:checked ~ .ln-spot-slides [data-slide="0"], #ln-spot-1:checked ~ .ln-spot-slides [data-slide="1"], #ln-spot-2:checked ~ .ln-spot-slides [data-slide="2"], #ln-spot-3:checked ~ .ln-spot-slides [data-slide="3"] { display: grid; }
.ln-spot-text { display: flex; flex-direction: column; gap: 24px; padding: 44px; }
.ln-spot-text h3 { font-size: 44px; line-height: 1.12; font-weight: 400; }
.ln-spot-text p { color: var(--fg-2); font-size: 18px; line-height: 1.4; }
.ln-spot-text .ln-link { margin-top: auto; align-self: flex-start; }
.ln-spot-art { display: flex; align-items: center; background: radial-gradient(120% 90% at 55% 0%, var(--sun-soft), transparent 55%), radial-gradient(90% 90% at 80% 100%, var(--sky-soft), transparent 60%), var(--cream); }
.ln-spot-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 60px; margin-top: 40px; }
.ln-spot-tabs label { color: var(--muted); font-size: 16px; cursor: pointer; }
/* The replay (app.js): moves still to come are faint in the log and not yet on the map. A route's channel draws itself
   from where it leaves the one it grew from, then its end and label appear; its check and its adoption come at their own moves. */
.ln-replay { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--fg-2); font-size: 15px; line-height: 1.4; }
.ln-replay li { display: flex; gap: 10px; transition: opacity var(--shoal-panel) var(--shoal-ease), color var(--shoal-panel) var(--shoal-ease); }
.ln-replay .octicon { flex: none; margin-top: 2px; color: var(--muted); }
.ln-replay .check .octicon { color: var(--ok); }
.ln-replay .bad .octicon { color: var(--bad); }
.ln-replay b { font-weight: 500; color: var(--fg); }
.ln-spot[data-replay] .ln-replay li:not(.on) { opacity: .25; }
.ln-spot[data-replay] .ln-replay li.now { color: var(--fg); }
.ln-spot[data-replay] .chmap [data-step] { transition: opacity var(--shoal-scene) var(--shoal-ease); }
.ln-spot[data-replay] .chmap [data-step]:not(.on) { opacity: 0; }
.ln-spot[data-replay] .ch-draw { stroke-dasharray: 1; transition: stroke-dashoffset 1.6s var(--shoal-ease); }
.ln-spot[data-replay] :not(.on) > .ch-draw, .ln-spot[data-replay] .ch-draw[data-step]:not(.on) { stroke-dashoffset: 1; }
.ln-spot[data-replay] .route[data-step] > :is(.ch-open, .ch-dot, .ch-pulse, .ch-name, .ch-state, .ch-check, .ch-adopted, .ch-lane:not(.ch-draw)):not([data-step]) { transition: opacity var(--shoal-panel) var(--shoal-ease) 1.2s; }
.ln-spot[data-replay] .route[data-step]:not(.on) > :is(.ch-open, .ch-dot, .ch-pulse, .ch-name, .ch-state, .ch-check, .ch-adopted, .ch-lane:not(.ch-draw)):not([data-step]) { opacity: 0; transition-delay: 0s; }
.ln-spot[data-replay] .route[data-step].on > .ch-draw ~ .ch-draw:not([data-step]) { transition-delay: 1.2s; }
.ln-spot[data-replay] .ch-check[data-step] { transform-box: fill-box; transform-origin: center; transition: opacity var(--shoal-panel) var(--shoal-ease), transform var(--shoal-scene) var(--shoal-ease); }
.ln-spot[data-replay] .ch-check[data-step]:not(.on) { transform: scale(.3); }
.ch-fish { fill: var(--rc); }
#ln-spot-0:checked ~ .ln-spot-tabs [for=ln-spot-0], #ln-spot-1:checked ~ .ln-spot-tabs [for=ln-spot-1], #ln-spot-2:checked ~ .ln-spot-tabs [for=ln-spot-2], #ln-spot-3:checked ~ .ln-spot-tabs [for=ln-spot-3] { color: var(--fg); font-weight: 500; }

/* the catalog figure and its legend */
.ln-catalog { width: 100%; max-width: 980px; margin: 72px 0 0; }
.ln-plate { position: relative; padding: 48px 24px 40px; }
.ln-plate .iso-svg { max-width: 760px; margin-inline: auto; }
.ln-corner { position: absolute; color: var(--muted); font: 300 11px/1 var(--code); letter-spacing: .06em; white-space: nowrap; }
.ln-corner[data-corner="fig"] { top: 12px; left: 12px; color: var(--fg-2); }
.ln-corner[data-corner="title"] { top: 12px; right: 12px; text-transform: uppercase; letter-spacing: .12em; }
.ln-corner[data-corner="hint"] { bottom: 12px; left: 12px; text-transform: uppercase; letter-spacing: .12em; }
.ln-corner[data-corner="readout"] { bottom: 12px; right: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.cat-card { transition: transform .7s var(--anatomy-ease); }
.cat-card[data-on] { transform: translateY(var(--lift)); }
.ln-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; text-align: left; }
.ln-legend-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 0; border: 0; border-top: 2px solid var(--line-2); background: none; color: var(--fg-2); font-size: 14px; line-height: 1.45; text-align: left; cursor: pointer; transition: border-color .3s; }
.ln-legend-item b { color: var(--fg); font-size: 16px; font-weight: 500; }
.ln-legend-count { color: var(--fg); font: 300 28px/1.1 var(--code); letter-spacing: -.02em; }
.ln-legend-item[aria-current] { border-top-color: var(--fg); }

/* guides: Kaggle's video cards */
.ln-guide { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 272px; padding: 24px; border-radius: 16px; color: #fff; overflow: hidden; }
.ln-guide:hover { text-decoration: none; filter: brightness(1.04); }
/* the three guides take the brand's three hazes, dawn, noon and dusk (manual, chapter 04) */
.ln-guide-sun { background: radial-gradient(48% 60% at 18% 32%, #f6e2b4, transparent 70%), radial-gradient(40% 50% at 82% 22%, #c2d2be, transparent 70%), radial-gradient(60% 50% at 40% 100%, #a8c4d6, transparent 70%), radial-gradient(26% 30% at 80% 78%, #3f8090, transparent 70%), #d9dccb; color: #0e2c33; }
.ln-guide-sky { background: radial-gradient(50% 50% at 30% 70%, #eee6c8, transparent 70%), radial-gradient(50% 60% at 75% 30%, #b9d3cb, transparent 70%), radial-gradient(70% 40% at 50% 0%, #a8c4d6, transparent 70%), radial-gradient(30% 30% at 95% 95%, #5e9c98, transparent 70%), #cbdcd3; color: #0e2c33; }
.ln-guide-sand { background: radial-gradient(50% 45% at 15% 95%, #c9a867, transparent 70%), radial-gradient(40% 40% at 85% 15%, #6e8c80, transparent 70%), radial-gradient(70% 70% at 55% 45%, #0f4a5a, transparent 75%), #0e2c33; color: #f5f7f2; }
.ln-guide-sun .ln-guide-title, .ln-guide-sky .ln-guide-title { text-shadow: none; }
.ln-guide-ic { position: absolute; top: 24px; left: 24px; display: flex; align-items: center; justify-content: center; width: 58px; height: 44px; border-radius: 22px; background: rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
.ln-guide-kind { font-size: 13px; opacity: .9; }
.ln-guide-title { max-width: 260px; font-size: 20px; font-weight: 500; line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }

/* about */
.ln-about-text { max-width: 880px; color: var(--fg); font-size: 18px; font-weight: 500; line-height: 1.4; }
.ln-pillars { margin-top: 64px; }
.ln-pillars > div { display: flex; flex-direction: column; gap: 24px; padding: 0 24px; border-left: 1px solid var(--line); }
.ln-pillars h3 { max-width: 330px; font-size: 24px; line-height: 1.4; font-weight: 400; }

/* footer */
.ln-foot { margin-top: 120px; background: var(--cream); }
.ln-foot-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px 260px; gap: 24px; padding-block: 48px 120px; }
.ln-foot-brand { display: flex; align-items: center; gap: 12px; align-self: start; color: var(--fg); font-size: 40px; font-weight: 500; letter-spacing: -.03em; }
.ln-foot-brand:hover { text-decoration: none; }
.ln-foot-brand .logo { display: block; height: 40px; width: auto; color: var(--brand-ink); }
.ln-foot nav { display: flex; flex-direction: column; gap: 6px; }
.ln-foot h2 { margin-bottom: 6px; color: var(--fg-2); font-size: 14px !important; font-weight: 500 !important; letter-spacing: .01em; }
.ln-foot nav a { color: var(--fg); font-size: 14px; }
.ln-foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 48px; border-top: 1px solid var(--cream-2); color: var(--muted); font-size: 14px; }
.ln-foot-bar b { color: var(--fg); font-weight: 500; }

@media (prefers-color-scheme: dark) {
  .ln-badge { border-color: #3e6b78; background: #16313a; }
  .ln-badge-sun { border-color: #8c7444; background: #2e2a1c; }
  .ln-water { background-color: #1f2023; background-image: url(/static/brand/haze-dusk.jpg); filter: saturate(.7) brightness(.8); }
  .ln-tile-face { box-shadow: 0 0 0 1px var(--line); }
}
@media (max-width: 818px) {
  .ln-in { padding-inline: 24px; }
  .ln-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-grid2 { grid-template-columns: 1fr; }
  .ln-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-wall-sec { padding-bottom: 40px; min-height: 0; }
  .ln-wall { position: relative; right: auto; bottom: auto; margin: 48px auto 0; }
}
@media (max-width: 767px) {
  .ln-links { display: none; }
  .ln h1, .ln-big, .ln-spot-text h3 { font-size: 32px !important; }
  .ln h2 { font-size: 26px; }
  .ln-sub { font-size: 16px; }
  .ln-hero { padding-top: 56px; }
  .ln-sec { padding-top: 88px; }
  .ln-head { flex-direction: column; align-items: flex-start; }
  .ln-band { height: 200px; margin: 64px 0 120px; }
  .ln-band-art { width: 760px; }
  .ln-ticker { position: relative; right: auto; bottom: auto; width: auto; margin: 0 16px; top: 224px; }
  .ln-marks { gap: 12px 28px; font-size: 18px; }
  .ln-grid3 { grid-template-columns: 1fr; }
  .ln-spot-slide { grid-template-columns: 1fr; }
  .ln-spot-text { padding: 28px; }
  .ln-comp { grid-template-columns: 120px minmax(0, 1fr); }
  .ln-foot-cols { grid-template-columns: 1fr 1fr; }
  .ln-foot-brand { grid-column: 1 / -1; font-size: 30px; }
  .ln-pillars > div { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 599px) {
  .ln-in { padding-inline: 16px; }
  .ln-grid4 { grid-template-columns: 1fr; }
  .ln-legend { grid-template-columns: 1fr; }
  .ln-login { display: none; }
  .ln-foot-bar { padding-inline: 16px; }
}

/* ---- the shoal (scripts/figures.ts shoal): the deposit's layers, the water and its flow ----------------------------------
   The deposit is the one coloured thing: each layer's bank and grains in the colour of when it settled, from deep water
   (the oldest) to sand (the newest), the brand's strata. The water is a tint that fades out to nothing; its streamlines
   are broken lines, like an engraver's water, and a particle of light rides each at the water's own speed (SMIL). */
:root {
  --fl-3: #6d96a1; --fl-4: #82a7b0; --fl-5: #98b6bc; --fl-6: #c9bc93; --fl-7: #d1c08d; --fl-8: #d9c793; --fl-9: #e1cf9e;
  --fl-10: #e8d8ad; --fl-11: #eee1be;
  --fl-tint: #8fb9c8; --fl-line: rgba(3, 88, 111, .26); --fl-glint: #fff; --fl-foam: rgba(255, 255, 255, .9);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fl-3: #2b5d68; --fl-4: #356b76; --fl-5: #417884; --fl-6: #7f7552; --fl-7: #8c8158; --fl-8: #998c5e; --fl-9: #a79864;
    --fl-10: #b5a46c; --fl-11: #c4b17a;
    --fl-tint: #0e5466; --fl-line: rgba(160, 214, 226, .2); --fl-glint: #cfe9ef; --fl-foam: rgba(200, 230, 236, .5);
  }
}
/* a layer's bank is a pale wash of its colour, its grains in rows on it */
.fl-board { --lc: var(--fl-3); --anatomy-paper: color-mix(in srgb, var(--lc) 30%, var(--bg));
  --anatomy-shade-3: color-mix(in srgb, var(--lc) 34%, var(--bg)); --anatomy-shade-2: color-mix(in srgb, var(--lc) 40%, var(--bg));
  --anatomy-shade-1: color-mix(in srgb, var(--lc) 46%, var(--bg)); --anatomy-shade-0: color-mix(in srgb, var(--lc) 70%, #0e2c33); }
.fl-board[data-l="4"] { --lc: var(--fl-4); } .fl-board[data-l="5"] { --lc: var(--fl-5); } .fl-board[data-l="6"] { --lc: var(--fl-6); }
.fl-board[data-l="7"] { --lc: var(--fl-7); } .fl-board[data-l="8"] { --lc: var(--fl-8); } .fl-board[data-l="9"] { --lc: var(--fl-9); }
.fl-board[data-l="10"] { --lc: var(--fl-10); } .fl-board[data-l="11"] { --lc: var(--fl-11); }
.fl-dry { --anatomy-top: color-mix(in srgb, var(--fl-11) 30%, var(--anatomy-face)); --anatomy-lit-top: var(--anatomy-top); }
.fl-board:not(.fl-dry) { --anatomy-top: color-mix(in srgb, var(--lc) 40%, var(--bg)); } /* sand under water takes its layer's colour */
.fl-rows path { fill: none; stroke: var(--lc); stroke-width: 2.1px; stroke-linecap: round; stroke-dasharray: 0 2.9; }
.fl-stream { fill: none; stroke: var(--fl-line); stroke-width: .8px; stroke-linecap: round; }
.fl-rider { fill: none; stroke-width: 1.6px; stroke-linecap: round; }
.fl-grain { fill: var(--fl-9); stroke: var(--fl-6); stroke-width: .5px; }
.fl-foam { fill: none; stroke: var(--fl-foam); stroke-width: 1.1px; }
.fl-grass { stroke-width: .7px; }
@media (prefers-reduced-motion: reduce) { .fl-riders { display: none; } }

/* ---- the school (scripts/figures.ts agents): agents as the mark's fish over a sandbar --------------------------------
   The fish carry the brand's colour; the sand, the routes cut in it and the water stay quiet. Each fish sways in its own
   time, and the one at work rings the water above it with the site's working ripple. */
:root { --ag-sand: #f2e8d3; --ag-groove: rgba(150, 118, 64, .28); --ag-water: rgba(143, 185, 200, .34); --ag-fish: #2a7487; --ag-fish-side: #0e3c47;
  --ag-shadow: rgba(14, 44, 51, .2); }
@media (prefers-color-scheme: dark) {
  :root { --ag-sand: #3b362c; --ag-groove: rgba(0, 0, 0, .32); --ag-water: rgba(14, 84, 102, .3); --ag-fish: #6fb9c9; --ag-fish-side: #2b6f7f;
    --ag-shadow: rgba(0, 0, 0, .45); }
}
.ag-top { fill: var(--ag-fish); } .ag-side { fill: var(--ag-fish-side); } .ag-shadow { fill: var(--ag-shadow); } .ag-groove { fill: var(--ag-groove); }
.ag-ripple { fill: none; stroke: var(--ok); stroke-width: 1.2px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: ag-ripple 2.4s var(--shoal-ease) infinite; }
@keyframes ag-ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
.ag-swim { transform-box: fill-box; transform-origin: center; animation: ag-swim 4.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); }
@keyframes ag-swim { from { transform: rotate(-2.5deg) translateX(-1.2px); } to { transform: rotate(2.5deg) translateX(1.2px); } }

/* ---- sand and water in the figures (the tide gauge): wet and dry sand, foam, the water's moving lines ------------- */
:root { --fig-water: rgba(118, 168, 188, .5); }
.fig-sand { --anatomy-paper: #ecdcb9; --anatomy-face: #efe1c2; --anatomy-top: #f2e7cc; --anatomy-shade-0: #cfb789; --anatomy-shade-1: #d9c398; --anatomy-shade-2: #e2cea8; --anatomy-shade-3: #e9d8b6; }
.fig-wet { --anatomy-paper: #dcc79c; --anatomy-face: #e0cca2; --anatomy-top: #e4d2ab; --anatomy-shade-0: #bfa673; --anatomy-shade-1: #c9b080; --anatomy-shade-2: #d2bb8e; --anatomy-shade-3: #dac59b; }
.fig-grains { fill: none; stroke: #c4a771; stroke-width: 1.3px; stroke-linecap: round; stroke-dasharray: 0 2.2; }
.fig-foam { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1px; }
.fig-flow { fill: none; stroke: rgba(3, 88, 111, .3); stroke-width: .8px; stroke-linecap: round; stroke-dasharray: 6 3 2 3; }
@media (prefers-color-scheme: dark) {
  .fig-sand { --anatomy-paper: #3f392d; --anatomy-face: #4a4234; --anatomy-top: #514838; --anatomy-shade-0: #2e2a21; --anatomy-shade-1: #353026; --anatomy-shade-2: #3c362b; --anatomy-shade-3: #433c30; }
  .fig-wet { --anatomy-paper: #353026; --anatomy-face: #3d372b; --anatomy-top: #423b2e; --anatomy-shade-0: #26221b; --anatomy-shade-1: #2b271f; --anatomy-shade-2: #302b22; --anatomy-shade-3: #353025; }
  :root { --fig-water: rgba(14, 84, 102, .45); }
  .fig-grains { stroke: #786a4e; } .fig-foam { stroke: rgba(200, 230, 236, .45); } .fig-flow { stroke: rgba(160, 214, 226, .22); }
}

/* ---- the route map (src/channels.ts): a braided river seen from above ---------------------------------------------
   Colour says which route (five river colours from the brand, the default branch in ink), the shape at a channel's end
   says how it stands, and the disc before it what the latest checks found. Water flows in a channel someone works on. */
:root { --r1: #0b6e85; --r2: #a0712e; --r3: #3467b0; --r4: #6e52b0; --r5: #b0457e; }
@media (prefers-color-scheme: dark) { :root { --r1: #5db7c9; --r2: #d9ae68; --r3: #7fa8e8; --r4: #a891e8; --r5: #e384b5; } }
.chmap { display: block; width: 100%; height: auto; overflow: visible; }
.chmap .route { transition: opacity var(--shoal-panel) var(--shoal-ease); }
.chmap:hover .route:not(:hover) { opacity: .2; }
.ch-lane { fill: none; stroke: var(--rc); stroke-width: 2.6; stroke-linecap: round; }
.ch-lane.trunk { stroke-width: 3.2; }
.ch-flow { fill: none; stroke: var(--bg); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1.5 9; opacity: .75; animation: ch-flow 1.8s linear infinite; }
@keyframes ch-flow { to { stroke-dashoffset: -21; } }
.ch-dot, .ch-pulse { fill: var(--rc); }
.ch-pulse { transform-box: fill-box; transform-origin: center; animation: ch-pulse 2.4s var(--shoal-ease) infinite; }
@keyframes ch-pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(3); opacity: 0; } }
.ch-open { fill: var(--bg); stroke: var(--rc); stroke-width: 2.4; }
.ch-adopted { fill: var(--rc); stroke: var(--fg); stroke-width: 1.8; }
.ch-check circle { stroke: var(--bg); stroke-width: 1.5; }
.ch-check.ok circle { fill: var(--ok); } .ch-check.bad circle { fill: var(--bad); } .ch-check.wait circle { fill: var(--wait-dot); }
.ch-check path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ch-name { font: 12px var(--code); fill: var(--fg); }
.ch-state { font: 12px var(--font); fill: var(--muted); }
.ch-legend text { font: 10.5px var(--font); fill: var(--muted); }
.ch-ghost .ch-lane { stroke: var(--line); stroke-dasharray: 4 6; }
.ch-ghost .ch-open { stroke: var(--line); }
@keyframes iso-pulse { 0%, 100% { opacity: .18; } 12% { opacity: 1; } }

/* ---- problems: fields, tags and rows (src/problems.ts) -----------------------------------------------------------
   Problems are divided with tags, as Hugging Face and GitHub divide theirs. The five fields are the only category
   colours on the site: each field's icon is drawn in its colour (as GitHub colours languages), and, faded, it is the
   paper of a problem's cover (src/cover.ts); everything else is ink, lines and the semantic colours of checks. */

:root {
  --anatomy-cavity: #d3cec4; --code: 'Google Sans Code', var(--mono);
  --f-mathematics: #4f6bed; --f-computer-science: #9b59d0; --f-physics-astronomy: #129d96; --f-chemistry-materials: #d08a17;
  --f-life-health: #5a9e2c; --f-earth-environment: #2a8ccf; --f-engineering-energy: #d4533f; --f-social-economics: #c2448f; --f-none: #bdc1c6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --anatomy-cavity: #0d0e10; --f-mathematics: #93a6ff; --f-computer-science: #c9a2f3; --f-physics-astronomy: #5fd0c8; --f-chemistry-materials: #f2c063;
    --f-life-health: #a3d47a; --f-earth-environment: #7cc4f2; --f-engineering-energy: #f29484; --f-social-economics: #f09ac8; --f-none: #5f6368;
  }
}

.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 16px; }
.sec-head h2 { font-size: 22px; }

.field-icon { display: inline-flex; flex: none; }
.field-icon > svg.octicon { color: var(--field); }
.field-name { display: inline-flex; align-items: center; gap: 8px; }
.pills a[aria-current=page] .field-icon > svg.octicon { color: inherit; }
.field-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); }

/* the panel: a sidebar of fields and tag groups beside the list */
.pwrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 4px; }
.pf { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 24px; }
.pf-fields { display: flex; flex-direction: column; gap: 2px; }
.pf-field { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 10px; color: var(--fg); font-size: 14px; }
.pf-field > span:not(.field-icon) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-field small { color: var(--muted); font: 400 12px var(--code); }
.pf-field .octicon { color: var(--muted); }
.pf-field:hover { background: var(--hover); text-decoration: none; }
.pf-field.on { background: var(--cream); font-weight: 500; }
/* the selected field's topics, and the collections problems came from: quieter rows under their heading */
.pf-topics { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px 23px; padding-left: 10px; border-left: 1px solid var(--line); }
.pf-sources { display: flex; flex-direction: column; gap: 1px; }
.pf-topic, .pf-source { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; color: var(--fg-2); font-size: 13px; }
.pf-topic span, .pf-source span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-topic small, .pf-source small { color: var(--muted); font: 400 11px var(--code); }
.pf-topic:hover, .pf-source:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.pf-topic.on, .pf-source.on { background: var(--cream); color: var(--fg); font-weight: 500; }
.pf-more summary { padding: 6px 10px; color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; }
.pf-more summary::-webkit-details-marker { display: none; }
.pf-more summary:hover { color: var(--fg); }
.pf-more[open] summary { display: none; }
.pf-group h3 { margin-bottom: 10px; color: var(--muted); font: 500 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg-2); font-size: 13px; white-space: nowrap; }
.tag-pill small { color: var(--muted); font: 400 11px var(--code); }
.tag-pill .octicon { color: var(--muted); }
.tag-pill:hover { border-color: var(--outline); color: var(--fg); text-decoration: none; }
.tag-pill.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tag-pill.on small, .tag-pill.on .octicon { color: inherit; opacity: .75; }
.tag-pill.also { border-style: dashed; }

.pmain { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ptool { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ptool-search { flex: 1; display: flex; align-items: center; gap: 8px; min-width: min(100%, 260px); height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.ptool-search:focus-within { border-color: var(--fg-2); }
.ptool-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; }
.pactive { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-on { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 13px; }
.chip-on:hover { opacity: .85; text-decoration: none; }
.pactive-clear { font-size: 13px; }
.psec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.psec-head h2 { font-size: 20px; }
.pcs.pcs-2 { grid-template-columns: repeat(auto-fit, minmax(min(296px, 100%), 1fr)); } /* the featured pair fills the row, or stacks */
.pcs.pcs-3 { grid-template-columns: repeat(auto-fit, minmax(min(264px, 100%), 1fr)); } /* one row of featured cards, or a stack */
.pmain { container-type: inline-size; }
@container (max-width: 767px) { .pcs-3 > :nth-child(3) { display: none; } } /* two when three do not fit in a row */
.psec-head a.meta { margin-left: auto; }

/* one row per problem, as GitHub lists repositories */
.prows { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 32px; padding: 18px 22px; border-top: 1px solid var(--line-2); }
.prow:first-child { border-top: 0; }
.prow:hover { background: var(--surface); }
.prow-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.prow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.prow-meta .field-tag:hover { color: var(--fg); text-decoration: none; }
.prow-src a { color: var(--fg-2); }
.prow-src-id { display: inline-flex; align-items: center; gap: 3px; }
.prow-src-id .octicon { color: var(--muted); }
.prow-prog.prow-said { grid-template-columns: minmax(0, 1fr); gap: 2px; } /* what the source says, then whose word it is and when */
.prow-prog.prow-said b { font-size: 18px; line-height: 1.3; }
.prow-prog .prize { grid-column: 1 / -1; justify-self: start; }
.prize { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--sun-soft); color: var(--fg); font-size: 11px; line-height: 18px; white-space: nowrap; }
.prow-title { font-size: 17px; font-weight: 500; line-height: 1.3; }
.prow-title a { color: var(--fg); }
.prow-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.prow-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.prow-tags .tag-pill { height: 24px; padding: 0 9px; font-size: 12px; }
.prow-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.prow-prog { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px 8px; color: var(--fg-2); font-size: 13px; }
.prow-prog b { color: var(--fg); font: 300 24px/1 var(--font); font-variant-numeric: tabular-nums; }
.prow-prog .bar { grid-column: 1 / -1; }
.bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line-2); }
.bar span { display: block; height: 100%; background: var(--ok); }
/* a running job's progress: what it reported, or (faint) how much of its time limit it has used */
.bar.est span { background: var(--faint); }
.job-prog { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.job-prog .bar { width: 100%; }
.job-prog.wide { max-width: 420px; }
.job-prog.wide .bar { height: 6px; border-radius: 3px; }
.prow-slot { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.prow-next { flex: 1; display: flex; flex-direction: column; min-width: 0; color: var(--fg-2); font-size: 13px; line-height: 1.4; }
.prow-next span { color: var(--fg); font-weight: 500; }
.prow-next:hover { text-decoration: none; }
.prow-next:hover span { text-decoration: underline; }
.prow-slot .icon-btn { flex: none; margin-top: -4px; }
.prow-stats { margin: 0; color: var(--muted); font-size: 12px; }

/* a problem card: its progress drawn on a cream cover, then kicker, title, description and the next open slot */
.pcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(296px, 100%), 1fr)); gap: 20px; }
.pc { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); transition: box-shadow .2s, border-color .2s; }
.pc:hover { border-color: transparent; box-shadow: var(--shadow); }
.pc-cover { display: flex; align-items: center; justify-content: center; height: 152px; overflow: hidden; background: var(--cream); color: var(--fg); }
.pc-cover .chmap { width: 100%; height: 100%; }
.cover-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-cover:hover { text-decoration: none; }
.pc-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; }
.pc-by { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-kicker { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--muted); font-size: 12px; }
/* a featured problem carries the Shoal mark: on its row, and pinned to its card's cover */
.featured { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; border-radius: 999px; background: var(--surface); color: var(--fg); font-size: 11px; font-weight: 500; white-space: nowrap; }
.featured .logo, .tag-pill .logo { width: auto; height: 9px; }
.featured .logo { color: var(--focus); } /* the brand colour stays on the mark */
.prow-meta .featured { margin-left: 4px; }
.pc-cover { position: relative; }
.pc-cover .featured { position: absolute; top: 10px; left: 10px; background: var(--bg); }
.pc-title { font-size: 17px; font-weight: 500; line-height: 1.3; }
.pc-title a { color: var(--fg); }
.pc-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.pc-next { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; padding-top: 10px; color: var(--fg); font-size: 13px; }
.pc-next:hover { text-decoration: none; }
.pc-next:hover .pc-next-text { text-decoration: underline; }
.pc-next-kind { flex: none; font-weight: 500; }
.pc-next-text { min-width: 0; overflow: hidden; color: var(--fg-2); white-space: nowrap; text-overflow: ellipsis; }
.pc-next .octicon { flex: none; margin-left: auto; color: var(--muted); }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 12px; }
.pc-checks { display: flex; align-items: center; gap: 6px; min-width: 0; }
.check-mark { display: inline-flex; color: var(--fg-2); }

/* the cover's figure, one per progress structure */
.cv-line { display: block; width: 100%; height: auto; margin-top: auto; overflow: visible; }
.cv-base { stroke: var(--line); stroke-width: 1; }
.cv-path { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linejoin: round; }
.cv-dot { fill: var(--cream); stroke: var(--fg); stroke-width: 1.2; }
.cv-dot.cv-last { fill: var(--fg); }

/* where the frontier moved: one strip of cells */
.moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line-2); }
.move { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-bottom: 14px; background: var(--bg); color: var(--fg); }
.move > :not(.move-cover) { padding-inline: 16px; }
.move-cover { height: 84px; margin-bottom: 9px; overflow: hidden; }
.move:hover { background: var(--hover); text-decoration: none; }
.move-of { overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.move-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.move-what { flex: none; color: var(--muted); font: 400 12px var(--code); }
.move-value { overflow: hidden; font: 400 18px/1.35 var(--font); font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.move-was { flex: none; color: var(--muted); font-size: 12px; }
.move-meta { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

/* a problem's own pages: how it is filed, and its progress at the top of Results */
.filed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 14px; }
.filed dt { color: var(--muted); }
.filed dd { margin: 0; }
.filed-checks { display: flex; flex-direction: column; gap: 4px; }
.filed-checks span { display: inline-flex; align-items: center; gap: 6px; }
.standing { margin: 8px 0 32px; }
.standing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 12px; }
.standing-head h3 { font-size: 18px; font-weight: 500; }
.standing-chart { margin-bottom: 14px; padding: 20px 22px 16px; border-radius: 16px; background: var(--cream); }
.parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; }
.part { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--fg); font-size: 14px; }
.part .octicon { flex: none; margin-top: 2px; color: var(--open-solid); }
.part.done .octicon { color: var(--done-solid); }
.part:hover { border-color: var(--fg-2); text-decoration: none; }

/* ---- tasks: a brokerage between people with spare agent time and people who need something done (src/tasks.ts) ----
   The hall lists tasks with what a taker weighs (time, who judges, how fast its requester decides, who is on it); a
   request's page puts what it asks beside what each delivery answers, with a deal box at the side. Five dots say where
   a request stands: amber is the viewer's move, green someone working, grey waiting on others, brass accepted. */
.tk { padding-top: 28px; }
.tk-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.tk-head h1 { font-size: 34px; }
.tk-head .lead { margin-top: 6px; max-width: 60ch; }
.tk-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-spare { width: min(440px, calc(86vw / var(--zoom, 1))); }
.tk-proof { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.tk-proof b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.tk-tabs { display: flex; gap: 2px; margin-top: 18px; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.tk-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--fg-2); font-size: 14px; white-space: nowrap; }
.tk-tabs a:hover { color: var(--fg); text-decoration: none; }
.tk-tabs a[aria-current=page] { border-bottom-color: var(--fg); color: var(--fg); font-weight: 500; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--wait-bg); color: var(--wait); font: 600 11px var(--font); }
.tk-shelf { margin-top: 24px; }
.tk-shelf h2 { font-size: 18px; font-weight: 500; }
.tk-shelf h2 small { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 400; }
.tk-shelf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.done-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--fg); transition: border-color var(--shoal-fast) var(--shoal-ease); }
.done-card:hover { border-color: var(--outline); text-decoration: none; }
.done-card .ic2 { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--brass) 14%, transparent); color: var(--brass); }
.done-card b { font-size: 14px; font-weight: 500; line-height: 1.4; }
.done-card span { color: var(--muted); font-size: 12.5px; }
.tk-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 28px; margin-top: 24px; }
.tk-filters { display: grid; gap: 18px; align-content: start; }
.tk-f h3 { margin-bottom: 6px; color: var(--muted); font: 500 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.rad { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; color: var(--fg-2); font-size: 13.5px; }
.rad:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.rad i { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--faint); border-radius: 50%; }
.rad.on i { border: 4.5px solid var(--fg); }
.rad.chk i { border-radius: 4px; }
.rad.chk.on i { border: 0; background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 6.8 11 12 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.rad.on { color: var(--fg); }
.rad small { margin-left: auto; color: var(--muted); font: 11.5px var(--code); }
.tk-list { min-width: 0; }
.tk-fbtn { display: none; }
.tk-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tk-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); color: var(--fg-2); font-size: 13px; }
.tk-mine > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-mine b { color: var(--fg); font-weight: 500; }
.tk-mine .more { margin-left: auto; font-size: 13px; }
.tk-count { margin: 14px 0 8px; color: var(--muted); font-size: 13px; }
.tk-count b { color: var(--fg); font-weight: 500; }
.jobs { border: 1px solid var(--line); border-radius: 16px; }
.job { display: grid; gap: 7px; padding: 16px 18px; }
.job + .job { border-top: 1px solid var(--line-2); }
.job .when { color: var(--muted); font-size: 12.5px; }
.job .jt { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.job h3 { font-size: 17px; font-weight: 500; line-height: 1.35; }
.job h3 a { color: var(--fg); }
.job .d { color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.job .stats, .job .by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; }
.job .stats { color: var(--fg-2); }
.job .stats > span { display: inline-flex; align-items: center; gap: 5px; }
.job .stats .octicon { color: var(--muted); }
.job .by { gap: 4px 10px; color: var(--muted); }
.job .by .up { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); }
.job code { font-size: 12px; }
.c-wait { color: var(--wait); }
.c-brass { color: var(--brass); }
.btn-link { padding: 0; border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }

/* where a request stands: chips and the five dots */
.m-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.m-chip .octicon { width: 14px; height: 14px; }
.m-chip.wait { background: var(--wait-bg); color: var(--wait); }
.m-chip.ok { background: var(--ok-bg); color: var(--ok); }
.m-chip.brass { background: color-mix(in srgb, var(--brass) 14%, transparent); color: var(--brass); }
.m-chip.no { background: var(--bad-bg); color: var(--bad); }
.m-chip.plain { background: var(--surface-2); color: var(--fg-2); }
.mt { display: inline-flex; align-items: center; vertical-align: middle; }
.mt i { position: relative; flex: none; width: 9px; height: 9px; border: 1.5px solid var(--outline); border-radius: 50%; background: var(--bg); }
.mt i + i { margin-left: 14px; }
.mt i + i::before { content: ""; position: absolute; right: calc(100% + 1.5px); top: 50%; width: 14px; height: 1.5px; background: var(--outline); transform: translateY(-50%); }
.mt i.d { border-color: var(--fg-2); background: var(--fg-2); }
.mt i.d + i::before { background: var(--fg-2); }
.mt i.cur { width: 13px; height: 13px; border-width: 2.5px; }
.mt i.cur.wait { border-color: var(--wait); }
.mt i.cur.work { border-color: var(--ok); }
.mt i.cur.read { border-color: var(--muted); }
.mt i.acc { border-color: var(--brass); background: var(--brass); }
.mt i.no { border-color: var(--bad); }
.tk-grp { margin-top: 22px; }
.tk-grp h2, .tk-grp h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font: 500 12px var(--font); letter-spacing: .07em; text-transform: uppercase; }
.tk-grp.yours h2, .tk-grp.yours h3 { color: var(--wait); }
.cnt { color: var(--fg-2); font: 500 12px var(--code); letter-spacing: 0; }
.rows2 { border: 1px solid var(--line); border-radius: 14px; }
.r2 { display: grid; grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1.3fr) 104px; gap: 6px 16px; align-items: center; padding: 12px 14px 12px 16px; }
.r2 + .r2 { border-top: 1px solid var(--line-2); }
.r2 .t { min-width: 0; font-weight: 500; }
.r2 .t a { color: var(--fg); }
.r2 .t small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.r2 .st { min-width: 0; color: var(--fg-2); font-size: 13px; line-height: 1.5; }
.r2 .act { justify-self: end; }
.rq-decided .r2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr); }

/* a request's page */
.rq-head { padding-bottom: 0; }
.rq-head .proj-title { margin-top: 6px; }
.rq-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 16px; color: var(--muted); font-size: 13.5px; }
.rq-by > a { color: var(--fg-2); font-weight: 500; }
.rq { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; padding-top: 24px; }
.rq-main { min-width: 0; }
.rqc { position: relative; overflow: hidden; border-radius: 14px; }
.rqc .k { position: absolute; left: 12px; top: 12px; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 500; }
.rqc .mo { position: absolute; right: 14px; bottom: 10px; margin: 0; color: var(--cover-ink); font: 500 12px/1.45 var(--code); text-align: right; white-space: pre; }
.rqc .mo.grid { left: 46%; top: 22px; right: 16px; bottom: 14px; border: 1px solid var(--cover-ink); background-image: linear-gradient(var(--cover-ink) 1px, transparent 1px), linear-gradient(90deg, var(--cover-ink) 1px, transparent 1px); background-size: 100% 14px, 22% 100%; opacity: .6; }
.cv-code { background: var(--cover-code); } .cv-data { background: var(--cover-data); } .cv-formal { background: var(--cover-formal); } .cv-docs { background: var(--cover-docs); } .cv-design { background: var(--cover-design); } .cv-media { background: var(--cover-media); } .cv-office { background: var(--cover-office); } .cv-check { background: var(--surface-2); }
/* a task card's labels: what the agent must bring first, then the material's language and the topics; each filters the hall */
.job .lbls { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.job .lbls a { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); font-size: 12px; text-decoration: none; }
.job .lbls a:hover { border-color: var(--outline); color: var(--fg); }
.job .lbls a.need { border-style: dashed; color: var(--fg); }
.job .lbls .octicon { color: var(--muted); }
.ran video, .ran audio { display: block; max-width: 100%; border-radius: 8px; }
.rq-cover { height: 104px; }
.rq-ask { margin-top: 20px; }
.rq-ask.readme-body { padding: 0; }
.rq-ask h2 { margin: 18px 0 6px; font-size: 20px; }
.rq-ask h2:first-child { margin-top: 0; }
.rq-sec { margin-top: 28px; }
.rq-sec h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 20px; }
.nl { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nl li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
.nl li b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--fg-2); font: 500 11.5px var(--code); }
.cmp-wrap { overflow-x: auto; }
.cmp { display: grid; grid-template-columns: minmax(150px, .9fr) repeat(var(--cols), minmax(200px, 1fr)); border: 1px solid var(--line); border-radius: 14px; font-size: 13.5px; }
form.inline { display: inline; }
.cmp > div { min-width: 0; padding: 10px 14px; border-top: 1px solid var(--line-2); color: var(--fg-2); }
.cmp > .h { border-top: 0; background: var(--surface); }
.cmp > .h:nth-child(2) { border-top-right-radius: 0; }
.cmp > .h.rk0 { border-top-left-radius: 13px; }
.cmp > .h:last-of-type { border-top-right-radius: 13px; }
.cmp > .rk { color: var(--fg); }
.cmp > .rk b { margin-right: 8px; color: var(--muted); font: 500 11.5px var(--code); }
.cmp .hd2 { display: flex; align-items: center; gap: 8px; }
.cmp .ans { display: flex; align-items: flex-start; gap: 6px; }
.cmp .ans.acts { flex-wrap: wrap; align-items: center; }
.cmp .y { color: var(--ok); } .cmp .q { color: var(--wait); }
.tk-decline { width: min(300px, calc(80vw / var(--zoom, 1))); }
.window { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--fg-2); font-size: 13px; }
.window b { color: var(--wait); font-weight: 500; }
.window .wbar { position: relative; width: 120px; height: 5px; overflow: hidden; border-radius: 999px; background: var(--line-2); }
.window .wbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc((1 - var(--left)) * 100%); border-radius: inherit; background: var(--wait); }
.rq-decided { margin-top: 12px; }
.r-other { display: grid; gap: 8px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--fg-2); font-size: 13px; }
.oa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.endbar { position: relative; display: inline-block; width: 12px; height: 12px; }
.endbar::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 2px; background: var(--faint); }
.endbar::after { content: ""; position: absolute; left: 9px; top: 1px; width: 2px; height: 10px; background: var(--faint); }
.deal { position: sticky; top: 16px; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: var(--shadow); }
.deal-text { color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.deal-go { justify-content: center; width: 100%; }
.rq-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px; }
.rq-facts dt { color: var(--muted); }
.rq-facts dd { margin: 0; color: var(--fg); }
.fine { color: var(--muted); font-size: 12px; line-height: 1.5; }
.tk-up summary { cursor: pointer; }
.tk-up form { display: grid; gap: 6px; min-width: 220px; margin-top: 8px; }
.tk-up form .btn { justify-self: start; }
.label-edit summary { cursor: pointer; margin-top: 6px; }
.label-edit form { display: grid; gap: 6px; margin-top: 8px; }
.label-edit form .btn { justify-self: start; }
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
details.field > summary { cursor: pointer; }
.tk-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--fg-2); font-size: 13px; line-height: 1.5; }
.tk-next b { display: block; color: var(--fg); font-weight: 500; }

/* a person's agents at work: a lane each over seven days, an hour a cell */
.aw { margin-top: 8px; }
.aw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.aw-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 12px; }
.aw-legend i { width: 10px; height: 10px; border-radius: 2px; }
.aw-legend .mk { position: static; margin-left: 8px; transform: none; }
.aw-lanes { margin-top: 12px; padding: 6px 16px 10px; border: 1px solid var(--line); border-radius: 16px; }
.aw-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) 92px; gap: 6px 18px; align-items: center; padding: 12px 0; }
.aw-row + .aw-row { border-top: 1px solid var(--line-2); }
.aw-axis { padding: 4px 0 0; }
.aw-axis + .aw-row { border-top: 0; }
.aw-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); color: var(--muted); font-size: 11.5px; }
.aw-days span { padding-left: 2px; border-left: 1px solid var(--line-2); }
.aw-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aw-who > span { display: grid; gap: 2px; min-width: 0; }
.aw-who b { color: var(--fg); font-weight: 500; }
.aw-line { color: var(--fg-2); font-size: 12.5px; line-height: 1.45; }
.aw-st { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.aw-st.wait { color: var(--wait); } .aw-st.work { color: var(--ok); } .aw-st.read { color: var(--muted); }
.aw-strip { position: relative; display: grid; grid-template-columns: repeat(168, minmax(0, 1fr)); height: 24px; border-radius: 4px; }
.aw-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 2px, transparent 2px) 0 0 / calc(100% / 7) 100%; pointer-events: none; }
.aw-strip i, .aw-legend i { background: var(--fg); opacity: .07; }
.aw-strip i.l1, .aw-legend i.l1 { opacity: .24; } .aw-strip i.l2, .aw-legend i.l2 { opacity: .42; } .aw-strip i.l3, .aw-legend i.l3 { opacity: .62; } .aw-strip i.l4, .aw-legend i.l4 { opacity: .85; }
.mk { position: absolute; z-index: 1; top: -5px; width: 9px; height: 9px; border-radius: 50%; transform: translateX(-50%); background: var(--fg-2); box-shadow: 0 0 0 2px var(--bg); }
.mk.taken { top: auto; bottom: -5px; background: var(--brass); }
.mk.refused { top: auto; bottom: -5px; border: 2px solid var(--bad); background: var(--bg); box-sizing: border-box; }
.aw-rec { display: grid; grid-template-columns: auto auto; gap: 0 6px; align-items: baseline; justify-content: end; color: var(--muted); font-size: 11.5px; }
.aw-rec b { color: var(--fg); font: 400 16px var(--font); font-variant-numeric: tabular-nums; text-align: right; }
.aw-prs { display: grid; gap: 4px; }
.aw-prs .r2 { grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1.4fr) 0; }

@media (max-width: 818px) {
  .tk-body { grid-template-columns: minmax(0, 1fr); }
  .tk-filters { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .rq { grid-template-columns: minmax(0, 1fr); }
  .deal { position: static; grid-row: 1; }
}
@media (max-width: 767px) {
  .tk-shelf-row, .tk-next { grid-template-columns: minmax(0, 1fr); }
  /* filters wait behind a button on a phone */
  .tk-filters { display: none; }
  .tk-ftoggle:checked ~ .tk-filters { display: grid; }
  .tk-fbtn { display: inline-flex; }
  .job .jt { flex-direction: column; }
  .r2, .rq-decided .r2, .aw-prs .r2 { grid-template-columns: minmax(0, 1fr) auto; }
  .r2 .t { grid-column: 1; grid-row: 1; }
  .r2 .act { grid-column: 2; grid-row: 1; }
  .r2 .mt { grid-column: 1 / -1; grid-row: 2; }
  .r2 .st { grid-column: 1 / -1; }
  .cmp { grid-template-columns: minmax(0, 1fr) repeat(var(--cols), minmax(0, 1fr)); font-size: 12.5px; }
  .cmp > div { padding: 8px 10px; }
  .cmp > .rk { grid-column: 1 / -1; background: var(--surface); }
  .cmp > .h.rk0 { display: none; }
  .aw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .aw-strip { grid-column: 1 / -1; }
  .aw-axis { display: none; }
  .tk-mine .more { margin-left: 0; }
}

/* ---- home: the hub (src/home.ts) ------------------------------------------------------------------------------------
   The head is the brand's water with the greeting in it. Someone who has just arrived gets three steps in; after that
   you come first. Each section is a heading over one group. */

/* the head is the landing's water at the hour the greeting names, the brand's haze fading into the page above and below,
   with the landing's shoal in it and its latest results going by. The school swims through it (app.js): a fish for
   each person or agent who left a result this fortnight, yours lit. In the evening the dawn light is warmed; in dark
   mode it is the dusk haze, dimmed, as on the landing */
.hub-head { position: relative; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line-2); }
.hub-water { position: absolute; z-index: -2; inset: 0; background: #d9dccb url(/static/brand/haze-dawn.jpg) 18% 52% / cover;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 72%, transparent); }
.hub-head[data-tide=noon] .hub-water { background-position: 58% 46%; }
.hub-head[data-tide=dusk] .hub-water { background-image: linear-gradient(rgba(214, 160, 96, .14), rgba(214, 160, 96, .14)), url(/static/brand/haze-dawn.jpg); background-position: 0 0, 30% 56%; }
/* the school stays faint behind the greeting, so the words read over it */
.hub-school { display: block; width: 100%; height: 100%; --fish-you: #03586f;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 30%, #000 52%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 30%, #000 52%); }
/* the head's row: the greeting on the left, the latest on the right and the shoal between them, in the page's column;
   the empty water lets the pointer through to the school */
.hub-head-in { position: relative; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 280px; padding-block: 44px 30px; pointer-events: none; }
.hub-head-in > * { pointer-events: auto; }
.hub-art { position: absolute; z-index: -1; left: 28%; bottom: -14px; width: 640px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.hub-head-in > .hub-art { pointer-events: none; }
.hub-head .ln-ticker { position: relative; right: auto; bottom: auto; flex: none; }
@media (prefers-color-scheme: dark) {
  .hub-water, .hub-head[data-tide] .hub-water { background: #1f2023 url(/static/brand/haze-dusk.jpg) 30% 50% / cover; filter: saturate(.7) brightness(.8); }
  .hub-school { --fish-you: #6fb9c9; }
}
.hub-hello { display: flex; align-items: center; gap: 18px; }
.hub-hello h1 { font-size: 36px; line-height: 1.12; }
.hub-hello > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hub-hello .lead { margin: 0; color: var(--fg-2); }
.hub-hello .lead a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.hub-standing { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: var(--fg-2); font-size: 14px; }
.hub-standing a { color: inherit; }
.hub-standing b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

.hub { display: flex; flex-direction: column; gap: 40px; padding-block: 32px 72px; }
.hub-sec .sec-head { margin-bottom: 14px; }
.hub-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.hub-two > * { min-width: 0; }
/* a section's one group: rows in a bordered list */
.hub-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; }
.hub-list > * { padding: 12px 16px; border-top: 1px solid var(--line-2); }
.hub-list > :first-child { border-top: 0; }
.hub-item, .hub-agent { display: flex; gap: 10px; color: var(--fg); font-size: 13px; }
.hub-agent { align-items: center; }
.hub-item:hover, .hub-agent:hover { background: var(--hover); text-decoration: none; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* three steps in, for someone who has just arrived; a step done is ticked */
.hub-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line-2); list-style: none; }
.hub-step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 20px; background: var(--bg); }
.hub-step-n { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: var(--fg-2); font: 500 13px/1 var(--code); }
.hub-step h3 { font-size: 16px; font-weight: 500; }
.hub-step h3 small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.hub-step p { flex: 1; margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.hub-step.done .hub-step-n { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
.hub-step.done h3 { color: var(--muted); }
.hub-sub { margin: 28px 0 12px; font-size: 15px; font-weight: 500; }
/* the overview: fields across, kinds of work down, each cell counting problems and their open slots */
.dash-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.dash { display: grid; grid-template-columns: 100px repeat(var(--fields, 5), minmax(120px, 1fr)); min-width: calc(100px + var(--fields, 5) * 124px); }
.dash-corner, .dash-col, .dash-row { background: var(--surface); color: var(--fg); font-size: 13px; }
.dash-corner { border-bottom: 1px solid var(--line); }
.dash-col { display: grid; grid-template-columns: 1fr auto; align-items: center; align-content: start; gap: 6px; padding: 12px 10px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line-2); }
.dash-col b { grid-column: 1 / -1; min-width: 0; font-weight: 500; line-height: 1.25; }
.dash-col small { grid-row: 1; grid-column: 2; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px; border-top: 1px solid var(--line-2); }
.dash-row b { font-weight: 500; }
.dash-col small, .dash-row small { color: var(--muted); font: 400 11px var(--code); }
.dash-col:hover, .dash-row:hover { background: var(--hover); text-decoration: none; }
.dash-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 88px; padding: 10px 12px; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); color: var(--fg); }
.dash-row.first, .dash-cell.first { border-top: 0; }
.dash-cell b { font: 300 26px/1 var(--font); font-variant-numeric: tabular-nums; }
.dash-what { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--fg-2); font-size: 12px; line-height: 1.35; }
.dash-cell small { margin-top: auto; color: var(--muted); font-size: 11px; }
a.dash-cell:hover { background: var(--hover); text-decoration: none; }
/* an empty cell is room for a problem: blank, with the way to propose one shown on pointing */
a.dash-cell.empty { flex-direction: row; align-items: center; justify-content: center; gap: 6px; color: transparent; font-size: 12px; }
a.dash-cell.empty:hover { color: var(--fg-2); }
.grow4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grow-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; }
.grow-card > .octicon { color: var(--fg-2); }
.grow-card h3 { font-size: 16px; font-weight: 500; }
.grow-card p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.grow-card .more { margin-top: auto; font-size: 13px; }
.lamp { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--st, var(--faint)); }


@media (max-width: 818px) {
  .grow4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pf { position: static; gap: 14px; }
  .pf-fields { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .pf-field { height: 34px; border: 1px solid var(--line); border-radius: 999px; }
  .pf-field.on { border-color: var(--cream); }
  .pf-topics { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; padding: 0; border: 0; } /* the field's topics on a line of their own */
  .pf-topic { height: 30px; border: 1px solid var(--line); border-radius: 999px; }
  .pf-topic.on { border-color: var(--cream); }
}
@media (max-width: 767px) {
  .hub-two, .grow4, .hub-steps { grid-template-columns: minmax(0, 1fr); }
  .hub-art, .hub-head .ln-ticker, .hub-school { display: none; } /* on a phone the greeting fills the band: no fish over it */
  .hub-head-in { min-height: 0; padding-block: 28px 24px; }
  .hub-hello { align-items: flex-start; }
  .hub-hello h1 { font-size: 28px; }
  .prow { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
}

/* ---- benchmarks: the panel and a benchmark's pages (src/benchmarks.ts) --------------------------------------------
   Ranks, numbers and bars, after Kaggle's benchmarks. A bar runs from the baseline (empty) to the record (full); the
   leader's bar is the one accented, the rest are grey. Subtasks use a diverging blue–red ramp around a neutral grey. */

:root {
  --viz-accent: #1d7489; --viz-dim: #a8adb3; --viz-track: #ebedf0;
  --viz-up: #2a78d6; --viz-down: #e34948; --viz-mid: #f0efec;
}
@media (prefers-color-scheme: dark) {
  :root { --viz-accent: #6fb9c9; --viz-dim: #6b7075; --viz-track: #34373b; --viz-up: #6fb9c9; --viz-down: #e66767; --viz-mid: #383835; }
}

.bm { padding-bottom: 64px; }
.bm-dir { color: var(--muted); font-weight: 400; }
.bm-score { font-variant-numeric: tabular-nums; }
.bm-share { color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-share.good { color: var(--viz-accent); }
.bm-share.bad { color: var(--bad); }
.rtag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); font-size: 11.5px; font-weight: 400; line-height: 1; white-space: nowrap; }
.flow.inline { display: inline-flex; vertical-align: 2px; }

/* a bar from the baseline to the record */
.bm-bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--viz-track); }
.bm-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--viz-dim); }
.lead .bm-bar > i, .bm-step .bm-bar > i { background: var(--viz-accent); }

/* where a benchmark stands */
.bm-status { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1; white-space: nowrap; vertical-align: 1px; }
.bm-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bm-status.ok { background: var(--ok-bg); color: var(--ok); }
.bm-status.wait { background: var(--wait-bg); color: var(--wait); }
.bm-status.bad { background: var(--bad-bg); color: var(--bad); }

/* the top routes: rank, route, score, who made it, and a bar under each */
.bm-podium { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bm-podium li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 20px; align-items: center; column-gap: 8px; row-gap: 7px; font-size: 14px; }
.bm-podium .bm-bar { grid-column: 1 / -1; }
.bm-rk { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.bm-pname { overflow: hidden; color: var(--fg); font: 13px var(--mono); white-space: nowrap; text-overflow: ellipsis; }
a.bm-pname:hover { text-decoration: underline; }
.bm-podium b { font-weight: 400; font-variant-numeric: tabular-nums; }
.bm-podium .lead b { font-weight: 500; }
.bm-who { display: flex; }

/* a benchmark's header: the record and the top routes, where a problem shows its route map */
.bm-top { display: flex; flex-direction: column; gap: 4px; width: 300px; flex-shrink: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: 0 1px 2px rgba(60, 64, 67, .06), 0 8px 24px rgba(60, 64, 67, .08); }
.bm-lbl { color: var(--muted); font: 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bm-lbl-top { margin: 12px 0 4px; }
.bm-big { font: 300 36px/1.05 var(--font); font-variant-numeric: tabular-nums; }
.bm-top .bm-podium { gap: 10px; }
.bm-top .bm-podium li { font-size: 13px; }

/* /benchmarks: cards beside a rail of what is new */
.bm-filters { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.bm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.bm-find { display: flex; align-items: center; gap: 10px; }
.bm-search { flex: none; width: 240px; min-width: 0; height: 36px; }
.bm-yours { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); font-size: 14px; }
.bm-yours:hover { text-decoration: none; border-color: var(--fg-2); }
.bm-yours.on { border-color: var(--fg); color: var(--fg); }
.bm-yours.on .octicon { color: var(--viz-accent); }
.bm-sort summary { height: 36px; gap: 6px; }
.bm-sort .menu-item[aria-current] { font-weight: 500; }
.bm-tasks a { height: 30px; font-size: 13px; }
.bm-side { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.bm-panel-body { margin-top: 24px; padding-bottom: 64px; }
.bm-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 20px; }
/* a card in the directory: what it is, then the record as its largest thing (the score, how much better than the
   baseline, the route that holds it), the next two routes, and who keeps it. One data colour; lines only where needed. */
.bm-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--fg);
  transition: box-shadow var(--shoal-panel) var(--shoal-ease), border-color var(--shoal-fast) var(--shoal-ease); }
.bm-card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--viz-accent) 35%, var(--line)); text-decoration: none; }
.bm-kick { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.bm-kick > span:not(.bm-status):not(.field-icon) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bm-card h3 { font-size: 20px; font-weight: 500; line-height: 1.3; }
.bm-desc { display: -webkit-box; overflow: hidden; color: var(--fg-2); font-size: 14px; font-weight: 300; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bm-rec { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--viz-accent) 6%, var(--bg)); }
.bm-rec-metric { margin-top: -2px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.bm-rec-score { font: 300 32px/1.05 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bm-rec-gain { margin-top: 4px; color: var(--fg-2); font-size: 13px; }
.bm-rec-gain b { color: var(--viz-accent); font-weight: 500; }
.bm-rec .bm-bar { height: 5px; }
.bm-rec .bm-bar > i { background: var(--viz-accent); }
.bm-rec-by { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.bm-next { display: flex; flex-direction: column; gap: 9px; margin: 8px 2px 0; padding: 0; list-style: none; }
.bm-next li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 5px; font-size: 13px; }
.bm-next b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.bm-next .bm-bar { grid-column: 2 / -1; height: 3px; }
.bm-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; color: var(--muted); font-size: 12.5px; }
.bm-card-foot > span:first-child { display: flex; align-items: center; gap: 6px; color: var(--fg-2); }

/* what is new: records, routes, merges and benchmarks, newest first */
/* the rail: one line per event, its kind a small mark (a record rises), the time after it; no badges or boxes */
.bm-rail { display: flex; flex-direction: column; min-width: 0; padding-left: 24px; border-left: 1px solid var(--line-2); }
.bm-rail h2 { margin-bottom: 10px; font-size: 18px; font-weight: 500; }
.bm-feed { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bm-feed li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: var(--fg-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.bm-feed .octicon { margin-top: 2px; color: var(--muted); }
.bm-feed li.record .octicon { color: var(--viz-accent); }
.bm-feed a { color: var(--fg); }
.bm-feed .branch { padding: 0; background: none; color: var(--fg); font-size: 12.5px; }
.bm-feed time { color: var(--muted); white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bm-rail .more { margin-top: 14px; }

/* a benchmark's Leaderboard: one table, the score column shaded, the baseline at the foot */
.bm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-block: 24px 16px; }
.bm-tools .pills a { height: 34px; }
.bm-chips { margin-bottom: 12px; }
.bm-chips a { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.bm-chips a[aria-current=page] { border-color: transparent; background: var(--surface-2); color: var(--fg); font-weight: 500; }
.bm-board td { padding-inline: 14px; }
.bm-board .bm-sc { background: var(--surface); }
.bm-board thead .bm-sc { min-width: 120px; color: var(--fg); white-space: normal; } /* a long metric name wraps rather than push columns out */
.bm-board .bm-score { font-size: 15px; }
.bm-board b.bm-score { font-weight: 500; }
.bm-route { display: flex; align-items: flex-start; gap: 10px; }
.bm-route > .avatar { margin-top: 2px; }
.bm-vs { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bm-vs .bm-bar { width: 96px; flex: none; }
.bm-src { color: var(--muted); }
a.bm-src.ok { color: var(--ok); }
.bm-board tr.bm-floor td { border-top: 1px dashed var(--line); background: var(--cream); }
.bm-step { display: flex; align-items: center; gap: 10px; }
.bm-step .bm-bar { width: 96px; flex: none; }
.bm .show-sm { display: none; }

/* the routes by subtask, as Kaggle's tasks × models matrix */
.bm-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.bm-pick .meta { margin-right: 4px; }
.bm-pick a { font-size: 13px; }
.bm-tick { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; cursor: pointer; }
.bm-tick.on { border-color: var(--fg-2); color: var(--fg); }
.bm-tick input { margin: 0; accent-color: var(--viz-accent); }
.bm-mx { font-size: 13px; }
.bm-mx th, .bm-mx td { padding: 8px 10px; }
.board.bm-mx tbody td[class*="hm-"] { background: var(--c); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board.bm-mx tbody td.hm-p3, .board.bm-mx tbody td.hm-n3 { color: #fff; }
.bm-mx .off { opacity: .35; }
.bm-mx-col { height: 110px; vertical-align: bottom; }
.bm-mx-col span { display: inline-block; font-weight: 400; writing-mode: vertical-rl; transform: rotate(180deg); }
.bm-mx.dense td:last-child { width: 100%; }
.bm-strip { display: flex; gap: 1px; min-width: 400px; }
.bm-strip i { flex: 1 1 0; min-width: 2px; height: 22px; background: var(--c); }
.hm-n3 { --c: var(--viz-down); }
.hm-n2 { --c: color-mix(in oklab, var(--viz-down) 62%, var(--viz-mid)); }
.hm-n1 { --c: color-mix(in oklab, var(--viz-down) 30%, var(--viz-mid)); }
.hm-z { --c: var(--viz-mid); }
.hm-p1 { --c: color-mix(in oklab, var(--viz-up) 30%, var(--viz-mid)); }
.hm-p2 { --c: color-mix(in oklab, var(--viz-up) 62%, var(--viz-mid)); }
.hm-p3 { --c: var(--viz-up); }
.hm-none { --c: transparent; }
.hm-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; color: var(--fg-2); font-size: 12px; }
.hm-key i { width: 18px; height: 10px; border-radius: 2px; background: var(--c); }

/* Rules */
.bm-eval { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.bm-eval h3 { margin-top: 8px; font-size: 16px; font-weight: 500; }

/* the floating tooltip for marks with a data-tip (app.js) */
.tip { position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 1px; max-width: 320px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-size: 12.5px; line-height: 1.4; box-shadow: var(--shadow); pointer-events: none; }
.tip b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tip span { opacity: .78; }

/* a route's tags, picked on its banner */
.tag-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; border: 0; }
.tag-pick legend { margin-bottom: 6px; padding: 0; }
.tag-pick .check { gap: 6px; font-size: 13px; }

/* the leaderboard's rail sits beside the table only where the table fits; elsewhere its items flow in columns below */
.bm .bm-side { grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 1151px) {
  .bm .bm-side { grid-template-columns: minmax(0, 1fr); }
  .bm .bm-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); column-gap: 28px; padding-left: 0; border-left: 0; }
  .bm .bm-rail > h2, .bm .bm-rail > .more, .bm .bm-rail > p { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .bm-side { grid-template-columns: minmax(0, 1fr); }
  .bm-rail { padding-left: 0; border-left: 0; }
}
@media (max-width: 767px) {
  .bm .show-sm { display: revert; }
  .proj-row:has(.bm-top) { flex-direction: column; align-items: stretch; gap: 20px; }
  .bm-top { width: auto; }
}

/* ---- games (src/games.ts) ------------------------------------------------------------------------------------- */
/* the panel: a shelf per kind of game, each a grid of cards; a card leads with the game's own picture (a frame of its
   viewer), then its shelf and style, what it is, its champion, and how much it is played */
.gm-shelf + .gm-shelf { margin-top: 28px; }
.gm-shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
.gm-shelf-head h2 { font-size: 20px; font-weight: 500; }
.gm-shelf-head .meta { flex: 1; min-width: 12em; }
.gm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.gm-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--fg);
  transition: box-shadow var(--shoal-panel) var(--shoal-ease), border-color var(--shoal-fast) var(--shoal-ease); }
.gm-card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--viz-accent) 35%, var(--line)); text-decoration: none; }
.gm-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.gm-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--shoal-scene) var(--shoal-ease); }
.gm-card:hover .gm-cover img { transform: scale(1.03); }
.gm-cover-name { padding: 0 24px; color: var(--muted); font-size: 22px; text-align: center; }
.gm-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 0; }
.gm-kick { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.gm-title { font-size: 19px; font-weight: 500; line-height: 1.3; }
.gm-desc { display: -webkit-box; overflow: hidden; color: var(--fg-2); font-size: 14px; font-weight: 300; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gm-champ { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 6px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--viz-accent) 6%, var(--bg)); font-size: 13.5px; }
.gm-champ > .octicon { color: var(--brass); }
.gm-champ .bm-pname { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gm-champ b { font-weight: 500; font-variant-numeric: tabular-nums; }
.gm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding: 14px 18px 14px; color: var(--muted); font-size: 12.5px; }
.gm-foot > span:first-child { color: var(--fg-2); min-width: 0; }
.gm-foot > span:last-child { white-space: nowrap; }
/* who sat where in a match, one route colour each */
.gm-seats { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-seat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; }
.gm-seat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--seat); }
/* a game's page: a slim header, so the stage under it shows whole; the champion where a benchmark shows its record */
.gm-head { padding-top: 12px; }
.gm-head .tabs-bar { margin-top: 14px; }
.gm-bar { display: flex; align-items: center; gap: 20px; }
.gm-thumb { flex-shrink: 0; width: 120px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.gm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-id { min-width: 0; }
.gm-id .meta a { color: inherit; }
.gm-head .proj-title { margin-top: 2px; font-size: 30px; }
.gm-head .proj-people { margin-top: 8px; }
.gm-crown { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--fg);
  transition: border-color var(--shoal-fast) var(--shoal-ease); }
.gm-crown:hover { border-color: color-mix(in srgb, var(--brass) 50%, var(--line)); text-decoration: none; }
.gm-crown > .octicon { color: var(--brass); }
.gm-crown-text { display: flex; flex-direction: column; min-width: 0; max-width: 13em; line-height: 1.3; }
.gm-crown-text small { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.gm-crown-text b { overflow: hidden; font: 500 14px/1.3 var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.gm-crown-score { font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.gm-acts { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.tab-sep { flex-shrink: 0; align-self: center; width: 1px; height: 20px; margin: 0 8px; background: var(--line); }
/* the stage: the game's own viewer fills its screen, in the game's own colours; around it the page keeps its own (white,
   greys and black, dark with the system), with no band of its own; the match on it is named under it, and the reel of
   matches stands beside it */
:root { --stage: var(--bg); --stage-2: var(--surface); --stage-3: var(--surface-2); --stage-fg: var(--fg); --stage-muted: var(--muted); --stage-line: var(--line); --stage-urgent: var(--bad); }
.gm-theater { background: var(--stage); color: var(--stage-fg); }
.gm-arena { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding-block: 20px 24px; }
.gm-screen { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--stage-line); border-radius: 16px; background: var(--stage-2); }
/* as tall as the window leaves under the header, so the match's name under it shows too */
.gm-viewer { display: block; width: 100%; height: clamp(320px, calc(100vh / var(--zoom, 1) - 350px), 760px); border: 0; background: var(--stage-2); }
.gm-screen:fullscreen { border: 0; border-radius: 0; }
.gm-screen:fullscreen .gm-viewer { flex: 1; height: auto; }
.gm-blank { position: relative; display: grid; place-items: center; height: min(56vh / var(--zoom, 1), 520px); overflow: hidden; }
.gm-blank img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25; filter: blur(3px) saturate(.8); }
.gm-blank p { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 32em; padding: 0 24px; color: var(--stage-muted); text-align: center; }
.gm-blank b { color: var(--stage-fg); font-size: 20px; font-weight: 500; }
.gm-theater code { background: var(--stage-3); color: var(--stage-fg); }
.gm-under { display: flex; align-items: flex-start; gap: 16px; padding: 12px 12px 14px 18px; border-top: 1px solid var(--stage-line); }
.gm-now { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.gm-now-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.gm-now-title { color: var(--stage-fg); font-size: 16px; font-weight: 500; }
.gm-now-meta, .gm-now-meta a { color: var(--stage-muted); font-size: 12.5px; }
.gm-result { color: var(--stage-muted); font-size: 13.5px; }
.gm-result[data-turn] { color: var(--stage-fg); font-weight: 500; }
.gm-result[data-urgent] { color: var(--stage-urgent); }
.gm-plates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gm-plate { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 9px; border: 1px solid var(--stage-line); border-radius: 999px; background: var(--stage-3); font-size: 13px; }
.gm-plate > i { width: 9px; height: 9px; border-radius: 50%; background: var(--seat); }
.gm-plate b { font: 500 13px/1.4 var(--mono); }
.gm-plate small { color: var(--stage-muted); font-size: 12px; }
.gm-vs { color: var(--stage-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.gm-ctrl { display: flex; flex-shrink: 0; gap: 2px; }
.gm-ctrl [data-room-again] + [data-room-again] { margin-left: 6px; }
.gm-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--stage-muted); cursor: pointer;
  transition: background var(--shoal-fast) var(--shoal-ease), color var(--shoal-fast) var(--shoal-ease); }
.gm-btn:hover { background: var(--stage-3); color: var(--stage-fg); }
.gm-reel { display: flex; flex-direction: column; min-width: 0; max-height: calc(clamp(320px, calc(100vh / var(--zoom, 1) - 350px), 760px) + 96px); }
.gm-reel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 6px 10px; }
.gm-notes { padding-block: 0 28px; }
.gm-notes h2 { margin: 0 0 10px; font-size: 15px; font-weight: 500; }
.gm-note-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gm-note-list li { padding: 10px 14px; border: 1px solid var(--stage-line); border-radius: 12px; background: var(--stage-2); }
.gm-note-who { color: var(--stage-muted); font-size: 12.5px; }
.gm-note-who a { color: var(--stage-fg); }
.gm-note-list p { margin: 4px 0 0; }
.gm-reel-head h2 { font-size: 15px; font-weight: 500; }
.gm-reel-head a { color: var(--stage-muted); font-size: 13px; }
.gm-reel ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-color: var(--stage-3) transparent; }
.gm-reel li a { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--stage-fg); }
.gm-reel li a:hover { background: var(--stage-2); text-decoration: none; }
.gm-reel li a[aria-current] { background: var(--stage-3); box-shadow: inset 3px 0 0 var(--stage-fg); }
.gm-dots { display: flex; flex-direction: column; gap: 4px; padding-top: 5px; }
.gm-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--seat); }
.gm-reel-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gm-reel-text b { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.gm-reel-text small { overflow: hidden; color: var(--stage-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.gm-reel-none { padding: 8px 6px; color: var(--stage-muted); font-size: 13.5px; }
/* under the stage: the ladder and the rules, beside the way in for an agent */
.gm-below { padding-top: 32px; }
.gm-below.cols { grid-template-columns: minmax(0, 1fr) 340px; }
.gm-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.gm-sec-head h2 { font-size: 22px; font-weight: 400; }
.gm-sec-head .more { margin-left: auto; }
.gm-first td { background: color-mix(in srgb, var(--brass) 6%, var(--bg)); }
.gm-first .rank { color: var(--brass); }
.gm-starter td { border-top: 1px dashed var(--line); color: var(--muted); }
.gm-cell.good { color: var(--ok); font-weight: 500; }
.gm-cell.bad { color: var(--bad); }
.gm-who { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
.gm-ladder + .readme { margin-top: 28px; }
.facts .gm-enter { gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(var(--surface), var(--bg) 70%); }
.gm-enter .snippet-text { max-height: 240px; padding-right: 16px; font-size: 12px; }
.gm-enter .snippet-copy { position: static; margin-top: 8px; }
.gm-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; color: var(--fg-2); font-size: 13.5px; list-style: none; }
.gm-steps li { display: flex; align-items: flex-start; gap: 10px; }
.gm-steps .octicon { flex-shrink: 0; margin-top: 3px; color: var(--muted); }
.gm-brief { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); }
.gm-brief:hover { border-color: var(--fg-2); text-decoration: none; }
.gm-brief span { display: flex; flex-direction: column; }
.gm-brief b { font: 500 13.5px/1.4 var(--mono); }
.gm-brief small { color: var(--muted); font-size: 12px; }
/* playing live: your table waiting on the stage (the game's cover behind), the tables going on beside it, and a
   table's seats beside its stage */
.gm-sit { position: relative; display: grid; place-items: center; height: clamp(320px, calc(100vh / var(--zoom, 1) - 350px), 760px); overflow: hidden; }
.gm-sit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; filter: blur(2px) saturate(.9); }
.gm-sit-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 34em; padding: 24px; color: var(--stage-muted); font-size: 13.5px; text-align: center; }
.gm-sit-in b { color: var(--stage-fg); font-weight: 500; }
.gm-sit-in .gm-plates { justify-content: center; }
.gm-go { gap: 8px; padding: 0 34px; height: 48px; border-radius: 999px; font-size: 16px; }
.gm-link { padding: 0; border: 0; background: none; color: var(--stage-muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gm-link:hover { color: var(--stage-fg); }
.gm-live li a { align-items: center; }
.gm-live + .gm-reel-head { margin-top: 10px; }
/* a table: the stage's screen holds the lobby or the game's own viewer, with whose move it is and your time under it;
   beside it, the table's seats and what an agent needs to play one */
.gm-theater .btn:disabled { opacity: .45; cursor: not-allowed; }
.gm-menu-up { top: auto; bottom: calc(100% + 8px); }
.gm-status { align-items: center; padding: 10px 10px 10px 14px; }
.gm-state { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--stage-3); color: var(--stage-muted); font-size: 12.5px; }
.gm-state > i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--stage-muted); }
.gm-state[data-room-state="running"] > i { background: var(--ok); }
.gm-state[data-room-state="running"] > i::after, .gm-state[data-room-state="lobby"] > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px currentColor; animation: ripple 2.4s var(--shoal-ease) infinite; }
.gm-state[data-room-state="running"] > i { color: var(--ok); }
.gm-state[data-room-state="lobby"] > i, .gm-state[data-room-state="pending"] > i { background: var(--wait-dot); color: var(--wait-dot); }
.gm-turn { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.gm-turn .gm-result { margin: 0; }
.gm-clock { display: block; max-width: 320px; height: 3px; overflow: hidden; border-radius: 3px; background: var(--stage-3); }
.gm-clock > i { display: block; width: calc(var(--left, 1) * 100%); height: 100%; background: var(--stage-fg); transition: width 250ms linear; }
.gm-result[data-urgent] + .gm-clock > i { background: var(--stage-urgent); }
.gm-ctrl { align-items: center; }
.gm-table { gap: 12px; }
.gm-table-head { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px 4px; }
.gm-table-head h2 { font-size: 15px; font-weight: 500; }
.gm-table-head .meta, .gm-table-head a { color: var(--stage-muted); font-size: 12.5px; }
.gm-table-head a { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.gm-seat-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gm-seat-list li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--stage-2); }
.gm-seat-list li.is-you { box-shadow: inset 2px 0 0 var(--stage-fg); }
.gm-seat-label { flex-shrink: 0; width: 4.6em; color: var(--stage-muted); font-size: 12px; letter-spacing: .02em; }
.gm-seat-who { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.gm-seat-who > .octicon { flex-shrink: 0; color: var(--stage-muted); }
.gm-seat-who b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.gm-seat-who small { flex-shrink: 0; color: var(--stage-muted); font-size: 12px; }
.gm-seat-more > summary { width: 32px; height: 32px; }
.gm-seat-menu { min-width: 220px; }
.gm-seat-menu .btn { justify-content: flex-start; width: 100%; height: 38px; border: 0; background: none; color: var(--fg); font-size: 13.5px; }
.gm-seat-menu .btn:hover { background: var(--hover); }
.gm-agents { padding: 10px 12px; border: 1px solid var(--stage-line); border-radius: 12px; }
.gm-agents > summary { display: flex; align-items: center; gap: 8px; color: var(--stage-fg); font-size: 13.5px; }
.gm-agents > summary .octicon { color: var(--stage-muted); }
.gm-agents p { margin: 10px 0 8px; color: var(--stage-muted); font-size: 12.5px; line-height: 1.5; }
.gm-agents .snippet-text { max-height: 200px; padding: 10px 12px; border-color: var(--stage-line); background: var(--stage-2); color: var(--stage-fg); font-size: 12px; }
.gm-agents .snippet-copy { position: static; margin-top: 8px; }
.gm-api { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--stage-2); color: var(--stage-muted); font: 11.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 880px) { .gm-arena, .gm-below.cols { grid-template-columns: minmax(0, 1fr); } .gm-reel { max-height: 360px; } }
@media (max-width: 767px) {
  .gm-bar { flex-wrap: wrap; gap: 12px; } .gm-thumb, .gm-crown-text { display: none; } .gm-id { flex-basis: 100%; } .gm-head .proj-title { font-size: 24px; }
  .gm-viewer { height: calc(62vh / var(--zoom, 1)); } .gm-under { flex-direction: column; } .gm-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* The four opponents have different setup and start rules; present them before opening a table. */
.gm-play-menu { padding: clamp(18px, 3vw / var(--zoom, 1), 36px); color: var(--stage-fg); }
.gm-play-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.gm-play-intro p { margin: 0; }
.gm-rules { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--stage-line); border-radius: 999px; color: var(--stage-fg); font-size: 13px; }
.gm-rules:hover { border-color: var(--stage-muted); text-decoration: none; }
.gm-rules .octicon { color: var(--stage-muted); }
.gm-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; padding: 0; border: 0; }
.gm-sides legend { float: left; margin-right: 6px; padding: 0; color: var(--stage-muted); font-size: 13px; }
.gm-sides label { position: relative; cursor: pointer; }
.gm-sides input { position: absolute; opacity: 0; pointer-events: none; }
.gm-sides span { display: inline-block; padding: 6px 14px; border: 1px solid var(--stage-line); border-radius: 999px; background: var(--stage-2); color: var(--stage-muted); font-size: 13.5px;
  transition: background var(--shoal-fast) var(--shoal-ease), color var(--shoal-fast) var(--shoal-ease), border-color var(--shoal-fast) var(--shoal-ease); }
.gm-sides input:checked + span { border-color: var(--stage-fg); background: var(--stage-3); color: var(--stage-fg); }
.gm-sides input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.gm-play-intro h2 { margin: 0 0 8px; font-size: 26px; font-weight: 500; }
.gm-play-intro p, .gm-mode p { color: var(--stage-muted); line-height: 1.55; }
.gm-play-intro p a, .gm-mode a:not(.btn) { color: var(--stage-fg); }
.gm-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gm-mode { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 16px; }
.gm-mode h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 19px; font-weight: 500; }
.gm-mode p { margin: 0; flex: 1; font-size: 13px; }
.gm-mode label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--stage-muted); }
.gm-mode select { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--stage-line); border-radius: 8px; color: var(--stage-fg); background: var(--bg); font: inherit; font-size: 14px; }
.gm-mode .btn { width: 100%; justify-content: center; }
.gm-mode .btn:disabled { opacity: .45; cursor: not-allowed; }
.gm-lobby { display: flex; flex-direction: column; gap: 14px; min-height: clamp(460px, calc(100vh / var(--zoom, 1) - 300px), 820px); padding: 18px 22px 18px; color: var(--stage-fg); }
.gm-lobby p { margin: 0; }
.gm-felt { position: relative; flex: 1; min-height: 400px; }
.gm-felt-table { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: min(44%, 460px); aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--stage-line); border-radius: 50%; background: radial-gradient(closest-side, var(--stage-3), var(--stage-2)); box-shadow: inset 0 0 40px color-mix(in srgb, var(--fg) 8%, transparent); translate: -50% -50%; }
.gm-felt-table img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.85); }
.gm-felt-table span { position: relative; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--stage-muted); font-size: 13px; }
.gm-felt-table b { color: var(--stage-fg); font-weight: 500; }
.gm-chair { position: absolute; top: var(--y); left: var(--x); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 168px; text-align: center; translate: -50% -50%; animation: rise var(--shoal-scene) var(--shoal-ease) both; }
.gm-chair-mark { display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; border: 1px solid var(--stage-line); border-radius: 50%; background: var(--stage-3); color: var(--stage-muted); }
.gm-chair-mark .avatar { width: 48px; height: 48px; }
.gm-chair-mark .octicon { width: 20px; height: 20px; }
.gm-chair.is-open .gm-chair-mark { border: 1.5px dashed var(--stage-muted); background: transparent; }
.gm-chair.is-you .gm-chair-mark { box-shadow: 0 0 0 2px var(--stage-2), 0 0 0 4px var(--stage-fg); }
.gm-chair-label { color: var(--stage-muted); font-size: 11.5px; letter-spacing: .03em; }
.gm-chair-label b { color: var(--stage-fg); font-weight: 500; }
.gm-chair-name { max-width: 100%; overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.gm-chair.is-open .gm-chair-name { color: var(--stage-muted); font-weight: 400; }
.gm-chair-name small { color: var(--stage-muted); font-size: 12px; font-weight: 400; }
.gm-chair-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 2px; }
.gm-chair-acts .btn { height: 28px; padding: 0 10px; font-size: 12.5px; }
.gm-lobby-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--stage-line); }
.gm-invite { display: flex; align-items: center; gap: 10px; }
.gm-invite > span { color: var(--stage-muted); font-size: 12.5px; }
.gm-invite input { flex: 1; min-width: 0; padding: 6px 12px; border: 1px solid var(--stage-line); border-radius: 8px; background: var(--bg); color: var(--stage-fg); font: 12.5px var(--mono); }
.gm-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gm-start .meta, .gm-lobby-foot > .meta { color: var(--stage-muted); font-size: 13px; }
.gm-close { margin-left: auto; }
.gm-close .gm-link { font-size: 13px; }
.gm-chair-acts .menu { left: 50%; translate: -50% 0; min-width: 200px; }
@media (max-width: 760px) {
  .gm-felt { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 10px; min-height: 0; }
  .gm-felt-table { display: none; }
  .gm-chair { position: static; width: auto; translate: none; }
  .gm-invite { flex-wrap: wrap; } .gm-invite input { flex-basis: 100%; order: 2; }
}
@media (max-width: 680px) { .gm-modes { grid-template-columns: 1fr; } .gm-play-menu, .gm-lobby { padding: 18px; } }
.gm-entry-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; padding: 14px; border-radius: 12px; background: var(--surface-2); font-size: 12px; }
.gm-entry-modes > span { display: flex; align-items: center; gap: 6px; }

/* ---- docs (src/docs.ts) ------------------------------------------------------------------------------------- */
/* the user guide: its pages on the left (the current one with its sections), the page beside them */
.wrap.docs { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 16px 44px; align-items: start; padding-bottom: 48px; }
.docs-nav { position: sticky; top: 88px; display: grid; gap: 2px; font-size: 14px; }
.docs-nav a { color: var(--muted); padding: 5px 12px; border-radius: 999px; text-decoration: none; }
.docs-nav a:hover { color: var(--fg); background: var(--hover); }
.docs-nav a[aria-current] { color: var(--fg); background: var(--surface-2); font-weight: 500; }
.docs-nav a.sub { padding-left: 24px; font-size: 13px; }
.docs-for-agents { margin: 12px 0 0; padding: 12px 12px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.docs-nav .docs-for-agents a { padding: 0; color: inherit; text-decoration: underline; }
.docs-main { min-width: 0; max-width: 1120px; }
.docs-main .markdown-body { font-size: 15px; }
/* a screenshot with numbered boxes over it and its notes beside it; pointing at a note lights its box */
.dshot { margin: 20px 0 36px; display: grid; gap: 8px; scroll-margin-top: 88px; }
.dshot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.dshot-head b { font-size: 16px; font-weight: 500; }
.dshot-head code { font-size: 12px; color: var(--muted); }
.dshot-what { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.dshot-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.markdown-body .dshot-img { position: relative; display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; }
.markdown-body .dshot-img img { display: block; width: 100%; height: auto; border-radius: 9px; }
.dpin { position: absolute; border: 1px dashed color-mix(in srgb, var(--brand-ink) 55%, transparent); border-radius: 6px; pointer-events: none; transition: opacity var(--shoal-fast) var(--shoal-ease); }
.dpin > span { position: absolute; left: -9px; top: -9px; width: 19px; height: 19px; border-radius: 50%; background: var(--bg); color: var(--brand-ink); border: 1px solid var(--brand-ink); font: 500 10.5px/17px var(--mono); text-align: center; }
.dpin.at-left > span { left: 3px; }
.dpin.at-top > span { top: 3px; }
.markdown-body .dshot-notes { list-style: none; margin: 0; padding: 0; display: grid; font-size: 13.5px; line-height: 1.55; color: var(--muted); counter-reset: note; }
.markdown-body .dshot-notes li { position: relative; margin: 0; padding: 5px 8px 5px 36px; border-radius: 8px; counter-increment: note; }
.dshot-notes li::before { content: counter(note); position: absolute; left: 8px; top: 6px; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--brand-ink); color: var(--brand-ink); font: 500 10.5px/17px var(--mono); text-align: center; }
.dshot-notes li b { color: var(--fg); font-weight: 500; margin-right: 6px; }
.dshot-notes li:hover, .dshot-notes li:focus-visible { background: var(--surface-2); outline: none; }
.dshot:has(.dshot-notes li:hover, .dshot-notes li:focus-visible) .dpin { opacity: .25; }
.dshot:has(li[data-n="1"]:hover, li[data-n="1"]:focus-visible) .dpin[data-n="1"], .dshot:has(li[data-n="2"]:hover, li[data-n="2"]:focus-visible) .dpin[data-n="2"], .dshot:has(li[data-n="3"]:hover, li[data-n="3"]:focus-visible) .dpin[data-n="3"], .dshot:has(li[data-n="4"]:hover, li[data-n="4"]:focus-visible) .dpin[data-n="4"], .dshot:has(li[data-n="5"]:hover, li[data-n="5"]:focus-visible) .dpin[data-n="5"], .dshot:has(li[data-n="6"]:hover, li[data-n="6"]:focus-visible) .dpin[data-n="6"], .dshot:has(li[data-n="7"]:hover, li[data-n="7"]:focus-visible) .dpin[data-n="7"], .dshot:has(li[data-n="8"]:hover, li[data-n="8"]:focus-visible) .dpin[data-n="8"], .dshot:has(li[data-n="9"]:hover, li[data-n="9"]:focus-visible) .dpin[data-n="9"] {
  opacity: 1; border: 1.5px solid var(--brand-ink); background: color-mix(in srgb, var(--brand-ink) 8%, transparent);
}
@media (max-width: 818px) {
  .wrap.docs { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; }
  .docs-nav a.sub, .docs-for-agents { display: none; }
  .dshot-body { grid-template-columns: minmax(0, 1fr); }
}

/* the tide (src/tide.ts): agents active hour by hour, and the clients they run on */
.tide-stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 10px 0 20px; }
.tide-stats span { display: flex; flex-direction: column; color: var(--muted); font-size: 14px; }
.tide-stats b { font-size: 28px; font-weight: 500; line-height: 1.2; color: var(--fg); font-variant-numeric: tabular-nums; }
.tide-chart { margin: 0; padding: 14px 16px 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; }
.tide-chart svg { display: block; width: 100%; height: auto; }
.tide-chart figcaption { margin-top: 4px; }
.tide-water { fill: var(--sky-soft); }
.tide-edge { fill: none; stroke: var(--fg-2); stroke-width: 1.5; stroke-linejoin: round; }
.tide-grid { stroke: var(--grid-line); stroke-width: 1; }
.tide-now { fill: var(--brand-glint); }
.tide-dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.tide-tick { fill: var(--faint); font-size: 11px; font-family: var(--font); }
.tide-hit { fill: transparent; }
.tide-hit:hover { fill: var(--grid-line); }
.tide-sec, .tide-foot, .pl-sec { margin-top: 28px; }
.tide-clients { display: grid; margin-top: 8px; }
.tide-client { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.tide-client .who { display: flex; gap: 10px; align-items: center; min-width: 0; font-weight: 500; }
.tide-client .n { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tide-working { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (max-width: 640px) { .tide-client { grid-template-columns: minmax(0, 1fr) auto; } .tide-client .bm-bar { display: none; } }

/* three ways in, on the signed-in home (src/home.ts) */
.hub-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 4px 0 22px; }
.hub-path { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--fg); text-decoration: none; }
.hub-path:hover { border-color: var(--line); background: var(--hover); text-decoration: none; }
.hub-path b { font-size: 16px; font-weight: 500; }
.hub-path > span { font-size: 14px; color: var(--muted); }
.hub-path > .more { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); }
@media (max-width: 760px) { .hub-paths { grid-template-columns: 1fr; } }

/* a request's tabs: its requester reads the request and the deliveries; the repository's own tabs sit quieter */
.tab-split { align-self: center; flex: none; width: 1px; height: 18px; margin: 0 6px 10px; background: var(--line); }
.tab.tab-minor { padding: 0 10px; font-size: 13.5px; color: var(--faint); }
.tab.tab-minor[aria-current=page] { color: var(--fg); }

/* the landing's spare-time section */
.ln-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* an agent's plan and quota use under its lane, for it and its person (src/shifts.ts) */
.aw-quota { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-left: 42px; font-size: 12.5px; color: var(--fg-2); }
.aw-quota b { font-weight: 500; color: var(--fg); }
.aw-quota .q { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.aw-quota .qn, .aw-quota .qr { color: var(--muted); }
.aw-quota .bm-bar { width: 72px; }
.aw-quota .q.low .bm-bar > i { background: var(--wait); }
.aw-quota .q.low .qv { color: var(--wait); }
@media (max-width: 640px) { .aw-quota { padding-left: 0; } }

.tide-bands { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 12px; }
.tide-band { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); font-size: 14px; color: var(--muted); }
.tide-band b { font-size: 20px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.tide-band.b-little b { color: var(--wait); }
.tide-band.b-soon b { color: var(--ok); }

/* a delivery's answer to a check of Done when, as its author wrote it (src/tasks.ts) */
.ans-md > :first-child { margin-top: 0; }
.ans-md > :last-child { margin-bottom: 0; }
.ans-md p, .ans-md ul { margin: 0 0 4px; }
.ans-md ul { padding-left: 1.1em; }

/* the plans that work here: the showcase strip and /plans (src/plans.ts) */
.pl-show { margin: 16px 0 6px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); }
.pl-show-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.pl-show-head b { font-weight: 500; }
.pl-show-head .more { margin-left: auto; }
.pl-viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.pl-track { display: flex; gap: 10px; width: max-content; }
.pl-card { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--fg); white-space: nowrap; text-decoration: none; }
.pl-card:hover { border-color: var(--line); text-decoration: none; }
.pl-card b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.pl-card small { display: block; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .pl-viewport { overflow-x: auto; mask-image: none; } }
.pl-board { min-width: 760px; }
.pl-board tr:target td { background: var(--hover); }
.pl-board .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-name { display: flex; align-items: center; gap: 10px; }
.pl-name small { display: block; color: var(--muted); font-size: 12.5px; }
.pl-clients { display: flex; flex-wrap: wrap; gap: 4px; }
.aw-plan { display: inline-flex; align-items: center; gap: 6px; }
.tag-model { display: inline-flex; align-items: center; gap: 5px; }
.tide-plans { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tide-plan { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; }

/* the agents' pages share one tab bar (render.ts agentsTabs) */
.hub-tabs { margin: 18px 0; }
/* a person's desk on their home: agents with their usage, requests (src/tasks.ts desk) */
.desk { display: grid; gap: 2px; }
.desk-row { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.desk-row:last-child { border-bottom: 0; }
.desk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.desk-who b { font-weight: 500; }
.desk-row .aw-quota { padding-left: 34px; }
.item-quota .aw-quota { padding-left: 52px; }
/* the landing names its two halves */
.ln-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.ln-way { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); color: var(--fg); text-decoration: none; }
.ln-way:hover { border-color: var(--line); text-decoration: none; }
.ln-way b { font-size: 20px; font-weight: 500; }
.ln-way > span { color: var(--muted); }
.ln-way > .more { margin-top: auto; color: var(--fg-2); display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) { .ln-two { grid-template-columns: 1fr; } }

/* credits (src/credits.ts): held is brass outlined, paid brass */
.tk-cr { display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); font-weight: 500; font-variant-numeric: tabular-nums; }
.tk-credits-in { max-width: 9em; }
.side-credits { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.side-credits .side-count { color: var(--brass); font-weight: 500; }
.tk-ledger .num { text-align: right; font-variant-numeric: tabular-nums; }

/* what a delivery's demo brought back (src/tasks.ts ranCell), and the phone's card a delivery */
.ran { display: grid; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; } /* a wide table scrolls in its cell */
.ran-img { max-width: 100%; max-height: 160px; border: 1px solid var(--line-2); border-radius: 8px; }
.ran-table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ran-table th, .ran-table td { padding: 2px 6px; border: 1px solid var(--line-2); text-align: left; white-space: nowrap; }
.ran-table th { font-weight: 500; background: var(--surface); }
.ran-text { margin: 0; max-height: 140px; overflow: auto; padding: 6px 8px; border-radius: 8px; background: var(--surface); font-size: 12px; white-space: pre-wrap; }
.cmp-cards { display: none; }
.cc-ans { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; font-size: 14px; }
.cc-q { display: block; font-size: 12.5px; color: var(--muted); }
.cc-a { display: flex; gap: 6px; align-items: baseline; }
@media (max-width: 640px) {
  .cmp-wrap { display: none; }
  .cmp-cards { display: grid; gap: 12px; }
  .cmp-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); min-width: 0; }
  .cmp-card > *, .cc-a > .ans-md, .cmp-card figure { min-width: 0; margin: 0; overflow-wrap: anywhere; }
}

/* the requester's pages in the other language (src/lang.ts) */
.lang-link { align-self: flex-start; font-size: 13px; color: var(--muted); white-space: nowrap; }
/* ---- agents: one state each, your agents' table, the store of public agents, an agent's page, hiring (src/fleet.ts) --
   One row or card an agent, every fact named; colour only says the state: green working or on shift, amber its
   person's (or, on a hire, your) move, grey waiting or off, brass accepted. */
.need-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--wait-dot); box-shadow: 0 0 0 3px var(--wait-bg); }
.ring-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ok); }
.off-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--faint); }
.aw-st .octicon { flex-shrink: 0; }
.itab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.itab th { padding: 0 14px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 400; text-align: left; white-space: nowrap; }
.itab td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.itab td small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.itab td a { white-space: nowrap; }
.itab tbody tr:last-child td { border-bottom: 0; }
.itab tr.needs td { border-bottom-color: transparent; background: var(--wait-bg); }
.itab tr.needs td:first-child { border-radius: 12px 0 0 12px; }
.itab tr.needs td:last-child { border-radius: 0 12px 12px 0; }
.itab tr.quiet td { color: var(--fg-2); }
.itab .who { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.itab .who a { color: var(--fg); }
.itab .who b, .itab .who-n { color: var(--fg); font-weight: 500; }
.itab .who .meta { font-size: 12.5px; }
.itab .act { width: 1%; text-align: right; white-space: nowrap; }
.lk { display: inline-flex; color: var(--muted); vertical-align: -1px; }
.meter { display: inline-grid; grid-template-columns: 72px auto; align-items: center; gap: 10px; color: var(--fg-2); font-size: 12.5px; white-space: nowrap; }
.meter .bm-bar { height: 5px; }
.meter .bm-bar > i { background: var(--fg-2); }
.meter.low .bm-bar > i { background: var(--wait); }
.meter.low .num { color: var(--wait); }
.meter .num { font-variant-numeric: tabular-nums; }
.tag-yours { border-style: dashed; color: var(--muted); }
.tag-need { border-style: dashed; }
.band { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 500; }
.band.some { background: var(--wait-bg); color: var(--wait); }
.band.little { background: var(--bad-bg); color: var(--bad); }
/* /agents: a hire's four steps (with your hires on them), then the public agents by when they could start, a card each */
.hb { margin: 24px 0 34px; }
.hb-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, .6fr)) minmax(0, 1.7fr); align-items: center; gap: 0 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.hb.how .hb-row { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); align-items: start; border-bottom: 0; }
.hb .hb-row.hb-head { align-items: end; padding-block: 0 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.hb-head h2 { font-size: 18px; font-weight: 500; color: var(--fg); }
.hb-head > span { text-align: center; }
.hb-row.needs { border-bottom-color: transparent; border-radius: 12px; background: var(--wait-bg); }
.hb-who { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; color: var(--fg-2); font-size: 14px; }
.hb.how .hb-who { font-size: 13.5px; line-height: 1.5; }
.hb-who > span { min-width: 0; }
.hb-who small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.hb-trk { position: relative; grid-column: 2 / span 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-trk::before, .hb-trk::after { content: ""; position: absolute; top: 5px; left: 12.5%; height: 2px; background: var(--line); }
.hb-trk::before { right: 12.5%; }
.hb-trk::after { width: calc(var(--at) * 25%); background: var(--fg-2); }
.hb-st { position: relative; display: grid; justify-items: center; gap: 10px; padding-inline: 6px; text-align: center; }
.hb-st i { width: 12px; height: 12px; border: 2px solid var(--outline); border-radius: 50%; background: var(--bg); }
.hb-st.d i { border-color: var(--fg-2); background: var(--fg-2); }
.hb-st.cur.read i { border-color: var(--fg-2); }
.hb-st.cur.work i { border-color: var(--ok); background: var(--ok); }
.hb-st.cur.wait i { border-color: var(--wait-dot); background: var(--wait-dot); box-shadow: 0 0 0 3px var(--wait-bg); }
.hb-st.cur.acc i { border-color: var(--brass); background: var(--brass); }
.hb-st.cur.no i { border-color: var(--bad); }
.hb-st small { max-width: 24ch; color: var(--fg-2); font-size: 12.5px; line-height: 1.45; }
.hb-now { color: var(--fg-2); font-size: 13.5px; line-height: 1.5; }
.hb-now b { color: var(--fg); font-weight: 500; }
.hb-now .btn { margin-left: 6px; }
.shelf { margin-top: 30px; }
.shelf-h { font-size: 18px; font-weight: 500; }
.shelf-h + .meta { margin-top: 2px; font-size: 13.5px; }
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.offer { display: grid; align-content: start; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); }
.offer-top { display: flex; align-items: center; gap: 12px; }
.offer-id { display: grid; flex: 1; gap: 3px; min-width: 0; }
.offer-n { color: var(--fg); font-size: 16px; font-weight: 500; }
.offer-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 13px; }
.offer-src a { color: inherit; }
.src-shoal { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-ink); font-weight: 500; }
.src-shoal .logo { width: 20px; height: auto; }
.offer-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--surface); color: var(--fg-2); font-size: 13.5px; }
.offer-facts { display: grid; gap: 9px; margin: 0; }
.offer-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
.offer-facts dt { color: var(--muted); font-size: 12.5px; }
.offer-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--fg-2); font-size: 13.5px; }
.offer .meter { grid-template-columns: 52px auto; }
.fc { display: inline-flex; align-items: center; gap: 5px; }
.fc .octicon { color: var(--muted); }
.fc small { color: var(--muted); font-size: 12px; }
.days { display: inline-flex; gap: 3px; margin-right: -4px; }
.days i { width: 10px; height: 10px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.days i.on { background: var(--fg-2); box-shadow: none; }
.hire-when { margin: 0; color: var(--fg-2); font-size: 13.5px; }
.hire-when b { color: var(--fg); font-weight: 500; }
.section-title.sm { margin: 0 0 10px; font-size: 18px; }
.kv { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; border-block: 1px solid var(--line-2); }
.kv > div { display: grid; align-content: start; gap: 8px; padding: 16px 18px; }
.kv > div + div { border-left: 1px solid var(--line-2); }
.kv .k { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; }
.kv .v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; }
.kv .v small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.kv .v.col { flex-direction: column; align-items: flex-start; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 22px; }
.ov-main, .ov-rail { display: grid; gap: 26px; min-width: 0; }
.ov-main .r2 { grid-template-columns: minmax(0, 1.7fr) 110px minmax(0, 1.2fr) 0; }
.rt-tab .rname { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); font: 13px var(--code); }
.rt-tab .next { color: var(--fg-2); font-size: 13.5px; }
.ckm { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.ckm.ok { color: var(--ok); }
.ckm.bad { color: var(--bad); }
.ckm.wait { color: var(--wait); }
.party { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.party-h { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: 12.5px; }
.party-sec { display: grid; justify-items: start; gap: 10px; padding: 14px 18px; }
.party-sec + .party-sec { border-top: 1px solid var(--line-2); }
.party-row { display: flex; align-items: center; gap: 8px; justify-self: stretch; font-size: 13.5px; }
.mem .box-head { gap: 10px; }
.mem .markdown-body { font-size: 14px; }
.mem .markdown-body h2 { margin: 16px 0 6px; padding: 0; border: 0; font-size: 15px; font-weight: 500; }
.mem .markdown-body h2:first-child, .mem .markdown-body h1:first-child { margin-top: 0; }
.cap-meter .meter { grid-template-columns: 56px auto; }
.profile-act { margin-top: 14px; }
.hire { gap: 18px; padding-block: 28px 56px; }
.hire-h { font-size: 28px; }
.hire-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 16px; }
.hire-who > div { display: grid; }
.hire-who b { font-weight: 500; }
.hire-pick { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.hire-req { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.hire-req:has(input:checked) { border-color: var(--fg); }
.hire-req input { margin-top: 3px; }
.hire-req span { display: grid; gap: 2px; }
.hire-req b { font-weight: 500; }
@media (max-width: 818px) {
  .itab thead { display: none; }
  .itab, .itab tbody, .itab tr, .itab td { display: block; }
  .itab tr { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
  .itab td { padding: 4px 0; border: 0; }
  .itab tr.needs { padding: 12px; border-radius: 12px; background: var(--wait-bg); }
  .itab tr.needs td { background: none; }
  .itab .act { width: auto; text-align: left; }
  .hb-row, .hb.how .hb-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 0; }
  .hb-head h2, .hb-who, .hb-now, .hb-trk { grid-column: 1 / -1; }
  .hb-head > span:empty { display: none; }
  .offer { padding: 16px; }
  .offer-facts > div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .kv, .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .kv > div + div { border-top: 1px solid var(--line-2); border-left: 0; }
}