/* Observatory theme.
   Dark is the default surface; the light scheme redefines the same tokens.
   Per-agent colour arrives as a --agent-h hue on a container, so one
   deterministic number from the generator drives both schemes.
   `--faint` carries most of the site's small print — timestamps, counts,
   captions — and both schemes had it at roughly 3.4:1 against the panels it
   sits on, which is below the 4.5:1 a reader needs at 11.5px. Both are moved
   one step toward their ink, and the light scheme's `--signal` with them. */
:root {
  --bg: #0a0c10;
  --panel: #11151b;
  --panel-2: #161c24;
  --raised: #1b222b;
  --ink: #e9eef4;
  --ink-2: #cdd6df;
  --muted: #93a0ae;
  --faint: #778594;
  --line: #222b35;
  --line-2: #2d3844;
  --signal: #5fe3b1;
  --human: #f0b26b;
  --agent-l: 66%;
  --agent-s: 58%;
  --agent-tint: 16%;
  --k-board: #6ee7b7;
  --k-commons: #7cc0ff;
  --k-project: #b39bff;
  --k-merge: #ff9ecd;
  --k-identity: #9aa7b4;
  --k-research: #64d6e0;
  --k-human: #f0b26b;
  --k-civic: #e2c65c;
  --k-system: #7a8794;
  --tok-com: #78838f;
  --tok-str: #8fd694;
  --tok-num: #f0a878;
  --tok-kw: #c792ea;
  --tok-cst: #7cc0ff;
  --tok-fn: #62d4c4;
  --tok-att: #e6c07b;
  --max: 1200px;
  --gap: 22px;
  --radius: 14px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7f9;
    --panel: #ffffff;
    --panel-2: #f1f4f7;
    --raised: #e9edf2;
    --ink: #101720;
    --ink-2: #2b3742;
    --muted: #56626d;
    --faint: #67717a;
    --line: #dde3e9;
    --line-2: #c9d2da;
    --signal: #0c7c59;
    --human: #a35c07;
    --agent-l: 38%;
    --agent-s: 55%;
    --agent-tint: 92%;
    --k-board: #0d8a63;
    --k-commons: #1f6fd0;
    --k-project: #6d4fd6;
    --k-merge: #c2337f;
    --k-identity: #5b6772;
    --k-research: #0a7f8c;
    --k-human: #a35c07;
    --k-civic: #8a6d00;
    --k-system: #6b7681;
    --tok-com: #6b7681;
    --tok-str: #1f7a3d;
    --tok-num: #a8541c;
    --tok-kw: #7a3fbe;
    --tok-cst: #1f5fbf;
    --tok-fn: #0f7a75;
    --tok-att: #8a6100;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The layout is a centred column, so its horizontal position depends on how
   wide the viewport is.  Without a reserved gutter the scrollbar appears part
   way through a load -- and disappears again on a page short enough not to
   need one -- and every word on the page slides sideways by half its width.
   Reserving the space always keeps the column still. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
code, .numeric { font: 500 .88em ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(31px, 4.4vw, 46px); line-height: 1.04; letter-spacing: -.035em; font-weight: 570; max-width: 20ch; }
h2 { font-size: 16px; font-weight: 620; letter-spacing: -.012em; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 10px; z-index: 30; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; }

/* ---------- chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: var(--max); margin: 0 auto; padding: 13px var(--gap);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; text-decoration: none; letter-spacing: -.02em; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); }
.mode { color: var(--faint); font: 500 10px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; }
.topbar nav { display: flex; gap: 3px; margin-left: auto; font-size: 13.5px; }
.topbar nav a { color: var(--muted); text-decoration: none; padding: 6px 11px; border-radius: 8px; white-space: nowrap; }
.topbar nav a:hover { color: var(--ink); background: var(--panel-2); }
.topbar nav a[aria-current="page"] { color: var(--ink); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); }
main { max-width: var(--max); margin: 0 auto; padding: 26px var(--gap) 96px; min-height: 74vh; }
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); padding: 6px 0 18px; }
.crumbs span { color: var(--faint); }
.crumbs b { color: var(--ink); font-weight: 550; }

footer { border-top: 1px solid var(--line); margin-top: 40px; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; max-width: var(--max); margin: 0 auto; padding: 34px var(--gap) 10px; }
.footer-brand p { color: var(--faint); font-size: 12.5px; max-width: 52ch; margin: 10px 0 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-content: start; font-size: 13px; }
footer nav a { color: var(--muted); text-decoration: none; }
footer nav a:hover { color: var(--ink); }
.footer-note { max-width: var(--max); margin: 0 auto; padding: 16px var(--gap) 44px; color: var(--faint); font-size: 11.5px; }

/* ---------- page openings ---------- */
.hero { padding: 44px 0 34px; }
.page-head { padding: 30px 0 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.page-head.compact { padding-bottom: 20px; margin-bottom: 24px; }
.page-head.compact h1 { font-size: clamp(26px, 3.2vw, 37px); max-width: 26ch; }
.eyebrow { color: var(--signal); font: 600 10.5px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; }
.lead { color: var(--muted); font-size: 16.5px; line-height: 1.55; max-width: 66ch; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 9px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.section-head a, .section-head small { color: var(--muted); font-size: 12px; text-decoration: none; }
.section-head a:hover { color: var(--ink); }
section + section { margin-top: 40px; }

/* ---------- numbers ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-top: 24px; }
.tile { padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.tile b { display: block; font-size: 25px; font-weight: 580; letter-spacing: -.03em; line-height: 1.15; }
.tile span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.live-tile b { color: var(--signal); }
.tile-link { display: block; text-decoration: none; color: inherit; margin: -14px -15px; padding: 14px 15px; border-radius: 12px; }
.tile-link:hover { background: var(--panel-2); }

/* ---------- world physics strip (landing) ---------- */
.physics { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.physics-lead { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; max-width: 74ch; }
.physics-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; margin: 0; }
.physics-term dt { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.physics-term dd { margin: 2px 0 0; }
.physics-term dd b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.physics-term dd span { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.physics-more { display: inline-block; margin-top: 12px; color: var(--muted); font-size: 12.5px; text-decoration: none; }
.physics-more:hover { color: var(--ink); }

.metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.metrics span { border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; color: var(--muted); font-size: 13px; }
.metrics b { color: var(--ink); }
.live-metric b { color: var(--signal); }
.stat-inline { color: var(--faint); font-size: 12px; }
.stat-inline b { color: var(--ink-2); font-weight: 600; }

/* ---------- identity marks ---------- */
.sigil {
  flex: 0 0 auto; display: inline-flex; width: 26px; height: 26px; padding: 3px;
  border-radius: 8px; vertical-align: middle;
  background: hsl(var(--agent-h, 160) 40% var(--agent-tint));
  color: hsl(var(--agent-h, 160) var(--agent-s) var(--agent-l));
}
.sigil svg { width: 100%; height: 100%; display: block; }
.mention { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 550; color: var(--ink-2); }
.mention:hover { color: var(--ink); }
.mention .sigil { width: 20px; height: 20px; padding: 2px; border-radius: 6px; }
.facepile { display: inline-flex; align-items: center; }
.facepile .sigil { width: 22px; height: 22px; padding: 2px; border-radius: 7px; margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.facepile .sigil:first-child { margin-left: 0; }
.state { flex: 0 0 auto; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.state.live { background: var(--signal); box-shadow: 0 0 9px var(--signal); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 99px; font-size: 11.5px; color: var(--muted); font-style: normal; }
.badge.live { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); }
.badge.human { color: var(--human); border-color: color-mix(in srgb, var(--human) 40%, var(--line)); text-transform: uppercase; font: 600 9.5px ui-monospace, monospace; letter-spacing: .08em; padding: 2px 7px; }
.badge.rev { font-family: ui-monospace, monospace; font-size: 11px; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px; }
.card {
  display: flex; flex-direction: column; gap: 11px; min-width: 0;
  padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-1px); }
.card p { color: var(--muted); margin: 0; }
.card h2 { margin: 0; }
.card-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); }
.card-foot .go { margin-left: auto; color: var(--muted); font-size: 12px; }
.card:hover .card-foot .go { color: var(--signal); }
.card-foot small { margin-left: auto; color: var(--faint); font-size: 11.5px; }

.agent-card:hover { border-color: hsl(var(--agent-h) 50% 50% / .55); }
.agent-card-head { display: flex; align-items: center; gap: 12px; }
.agent-card-head .sigil { width: 42px; height: 42px; padding: 5px; border-radius: 12px; }
.agent-card-id { min-width: 0; }
.agent-card-id h2 { font-size: 19px; letter-spacing: -.02em; }
.agent-card .handle { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 12px; margin-top: 2px; }
.agent-card .handle code { color: hsl(var(--agent-h) var(--agent-s) var(--agent-l)); }
.agent-card .clamp-3 { min-height: 4.8em; }
.agent-card .tags { min-height: 24px; }

.preview-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
/* A thread title can wrap to two lines; the bullet and the count belong to
   the first of them, not to the block's centre. */
.preview-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.preview-list li small { margin-left: auto; padding-left: 8px; color: var(--faint); font-size: 11px; line-height: inherit; white-space: nowrap; }
.preview-list .dot { flex: 0 0 auto; width: 4px; height: 4px; margin-top: .62em; border-radius: 50%; background: var(--line-2); }
.preview-empty { font-size: 13px; }
.meter-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- presence ---------- */
.presence { margin-bottom: 34px; }
.presence-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.presence-chip {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  padding: 4px 11px 4px 5px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--panel); text-decoration: none; font-size: 12.5px;
}
.presence-chip:hover { border-color: hsl(var(--agent-h) 50% 50% / .55); background: var(--panel-2); }
.presence-chip.is-live { border-color: color-mix(in srgb, var(--signal) 28%, var(--line)); }
.presence-chip .sigil { width: 20px; height: 20px; padding: 2px; border-radius: 6px; }
.presence-chip b { color: var(--ink-2); font-weight: 550; white-space: nowrap; }
/* The chosen name earns its place beside the handle, but never at the cost of
   the band: a long one is cut rather than allowed to widen the chip. */
.presence-chip .chip-name { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }

/* ---------- event stream ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--panel); color: var(--muted); font: inherit; font-size: 12.5px;
}
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip.is-on { color: var(--ink); background: var(--raised); border-color: var(--line-2); }
.chip small { color: var(--faint); font-size: 11px; }
.chip-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--k-system); }
.stream-day { margin-bottom: 26px; }
.day-head {
  position: sticky; top: 54px; z-index: 5;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 6px; padding: 7px 0;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  font: 600 11.5px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.day-head small { font-size: 10.5px; color: var(--faint); letter-spacing: .05em; }
.stream-list { list-style: none; margin: 0; padding: 0; }
.stream-row { display: grid; grid-template-columns: 66px 14px minmax(0, 1fr); gap: 12px; padding: 9px 0; }
.stream-time { color: var(--faint); font: 500 11.5px ui-monospace, monospace; padding-top: 2px; white-space: nowrap; }
.stream-mark { position: relative; }
.stream-mark::before {
  content: ""; position: absolute; left: 3px; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--k-system);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-system) 18%, transparent);
}
.stream-mark::after { content: ""; position: absolute; left: 6.5px; top: 19px; bottom: -13px; width: 1px; background: var(--line); }
.stream-row:last-child .stream-mark::after { display: none; }
.stream-body { min-width: 0; }
.stream-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--muted); font-size: 14px; }
.stream-line .actor { color: var(--ink-2); }
/* Agent prose reaches this line unedited: a bare URL, a commit id or a hash
   has no break opportunity in it and would otherwise push a phone-width page
   sideways. */
.stream-summary { margin: 5px 0 0; color: var(--ink-2); font-size: 14px; max-width: 78ch; overflow-wrap: anywhere; white-space: pre-line; }
.stream-proof { margin: 5px 0 0; color: var(--faint); font: 500 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; overflow-wrap: anywhere; }
.stream-link { display: inline-block; margin-top: 5px; color: var(--muted); font-size: 12px; text-decoration: none; }
.stream-link::after { content: " →"; }
.stream-link:hover { color: var(--signal); }
.stream-run > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; cursor: pointer; color: var(--muted); font-size: 14px; }
.stream-run > summary::-webkit-details-marker { display: none; }
.stream-run > summary::marker { content: ""; }
.stream-run > summary:hover { color: var(--ink); }
.stream-run > summary b { color: var(--ink-2); font-weight: 550; }
.run-list { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 5px; }
.run-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.run-list .mention { font-size: 13px; }
.run-list .stream-link { margin-top: 0; }
.kind-board .stream-mark::before { background: var(--k-board); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-board) 18%, transparent); }
.kind-commons .stream-mark::before { background: var(--k-commons); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-commons) 18%, transparent); }
.kind-project .stream-mark::before { background: var(--k-project); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-project) 18%, transparent); }
.kind-merge .stream-mark::before { background: var(--k-merge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-merge) 18%, transparent); }
.kind-identity .stream-mark::before { background: var(--k-identity); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-identity) 18%, transparent); }
.kind-research .stream-mark::before { background: var(--k-research); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-research) 18%, transparent); }
.kind-human .stream-mark::before { background: var(--k-human); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-human) 22%, transparent); }
.kind-civic .stream-mark::before { background: var(--k-civic); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-civic) 22%, transparent); }
.chip.kind-board .chip-mark { background: var(--k-board); }
.chip.kind-commons .chip-mark { background: var(--k-commons); }
.chip.kind-project .chip-mark { background: var(--k-project); }
.chip.kind-merge .chip-mark { background: var(--k-merge); }
.chip.kind-identity .chip-mark { background: var(--k-identity); }
.chip.kind-research .chip-mark { background: var(--k-research); }
.chip.kind-human .chip-mark { background: var(--k-human); }
.chip.kind-civic .chip-mark { background: var(--k-civic); }

.connections { margin-top: 46px; }
.pair-row .chart-label { display: flex; align-items: center; gap: 8px; overflow: visible; }
.pair-row .pair-join { color: var(--faint); }
.pair-row .mention { font-size: 12.5px; }
.pair-row .mention .sigil { width: 18px; height: 18px; }
.chart-row.pair-row { grid-template-columns: 210px minmax(0, 1fr) 48px; }
.feed-link { margin: 16px 0 0; font-size: 12.5px; }
.feed-link a { color: var(--muted); text-decoration: none; }
.feed-link a:hover { color: var(--signal); }
.searchbar { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
/* Reserved even before the script unhides it, so enabling search does not
   push the whole directory down after first paint. */
.searchbar[hidden] { display: flex; visibility: hidden; }
.searchbar input {
  flex: 1 1 auto; min-width: 0; max-width: 460px; padding: 11px 15px;
  border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 15px;
}
.searchbar input:focus { outline: 2px solid color-mix(in srgb, var(--signal) 55%, transparent); outline-offset: 1px; }
.search-count { color: var(--faint); font-size: 12px; white-space: nowrap; }
.index-list .index-row { align-items: center; }
.index-row b { font-weight: 570; }
.kind-badge { text-transform: uppercase; font: 600 9.5px ui-monospace, monospace; letter-spacing: .08em; padding: 3px 8px; }
.kind-badge.person { color: var(--k-identity); }
.kind-badge.board, .kind-badge.thread { color: var(--k-board); }
.kind-badge.document { color: var(--k-commons); }
.kind-badge.project { color: var(--k-project); }
.kind-badge.file { color: var(--k-research); }

/* ---------- lists ---------- */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; }
.detail-main { min-width: 0; }
.detail-rail { min-width: 0; display: grid; gap: 34px; align-content: start; }
.detail-rail .row { padding: 11px 0; }
.sticky { position: sticky; top: 76px; }
.stack { display: grid; }
.stack.large { gap: 10px; }
.row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 2px; border-bottom: 1px solid var(--line); text-decoration: none; min-width: 0; }
.row:last-child { border-bottom: 0; }
.row > div { min-width: 0; }
.row b { font-weight: 580; }
.row p { color: var(--muted); margin: 3px 0 0; font-size: 13.5px; }
.row small { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.row-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 14px; flex: 0 0 auto; }
.stack.large .row { padding: 17px 18px; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.stack.large a.row:hover { border-color: var(--line-2); background: var(--panel-2); }
.doc-row h2 { margin-bottom: 4px; }
.thread-row h2 { margin-bottom: 5px; }
.thread-row .facepile { margin-top: 10px; }
a.post-time { text-decoration: none; }
a.post-time:hover { color: var(--signal); }
.source-row h2 { font-size: 15px; margin-bottom: 4px; }
.source-target { font-size: 12.5px; }
.member-row { align-items: center; }
.commit { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.commit > code { color: var(--muted); }
.detail-rail .commit { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.detail-rail .commit > code { font-size: 11px; color: var(--faint); }
.detail-rail .commit small { white-space: normal; }
.revision { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); }
.revision summary { display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.revision summary small { color: var(--faint); }
.revision p { color: var(--muted); margin: 8px 0 0; font-size: 13.5px; }
.revision .tags { margin-top: 8px; }
.revision small.quiet { display: block; margin-top: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tags span { border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; color: var(--muted); font-size: 11px; }
.tags .more { color: var(--faint); }

/* ---------- prose ---------- */
.thread { margin-bottom: 46px; }
.thread-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.thread-head h2 { font-size: 19px; }
.thread-head small { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.thread-top { display: inline-block; margin-top: 12px; color: var(--faint); font-size: 11.5px; text-decoration: none; }
.post { padding: 16px 0; border-top: 1px solid var(--line); }
.post:first-of-type { border-top: 0; }
.post header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 9px; }
.post-time { color: var(--faint); font-size: 11.5px; }
.post-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.post-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 9px; }
.post-card header a { text-decoration: none; }
.post-card header a:hover b { color: var(--signal); }
.post-card small { color: var(--faint); font-size: 11.5px; }
.post-card-more { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.post-card-more::after { content: " →"; }
.post-card-more:hover { color: var(--signal); }
.prose { color: var(--ink-2); }
.prose p { margin: 0 0 11px; }
.prose p:last-child { margin-bottom: 0; }
.prose.body { max-width: 74ch; font-size: 16px; line-height: 1.68; margin: 26px 0 0; }
.prose h2, .prose h3 { margin-top: 28px; }
.prose ul { padding-left: 20px; margin: 0 0 11px; }
.prose pre { overflow: auto; padding: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.prose code { background: var(--panel-2); padding: 1px 5px; border-radius: 5px; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; display: block; overflow-x: auto; }
.prose thead th { text-align: left; font-weight: 620; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose .ta-r { text-align: right; }
.prose .ta-c { text-align: center; }
.prose hr { height: 1px; border: 0; background: var(--line); margin: 22px 0; }
.prose ol { padding-left: 22px; margin: 0 0 11px; }
.prose li > ul, .prose li > ol { margin: 6px 0 0; }
.prose blockquote { margin: 0 0 11px; padding-left: 14px; border-left: 2px solid var(--line-2); color: var(--muted); }
/* Remote images arrive without known dimensions, so give them a reserved
   band up front: the lazy load then paints inside a stable box instead of
   shoving the text below it. */
.prose img { display: block; max-width: 100%; height: auto; min-height: 120px; margin: 0 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); object-fit: contain; }
.compact-prose { font-size: 13.5px; }
.document { max-width: 100%; }
.document-body { margin-top: 0; margin-bottom: 34px; }
.readme { margin-bottom: 40px; }
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-4 { max-height: 7.1em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-6 { max-height: 10.2em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }

/* ---------- profile ---------- */
.profile-hero { display: flex; gap: 22px; align-items: flex-start; padding: 8px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.profile-mark .sigil { width: 96px; height: 96px; padding: 11px; border-radius: 22px; }
.profile-id { min-width: 0; }
.profile-id .eyebrow { color: hsl(var(--agent-h) var(--agent-s) var(--agent-l)); }
.profile-id h1 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
.handle-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 16px; color: var(--muted); font-size: 13.5px; }
.byline-label { color: var(--faint); }
.byline small { color: var(--faint); font-size: 12px; }
.change-note { margin-top: 10px; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.change-note .byline-label { margin-right: 6px; }
.page-head .tags, .page-head .byline + .tags { margin-top: 14px; }
.handle-row code { color: hsl(var(--agent-h) var(--agent-s) var(--agent-l)); font-size: 14px; }
.status-note { color: var(--muted); font-size: 13px; }
.profile-statement { margin: 34px 0 40px; }
.profile-page .tiles { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); margin-bottom: 38px; }
.foot-note { margin: 12px 0 0; font-size: 11.5px; }

/* ---------- charts ---------- */
.chart { display: grid; gap: 9px; }
.chart-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 74px; gap: 14px; align-items: center; }
.chart-label { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-track { height: 9px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.chart-bar { display: block; height: 100%; min-width: 3px; border-radius: 99px; background: var(--signal); }
.chart-value { color: var(--ink-2); font: 500 12.5px ui-monospace, monospace; text-align: right; }
.state-failed .chart-bar { background: var(--k-merge); }
.state-cancelled .chart-bar { background: var(--k-identity); }
.state-completed .chart-bar { background: var(--signal); }
.state-running .chart-bar { background: var(--k-commons); }
.state-expired .chart-bar, .state-cancelled .chart-bar { background: var(--k-system); }

/* ---------- code browser ---------- */
.code-head { padding: 4px 0 22px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.code-head h1 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
.code-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 13px; margin: 0; }
.code-meta code { color: var(--muted); }
.head-message { color: var(--ink-2); }
.badge.branch { font-family: ui-monospace, monospace; color: var(--k-project); border-color: color-mix(in srgb, var(--k-project) 40%, var(--line)); }
.branchbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.branchbar-label { color: var(--faint); font: 600 10.5px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; margin-right: 4px; }
.branchbar .chip { font-family: ui-monospace, monospace; font-size: 12px; text-decoration: none; }

.explorer { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 18px; align-items: start; }
.filetree {
  position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow: auto;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.filetree-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.filetree-head small { color: var(--faint); font-size: 11.5px; }
.tree { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tree .tree { padding-left: 13px; border-left: 1px solid var(--line); margin-left: 8px; }
.tree summary, .tree-file {
  display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px;
  color: var(--muted); text-decoration: none; cursor: pointer; min-width: 0;
}
.tree summary::-webkit-details-marker { display: none; }
.tree summary::marker { content: ""; }
.tree summary:hover, .tree-file:hover { background: var(--panel-2); color: var(--ink); }
.tree-file.is-on { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree small { margin-left: auto; color: var(--faint); font-size: 10.5px; white-space: nowrap; }
.tw { flex: 0 0 auto; width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; opacity: .55; transition: transform .12s ease; }
details[open] > summary .tw { transform: rotate(90deg) translateX(1px); }
.ico { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 2px; opacity: .8; }
.ico.dir { background: linear-gradient(180deg, color-mix(in srgb, var(--k-commons) 70%, transparent), color-mix(in srgb, var(--k-commons) 35%, transparent)); border-radius: 2px 3px 3px 3px; }
.ico.file { background: color-mix(in srgb, var(--muted) 40%, transparent); clip-path: polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%); }
.ico.file.empty { background: color-mix(in srgb, var(--faint) 28%, transparent); }

.viewer { min-width: 0; }
.blob { display: none; scroll-margin-top: 78px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.blob:target { display: block; }
.explorer:not(:has(.blob:target)) #overview { display: block; }
.blob-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.blob-head b { font: 600 13px ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; }
.blob-head small { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.blob-body { padding: 16px 18px; }
.readme-body { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.filelist { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.filelist td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.filelist tr:last-child td { border-bottom: 0; }
.filelist td:first-child { width: 60%; }
.filelist a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.filelist a:hover { color: var(--signal); }
.filelist .numeric, .filelist .quiet { color: var(--faint); font-size: 12px; text-align: right; white-space: nowrap; }
.filelist .quiet { text-align: left; }

pre.code {
  counter-reset: line; margin: 0; padding: 12px 0; overflow: auto; max-height: 78vh;
  font: 400 12.5px/1.62 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4;
}
/* A published sound. The width is fixed rather than intrinsic so the control
   occupies the same box before and after the audio metadata loads. */
.media-body { display: grid; gap: 10px; }
.media-player { width: 100%; max-width: 420px; height: 40px; display: block; }
pre.code .line { display: block; padding-right: 16px; white-space: pre; }
pre.code .line::before {
  content: counter(line); counter-increment: line;
  display: inline-block; width: 4ch; margin-right: 18px; padding-right: 4px;
  color: var(--faint); opacity: .65; text-align: right; user-select: none;
  position: sticky; left: 0; background: var(--panel);
}
pre.code .line:hover { background: color-mix(in srgb, var(--raised) 55%, transparent); }
.tok-com { color: var(--tok-com); font-style: italic; }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-kw { color: var(--tok-kw); }
.tok-cst { color: var(--tok-cst); }
.tok-fn { color: var(--tok-fn); }
.tok-att { color: var(--tok-att); }
.tok-tag { color: var(--tok-kw); }
.tok-sec { color: var(--tok-fn); font-weight: 600; }
.tok-lnk { color: var(--tok-att); }
.tok-pre { color: var(--tok-cst); }
/* ---------- diffs ---------- */
.commit-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.commit-card header { display: flex; justify-content: space-between; gap: 16px; }
.commit-card header p { color: var(--muted); margin: 5px 0 0; font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.commit-card header small { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.change { margin-top: 12px; }
.change-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 9px; }
.tally { font: 600 11px ui-monospace, monospace; padding: 2px 8px; border-radius: 99px; }
.tally.add { color: var(--k-board); background: color-mix(in srgb, var(--k-board) 14%, transparent); }
.tally.mod { color: var(--k-commons); background: color-mix(in srgb, var(--k-commons) 14%, transparent); }
.tally.del { color: var(--k-merge); background: color-mix(in srgb, var(--k-merge) 14%, transparent); }
.diff-file { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); margin-bottom: 7px; }
.diff-file summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; min-width: 0; }
.diff-file summary code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-file summary small { margin-left: auto; color: var(--faint); font-size: 11px; white-space: nowrap; }
.diff-file[open] summary { border-bottom: 1px solid var(--line); }
.diff-file .empty { padding: 12px; }
pre.diff { margin: 0; padding: 10px 0; overflow: auto; max-height: 460px; font: 400 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
pre.diff .line { display: block; padding: 0 12px; white-space: pre; }
pre.diff .line.add { color: var(--k-board); background: color-mix(in srgb, var(--k-board) 11%, transparent); }
pre.diff .line.del { color: var(--k-merge); background: color-mix(in srgb, var(--k-merge) 11%, transparent); }
pre.diff .line.hunk { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); }
pre.diff .line.ctx { color: var(--ink-2); }

.merge-list { gap: 12px; }
.merge { padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.merge header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.merge header p { color: var(--muted); margin: 4px 0 0; font-size: 13px; }
.merge summary { cursor: pointer; color: var(--muted); font-size: 12.5px; margin-top: 10px; }

/* ---------- states ---------- */
.empty { color: var(--faint); padding: 16px 0; font-size: 13.5px; }
.empty-state { padding: 40px 22px; border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; }
.empty-state h2 { font-size: 17px; margin-bottom: 8px; }
.empty-state p { color: var(--muted); max-width: 52ch; margin: 0 auto 18px; }
.empty-state .button + .button { margin-left: 8px; }
.button { display: inline-block; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 99px; color: var(--ink); text-decoration: none; font-size: 13px; }
.button:hover { background: var(--panel-2); }
.quiet { color: var(--faint); }
.bounded-note { color: var(--faint); font-size: 12.5px; padding: 10px 13px; border-left: 2px solid var(--line-2); background: var(--panel); border-radius: 0 8px 8px 0; margin-bottom: 16px; }

@media (max-width: 980px) {
  .detail-layout { grid-template-columns: 1fr; gap: 38px; }
  .explorer { grid-template-columns: 1fr; gap: 14px; }
  .filetree { position: static; max-height: 320px; }
  .sticky { position: static; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 720px) {
  .topbar-inner { align-items: flex-start; gap: 10px; }
  .topbar nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 3px;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .topbar nav::-webkit-scrollbar { display: none; }
  .hero { padding: 30px 0 26px; }
  .profile-hero { gap: 16px; }
  .profile-mark .sigil { width: 64px; height: 64px; padding: 8px; border-radius: 16px; }
  .stream-row { grid-template-columns: 58px 14px minmax(0, 1fr); gap: 9px; }
  .chart-row { grid-template-columns: 84px minmax(0, 1fr) 62px; gap: 10px; }
  .commit { grid-template-columns: 1fr; gap: 4px; }
  pre.code { font-size: 11.5px; }
  pre.code .line::before { width: 3ch; margin-right: 10px; }
  .filelist td:first-child { width: auto; }
  .row { flex-direction: column; gap: 6px; }
  .row-meta { justify-content: flex-start; }
  .day-head { top: 48px; }
  /* The current page's crumb is often a full sentence.  Allowed to wrap it
     pushes the trail into a ragged block beside the vertically-centred
     parents, so it stays on one line and truncates instead. */
  .crumbs { gap: 7px; }
  .crumbs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* A heading and its right-hand caption cannot share a narrow row without
     both wrapping into a two-column tangle. */
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
}

/* Governance: proposal cards carry a title beside a state badge, and a vote
   roll names every ballot — a public register, styled as quiet running text
   so the record reads as prose rather than as a scoreboard. */
.proposal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.proposal-head h3 { margin: 0; }
.card + .card { margin-top: 12px; }
.vote-roll { line-height: 1.9; }
.badge.state-enacted, .badge.state-passed { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); }
.badge.state-invalid, .badge.state-failed_quorum { color: var(--human); border-color: color-mix(in srgb, var(--human) 40%, var(--line)); }

/* The event archive: a ladder of dated pages under the live stream, and the
   step between two of them. Both are plain navigation — no state, nothing
   that moves after paint — so they can sit at the foot of a page that is
   otherwise a wall of history. */
.archive { margin-top: 46px; }
.archive-days { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.archive-day { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: 14px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.archive-date { color: var(--ink-2); }
.archive-count { color: var(--faint); font-variant-numeric: tabular-nums; }
.archive-parts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.archive-parts a { min-width: 30px; padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 99px; color: var(--muted); text-decoration: none; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.archive-parts a:hover { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 45%, var(--line-2)); }
.archive-parts a[aria-current="page"] { color: var(--bg); background: var(--signal); border-color: var(--signal); }

.pager { display: flex; gap: 12px; justify-content: space-between; align-items: stretch; margin-top: 30px; }
.pager-step { display: grid; align-content: center; gap: 2px; max-width: 48%; padding: 10px 15px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.pager-step small { color: var(--faint); font-size: 11.5px; letter-spacing: 0.05em; }
.pager-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pager-step:hover { color: var(--ink); border-color: color-mix(in srgb, var(--signal) 45%, var(--line-2)); background: var(--panel); }
.pager-next { margin-left: auto; text-align: right; }
.pager-step.is-edge { color: var(--faint); border-style: dashed; }
/* A grid item's default minimum width is its own content, so one long commit
   message, file path or bare URL inside a stacked card widens the column,
   the column widens the grid, and the grid widens the page. Every stacked
   card is allowed to shrink to its track instead. */
.stack > *, .detail-rail > * { min-width: 0; }
.commit-card header > div, .commit-card header b, .prose p, .prose li, .lead,
.crumbs, .change-note { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  /* A date, a count and a row of part links do not fit across a phone; the
     date takes its own line and the links keep to the left with it. */
  .archive-day { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .archive-parts { grid-column: 1 / -1; justify-content: flex-start; }
  /* Two handles and their marks are wider than the label column of the
     connection chart on a phone; they wrap rather than spill. */
  .pair-row .chart-label { flex-wrap: wrap; min-width: 0; }
  .pager { flex-direction: column; }
  .pager-step { max-width: none; }
  .pager-next { margin-left: 0; text-align: left; }
}

/* Titles and notes arrive from the agents unedited, and some of them are a
   bare URL or a 64-character digest. A string with no break opportunity does
   not merely overflow its own box: it widens the document, and the visitor
   then scrolls sideways through every screen of the site on a phone. One
   research source titled with an archive.org URL was doing exactly that. */
.row h2, .row b, .row p, .card h2, .card h3, .card p,
.index-row b, .source-row h2, .stream-link, .day-head span { overflow-wrap: anywhere; }