/* MiCyte — micyte.com
 *
 * Palette is taken from a spore print: the deposit a mushroom leaves on paper.
 * Warm brown-black substrate, spore-paper white, spore ochre, spore violet.
 * Deliberately not a neutral near-black with one bright accent — the accents
 * here are earth pigments, desaturated, and each has exactly one job:
 * ochre = place and structure, violet = the network.
 *
 * Monospace is the DISPLAY face, not a code affectation: this system's central
 * artifact is a dotted address, so the address is what gets set large. The
 * serif carries prose (a field notebook next to a machine address).
 *
 * No web fonts, no build step, no external requests — the page is self-contained.
 */

:root {
  /* Spore-print palette, nudged to the brand-mark canon (Loam Black / Panel / Line /
     Hypha Gold / Spore Cream / Muted). Violet is the site's own "network" ink, kept. */
  --substrate:   #16130e;
  --raised:      #1e1a13;
  --rule:        #332b20;
  --hyphae:      #ece5d4;
  --hyphae-dim:  #a79b84;
  --ochre:       #c68a3d;
  --violet:      #9d78b4;
  --paper:       #f4efe3;   /* rare light surface (on-paper marks) */
  --well:        #0f0d0b;   /* inputs / specimen / inset wells */
  --moss:        #7f9066;   /* operational: ok / health (portal + status dots) */
  --danger:      #b86b5d;   /* operational: alert */

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Display face (Hybrid): Space Grotesk when present (self-hosted below if available),
     falling back to a geometric system sans. Used for the largest headings + wordmark
     only — the address artifact stays mono, editorial prose stays serif. */
  --display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  --measure: 62ch;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;          /* card/map corners; portal converges to 2px; data tables stay 0 */
  --round: var(--radius);  /* legacy alias */

  /* Type scale (spore-print spec): display-XL clamp(2.1–3.9rem)/-.03em/500 · h2
     clamp(1.5–2rem)/-.02em/500 · body serif 1.0–1.12rem/1.62 (62ch) · eyebrow
     .7rem/600/.22em/upper · label+mono .72–.8rem. Accent rule (one job each):
     ochre = place & structure · violet = the network. No new hues. */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--substrate);
  color: var(--hyphae);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  line-height: 1.62;
  /* Faint radial deposit, like the print itself. Sits under everything. */
  background-image: radial-gradient(60rem 40rem at 50% -10rem, #1f1a15 0%, transparent 70%);
  background-repeat: no-repeat;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ochre); color: var(--substrate);
  padding: 0.6rem 1rem; font-family: var(--sans); font-size: 0.85rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

a { color: var(--hyphae); text-decoration-color: var(--rule); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--ochre); }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

code { font-family: var(--mono); font-size: 0.92em; }

/* ---------- top bar ---------- */
.bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem var(--gut);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.bar__mark { text-decoration: none; color: var(--hyphae); font-weight: 700; letter-spacing: 0.14em; }
.bar__mark::before { content: "◦ "; color: var(--ochre); }
.bar__nav { display: flex; gap: clamp(0.85rem, 2.5vw, 1.75rem); }
.bar__nav a { color: var(--hyphae-dim); text-decoration: none; }
.bar__nav a:hover { color: var(--hyphae); }

/* ---------- hero: the address resolving ---------- */
.hero { padding: clamp(3.5rem, 11vh, 8rem) var(--gut) clamp(3rem, 8vh, 5.5rem); }

.eyebrow {
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ochre);
}
.eyebrow--net { color: var(--violet); }

/* (pruned: orphaned animated .addr / .addr__seg / .hero__resolve hero — the home
   hero is now the msn contact card. .branch* below stays: live on profile pages.) */

/* The indent cascade IS a hyphal branch: form and content agree. */
.branch {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.9vw, 0.95rem);
}
.branch__row {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.28rem 0;
  transition: opacity 460ms ease, transform 460ms ease;
}
.js .branch__row { opacity: 0; transform: translateY(-0.35rem); }
.js .branch__row.is-shown { opacity: 1; transform: none; }
.branch__row[data-seg="1"] { padding-left: 1.6rem; }
.branch__row[data-seg="2"] { padding-left: 3.2rem; }
.branch__row[data-seg="3"] { padding-left: 4.8rem; }

.branch__tick {
  width: 1.15rem; height: 1px; flex: none;
  background: var(--rule);
  position: relative;
}
.branch__tick::before {
  content: ""; position: absolute; left: 0; top: -0.42rem;
  width: 1px; height: 0.42rem; background: var(--rule);
}
.branch__row[data-seg="0"] .branch__tick::before { display: none; }
.branch__label { color: var(--hyphae-dim); letter-spacing: 0.02em; }
.branch__label--leaf { color: var(--ochre); }

.hero__thesis {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--hyphae);
}

/* ---------- bands ---------- */
.band {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, var(--measure));
  gap: clamp(1.5rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(3rem, 9vh, 6rem) var(--gut);
  border-top: 1px solid var(--rule);
}
.band--net { background: var(--raised); }

.band h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  /* Without this every heading here strands its last word on its own line. */
  text-wrap: balance;
}

.prose p { margin: 0 0 1.15rem; color: #d6cfc2; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--hyphae); font-weight: 700; }

.specimen {
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--ochre);
  background: var(--well);
  overflow-x: auto;
}
.specimen code { color: var(--hyphae); white-space: nowrap; }
.specimen em { color: var(--ochre); font-style: normal; }

.band--net code { color: var(--violet); }

/* ---------- actions ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.btn {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--rule);
  color: var(--hyphae);
  /* Say it: an <a class="btn"> has no background, but a <button class="btn"> keeps
     the UA's light grey and renders near-white text on it. The retry control in the
     channel's offline panel is a real button, and was unreadable. */
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.btn:hover { border-color: var(--hyphae-dim); background: #191512; }
.btn--primary { background: var(--ochre); border-color: var(--ochre); color: #14110e; }
.btn--primary:hover { background: #cf9950; border-color: #cf9950; }

/* ---------- docs ---------- */
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.docs li:first-child { padding-top: 0; }
.docs a {
  display: block;
  font-family: var(--mono); font-size: 0.92rem;
  text-decoration: none; color: var(--hyphae);
}
.docs a:hover { color: var(--ochre); }
.docs span { display: block; margin-top: 0.2rem; font-size: 0.92rem; color: var(--hyphae-dim); }

/* ---------- foot ---------- */
.foot {
  padding: clamp(2.5rem, 7vh, 4rem) var(--gut);
  border-top: 1px solid var(--rule);
}
.foot__lede { margin: 0 0 0.5rem; max-width: var(--measure); }
.foot__meta {
  margin: 0;
  font-family: var(--mono); font-size: 0.76rem;
  color: var(--hyphae-dim); letter-spacing: 0.02em;
}

/* ---------- narrow ---------- */
@media (max-width: 56rem) {
  .band { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .branch__row[data-seg="1"] { padding-left: 1rem; }
  .branch__row[data-seg="2"] { padding-left: 2rem; }
  .branch__row[data-seg="3"] { padding-left: 3rem; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js .branch__row { opacity: 1; transform: none; }
}

/* The install line reads as an instruction, not a spec — the note sits with it
   rather than becoming another paragraph. */
.specimen__note {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--hyphae-dim);
}

/* =====================================================================
   Multi-page additions (Home hub, profile card, network map, subpages).
   Same spore-print system: ochre = place/structure, violet = network.
   ===================================================================== */

/* active nav item — the bar tells you which world you are in */
.bar__nav a[aria-current="page"] { color: var(--hyphae); text-decoration: underline; text-decoration-color: var(--ochre); }

/* ---------- profile contact card (the hero, and each network node) ---------- */
/* The standardized profile card IS the unit the network trades. Same object on
   the home hero and on every profile page, so the reader learns it once. */
.card {
  border: 1px solid var(--rule);
  background: var(--raised);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  max-width: 34rem;
}
.card__tag {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet);
  margin: 0 0 1rem;
}
.card__name {
  margin: 0 0 0.15rem; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.01em;
}
.card__meta { margin: 0 0 1.25rem; font-family: var(--sans); font-size: 0.8rem; color: var(--hyphae-dim); letter-spacing: 0.04em; }
.card__meta .synthetic { color: var(--ochre); }
.card__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.card__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); font-size: 0.92rem; }
.card__k { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hyphae-dim); padding-top: 0.15rem; }
.card__v { color: #d6cfc2; min-width: 0; overflow-wrap: anywhere; }
.card__v code, .card__v .mono { font-family: var(--mono); color: var(--hyphae); }
.card__foot { margin-top: 1.25rem; }

/* the hero holds the card on the left, the claim + actions on the right */
.hero__card { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 34ch); gap: clamp(1.75rem, 6vw, 4rem); align-items: center; margin-top: clamp(1.75rem, 5vh, 3rem); }
@media (max-width: 60rem) { .hero__card { grid-template-columns: minmax(0, 1fr); } }

/* ---------- home hub: the four destinations ---------- */
.hub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.hub__item { background: var(--substrate); }
.hub__item a { display: block; height: 100%; padding: 1.5rem 1.4rem; text-decoration: none; transition: background 160ms ease; }
.hub__item a:hover { background: var(--raised); }
.hub__n { font-family: var(--mono); font-size: 0.72rem; color: var(--ochre); letter-spacing: 0.1em; }
.hub__t { display: block; margin: 0.5rem 0 0.3rem; font-family: var(--serif); font-size: 1.15rem; color: var(--hyphae); }
.hub__d { display: block; font-size: 0.9rem; color: var(--hyphae-dim); line-height: 1.45; }

/* ---------- subpage header ---------- */
.pagehead { padding: clamp(2.75rem, 8vh, 5rem) var(--gut) clamp(1.5rem, 4vh, 2.5rem); border-bottom: 1px solid var(--rule); }
.pagehead h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.08; max-width: 22ch; text-wrap: balance; }
.pagehead .lede { margin: 1rem 0 0; max-width: 54ch; color: #d6cfc2; font-size: clamp(1.02rem, 1.5vw, 1.2rem); text-wrap: pretty; }
.crumb { display: inline-block; margin-bottom: 1.25rem; font-family: var(--mono); font-size: 0.78rem; color: var(--hyphae-dim); text-decoration: none; }
.crumb::before { content: "← "; color: var(--ochre); }
.crumb:hover { color: var(--hyphae); }

/* ---------- network map ---------- */
.map-wrap { padding: clamp(1.75rem, 5vh, 3rem) var(--gut) 0; }
.map {
  position: relative;
  border: 1px solid var(--rule);
  background:
    radial-gradient(80% 120% at 30% 20%, #1a1611 0%, var(--substrate) 70%);
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
}
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* real county geometry (Northeast Ohio), projected. Land sits just above the
   substrate; the two counties the network lives in are tinted and ochre-edged. */
.map .county { fill: #1b1610; stroke: #342d24; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .county.home { fill: #241c12; stroke: var(--ochre); }
.map .county-label { fill: var(--hyphae-dim); font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; text-anchor: middle; }
/* hyphal links: the registry resolving each farm, drawn over the land */
.map .link { stroke: var(--rule); stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; }
.map .link.is-hot { stroke: var(--violet); }
/* nodes: ochre = a place/member, violet = the registry hub */
.node-dot { cursor: pointer; }
.node-dot circle { fill: var(--ochre); stroke: var(--substrate); stroke-width: 2; transition: r 160ms ease, fill 160ms ease; }
.node-dot.is-hub circle { fill: var(--violet); }
.node-dot:hover circle, .node-dot:focus circle { r: 9; }
.node-dot text { fill: var(--hyphae-dim); font-family: var(--mono); font-size: 10px; }
.node-dot:hover text, .node-dot:focus text { fill: var(--hyphae); }
.node-dot { outline: none; }
.node-dot:focus-visible circle { stroke: var(--ochre); }

/* Status tiers on the map: live (full), still (small + light), card-only (unfilled). */
.node-dot.is-still circle { fill: var(--hyphae-dim); opacity: 0.5; stroke-width: 1.5; }
.node-dot.is-still text { fill: var(--hyphae-dim); opacity: 0.7; font-size: 9px; }
.node-dot.is-still:hover circle, .node-dot.is-still:focus circle { opacity: 0.85; r: 6; }
.node-dot.is-card circle { fill: none; stroke: var(--hyphae-dim); stroke-width: 1.5; opacity: 0.5; }

.legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; padding: 1rem var(--gut) 0; }
.legend__item { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.01em; color: var(--hyphae-dim); }
.legend__dot { flex: none; border-radius: 50%; }
.legend__dot--live { width: 13px; height: 13px; background: var(--violet); }
.legend__dot--still { width: 9px; height: 9px; background: var(--hyphae-dim); opacity: 0.55; }
.legend__dot--card { width: 8px; height: 8px; background: transparent; border: 1.5px solid var(--hyphae-dim); opacity: 0.65; }
.legend__note { color: #6f685c; }

/* the micyte-<msn>.bin note above the network browser */
.roster__note { padding: 1rem var(--gut) 0; margin: 0; max-width: 74ch; font-family: var(--mono); font-size: 0.78rem; line-height: 1.6; color: #6f685c; }
.roster__note code { color: var(--hyphae-dim); }


/* ---------- research figures ---------- */
.tri { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tri li { background: var(--substrate); padding: 1.3rem 1.25rem; }
.tri h3 { margin: 0 0 0.4rem; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ochre); font-weight: 600; }
.tri p { margin: 0; font-size: 0.95rem; color: #d6cfc2; }

.pull { margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--violet); font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-family: var(--serif); line-height: 1.4; text-wrap: pretty; color: var(--hyphae); }

.note { font-size: 0.85rem; color: var(--hyphae-dim); font-family: var(--sans); }

/* =====================================================================
   msn contact card as a visual artifact, with a monotone profile logo.
   The card is the object the registry publishes; the logo is set in one
   palette ink (violet for the registry, ochre for a place) so every card
   reads as the same kind of artifact regardless of the brand it carries.
   ===================================================================== */
.card { position: relative; }
.card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 46px; height: 3px; background: var(--ochre); }
.card--net::before { background: var(--violet); }

.card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.card__logo { width: 3.25rem; height: 3.25rem; flex: none; }
/* SVG marks: painted in one ink via mask, so they are monotone by construction. */
.card__logo--mask {
  background: var(--ochre);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.card--net .card__logo--mask { background: var(--violet); }
/* Raster marks (no vector available): forced monotone with a filter. */
.card__logo--img { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card__logo--img img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(1.25) contrast(1.05); opacity: 0.92; }
.card__head .card__name { margin: 0; }
.card__head-meta { min-width: 0; }

/* the msn address is the card's defining datum — set it large, in mono */
.card__addr { margin: 0 0 1rem; font-family: var(--mono); font-size: clamp(1.15rem, 3.4vw, 1.7rem); letter-spacing: -0.01em; line-height: 1.1; color: var(--hyphae); word-break: break-word; }
.card__addr .leaf { color: var(--ochre); }
.card--net .card__addr .leaf { color: var(--violet); }

/* the hero variant sits a touch larger and centres against its claim */
.card--hero { max-width: 33rem; }

/* profile page: the card gets room to breathe */
.profile-wrap { padding: clamp(1.75rem, 5vh, 3rem) var(--gut) 0; }
.profile-wrap .card { max-width: 40rem; }

/* ---------- long-form research ---------- */
.doc { padding: clamp(2rem, 6vh, 4rem) var(--gut) clamp(3rem, 9vh, 6rem); }
.doc__body { max-width: 68ch; margin: 0 auto; }
.doc__body > p { margin: 0 0 1.15rem; color: #d6cfc2; }
/* numbered part heading — the "1..7" spine of the report */
.doc__part {
  margin: 3.25rem 0 0.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ochre);
}
.doc h2 { margin: 1.5rem 0 0.75rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; letter-spacing: -0.012em; text-wrap: balance; }
.doc h3 { margin: 1.75rem 0 0.5rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hyphae); }
.doc ul { margin: 0 0 1.2rem; padding-left: 1.1rem; color: #d6cfc2; }
.doc li { margin: 0.28rem 0; }
.doc li::marker { color: var(--ochre); }

/* lettered interlude (A–G): a full-width pull-quote between the numbered parts */
.interlude { margin: 2.5rem 0; padding: 1.5rem 0 1.5rem 1.5rem; border-left: 2px solid var(--violet); }
.interlude__k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--violet); text-transform: uppercase; }
.interlude p { margin: 0.5rem 0 0; font-family: var(--serif); font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.42; color: var(--hyphae); text-wrap: pretty; }

/* figures */
.figure { margin: 2rem 0; }
.figure img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); background: var(--raised); }
.figure figcaption { margin-top: 0.6rem; font-family: var(--sans); font-size: 0.78rem; color: var(--hyphae-dim); line-height: 1.5; }
.figure figcaption b { color: var(--ochre); font-weight: 600; }

/* evidence note */
.evidence { margin: 1.5rem 0 0; padding: 0.9rem 1.1rem; background: var(--well); border-left: 2px solid var(--rule); font-size: 0.9rem; color: var(--hyphae-dim); }
.evidence b { color: var(--hyphae); font-weight: 600; }

/* MiCyte's own note tying the research back to the software */
.doc__tie { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* =====================================================================
   Hybrid brand additions (2026-07-20). Space Grotesk (self-hosted, latin
   subset) is the DISPLAY face — the largest headings + the wordmark only.
   The dotted address stays mono; editorial prose stays serif; violet stays
   the network ink. Heroes/cards get a soft radius; data rows stay sharp.
   ===================================================================== */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;            /* one master, mapped across weights */
  font-display: swap;
  /* REPOINTED for this host (2026-10-04): this is the portal's copy of the site's
     stylesheet, carried so the hosted signup pages look like what they link back
     to. A COPY and not a proxy — micyte.com must keep standing when this portal
     is down, and that relationship cannot be mutual. The font is served from the
     same two-name allowlist as this file. */
  src: url("/__fnd/signup/assets/space-grotesk.woff2") format("woff2");
}

.bar__mark { font-family: var(--display); letter-spacing: 0.12em; }
.pagehead h1,
.band h2,
.hub__t,
.summary h2 { font-family: var(--display); letter-spacing: -0.02em; }

.card { border-radius: var(--round); }
.map { border-radius: var(--round); }

/* ---------- registry browser (datum-driven; /network, /resources) ----------
   The bare `.browser` page padding that used to sit here is gone: /network was retired and
   `.browser` is now the /explore SHELL, whose own rules are at the bottom of this file. It
   was a real collision -- this declaration won on source order and put 36px of padding
   inside the grid, holding the toolbar 37px below the header. The `__` descendants below
   are still in use (`browser__empty` x7 in the noscript fallbacks, `browser__list`,
   `browser__controls`, `browser__search`) and do not collide with the shell's names. */
.browser__controls {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center;
  margin-bottom: 1.1rem;
}
.browser__search {
  flex: 1 1 16rem; min-width: 0;
  font-family: var(--mono); font-size: 0.85rem;
  padding: 0.6rem 0.8rem;
  color: var(--hyphae); background: var(--well);
  border: 1px solid var(--rule);
}
.browser__search::placeholder { color: var(--hyphae-dim); }
.browser__search:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
.browser__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.browser__tab {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.42rem 0.75rem;
  color: var(--hyphae-dim); background: transparent;
  border: 1px solid var(--rule); cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.browser__tab:hover { color: var(--hyphae); border-color: var(--hyphae-dim); }
.browser__tab[aria-pressed="true"] { color: var(--substrate); background: var(--ochre); border-color: var(--ochre); }
.browser__count { margin: 0 0 0.9rem; font-family: var(--mono); font-size: 0.74rem; color: var(--hyphae-dim); letter-spacing: 0.04em; }

.browser__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.browser__list--tight { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-top: 1.25rem; }
.browser__empty { grid-column: 1 / -1; background: var(--substrate); padding: 1.5rem; color: var(--hyphae-dim); font-family: var(--sans); font-size: 0.9rem; }

/* one directory record — sharp corners (this is the data table) */
.entry { background: var(--substrate); }
.entry__a { display: block; height: 100%; padding: 1rem 1.15rem; text-decoration: none; border-left: 2px solid var(--rule); transition: background 140ms ease; }
.entry__a:hover { background: var(--raised); }
.entry--live .entry__a { border-left-color: var(--violet); }
.entry--still .entry__a { border-left-color: var(--ochre); }
.entry__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.entry__name { font-family: var(--serif); font-size: 1.02rem; color: var(--hyphae); line-height: 1.25; }
.entry__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; margin: 0.4rem 0 0; font-family: var(--sans); font-size: 0.72rem; color: var(--hyphae-dim); }
.entry__kind { color: var(--ochre); text-transform: capitalize; letter-spacing: 0.02em; }
.entry__web { font-family: var(--mono); }
/* msn-network entity kind (legal / natural / administrative / informal) — the card's lcl
   classification; violet = the network ink, distinct from the ochre substance label. */
.entry__ekind { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); border: 1px solid var(--rule); border-radius: 2px; padding: 0.02rem 0.34rem; }
.entry__addr { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--hyphae-dim); letter-spacing: 0.01em; word-break: break-all; }

/* status tag (shared) */
.status { flex: none; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.1rem 0.42rem; border: 1px solid var(--rule); border-radius: 2px; color: var(--hyphae-dim); }
.status--live { color: var(--violet); border-color: var(--violet); }
.status--still { color: var(--ochre); border-color: var(--ochre); }
.status--listed { color: var(--hyphae-dim); }

/* ---------- home Network summary (datum tiers) ---------- */
.tiers { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tier { background: var(--substrate); padding: 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
.tier__n { font-family: var(--display); font-size: 2.2rem; line-height: 1; color: var(--hyphae); }
.tier--live .tier__n { color: var(--violet); }
.tier__k { align-self: flex-start; }
.tier__d { font-family: var(--sans); font-size: 0.78rem; color: var(--hyphae-dim); }
.summary__more { margin: 1.5rem 0 0; }

/* ---------- coming-soon stub (Simulator, Login) ---------- */
.soon { padding: clamp(2.5rem, 9vh, 6rem) var(--gut); }
.soon__badge { display: inline-block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); border: 1px solid var(--violet); border-radius: 2px; padding: 0.2rem 0.6rem; margin-bottom: 1.5rem; }
.soon h1 { margin: 0 0 1rem; font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.02; max-width: 18ch; }
.soon p { max-width: 54ch; color: #d6cfc2; font-size: clamp(1.02rem, 1.5vw, 1.2rem); }

@media (max-width: 56rem) {
  .browser__list, .browser__list--tight { grid-template-columns: minmax(0, 1fr); }
}

/* home Network section container (datum summary) */
.summary { padding: clamp(2.5rem, 7vh, 4rem) var(--gut); border-top: 1px solid var(--rule); background: var(--raised); }
.summary h2 { margin: 0 0 1.5rem; font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 26ch; text-wrap: balance; }

/* ---------- simulator subtabs (Taxonomy / Calculator) ---------- */
.mono { font-family: var(--mono); }
.soon h2 { margin: 0 0 1rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 4.5vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.05; max-width: 20ch; }
.subtabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.9rem var(--gut) 0; border-bottom: 1px solid var(--rule); }
.subtab {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.7rem 0.9rem; margin-bottom: -1px;
  color: var(--hyphae-dim); background: transparent;
  border: none; border-bottom: 2px solid transparent; cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.subtab:hover { color: var(--hyphae); }
.subtab[aria-selected="true"] { color: var(--hyphae); border-bottom-color: var(--ochre); }
.subtab:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.subpanel[hidden] { display: none; }
.subpanel__lede {
  padding: clamp(1.25rem, 3vh, 2rem) var(--gut) 0; margin: 0; max-width: 70ch;
  font-family: var(--serif); font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.5; color: #d6cfc2;
}
.subpanel__lede .mono { color: var(--hyphae); font-size: 0.9em; }

/* ---------- taxonomy explorer (datum-driven; txa tree + search) ---------- */
.tax { padding: clamp(1.25rem, 3vh, 2rem) var(--gut) clamp(2.5rem, 7vh, 4rem); }
.tax__controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: baseline; margin-bottom: 1.1rem; }
.tax__search {
  flex: 1 1 20rem; min-width: 0;
  font-family: var(--mono); font-size: 0.9rem; padding: 0.65rem 0.85rem;
  color: var(--hyphae); background: var(--well); border: 1px solid var(--rule);
}
.tax__search::placeholder { color: var(--hyphae-dim); }
.tax__search:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
.tax__count { margin: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--hyphae-dim); letter-spacing: 0.03em; }

/* tree — sharp data rows, mycelial indent rule on nested branches */
.tax__tree, .tax__children, .tax__results { list-style: none; margin: 0; padding: 0; }
.tax__children { margin-left: 0.85rem; padding-left: 0.85rem; border-left: 1px solid var(--rule); }
.tax__children[hidden] { display: none; }
.tax__node { }
.tax__row {
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); cursor: default;
  transition: background 120ms ease;
}
.tax__node > .tax__row { cursor: pointer; }
.tax__node > .tax__row:hover { background: var(--raised); }
.tax__node > .tax__row--leaf { cursor: default; }
.tax__node > .tax__row--leaf:hover { background: transparent; }
.tax__row--leaf { border-left: 2px solid var(--violet); padding-left: 0.5rem; }
.tax__toggle {
  flex: none; width: 1.1rem; height: 1.1rem; padding: 0; line-height: 1;
  background: transparent; border: none; color: var(--ochre); cursor: pointer; font-size: 0.7rem;
}
.tax__toggle::before { content: "\25B8"; display: inline-block; transition: transform 120ms ease; }
.tax__node.is-open > .tax__row .tax__toggle::before { transform: rotate(90deg); }
.tax__lead { flex: none; width: 1.1rem; text-align: center; color: var(--hyphae-dim); font-family: var(--mono); font-size: 0.7rem; }
.tax__name { font-family: var(--serif); font-size: 1rem; color: var(--hyphae); line-height: 1.2; }
.tax__name--muted { font-style: italic; color: var(--hyphae-dim); font-size: 0.9rem; }
.tax__sci { font-family: var(--serif); font-style: italic; font-size: 0.85rem; color: var(--hyphae-dim); }
.tax__id { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.01em; color: #6f685c; word-break: break-all; text-align: right; }

/* search hits — the same row plus an orienting ancestor path */
.tax__hit { border-bottom: 1px solid var(--rule); }
.tax__hit .tax__row { border-bottom: none; cursor: default; }
.tax__hit .tax__row:hover { background: transparent; }
.tax__path { padding: 0 0.6rem 0.55rem 1.75rem; margin: -0.3rem 0 0; font-family: var(--mono); font-size: 0.7rem; color: var(--hyphae-dim); letter-spacing: 0.01em; }
.tax__empty { padding: 1.5rem 0.6rem; color: var(--hyphae-dim); font-family: var(--sans); font-size: 0.9rem; }

@media (max-width: 56rem) {
  .tax__id { margin-left: 1.6rem; text-align: left; flex-basis: 100%; }
  .tax__row { flex-wrap: wrap; }
}

/* a link that is really a <button> (in-copy tab jumps) */
.linkish {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--ochre); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.linkish:hover { color: var(--hyphae); }
.linkish:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* ---------- Phylogenic Tree (zoomable sunburst) ---------- */
.sun { padding: clamp(1.25rem, 3vh, 2rem) var(--gut) clamp(2.5rem, 7vh, 4rem); }
.sun__controls { position: relative; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: baseline; margin-bottom: 0.9rem; }
.sun__search {
  flex: 1 1 20rem; min-width: 0;
  font-family: var(--mono); font-size: 0.9rem; padding: 0.65rem 0.85rem;
  color: var(--hyphae); background: var(--well); border: 1px solid var(--rule);
}
.sun__search::placeholder { color: var(--hyphae-dim); }
.sun__search:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
.sun__count { margin: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--hyphae-dim); letter-spacing: 0.03em; }

/* search results — a compact dropdown; click a hit to zoom the rings to it */
.sun__results { list-style: none; margin: 0 0 1rem; padding: 0; max-height: 18rem; overflow-y: auto; border: 1px solid var(--rule); background: var(--well); }
.sun__results[hidden] { display: none; }
.sun__hit { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); cursor: pointer; }
.sun__hit:last-child { border-bottom: none; }
.sun__hit:hover, .sun__hit:focus-visible { background: var(--raised); outline: none; }
.sun__hit-name { font-family: var(--serif); font-size: 0.98rem; color: var(--hyphae); }
.sun__hit-sci { font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: var(--hyphae-dim); }
.sun__hit-id { margin-left: auto; font-size: 0.68rem; color: #6f685c; word-break: break-all; text-align: right; }
.sun__empty { padding: 1.25rem 0.7rem; color: var(--hyphae-dim); font-family: var(--sans); font-size: 0.9rem; }

/* the sunburst stage — fixed 1:1 viewBox scales responsively, no layout needed to render */
.sun__stage { max-width: 640px; margin: 0 auto; }
.sun__svg { display: block; width: 100%; height: auto; }
.sun__arc { stroke: var(--substrate); stroke-width: 1.25; cursor: pointer; transition: filter 120ms ease; }
.sun__arc:hover, .sun__arc:focus-visible { filter: brightness(1.14); stroke: var(--hyphae); outline: none; }
.sun__arc--leaf { fill-opacity: 0.82; }
.sun__arc.is-sel { stroke: var(--hyphae); stroke-width: 2.5; filter: brightness(1.14); }
.sun__center { fill: var(--raised); stroke: var(--rule); stroke-width: 1.25; cursor: pointer; }
.sun__center.is-top { cursor: default; }
.sun__center-label { fill: var(--hyphae); font-family: var(--display); font-weight: 500; font-size: 26px; cursor: pointer; }
.sun__center.is-top ~ .sun__center-label { cursor: default; }
.sun__center-sub { fill: var(--hyphae-dim); font-family: var(--mono); font-size: 13px; }
.sun__label { fill: var(--substrate); font-family: var(--sans); font-weight: 600; font-size: 13px; pointer-events: none; }
.sun__label--leaf { fill: var(--hyphae); }

/* selection panel — table (children) or profile (imagery + facts). 2-column on wide
   desktop (sunburst left, panel right, sticky); one column below ~960px (panel under). */
.sun__cols { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
.sun__main { min-width: 0; }
.sun__panel { min-width: 0; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
@media (min-width: 960px) {
  .sun__cols { grid-template-columns: 1.35fr 1fr; }
  .sun__panel { margin-top: 0; padding-top: 0; border-top: none; border-left: 1px solid var(--rule);
    padding-left: clamp(1rem, 2vw, 1.75rem);
    position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; }
}
.sun__panel-head { margin-bottom: 0.9rem; }

/* node headline (reused by the panel head + profile) */
.sun__r-name { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--hyphae); }
.sun__r-name--muted { font-style: italic; color: var(--hyphae-dim); }
.sun__r-sci { margin: 0.15rem 0 0; font-family: var(--serif); font-style: italic; color: var(--hyphae-dim); }
.sun__r-id { margin: 0.5rem 0 0; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ochre); word-break: break-all; }
.sun__r-path { margin: 0.35rem 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--hyphae-dim); letter-spacing: 0.01em; }
.sun__r-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; align-items: baseline; margin: 1rem 0 0; }
.sun__r-k { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--hyphae-dim); }
.sun__r-v { margin: 0; font-size: 0.9rem; color: var(--hyphae); }

/* children table */
.sun__tbl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sun__tbl-row { border-bottom: 1px solid var(--rule); }
.sun__tbl-b { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; padding: 0.5rem 0.35rem; background: transparent; border: none; cursor: pointer; color: inherit; font: inherit; }
.sun__tbl-b:hover { background: var(--raised); }
.sun__tbl-b:focus-visible { outline: 2px solid var(--ochre); outline-offset: -2px; }
.sun__tbl-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--rule); object-fit: cover; background: var(--well); }
.sun__tbl-thumb[hidden] { display: none; }
.sun__tbl-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sun__tbl-name { font-family: var(--serif); font-size: 0.98rem; color: var(--hyphae); }
.sun__tbl-sci { font-family: var(--serif); font-style: italic; font-size: 0.8rem; color: var(--hyphae-dim); }
.sun__tbl-mark { margin-left: auto; padding-left: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--hyphae-dim); white-space: nowrap; }
.sun__tbl-mark--leaf { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet); }
.sun__tbl-empty { margin: 0.6rem 0 0; font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--hyphae-dim); }

/* profile */
.sun__back { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.9rem; padding: 0.35rem 0.6rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--hyphae-dim); background: transparent; border: 1px solid var(--rule); cursor: pointer; }
.sun__back:hover { color: var(--hyphae); border-color: var(--hyphae-dim); }
.sun__back:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
.sun__back-i { font-size: 1rem; line-height: 1; }
.sun__p-img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 0 1rem; border-radius: 12px; border: 1px solid var(--rule); background: var(--well); }
.sun__p-img[hidden] { display: none; }

/* ---------- Network map (datum-driven; served MSS offering) ---------- */
.net { padding: clamp(1.25rem, 3vh, 2rem) var(--gut) clamp(2.5rem, 7vh, 4rem); }
.net__map-wrap { position: relative; }
.net__map { display: block; width: 100%; height: auto; background: var(--well); border: 1px solid var(--rule); cursor: grab; touch-action: none; }
.net__map.is-drag { cursor: grabbing; }
.net__region { fill: var(--raised); stroke: var(--rule); stroke-width: 1; }
.net__region--county { fill: #1b1710; stroke: #40361f; stroke-width: 1.25; }
.net__region--community { fill: none; stroke: rgba(198, 138, 61, 0.16); stroke-width: 0.75; }
/* An outline is selectable: a region is an msn node like any other, and the entities standing
   on it are what the ground is for. */
.net__region { cursor: pointer; }
.net__region:hover { stroke: rgba(198, 138, 61, 0.55); }
.net__region:focus-visible { outline: none; stroke: #c68a3d; stroke-width: 2; }
.net__region.is-sel { fill: rgba(198, 138, 61, 0.14); stroke: #c68a3d; stroke-width: 2; }
/* Layer toggle — a VIEW control over which administrative polygons paint. */
.net__layers { display: flex; gap: 0.4rem; margin: 0 0 0.5rem; flex-wrap: wrap; }
.net__layer {
  padding: 0.25rem 0.7rem; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer;
}
.net__layer:hover { border-color: #c68a3d; color: var(--ink); }
.net__layer.is-on { border-color: #c68a3d; background: rgba(198, 138, 61, 0.12); color: var(--ink); font-weight: 600; }
.net__o-within { list-style: none; margin: 0.5rem 0 0; padding: 0.5rem 0 0; border-top: 1px solid var(--rule); }
.net__o-within li { padding: 0.1rem 0; }
.net__o-withinB {
  border: 0; background: none; padding: 0; color: var(--ink); font: inherit;
  font-size: 0.85rem; text-align: left; cursor: pointer;
}
.net__o-withinB:hover { text-decoration: underline; }
.net__pin { cursor: pointer; }
.net__pin:focus-visible { outline: none; }
.net__dot { stroke: var(--substrate); stroke-width: 1.5; transition: filter 120ms ease; }
.net__dot--listed { opacity: 0.72; }
.net__dot--live { stroke: var(--hyphae); }
.net__pin:hover .net__dot, .net__pin:focus-visible .net__dot { filter: brightness(1.2); stroke: var(--hyphae); }
.net__pin.is-sel .net__dot { stroke: var(--hyphae); stroke-width: 2.5; filter: brightness(1.2); }

.net__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.72rem; color: var(--hyphae-dim); }
.net__leg { display: inline-flex; align-items: center; gap: 0.35rem; }
.net__leg-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.net__leg-note { margin-left: auto; }

.net__overlay { position: absolute; top: 0.8rem; right: 0.8rem; width: min(20rem, 82%); background: var(--substrate); border: 1px solid var(--rule); padding: 1rem 1.1rem 1.1rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); }
.net__overlay[hidden] { display: none; }
.net__close { position: absolute; top: 0.35rem; right: 0.5rem; background: none; border: none; color: var(--hyphae-dim); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.net__close:hover { color: var(--hyphae); }
.net__o-kind { margin: 0; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--violet); }
.net__o-name { margin: 0.2rem 0 0; font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--hyphae); }
.net__o-addr { margin: 0.25rem 0 0.6rem; font-size: 0.74rem; color: var(--ochre); word-break: break-all; }
.net__o-rows { list-style: none; margin: 0; padding: 0.5rem 0 0; border-top: 1px solid var(--rule); }
.net__o-rows li { display: flex; gap: 0.6rem; padding: 0.28rem 0; font-size: 0.82rem; }
.net__o-k { flex: none; width: 4.75rem; color: var(--hyphae-dim); font-family: var(--mono); font-size: 0.7rem; }
.net__o-v { color: var(--hyphae); min-width: 0; word-break: break-word; }
.net__o-v a { color: var(--ochre); }
.net__o-foot { margin: 0.7rem 0 0; font-size: 0.68rem; color: var(--hyphae-dim); font-style: italic; }

.net__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.6rem; align-items: start; }
.net__browser { min-width: 0; }
.net__controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; }
.net__search { flex: 1 1 14rem; min-width: 0; font-family: var(--mono); font-size: 0.88rem; padding: 0.6rem 0.8rem; color: var(--hyphae); background: var(--well); border: 1px solid var(--rule); }
.net__search::placeholder { color: var(--hyphae-dim); }
.net__search:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
.net__filters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.net__filter { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; padding: 0.4rem 0.6rem; color: var(--hyphae-dim); background: transparent; border: 1px solid var(--rule); cursor: pointer; }
.net__filter:hover { color: var(--hyphae); }
.net__filter.is-on { color: var(--substrate); background: var(--ochre); border-color: var(--ochre); }
.net__filter:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.net__count { margin: 0.2rem 0 0.6rem; font-family: var(--mono); font-size: 0.72rem; color: var(--hyphae-dim); }
.net__list { list-style: none; margin: 0; padding: 0; max-height: 33rem; overflow-y: auto; border-top: 1px solid var(--rule); }
.net__row { border-bottom: 1px solid var(--rule); }
.net__row-b { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.55rem 0.35rem; background: transparent; border: none; cursor: pointer; color: inherit; font: inherit; }
.net__row-b:hover { background: var(--raised); }
.net__row-dot { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.net__row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.net__row-name { font-family: var(--serif); font-size: 0.98rem; color: var(--hyphae); }
.net__row-region { font-family: var(--mono); font-size: 0.66rem; color: var(--hyphae-dim); }
.net__row-kind { margin-left: auto; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hyphae-dim); }
.net__row-b .status { margin-left: 0.5rem; }

.net__admin { min-width: 0; }
.net__admin-h { margin: 0 0 0.2rem; font-family: var(--display); font-weight: 500; font-size: 1.1rem; color: var(--hyphae); }
.net__admin-sub { margin: 0 0 0.7rem; font-family: var(--serif); font-size: 0.86rem; color: var(--hyphae-dim); }
.net__admin-tbl { border-top: 1px solid var(--rule); max-height: 33rem; overflow-y: auto; }
.net__admin-row { display: flex; flex-direction: column; gap: 0.12rem; width: 100%; text-align: left; padding: 0.5rem 0.35rem; background: transparent; border: none; border-bottom: 1px solid var(--rule); cursor: pointer; color: inherit; font: inherit; }
.net__admin-row:hover { background: var(--raised); }
.net__admin-name { font-family: var(--serif); font-size: 0.94rem; color: var(--hyphae); }
.net__admin-region { font-size: 0.74rem; color: var(--hyphae-dim); }
.net__admin-id { font-size: 0.62rem; color: #6f685c; word-break: break-all; }
.net__admin-empty { padding: 1rem 0.35rem; color: var(--hyphae-dim); font-size: 0.86rem; }

@media (max-width: 56rem) {
  .net__cols { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Stream A — Home reframe (three avenues) + canonical nav Get button.
   Delivered "MiCyte Home" narrative, wired to the consolidated IA.
   ===================================================================== */

/* nav: Get surfaced as the one ochre-outlined action */
.bar__get { color: var(--hyphae); border: 1px solid var(--ochre); border-radius: 2px; padding: 0.3rem 0.75rem; }
.bar__get:hover { background: rgba(198, 138, 61, 0.12); color: var(--hyphae); }

/* hero: the promise, then a copy/card split */
.hero__promise { margin: 0; max-width: 20ch; font-family: var(--display); font-weight: 500; font-size: clamp(2.3rem, 6.2vw, 4.6rem); line-height: 1.0; letter-spacing: -0.035em; text-wrap: balance; }
.hero__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); gap: clamp(1.75rem, 6vw, 4rem); align-items: start; margin-top: clamp(1.75rem, 5vh, 3rem); }
.hero__lede { margin: 0; font-size: clamp(1.08rem, 1.6vw, 1.32rem); line-height: 1.5; color: var(--hyphae); text-wrap: pretty; }
.hero__lede b { color: var(--hyphae); font-weight: 700; }
@media (max-width: 60rem) { .hero__split { grid-template-columns: minmax(0, 1fr); } }

/* the "how it works" cascade — CSS-only reveal, no JS, reduced-motion safe */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; font-family: var(--mono); font-size: 0.86rem; max-width: 34rem; }
.steps li { display: flex; align-items: center; gap: 0.65rem; padding: 0.32rem 0; color: var(--hyphae-dim); animation: stepIn 0.5s ease both; }
.steps li::before { content: ""; width: 1.2rem; height: 1px; background: var(--rule); flex: none; }
.steps li:nth-child(2) { padding-left: 1.5rem; }
.steps li:nth-child(3) { padding-left: 3rem; }
.steps li:nth-child(4) { padding-left: 4.5rem; color: var(--ochre); }
.steps li:nth-child(4)::before { background: var(--ochre); }
.steps li:nth-child(1) { animation-delay: 0.1s; }
.steps li:nth-child(2) { animation-delay: 0.35s; }
.steps li:nth-child(3) { animation-delay: 0.6s; }
.steps li:nth-child(4) { animation-delay: 0.85s; }
@keyframes stepIn { from { opacity: 0; transform: translateY(-0.35rem); } to { opacity: 1; transform: none; } }

/* three avenues — numbered directory rows (the narrative spine) */
.avenues { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.avenues li { background: var(--substrate); }
.avenues a { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.5rem 1.6rem; text-decoration: none; transition: background 160ms ease; }
.avenues a:hover { background: var(--raised); }
.avenue__n { font-family: var(--mono); font-size: 0.8rem; color: var(--ochre); }
.avenue__n--net { color: var(--violet); }
.avenue__t { display: block; font-family: var(--display); font-size: 1.2rem; color: var(--hyphae); }
.avenue__d { display: block; margin-top: 0.25rem; font-size: 0.92rem; color: var(--hyphae-dim); }
.avenue__go { font-family: var(--mono); color: var(--ochre); }
.avenue__go--net { color: var(--violet); }

/* headline tool (Resources/calculator) — copy + season-plan mock card */
.headline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(1.75rem, 6vw, 4rem); align-items: center; padding: clamp(3rem, 8vh, 5rem) var(--gut); border-top: 1px solid var(--rule); background: var(--raised); }
.headline h2 { margin: 0 0 1rem; max-width: 20ch; font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
.headline .lede2 { margin: 0 0 1.5rem; max-width: 52ch; color: #d6cfc2; font-size: 1.05rem; text-wrap: pretty; }
@media (max-width: 60rem) { .headline { grid-template-columns: minmax(0, 1fr); } }
.plan-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--substrate); overflow: hidden; }
.plan-card__head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.66rem; color: var(--hyphae-dim); }
.plan-card__ok { display: inline-flex; align-items: center; gap: 0.4rem; }
.plan-card__ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); }
.plan-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
.plan-card__cell { background: var(--substrate); padding: 0.9rem; }
.plan-card__k { font-family: var(--sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hyphae-dim); }
.plan-card__v { margin-top: 0.4rem; font-family: var(--mono); font-size: 1.7rem; line-height: 1; letter-spacing: -0.03em; color: var(--hyphae); }
.plan-card__v--ochre { color: var(--ochre); }
.plan-card__exp { padding: 0.9rem 1rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.6; color: var(--hyphae-dim); word-break: break-word; }
.plan-card__exp .leaf { color: var(--ochre); }

/* ===== Stream A — Research browser + figures ===== */

/* The research page is a sub-page BROWSER over an 8-panel report (1..7 · G).
   A static hero persists; a tab strip + fixed viewport edge-arrows + arrow keys
   move between panels; each panel deep-links to #part-1..#part-7 / #part-g.
   All interactive chrome is gated behind .js, so with JS off the page degrades
   to the full report stacked in order. Figures are hand-authored hairline SVG:
   ochre = structure/quantity, violet = network/recaptured value; mono labels. */

/* keep the top bar above the fixed edge-arrows where they overlap at the very top */
.bar { position: relative; z-index: 30; }

/* --- static hero (persists across panels) --- */
.rr-hero { padding: clamp(2.5rem, 7vh, 4.5rem) var(--gut) clamp(1.5rem, 4vh, 2.5rem); border-bottom: 1px solid var(--rule); }
.rr-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(1.5rem, 5vw, 3.5rem); align-items: end; }
.rr-hero h1 { margin: 0; max-width: 22ch; font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 4.4vw, 3.2rem); letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
.rr-hero__lede { margin: 1rem 0 0; max-width: 56ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: #d6cfc2; text-wrap: pretty; }
@media (max-width: 56rem) { .rr-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* the two document buttons — open the overlay reader (an affordance placeholder) */
.rr-files { display: grid; gap: 1px; align-self: end; background: var(--rule); border: 1px solid var(--rule); }
.rr-file { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: 1rem 1.15rem; background: var(--raised); border: 0; color: var(--hyphae); font: inherit; cursor: pointer; transition: background 160ms ease; }
.rr-file:hover { background: #241f19; }
.rr-file:focus-visible { outline: 2px solid var(--ochre); outline-offset: -2px; }
.rr-file__t { display: block; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--hyphae); }
.rr-file__sub { display: block; margin-top: 0.15rem; font-family: var(--mono); font-size: 0.7rem; color: var(--hyphae-dim); }
.rr-file__mark { flex: none; font-family: var(--mono); color: var(--ochre); }
.rr-file__mark--net { color: var(--violet); }

/* --- sub-tab strip (js only) --- */
.rr-tabs { display: none; flex-wrap: wrap; gap: 0.4rem; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.js .rr-tabs { display: flex; }
.rr-tab { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.55rem 0.8rem; color: var(--hyphae-dim); background: transparent; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background 140ms ease; }
.rr-tab:hover { color: var(--hyphae); border-color: var(--hyphae-dim); }
.rr-tab.is-on { color: var(--substrate); background: var(--ochre); border-color: var(--ochre); }
.rr-tab--g.is-on { background: var(--violet); border-color: var(--violet); }
.rr-tab:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* --- fixed viewport edge arrows (js only; hidden on narrow) --- */
.rr-edge { display: none; position: fixed; top: 0; bottom: 0; width: clamp(44px, 6vw, 72px); align-items: center; justify-content: center; border: 0; background: transparent; color: var(--hyphae-dim); font-family: var(--mono); font-size: 1.6rem; cursor: pointer; z-index: 20; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.js .rr-edge { display: flex; }
.rr-edge--prev { left: 0; }
.rr-edge--next { right: 0; }
.rr-edge--prev:hover { color: var(--hyphae); background: linear-gradient(90deg, rgba(198, 138, 61, 0.12), transparent); transform: translateX(-2px); }
.rr-edge--next:hover { color: var(--hyphae); background: linear-gradient(270deg, rgba(198, 138, 61, 0.12), transparent); transform: translateX(2px); }
.rr-edge:focus-visible { outline: 2px solid var(--ochre); outline-offset: -4px; color: var(--hyphae); }
@media (max-width: 48rem) { .js .rr-edge { display: none; } }

/* --- reader body --- */
.rr-main { padding: clamp(2rem, 5vh, 3.5rem) clamp(2.5rem, 7vw, 5rem) clamp(3rem, 9vh, 6rem); }
.rr-wrap { max-width: 70ch; margin: 0 auto; }
.rr-panel[hidden] { display: none; }

/* per-panel meta line (static — identifies the part with or without JS) */
.rr-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.rr-meta__k { color: var(--ochre); }
.rr-meta__pos { flex: none; color: var(--hyphae-dim); }
.rr-panel--g .rr-meta__k { color: var(--violet); }

/* prose inside a panel — display h2, sans h3, serif body (the report voice) */
.rr-doc h2 { margin: 0 0 0.9rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.015em; line-height: 1.18; text-wrap: balance; }
.rr-doc h3 { margin: 1.75rem 0 0.5rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hyphae); }
.rr-doc p { margin: 0 0 1.1rem; color: #d6cfc2; text-wrap: pretty; }
.rr-doc ul { margin: 0 0 1.2rem; padding-left: 1.1rem; color: #d6cfc2; }
.rr-doc li { margin: 0.28rem 0; }
.rr-doc li::marker { color: var(--ochre); }
.rr-doc b { color: var(--hyphae); font-weight: 600; }

/* Part G — the call to action */
.rr-say { font-family: var(--serif); font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.42; color: var(--hyphae); text-wrap: pretty; }
.rr-cta-actions { margin-top: 1.25rem; }

/* Part 7 — two-track layout (Track 1 now / Track 2 held open) */
.rr-tracks-k { margin: 1.5rem 0 0.6rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hyphae-dim); }
.rr-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.rr-track { background: var(--substrate); padding: 1.3rem 1.4rem; border-top: 3px solid var(--rule); }
.rr-track--now { border-top-color: var(--ochre); }
.rr-track--soon { border-top-color: var(--violet); opacity: 0.9; }
.rr-track__k { margin: 0 0 0.2rem; font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre); }
.rr-track__k--net { color: var(--violet); }
.rr-track__h { margin: 0.4rem 0 0.8rem; font-family: var(--display); font-weight: 500; font-size: 1.2rem; color: var(--hyphae); }
.rr-track p { margin: 0 0 0.9rem; font-size: 0.92rem; color: #d6cfc2; }
.rr-track--soon p { color: var(--hyphae-dim); }
.rr-track ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: #d6cfc2; }
.rr-track li { margin: 0.28rem 0; }
.rr-track li::marker { color: var(--ochre); }
.rr-track b { color: var(--hyphae); }
.rr-track__ph { margin: 0; padding: 0.7rem 0.85rem; background: var(--raised); border: 1px dashed var(--rule); border-radius: 2px; font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; color: var(--hyphae-dim); }
@media (max-width: 48rem) { .rr-tracks { grid-template-columns: minmax(0, 1fr); } }

/* prev/next footer (js only) */
.rr-pn { display: none; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.75rem; }
.js .rr-pn { display: flex; }
.rr-pn__b { background: none; border: 0; padding: 0; font: inherit; color: var(--hyphae-dim); cursor: pointer; }
.rr-pn__b:hover { color: var(--hyphae); }
.rr-pn__b--next { text-align: right; }
.rr-pn__b:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* JS-off note */
.rr-nojs { margin: 0 0 2rem; padding: 0.9rem 1.1rem; background: var(--well); border-left: 2px solid var(--ochre); font-family: var(--sans); font-size: 0.85rem; color: var(--hyphae-dim); }

/* --- overlay reader (placeholder affordance) --- */
.rr-ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: stretch; justify-content: center; padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 5vw, 4rem); background: rgba(10, 8, 6, 0.72); }
@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))) { .rr-ov { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } }
.rr-ov[hidden] { display: none; }
.rr-ov__box { display: flex; flex-direction: column; width: 100%; max-width: 56rem; overflow: hidden; background: var(--substrate); border: 1px solid var(--rule); border-radius: var(--radius); }
.rr-ov__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--hyphae); }
.rr-ov__x { padding: 0; background: none; border: 0; color: var(--hyphae-dim); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.rr-ov__x:hover { color: var(--hyphae); }
.rr-ov__x:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.rr-ov__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; overflow: auto; padding: clamp(2rem, 6vh, 4rem) clamp(1.5rem, 5vw, 4rem); text-align: center; }
.rr-ov__mark { font-family: var(--mono); font-size: 2rem; color: var(--ochre); }
.rr-ov__h { margin: 0; max-width: 24ch; font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 3vw, 1.9rem); letter-spacing: -0.02em; color: var(--hyphae); }
.rr-ov__p { margin: 0; max-width: 48ch; color: var(--hyphae-dim); }
.rr-ov__lines { display: grid; gap: 1px; width: 100%; max-width: 34rem; margin-top: 0.5rem; background: var(--rule); border: 1px solid var(--rule); }
.rr-ov__lines span { height: 0.7rem; background: var(--raised); }
.rr-ov__lines span:nth-child(2) { width: 80%; }
.rr-ov__lines span:nth-child(3) { width: 90%; }
.rr-ov__status { margin: 0.5rem 0 0; font-family: var(--mono); font-size: 0.7rem; color: #6f685c; }

/* --- figures: hand-authored hairline SVG in a framed well, no raster --- */
.rr-fig { margin: 2rem 0; }
.rr-fig__kick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.85rem; margin-bottom: 0.75rem; }
.rr-fig__n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); }
.rr-fig__ttl { font-family: var(--display); font-size: 1.05rem; color: var(--hyphae); }
.rr-fig__frame { overflow: hidden; background: var(--raised); border: 1px solid var(--rule); border-radius: 8px; }
.rr-fig__well { padding: clamp(1.25rem, 3vw, 2rem); background: var(--well); }
.rr-fig__well svg { display: block; width: 100%; height: auto; }
.rr-fig__cap { padding: 0.85rem 1.1rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 0.82rem; line-height: 1.5; color: var(--hyphae-dim); }
.rr-fig__cap b { color: var(--ochre); font-weight: 600; }

/* motion: drop the hover/nudge transitions when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
  .rr-edge, .rr-file, .rr-tab { transition: none !important; }
}

/* ===== Stream A — Network: framed-site overlay ("browser", no URL bar) ===== */
.net__o-act { margin: 0.7rem 0 0; }
.net__o-open { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; padding: 0.5rem 0.8rem; color: #cbb4d9; background: rgba(157, 120, 180, 0.12); border: 1px solid var(--violet); border-radius: 2px; cursor: pointer; }
.net__o-open:hover { background: rgba(157, 120, 180, 0.22); color: var(--hyphae); }
.net__o-nobin { font-family: var(--mono); font-size: 0.66rem; color: #6f685c; }
.net__frame { position: fixed; inset: 0; z-index: 60; background: rgba(10, 8, 6, 0.74); backdrop-filter: blur(3px); display: flex; align-items: stretch; justify-content: center; padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 5vw, 4rem); }
.net__frame[hidden] { display: none; }
.net__frame-box { width: 100%; max-width: 60rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--substrate); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.net__frame-chrome { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--rule); background: var(--raised); }
.net__frame-label { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--hyphae-dim); word-break: break-all; }
.net__frame-label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.net__frame-x { flex: none; font-family: var(--mono); font-size: 0.72rem; color: var(--hyphae-dim); padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: 2px; background: transparent; cursor: pointer; }
.net__frame-x:hover { color: var(--hyphae); border-color: var(--hyphae-dim); }
.net__frame-body { flex: 1; overflow: auto; padding: clamp(1.5rem, 4vw, 2.5rem); }
.net__frame-head { padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.net__frame-ey { margin: 0 0 0.6rem; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet); }
.net__frame-name { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 3.5vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.06; }
.net__frame-addr { margin: 0.7rem 0 0; font-size: 1rem; color: var(--hyphae); word-break: break-all; }
.net__frame-note { margin: 1.25rem 0 0; max-width: 60ch; padding: 0.9rem 1.1rem; background: var(--well); border-left: 2px solid var(--violet); font-family: var(--sans); font-size: 0.82rem; line-height: 1.5; color: var(--hyphae-dim); }
.net__frame-live { margin: 1rem 0 0; }
.net__frame-live a { color: var(--ochre); font-family: var(--sans); font-size: 0.85rem; }

/* ---------- calendar (event-log viewer) ---------- */
.cal { padding: clamp(1.25rem, 3vh, 2rem) var(--gut) clamp(2.5rem, 7vh, 4rem); }
.cal__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.cal__views { display: flex; gap: 0.3rem; }
.cal__view { font-family: var(--sans); font-size: 0.74rem; font-weight: 600; padding: 0.42rem 0.7rem; color: var(--hyphae-dim); background: transparent; border: 1px solid var(--rule); cursor: pointer; }
.cal__view:hover { color: var(--hyphae); border-color: var(--hyphae-dim); }
.cal__view[aria-pressed="true"] { color: var(--substrate); background: var(--ochre); border-color: var(--ochre); }
.cal__view:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.cal__nav { display: flex; gap: 0.3rem; }
.cal__navb { font-family: var(--mono); font-size: 0.8rem; padding: 0.35rem 0.65rem; color: var(--hyphae-dim); background: transparent; border: 1px solid var(--rule); cursor: pointer; }
.cal__navb:hover { color: var(--hyphae); border-color: var(--hyphae-dim); }
.cal__navb--today { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; }
.cal__label { margin: 0 0 0 auto; font-family: var(--display); font-weight: 500; font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: -0.01em; color: var(--hyphae); }
.cal__filters { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.cal__fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.cal__fgroup-t { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hyphae-dim); margin-right: 0.35rem; min-width: 6.2rem; }
.cal__filter { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; padding: 0.4rem 0.6rem; color: var(--hyphae-dim); background: transparent; border: 1px solid var(--rule); border-left: 3px solid var(--pill-hue, var(--rule)); cursor: pointer; }
.cal__filter:hover { color: var(--hyphae); }
.cal__filter.is-on { color: var(--substrate); background: var(--ochre); border-color: var(--ochre); border-left-color: var(--pill-hue, var(--ochre)); }
.cal__filter:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.cal__body { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
.cal__main { min-width: 0; }
/* month */
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cal__gh { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hyphae-dim); padding: 0.4rem 0.45rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--raised); }
.cal__gc { min-height: 5.2rem; padding: 0.35rem 0.4rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--well); display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.cal__gc--pad { background: transparent; }
.cal__gc--today { box-shadow: inset 0 0 0 2px var(--ochre); }
.cal__gd { font-family: var(--mono); font-size: 0.68rem; color: var(--hyphae-dim); }
.cal__gc--today .cal__gd { color: var(--ochre); font-weight: 700; }
.cal__gmore { font-family: var(--mono); font-size: 0.62rem; color: var(--hyphae-dim); }
.cal__chip { display: flex; align-items: center; gap: 0.3rem; width: 100%; text-align: left; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; line-height: 1.25; padding: 0.18rem 0.3rem; color: var(--hyphae); background: var(--raised); border: 1px solid var(--rule); border-left: 3px solid var(--chip-hue, var(--rule)); cursor: pointer; min-width: 0; }
.cal__chip:hover { border-color: var(--hyphae-dim); border-left-color: var(--chip-hue, var(--hyphae-dim)); }
.cal__chip.is-sel { box-shadow: 0 0 0 2px var(--ochre); }
.cal__chip-dot { flex: none; width: 0.42rem; height: 0.42rem; border-radius: 50%; }
.cal__chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.8rem; padding: 0.6rem 0.7rem; background: var(--raised); border: 1px solid var(--rule); }
.cal__strip .cal__chip { width: auto; }
.cal__strip-t { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hyphae-dim); margin-right: 0.3rem; }
/* week */
.cal__week { border-top: 1px solid var(--rule); }
.cal__wh-row, .cal__wall-row, .cal__wb-row { display: grid; grid-template-columns: 3.4rem repeat(7, 1fr); }
.cal__wh { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hyphae-dim); padding: 0.4rem 0.35rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--raised); }
.cal__wh--today { color: var(--ochre); font-weight: 700; }
.cal__wall { min-height: 1.9rem; padding: 0.22rem 0.28rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--well); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cal__wall--gut { font-family: var(--mono); font-size: 0.6rem; color: var(--hyphae-dim); background: var(--raised); }
.cal__wb { position: relative; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--well); min-width: 0; }
.cal__wb--gut { background: var(--raised); }
.cal__wb-h { position: absolute; right: 0.3rem; transform: translateY(-50%); font-family: var(--mono); font-size: 0.6rem; color: var(--hyphae-dim); }
.cal__block { position: absolute; left: 2px; right: 2px; overflow: hidden; display: flex; flex-direction: column; gap: 0.05rem; text-align: left; font-family: var(--sans); font-size: 0.62rem; font-weight: 600; line-height: 1.2; padding: 0.16rem 0.28rem; color: var(--hyphae); background: var(--raised); border: 1px solid var(--rule); border-left: 3px solid var(--chip-hue, var(--rule)); cursor: pointer; }
.cal__block:hover { border-color: var(--hyphae-dim); border-left-color: var(--chip-hue, var(--hyphae-dim)); z-index: 2; }
.cal__block.is-sel { box-shadow: 0 0 0 2px var(--ochre); z-index: 3; }
.cal__block-s { font-family: var(--mono); font-weight: 400; font-size: 0.58rem; color: var(--hyphae-dim); }
/* year */
.cal__year { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.9rem; }
.cal__mini { border: 1px solid var(--rule); background: var(--well); padding: 0.55rem 0.6rem 0.7rem; }
.cal__mini-h { display: block; width: 100%; text-align: left; font-family: var(--serif); font-size: 0.92rem; color: var(--hyphae); background: transparent; border: none; padding: 0 0 0.4rem; cursor: pointer; }
.cal__mini-h:hover { color: var(--ochre); }
.cal__mini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal__mini-wh { font-family: var(--mono); font-size: 0.56rem; color: var(--hyphae-dim); text-align: center; padding-bottom: 0.15rem; }
.cal__mini-d { font-family: var(--mono); font-size: 0.6rem; color: var(--hyphae-dim); text-align: center; padding: 0.14rem 0; }
.cal__mini-d.is-on { color: var(--substrate); background: var(--ochre); font-weight: 700; border-radius: 2px; }
/* detail */
.cal__detail { position: sticky; top: 1rem; border: 1px solid var(--rule); background: var(--well); padding: 1rem 1.1rem 1.1rem; min-width: 0; }
.cal__detail-hint { margin: 0; font-family: var(--sans); font-size: 0.8rem; color: var(--hyphae-dim); }
.cal__d-class { margin: 0 0 0.35rem; font-family: var(--sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet); }
.cal__d-name { margin: 0 0 0.7rem; font-family: var(--display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--hyphae); }
.cal__d-rows { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.cal__d-rows li { display: flex; gap: 0.7rem; padding: 0.3rem 0; border-bottom: 1px solid var(--rule); }
.cal__d-k { flex: none; width: 5.6rem; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hyphae-dim); padding-top: 0.1rem; }
.cal__d-v { font-family: var(--sans); font-size: 0.8rem; color: var(--hyphae); min-width: 0; }
.cal__d-msn { margin: 0 0 0.6rem; font-size: 0.72rem; color: var(--hyphae-dim); word-break: break-all; }
.cal__d-act { margin: 0 0 0.7rem; }
.cal__d-act a { color: var(--ochre); font-family: var(--sans); font-size: 0.82rem; }
.cal__d-foot { margin: 0; font-family: var(--mono); font-size: 0.62rem; line-height: 1.5; color: var(--hyphae-dim); }
.cal__empty { margin: 0.9rem 0 0; font-family: var(--sans); font-size: 0.8rem; color: var(--hyphae-dim); }
@media (max-width: 56rem) {
  .cal__body { grid-template-columns: 1fr; }
  .cal__detail { position: static; }
  .cal__label { margin-left: 0; width: 100%; order: 3; }
  .cal__gc { min-height: 3.6rem; }
  .cal__week { overflow-x: auto; }
  .cal__wh-row, .cal__wall-row, .cal__wb-row { min-width: 40rem; }
  .cal__fgroup-t { min-width: 100%; }
}

/* =====================================================================
   Hosted channels — the channel session, wherever it is mounted
   ---------------------------------------------------------------------
   The viewer (js/channel-viewer.js, VENDORED from mycite-core and byte-gated
   there) emits a fixed class contract and no styles at all; the styles are the
   host's. This is the same DOM the software's portal renders, wearing this
   site's tokens.

   Single-sourced here on 2026-08-03 because there are now two mounts — the
   channel's own page (/channels/agnet) and the Resources page's
   Channel tab — and two copies of a theme is how two surfaces drift apart.
   ===================================================================== */
.channel-mount { max-width: 860px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.channel-session { display: flex; flex-direction: column; gap: 12px; color: var(--hyphae); }
.channel-session__head { margin: 0; }
.channel-session__title { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.channel-session__access {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--moss); border: 1px solid var(--moss); border-radius: 999px;
  padding: 1px 8px; font-weight: 500;
}
.channel-session__summary { margin: 4px 0 0; color: var(--hyphae-dim); font-size: 0.85rem; }
.channel-session__tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--rule); }
.channel-session__tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--hyphae-dim); font: inherit; font-size: 0.85rem; padding: 6px 10px;
  cursor: pointer; text-transform: capitalize;
}
.channel-session__tab.is-active { color: var(--ochre); border-bottom-color: currentColor; font-weight: 600; }
.channel-session__pane { display: flex; flex-direction: column; gap: 14px; }
/* display:flex beats the [hidden] UA default, so say it explicitly — the
   viewer hides inactive tab panes with the attribute. */
.channel-session__pane[hidden] { display: none; }
.channel-session__empty { color: var(--hyphae-dim); font-size: 0.85rem; margin: 10px 0; }
.channel-session__coverage { color: var(--hyphae-dim); font-size: 0.75rem; margin: 6px 0 0; border-top: 1px solid var(--rule); padding-top: 8px; }
.channel-session__note { color: var(--hyphae-dim); font-size: 0.75rem; margin: 2px 0 0; font-style: italic; }
.channel-demand__controls { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
/* `min-width: 0` because a flex item defaults to `min-width: auto` and will not shrink
   below its content: the widest option in the demand `<select>` was holding this label at
   426px inside a 390px viewport and pushing the whole PAGE sideways. It only became
   visible when the channel became the page's default panel — the overflow was always
   there, but you had to click the tab to reach it. */
.channel-demand__control { display: flex; flex-direction: column; gap: 3px; font-size: 0.75rem; color: var(--hyphae-dim); min-width: 0; max-width: 100%; }
.channel-demand__control select { max-width: 100%; }
.channel-demand__control select {
  font: inherit; font-size: 0.85rem; padding: 3px 6px;
  background: var(--well); color: var(--hyphae); border: 1px solid var(--rule); border-radius: 4px;
}
.channel-demand__product { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; background: var(--raised); }
.channel-demand__productHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.channel-demand__productHead small { color: var(--hyphae-dim); }
.channel-demand__taxon { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .68rem; color: var(--hyphae-dim); opacity: .8; }
.channel-demand__tag { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 0 .4em; color: var(--hyphae-dim); }
.channel-demand__chart { width: 100%; height: auto; display: block; margin-top: 6px; }
.channel-demand__bar { fill: var(--ochre); opacity: 0.85; }
.channel-demand__whisker { stroke: var(--hyphae-dim); stroke-width: 2; opacity: 0.6; }
.channel-demand__axis { stroke: var(--rule); stroke-width: 1; }
.channel-demand__axisLabel { font-size: 9px; fill: var(--hyphae-dim); }
.channel-demand__lots { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-top: 8px; }
.channel-demand__lots th { text-align: left; color: var(--hyphae-dim); font-weight: 500; padding: 3px 8px; border-bottom: 1px solid var(--rule); }
.channel-demand__lots td { padding: 3px 8px; border-bottom: 1px solid var(--rule); }
/* Profiles tab — the entity-aggregation view. Two columns per entity kind:
   an instance to reach, or a record the registrar keeps. */
.channel-profiles__totals { margin: 4px 0 0; color: var(--hyphae-dim); font-size: 0.8rem; }
.channel-profiles__group { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 12px; }
.channel-profiles__groupHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.channel-profiles__groupHead h3 { margin: 0; font-size: 0.95rem; text-transform: capitalize; }
.channel-profiles__groupHead small { color: var(--hyphae-dim); }
.channel-profiles__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.channel-profiles__column { min-width: 0; }
.channel-profiles__columnHead { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 0.85rem; }
.channel-profiles__count { color: var(--hyphae-dim); }
.channel-profiles__note { margin: 1px 0 6px; color: var(--hyphae-dim); font-size: 0.72rem; }
.channel-profiles__list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.channel-profiles__entity { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--rule); font-size: 0.8rem; }
.channel-profiles__name { font-weight: 500; }
.channel-profiles__where, .channel-profiles__kinds { color: var(--hyphae-dim); font-size: 0.72rem; }
.channel-profiles__tag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hyphae-dim); border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px; }
.ide-visualizationPanel__error { color: var(--danger); font-size: 0.85rem; }
.channel-offline { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; background: var(--raised); max-width: 560px; }
.channel-offline h2 { margin: 0 0 6px; font-size: 1rem; color: var(--hyphae); }
.channel-offline p { margin: 0 0 10px; color: var(--hyphae-dim); font-size: 0.85rem; }

/* ===== The Channel tab's own chrome (js/channel.js) =====
   Everything here is a SIBLING of .chan__mount, never a child: the viewer clears
   its mount on every render, including the refetch behind a day or product pick. */
/* Same measure as the other data panels (.tax / .net / .cal): the panel host owns
   the page gutter, not the section. */
.chan {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.25rem, 3vh, 2rem) var(--gut) clamp(2.5rem, 7vh, 4rem);
  /* A map and a calendar want the whole page; a session is a reading surface, and
     the channel's own page already holds it to a measure. Everything in the tab
     shares ONE measure so the strip cannot float away from what it engaged. */
  max-width: 68rem;
}
.chan__arrival { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--rule); }
.chan__fromk { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hyphae-dim); }
.chan__from { font-family: var(--sans); font-size: 0.85rem; color: var(--ochre); text-decoration: none; border-bottom: 1px solid transparent; }
.chan__from:hover { border-bottom-color: currentColor; }
.chan__msn { font-family: var(--mono); font-size: 0.66rem; color: var(--hyphae-dim); word-break: break-all; }
.chan__pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chan__pick:empty { display: none; }
.chan__pickbtn { display: inline-flex; align-items: baseline; gap: 0.45rem; font-family: var(--sans); font-size: 0.78rem; padding: 0.35rem 0.7rem; color: var(--hyphae-dim); background: var(--raised); border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; }
.chan__pickbtn:hover { color: var(--hyphae); }
.chan__pickbtn.is-on { color: var(--hyphae); border-color: var(--ochre); }
.chan__pickaccess { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hyphae-dim); }
/* The engagement strip: what is being asked of whom, and how it went. An open
   channel is a request over the network, and this says so rather than implying
   the readings below were sitting on this site. */
.chan__wire { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; background: var(--well); border: 1px solid var(--rule); border-radius: 2px; }
.chan__state { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; padding: 0.1rem 0.5rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--hyphae-dim); }
.chan__state--engaging { color: var(--ochre); border-color: var(--ochre); }
.chan__state--engaged { color: var(--moss); border-color: var(--moss); }
.chan__state--unreachable { color: var(--danger); border-color: var(--danger); }
.chan__endpoint { flex: 1 1 18rem; min-width: 0; font-family: var(--mono); font-size: 0.64rem; color: var(--hyphae-dim); overflow-wrap: anywhere; }
.chan__again { font-family: var(--sans); font-size: 0.7rem; padding: 0.3rem 0.6rem; color: var(--hyphae-dim); background: none; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; }
.chan__again:hover { color: var(--hyphae); border-color: var(--ochre); }
.chan__mount { min-height: 6rem; }

/* Channels on a card in the network browser — the msn profile, in-surface. */
.net__o-chan { margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--rule); }
.net__o-chank { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hyphae-dim); }
.net__o-chanbtn { display: flex; width: 100%; align-items: baseline; gap: 0.5rem; text-align: left; font-family: var(--sans); font-size: 0.78rem; padding: 0.4rem 0.55rem; margin-bottom: 0.3rem; color: var(--hyphae); background: rgba(198, 138, 61, 0.1); border: 1px solid var(--ochre); border-radius: 2px; cursor: pointer; }
.net__o-chanbtn:hover { background: rgba(198, 138, 61, 0.2); }
.net__o-chanaccess { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hyphae-dim); }
.net__o-chango { margin-left: auto; font-family: var(--mono); font-size: 0.62rem; color: var(--ochre); }

/* Channel session — TAXONOMY tab. The txa tree the AGNET channel
   absorbed from the software's taxonomy_domain tool on 2026-08-03, replacing
   this site's own sunburst: one tree, served by the instance that holds it,
   instead of two that could disagree. Same class contract the portal styles;
   these are this site's tokens for it. */
.channel-taxonomy__controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-top: 0.5rem; }
.channel-taxonomy__search {
  font: inherit; font-family: var(--sans); font-size: 0.85rem; padding: 0.3rem 0.5rem; min-width: 18rem;
  background: var(--well); color: var(--hyphae); border: 1px solid var(--rule); border-radius: 2px;
}
.channel-taxonomy__search::placeholder { color: var(--hyphae-dim); }
.channel-taxonomy__search:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
.channel-taxonomy__all {
  font-family: var(--sans); font-size: 0.7rem; padding: 0.3rem 0.6rem; color: var(--hyphae-dim);
  background: none; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
}
.channel-taxonomy__all:hover { color: var(--hyphae); border-color: var(--ochre); }
.channel-taxonomy__totals { margin: 0.3rem 0 0; font-family: var(--mono); font-size: 0.7rem; color: var(--hyphae-dim); letter-spacing: 0.02em; }
.channel-taxonomy__host { max-height: 34rem; overflow: auto; border: 1px solid var(--rule); background: var(--well); padding: 0.6rem 0.8rem; }
.channel-taxonomy__level { list-style: none; margin: 0; padding: 0 0 0 1rem; }
/* The root level carries no indent; every level below it steps once. */
.channel-taxonomy__host > .channel-taxonomy__level { padding-left: 0; }
.channel-taxonomy__level--flat { padding-left: 0; }
.channel-taxonomy__node { margin: 0; }
.channel-taxonomy__head { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.08rem 0; font-size: 0.82rem; }
.channel-taxonomy__toggle {
  width: 1rem; flex: 0 0 1rem; font-family: var(--mono); font-size: 0.62rem; line-height: 1; padding: 0;
  color: var(--hyphae-dim); background: none; border: none; cursor: pointer; text-align: left;
}
.channel-taxonomy__toggle:hover { color: var(--ochre); }
.channel-taxonomy__toggle--leaf { cursor: default; }
.channel-taxonomy__icon { width: 1rem; height: 1rem; flex: 0 0 1rem; align-self: center; }
.channel-taxonomy__icon--inherited { opacity: 0.5; }
.channel-taxonomy__names { display: inline-flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.channel-taxonomy__label { font-family: var(--serif); color: var(--hyphae); }
.channel-taxonomy__sci { font-family: var(--serif); font-style: italic; font-size: 0.74rem; color: var(--hyphae-dim); }
.channel-taxonomy__addr { font-family: var(--mono); font-size: 0.62rem; color: #6f685c; word-break: break-all; }
.channel-taxonomy__count { font-family: var(--mono); font-size: 0.6rem; color: var(--hyphae-dim); border: 1px solid var(--rule); border-radius: 999px; padding: 0 0.35rem; }
.channel-taxonomy__tag { font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ochre); border: 1px solid currentColor; border-radius: 999px; padding: 0 0.35rem; }
.channel-taxonomy__node.is-traded > .channel-taxonomy__head .channel-taxonomy__label { color: var(--ochre); }
.channel-taxonomy__products { list-style: none; margin: 0 0 0.15rem; padding: 0 0 0 2.4rem; }
.channel-taxonomy__product { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.74rem; color: var(--hyphae-dim); }
.channel-taxonomy__productCount { font-family: var(--mono); font-size: 0.66rem; opacity: 0.85; }

/* ==========================================================================
   RESEARCH DOCUMENTS — the standalone reader (/research/<slug>)
   Long-form scholarly prose on a dark substrate: serif body at a generous
   measure, a sticky contents rail, and a print stylesheet that is also what
   the PDF build renders through. Editorial register, not app chrome.
   ========================================================================== */

.doc-shell {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 44rem);
  gap: 3rem;
  justify-content: center;
  padding: 3rem 1.5rem 6rem;
  align-items: start;
}

/* Contents rail — sticky beside the prose, collapses above it on narrow screens. */
.doc-rail { position: sticky; top: 5rem; font-family: var(--sans); }
.doc-rail__k {
  margin: 0 0 .6rem; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ochre);
}
.doc-rail__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.doc-rail__list li { margin: 0; }
.doc-rail__list a {
  display: block; padding: .3rem 0 .3rem .85rem; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: .82rem; line-height: 1.35; color: var(--hyphae-dim); text-decoration: none;
}
.doc-rail__list a:hover, .doc-rail__list a:focus-visible {
  color: var(--hyphae); border-left-color: var(--ochre);
}
.doc-rail__back {
  display: inline-block; margin-top: 1.4rem;
  font-size: .8rem; color: var(--hyphae-dim); text-decoration: none;
}
.doc-rail__back:hover { color: var(--ochre); }

/* Body — serif, one column, measured for sustained reading. */
.doc-body { min-width: 0; font-family: var(--serif); color: var(--hyphae); }
.doc-body h1 {
  font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.15; margin: 0 0 1.6rem; letter-spacing: -.01em;
}
.doc-body h2 {
  font-family: var(--display); font-size: 1.35rem; line-height: 1.25;
  margin: 3rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  scroll-margin-top: 5rem;
}
.doc-body h3 {
  font-family: var(--sans); font-size: .95rem; font-weight: 650;
  letter-spacing: .01em; margin: 2rem 0 .7rem; color: var(--ochre);
}
.doc-body p { margin: 0 0 1.15rem; font-size: 1.02rem; line-height: 1.72; }
.doc-body strong { font-weight: 650; color: #fff; }
.doc-body code {
  font-family: var(--mono); font-size: .88em;
  background: var(--well); border: 1px solid var(--rule);
  border-radius: 3px; padding: .05em .32em;
}
.doc-body ul, .doc-body ol { margin: 0 0 1.15rem 1.2rem; padding: 0; }
.doc-body li { margin: 0 0 .5rem; line-height: 1.65; }
.doc-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }
.doc-body > hr:first-of-type { display: none; }   /* the rule under the title block */

/* Wide comparison tables scroll inside their own well rather than the page. */
.doc-tablewrap { overflow-x: auto; margin: 0 0 1.4rem; border: 1px solid var(--rule); border-radius: 4px; }
.doc-table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .84rem; }
.doc-table th, .doc-table td {
  text-align: left; vertical-align: top; padding: .6rem .8rem;
  border-bottom: 1px solid var(--rule);
}
.doc-table th { color: var(--ochre); font-weight: 650; white-space: nowrap; }
.doc-table tbody tr:last-child td { border-bottom: 0; }

.doc-actions { display: flex; justify-content: flex-end; margin: 0 0 1.5rem; }
.doc-dl {
  font-family: var(--sans); font-size: .84rem; font-weight: 600;
  padding: .45rem 1rem; border: 1px solid var(--ochre); border-radius: 4px;
  color: var(--ochre); text-decoration: none;
}
.doc-dl:hover, .doc-dl:focus-visible { background: var(--ochre); color: var(--substrate); }

.doc-foot {
  margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .8rem; color: var(--hyphae-dim);
}
.doc-foot p { margin: 0 0 .3rem; font-size: .8rem; }
.doc-foot a { color: var(--ochre); }

@media (max-width: 62rem) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 44rem; margin: 0 auto; }
  .doc-rail { position: static; }
  .doc-rail__list { display: none; }   /* the rail is navigation, not content */
}

/* PRINT — also the surface the PDF build renders through, so the download and
   a reader's own Ctrl-P produce the same document. Paper, not substrate. */
@media print {
  .bar, .skip, .doc-rail, .doc-actions, .doc-foot { display: none !important; }
  .doc-shell { display: block; padding: 0; }
  body { background: #fff; }
  .doc-body { color: #111; font-size: 10.5pt; }
  .doc-body h1 { font-size: 20pt; margin-bottom: 1.2rem; }
  .doc-body h2 { font-size: 13pt; break-after: avoid; border-top-color: #ccc; margin-top: 1.6rem; }
  .doc-body h3 { font-size: 10.5pt; break-after: avoid; color: #333; }
  .doc-body p { orphans: 3; widows: 3; }
  .doc-body strong { color: #000; }
  .doc-body code { background: #f2f2f2; border-color: #ddd; }
  .doc-body hr { border-top-color: #ddd; }
  .doc-tablewrap { overflow: visible; border-color: #ccc; break-inside: avoid; }
  .doc-table th { color: #000; }
  .doc-table th, .doc-table td { border-bottom-color: #ddd; }
}

/* ---- Overlay reader, document mode -------------------------------------
   The overlay's original body was a centred flex column built for the
   placeholder card. A document needs a scrolling prose column instead, so the
   document case overrides those three properties and otherwise inherits the
   .doc-body typography the standalone page uses — one set of type rules for
   both surfaces. */
.rr-ov__body.doc-body {
  display: block;
  text-align: left;
  padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1.25rem, 5vw, 3.5rem);
  overscroll-behavior: contain;
}
.rr-ov__body.doc-body > h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 1.2rem; }
.rr-ov__body.doc-body > hr:first-of-type { display: none; }
.rr-ov__body.doc-body:focus { outline: none; }

.rr-ov__tools { display: flex; align-items: center; gap: .55rem; }
.rr-ov__act {
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: 0;
  padding: .3rem .7rem; border: 1px solid var(--rule); border-radius: 4px;
  color: var(--hyphae-dim); text-decoration: none; white-space: nowrap;
}
.rr-ov__act:hover, .rr-ov__act:focus-visible { color: var(--hyphae); border-color: var(--hyphae-dim); }
.rr-ov__act--dl { color: var(--ochre); border-color: var(--ochre); }
.rr-ov__act--dl:hover, .rr-ov__act--dl:focus-visible { background: var(--ochre); color: var(--substrate); }

/* The hero document list is now links, not buttons — keep the button look. */
a.rr-file { text-decoration: none; }

@media (max-width: 40rem) {
  .rr-ov__head { flex-wrap: wrap; }
  .rr-ov__tools { width: 100%; justify-content: flex-end; }
}


/* The network browser's sign-in gate. Deliberately quiet: reading the registry is what
   this page is for, and the prompt marks a boundary rather than asking for a signup.
   `--danger` is reserved for destructive confirms and is not used here — being asked to
   sign in is not an error. */
.net__gate {
  margin: .75rem 0 .25rem;
  padding: .6rem .75rem;
  border-left: 3px solid currentColor;
  opacity: .92;
  font-size: .95rem;
}
.net__gate .btn { margin: .35rem .4rem 0 0; }
.net__open { margin: 0 0 .5rem; font-size: .9rem; opacity: .8; }

/* =====================================================================
   The browser shell — /explore
   =====================================================================
   Three panes, matching the arrangement the software's own Network Browser uses:
   regions to navigate, nodes to select, and the selected node's profile.

   This replaced a stacked page whose map began 668px down on a 1440x900 laptop and
   811px down on a 390x844 phone, behind a page header and a second paragraph that
   restated it. Both numbers are below the fold, so the browser read as an article
   ABOUT a browser. Nothing here is new capability; it is the same map, the same
   registry list, the same card. What changed is that you land in it.

   The stage is sized with dvh, not vh: on mobile Safari vh is the tallest viewport,
   so a vh-sized map hides its own bottom edge behind the URL bar until you scroll. */
.browser {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr) 22rem;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "bar bar bar" "rail stage profile";
  height: calc(100dvh - var(--barh, 3.6rem));
  min-height: 34rem;
  border-top: 1px solid var(--rule);
}
.browser__bar {
  grid-area: bar;
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.6rem var(--gut);
  border-bottom: 1px solid var(--rule);
  background: var(--substrate);
  position: sticky; top: 0; z-index: 20;
}
.browser__rail {
  grid-area: rail; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--rule);
  padding: 0.9rem 1rem 2rem;
}
.browser__stage {
  grid-area: stage; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--well);
}
.browser__profile {
  grid-area: profile; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain;
  border-left: 1px solid var(--rule);
}

/* The host the shell mounts into. `.net` is the shell's PARENT, so this cannot be written
   as `.browser .net` -- that selector matches nothing and leaves the host's article padding
   in place, which is what put 133px of dead space above the bar the first time. */
.net--app { padding: 0; display: flex; flex-direction: column; min-height: 0; }

/* The map fills the stage instead of being a fixed-ratio picture in a column. */
.browser .net__map-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.browser .net__map { flex: 1; min-height: 0; width: 100%; height: auto; border: none; }
.browser .net__legend { margin: 0; padding: 0.5rem var(--gut); border-top: 1px solid var(--rule); background: var(--substrate); }
.browser .net__layers { margin: 0; }
.browser .net__controls { margin: 0; flex: 1 1 22rem; min-width: 0; }
.browser .net__search { flex: 1 1 12rem; }

/* Rail sections scroll with the rail, not each in their own little window. */
.browser .net__admin-tbl, .browser .net__list { max-height: none; overflow: visible; }
.browser .net__admin { margin-bottom: 1.6rem; }
.browser .net__count { margin: 0.35rem 0 0.5rem; }

/* Region scope chip — what the rail is currently filtered to. */
.net__scope { margin: 0.5rem 0 0; }
.net__scope-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.7rem;
  padding: 0.28rem 0.5rem; cursor: pointer;
  color: var(--ochre); background: rgba(198, 138, 61, 0.12);
  border: 1px solid rgba(198, 138, 61, 0.5);
}
.net__scope-chip:hover { background: rgba(198, 138, 61, 0.2); }
.net__scope-x { color: var(--hyphae-dim); }

/* The profile pane. Formerly `position: absolute` floating over the map, which covered
   the marker you had just clicked and collapsed the layout when dismissed. */
.browser .net__overlay {
  position: static; width: auto; box-shadow: none;
  border: none; background: transparent;
  padding: 1.1rem 1.2rem 2rem;
}
.browser .net__close { top: 0.5rem; right: 0.7rem; }
.net__o-empty { padding: 2.5rem 0.2rem; text-align: center; }
.net__o-emptyh { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hyphae-dim); }
.net__o-emptyt { margin: 0 auto; font-family: var(--serif); font-size: 0.9rem; color: var(--hyphae-dim); max-width: 26ch; }
.net__o-status { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.09em; padding: 0.12rem 0.35rem; border: 1px solid currentColor; }
.net__o-status--live { color: var(--violet); }
.net__o-status--still { color: var(--ochre); }
.net__o-status--listed { color: var(--hyphae-dim); }
.net__o-kind { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.net__o-kindt { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--hyphae-dim); }

/* The address as a path.
   Mono is this site's DISPLAY face because a dotted address is the artifact, so the
   address is what gets set large. A segment whose prefix names a region is a control;
   one that names nothing stays inert, because a citation you cannot follow is worse
   than plain text. */
.net__o-addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.05rem; font-size: 0.95rem; letter-spacing: 0.02em; }
.net__addr-sep { color: #6f685c; }
.net__addr-seg { color: var(--ochre); padding: 0 0.05rem; }
.net__addr-seg--live {
  background: none; border: none; font: inherit; cursor: pointer;
  color: var(--hyphae); border-bottom: 1px solid var(--ochre); padding: 0 0.05rem;
}
.net__addr-seg--live:hover { background: rgba(198, 138, 61, 0.18); }
.net__addr-seg--live:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }

/* The gate, on the actions rather than in a banner. */
.net__o-gate { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); }
.net__o-gatebtn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  padding: 0.42rem 0.6rem; margin: 0 0.4rem 0.4rem 0;
  text-decoration: none; color: var(--hyphae-dim);
  border: 1px solid var(--rule);
}
.net__o-gatebtn:hover { color: var(--hyphae); border-color: var(--violet); }
.net__o-gatelock { color: var(--violet); font-size: 0.9em; }
.net__o-gatenote { margin: 0.35rem 0 0; font-family: var(--serif); font-size: 0.76rem; color: var(--hyphae-dim); }
.net__o-gatenote a { color: var(--ochre); }

/* --- narrow: the map stays the first thing, the panes stack under it --- */
@media (max-width: 1100px) {
  .browser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(18rem, 52dvh) auto auto;
    grid-template-areas: "bar" "stage" "profile" "rail";
    height: auto;
  }
  .browser__rail { border-right: none; border-top: 1px solid var(--rule); }
  .browser__profile { border-left: none; border-top: 1px solid var(--rule); }
  .browser__stage { min-height: 18rem; }
  /* Stacked, the rail is in normal flow, so the two indexes give the page their FULL
     height: 179 registry rows plus 15 regions measured 17,723px, an 18,800px document
     on a 390x844 phone. They scroll inside themselves here instead. */
  .browser .net__admin-tbl { max-height: 16rem; overflow-y: auto; }
  .browser .net__list { max-height: 24rem; overflow-y: auto; }
}
@media (max-width: 640px) {
  .browser__bar { gap: 0.5rem; padding: 0.5rem var(--gut); }
  .browser .net__controls { flex-basis: 100%; }
  .net__o-empty { padding: 1.4rem 0.2rem; }
}

/* App-surface body: the browser sizes itself to the viewport, so the page must not also
   scroll behind it. Narrow viewports drop back to normal document flow, because the panes
   stack there and the page genuinely is taller than the screen. */
.body--app { overflow-x: hidden; }
@media (min-width: 1101px) {
  .body--app { overflow: hidden; }
  .body--app main { min-height: 0; }
}
.browserpage { display: contents; }

.net__about { margin: 0 0 1.2rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.9rem; }
.net__about-s { cursor: pointer; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--hyphae-dim); }
.net__about-s:hover { color: var(--ochre); }
.net__about-p { margin: 0.6rem 0 0; font-family: var(--serif); font-size: 0.84rem; line-height: 1.55; color: var(--hyphae-dim); }
.net__about-p .mono { font-family: var(--mono); font-size: 0.9em; color: var(--ochre); }

.net__attrib { margin: 1.6rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.7rem; line-height: 1.6; color: #6f685c; }
.net__attrib a { color: var(--hyphae-dim); }
.net__attrib a:hover { color: var(--ochre); }

/* Rail rows are compact: the rail is an index you scan, not a table you read. The msn
   line stays, because it is the address and this whole surface is about addresses. */
.browser .net__admin-row { padding: 0.4rem 0.3rem; }
.browser .net__admin-name { font-size: 0.88rem; line-height: 1.25; }
.browser .net__admin-region { font-size: 0.68rem; }
.browser .net__admin-id { font-size: 0.58rem; }
.browser .net__row-b { padding: 0.42rem 0.3rem; gap: 0.45rem; }
.browser .net__row-name { font-size: 0.9rem; }
.browser .net__row-kind { display: none; }   /* kind is shown in the profile pane on select */

/* Resources: the channel is the page, so the header gets out of its way. */
.pagehead--tight { padding-top: clamp(1.6rem, 4vh, 2.6rem); padding-bottom: clamp(0.9rem, 2vh, 1.4rem); }
.lede--tight { font-size: clamp(0.96rem, 1.3vw, 1.08rem); max-width: 60ch; }
.pagehead__about { margin: 0.8rem 0 0; }
.pagehead__about > summary { cursor: pointer; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--hyphae-dim); }
.pagehead__about > summary:hover { color: var(--ochre); }
.pagehead__about p { margin: 0.7rem 0 0; max-width: 68ch; font-size: 0.9rem; line-height: 1.6; color: var(--hyphae-dim); }
.pagehead__about .mono { color: var(--ochre); font-size: 0.9em; }

/* Progressive reveal control for the demand small-multiples. */
.channel-demand__more {
  display: block; width: 100%; margin: 0.9rem 0 0; padding: 0.7rem 1rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--hyphae-dim); background: var(--raised);
  border: 1px solid var(--rule); cursor: pointer;
}
.channel-demand__more:hover { color: var(--hyphae); border-color: var(--ochre); }
.channel-demand__more:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }

/* ---------- /directory — the registry as a page, no script required ----------
   /explore is the map and needs JavaScript; this is the same 179 records as a list,
   so the network is readable without one. Table-shaped because the data is: five
   columns of the same five facts per row. `.dir__wrap` scrolls the table on a phone
   rather than letting it widen the page, which is the convention the article shell
   already uses. */
.dir__jump { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0; font-family: var(--sans); font-size: 0.82rem; }
.dir__jump a { color: var(--hyphae-dim); text-decoration: none; border-bottom: 1px solid var(--rule); padding: 0.15rem 0; min-height: 24px; display: inline-flex; align-items: center; }
.dir__jump a:hover, .dir__jump a:focus-visible { color: var(--hyphae); border-bottom-color: var(--ochre); }
.dir__group { padding: 2rem var(--gut) 0; }
.dir__group h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 0 0 0.9rem; letter-spacing: -0.01em; }
.dir__count { font-family: var(--mono); font-size: 0.72rem; color: var(--hyphae-dim); vertical-align: middle; margin-left: 0.5rem; }
.dir__wrap { overflow-x: auto; }
.dir__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.dir__table th { text-align: left; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hyphae-dim); font-weight: 500; padding: 0.4rem 0.9rem 0.4rem 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dir__table td { padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--rule); color: #d6cfc2; vertical-align: top; }
.dir__table td a { color: var(--hyphae); }
.dir__table .mono { font-family: var(--mono); font-size: 0.78rem; color: var(--hyphae-dim); white-space: nowrap; }
.dir__foot { padding: 2.5rem var(--gut) 4rem; color: var(--hyphae-dim); font-size: 0.88rem; max-width: 68ch; }

/* =====================================================================
   Sign-up and sign-in (2026-09-16). Same spore-print system. The one bold element on
   /signup is the PLAN, set as a contract line in the system's own mono vocabulary —
   `base_service × 1` with its price and the day the trial ends — because that line is
   what the account IS. Everything else is a quiet form. Inputs sit in the well.
   ===================================================================== */
.signup {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 36rem);
  gap: clamp(1.5rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(2rem, 6vh, 4rem) var(--gut) clamp(2.5rem, 7vh, 5rem);
}
@media (max-width: 56rem) { .signup { grid-template-columns: minmax(0, 1fr); } }
.signup__aside { min-width: 0; }

.plan { border: 1px solid var(--rule); background: var(--raised); padding: 1.25rem 1.4rem; position: relative; border-radius: var(--radius); }
.plan::before { content: ""; position: absolute; left: -1px; top: -1px; width: 46px; height: 3px; background: var(--ochre); }
.plan__tag { margin: 0 0 0.9rem; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); }
.plan__line { margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; font-family: var(--mono); }
.plan__line code { color: var(--hyphae-dim); font-size: 0.85rem; letter-spacing: 0.02em; }
.plan__price { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 500; color: var(--hyphae); letter-spacing: -0.02em; line-height: 1; }
.plan__price:empty, .plan__unit:empty { display: none; }
.plan__unit { font-family: var(--sans); font-size: 0.8rem; color: var(--hyphae-dim); }
.plan__facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.plan__facts li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.plan__k { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hyphae-dim); padding-top: 0.15rem; }
.plan__v { color: #d6cfc2; min-width: 0; overflow-wrap: anywhere; }
.plan__v [data-plan] { font-family: var(--mono); color: var(--hyphae); }
.plan__note { margin: 0.9rem 0 0; font-family: var(--sans); font-size: 0.8rem; color: var(--hyphae-dim); }

.form { min-width: 0; }
.form__h { margin: 0 0 1.4rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -0.012em; }
.field { margin: 0 0 1.15rem; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; margin: 0 0 0.4rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--hyphae); }
.field input[type="text"], .field input[type="email"], .field input[type="password"] {
  width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: 0.95rem;
  color: var(--hyphae); background: var(--well);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.7rem 0.85rem;
  transition: border-color 140ms ease;
}
.field input:focus { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 2px rgba(198, 138, 61, 0.25); }
/* Red only after a person has tried to submit: an empty required field on first
   paint is not a mistake yet, and a form that opens shouting teaches nothing. */
.form.was-submitted .field input:invalid:not(:focus) { border-color: var(--danger); }
.field__hint { margin: 0.4rem 0 0; font-family: var(--sans); font-size: 0.78rem; line-height: 1.45; color: var(--hyphae-dim); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--card { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.5rem; }
.card-mount { min-height: 2.5rem; }
.card-mount[data-state="ready"] #hosted-card-fields { margin-top: 0.75rem; min-height: 3rem; border: 1px dashed var(--rule); border-radius: 2px; }
.form__error { margin: 0 0 1rem; padding: 0.7rem 0.9rem; font-family: var(--sans); font-size: 0.85rem; color: var(--hyphae); background: rgba(184, 107, 93, 0.12); border-left: 2px solid var(--danger); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.crumb { font-family: var(--sans); font-size: 0.78rem; color: var(--hyphae-dim); text-decoration: none; }
.crumb::before { content: "← "; }

/* sign-in: two doors, side by side, each saying where it leads */
.doors {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin: clamp(1.5rem, 4vh, 2.5rem) var(--gut) 0;
}
.door { background: var(--substrate); padding: 1.5rem 1.4rem; min-width: 0; }
.door__tag { margin: 0 0 0.6rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ochre); }
.door__h { margin: 0 0 0.5rem; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.door__d { margin: 0 0 0.6rem; font-size: 0.95rem; color: #d6cfc2; }
.door__d code { color: var(--hyphae); }
.door__note { font-family: var(--sans); font-size: 0.8rem; color: var(--hyphae-dim); }

/* ---------- /gadgets: one card per gadget, with the declaration to take ---------- */
/* The cards are the SAME `.card` the home hero and every profile page use — a reader
   learns the object once — stacked in a column rather than gridded, because a gadget's
   row list runs long and two columns of eight rows each is a wall. */
.gadget__list { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }
.gadget { max-width: none; }
.gadget__take { margin: 1.25rem 0 0; }
/* Absent on purpose for a gadget whose declaration has not been published: the line
   says so rather than the page hiding the gadget. Dimmer, because it is a statement
   about this site's publishing and not about the gadget. */
.gadget__take--none {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.6;
  color: var(--hyphae-dim); max-width: 62ch;
}
/* The digest sits UNDER the button and is selectable: it is there to be compared with
   what an instance computes, so it must be copyable text and never an image or a
   tooltip. `overflow-wrap` because a sha256 is 71 unbroken characters and a phone is
   not 71 characters wide. */
.gadget__digest {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
  margin: 0.6rem 0 0; font-size: 0.8rem; align-items: baseline;
}
.gadget__digest .mono { overflow-wrap: anywhere; color: var(--hyphae-dim); }
@media (max-width: 34rem) {
  .gadget__digest { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}
/* A sixth nav entry does not fit a phone on one line, and an entry that overflows is an
   entry nobody can reach. `.bar` already wraps; this lets the nav itself wrap too. */
.bar__nav { flex-wrap: wrap; row-gap: 0.4rem; }