/* ============================================================================
   Shea's Forest — App Frame  ·  BLOCK B1 (the shell)
   ----------------------------------------------------------------------------
   The frame, the navigation, and the strata bands that the later blocks fill:
     · Horizontals  (B3) — views over the edge set
     · Canopy       (B2) — the trees, each a Kit instance
     · Understory        — the seedbed, where the new lands
     · Soil         (B2) — Catch · Oracle · Ledger · Loam (shared substrate)
     · Edges Out         — federation routes (Company · Jamie · Homestead)
     · The Laws          — Promotion · People · Non-Coercion, made visible
   Read-only-correct by construction: nothing here acts. Where a write would be,
   a Warrant Gate (B4) is surfaced instead.

   Colors / type / space all come from tokens.css — no hex lives in this file.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--face-path);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  color: var(--ink-on-dark);
  background:
    radial-gradient(120% 80% at 82% -8%,
      color-mix(in srgb, var(--dawn-glow) 42%, transparent), transparent 46%),
    linear-gradient(180deg,
      var(--dawn-top) 0%, var(--dawn-mid) 28%, var(--dawn-low) 52%, var(--floor) 74%);
  background-attachment: fixed;
  min-height: 100svh;
  padding-bottom: var(--s-8);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

a { color: inherit; }

/* Quality floor: a visible, gold focus ring for keyboard users everywhere. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--sunlight);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

/* skip link */
.skip {
  position: absolute; left: var(--s-3); top: -3rem;
  background: var(--paper); color: var(--ink);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-s);
  font-family: var(--face-survey); font-size: var(--t-small);
  transition: top var(--dur-1) var(--ease); z-index: 20;
}
.skip:focus { top: var(--s-3); }

/* ---------------------------------------------------------------------------
   THE RING — Nyx's never-default boundary, drawn as a hairline gold frame
   that holds the whole grove. A boundary you can see, not a claim you read.
   --------------------------------------------------------------------------- */
.ring {
  position: relative;
  margin: var(--s-5) auto var(--s-6);
  max-width: calc(var(--measure) + var(--gutter) * 2);
  border: 1px solid var(--ring);
  border-radius: var(--r-l);
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--dawn-top) 40%, transparent);
}
.ring__tag {
  position: absolute; top: -0.62rem; left: var(--s-5);
  background: var(--dawn-top);
  padding: 0 var(--s-3);
  font-family: var(--face-survey);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--sunlight);
}
.ring__tag::before { content: "◦ "; }
.ring__inner { padding: var(--s-6) var(--gutter) var(--s-5); }

/* ---------------------------------------------------------------------------
   MASTHEAD — the grove at dawn. The eyebrow, the name, the give-and-go thesis,
   and the disc emblem (the focus token explained).
   --------------------------------------------------------------------------- */
.masthead { padding-top: var(--s-2); }
.eyebrow {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: baseline; justify-content: space-between;
  font-family: var(--face-survey);
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-on-dark-soft);
}
.eyebrow b { color: var(--sunlight); font-weight: 500; }

.masthead__name {
  font-family: var(--face-canopy);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--t-masthead);
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-2);
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.masthead__thesis {
  display: flex; align-items: center; gap: var(--s-4);
  max-width: 56ch;
  color: var(--ink-on-dark);
  font-size: var(--t-h);
  font-style: italic;
}
.masthead__thesis .lede { color: color-mix(in srgb, var(--ink-on-dark) 86%, transparent); }

/* THE DISC — the signature. A single gold token: where attention rests,
   and the give-and-go to where it throws next. */
.disc {
  flex: none;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE9A8, var(--sunlight) 60%, #A9842F);
  box-shadow: var(--shadow-disc);
  display: grid; place-items: center;
  font-family: var(--face-survey); font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.06em; color: #3A2E10;
  animation: bob var(--bob) var(--ease) infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------------------------------------------------------------------------
   STRATA NAV — quiet survey-styled jumps down through the forest.
   --------------------------------------------------------------------------- */
.strata-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2);
  margin: var(--s-5) 0 var(--s-2);
  padding: var(--s-2) 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dawn-mid) 88%, transparent), transparent);
  backdrop-filter: blur(4px);
}
.strata-nav a {
  font-family: var(--face-survey);
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-on-dark-soft);
  text-decoration: none;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.strata-nav a:hover, .strata-nav a:focus-visible { color: var(--figure); border-color: var(--line-gold); }

/* ---------------------------------------------------------------------------
   BAND — the strata scaffold. Each layer of the forest is a band.
   --------------------------------------------------------------------------- */
.band { position: relative; border-radius: var(--r-m); margin: var(--s-4) 0; padding: var(--s-4) var(--s-5) var(--s-5); scroll-margin-top: 3.25rem; }
.band__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.band__label {
  font-family: var(--face-survey);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; gap: var(--s-2); align-items: center;
}
.band__label .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; }
.band__gloss { font-family: var(--face-survey); font-size: var(--t-label); letter-spacing: 0.04em; color: var(--ink-on-dark-soft); }
.band__title { font-family: var(--face-canopy); font-weight: 500; font-size: var(--t-title); }
.horizon {
  border: 1px dashed var(--line-gold);
  border-radius: var(--r-s);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--floor) 6%, transparent);
  color: var(--ink-on-dark);
  min-width: 0; overflow: hidden;
}
.horizon__name { font-family: var(--face-canopy); font-size: 1.05rem; font-weight: 500; }
.horizon__reads { font-family: var(--face-survey); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sunlight); opacity: .85; margin-top: 0.15rem; }
.horizon__state { font-size: var(--t-small); color: var(--ink-on-dark-soft); margin-top: var(--s-2); }

/* ---------------------------------------------------------------------------
   CANOPY — the trees, each a Kit instance. Sized by load; the lit one would
   hold the disc. B2 renders live state; here the shape is true, the pulse
   is honestly pre-wiring.
   --------------------------------------------------------------------------- */
.grove-floor {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end;
  padding: var(--s-5) var(--s-3) var(--s-3);
  border-radius: var(--r-m);
  background: radial-gradient(75% 55% at 50% 118%, color-mix(in srgb, var(--surface) 12%, transparent), transparent 72%);
}
.tree {
  position: relative;
  flex: 1 1 200px;
  min-width: 190px;
  max-width: 320px;
  border: 1px solid color-mix(in srgb, var(--bark) 32%, transparent);
  border-top-color: color-mix(in srgb, var(--sunlight) 40%, transparent);   /* sun on the crown */
  border-radius: 1.5rem 1.5rem var(--r-s) var(--r-s);                       /* rounded canopy, settled base */
  background:
    radial-gradient(130% 72% at 50% -12%, color-mix(in srgb, var(--sunlight-soft) 24%, transparent), transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 86%, var(--moss)) 0%,
      var(--paper) 44%,
      color-mix(in srgb, var(--floor) 84%, var(--bark)) 100%);
  padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 9rem;
  box-shadow:
    0 12px 24px -10px color-mix(in srgb, var(--surface) 34%, transparent),   /* cast on the floor */
    inset 0 1px 0 color-mix(in srgb, var(--sunlight-soft) 32%, transparent); /* crown highlight */
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.tree:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 32px -12px color-mix(in srgb, var(--surface) 42%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sunlight-soft) 38%, transparent);
}
.tree__name { font-family: var(--face-canopy); font-weight: 600; font-size: 1.18rem; color: var(--figure); line-height: var(--leading-tight); }
.tree__what { font-family: var(--face-path); font-style: italic; font-size: var(--t-small); color: var(--bark); margin-top: 0.1rem; }
.tree__pulse { font-size: var(--t-small); color: var(--ink-soft); margin-top: var(--s-3); }
.tree__foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-3); gap: var(--s-2); }
.tree__weather { font-family: var(--face-survey); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss-ink); }
.tree__fence { font-family: var(--face-survey); font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--bark); opacity: .8; }
.tree__fence--shared::before { content: "⌂ "; }
.tree__fence--minors::before { content: "⚇ "; }

/* the ghost-ring: where the next-throw hint lands once the disc is live (B2) */
.tree__ghost {
  position: absolute; top: -0.55rem; right: -0.55rem;
  width: 1.6rem; height: 1.6rem;
  border: 2px dashed color-mix(in srgb, var(--sunlight) 70%, transparent);
  border-radius: 50%;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.92); } 50% { opacity: .8; transform: scale(1.05); } }

/* ---------------------------------------------------------------------------
   SOIL — the shared substrate, breathing. Catch · Oracle · Ledger · Loam.
   --------------------------------------------------------------------------- */
.soil-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.soil-item { border-left: 2px solid var(--moss); padding: var(--s-1) 0 var(--s-1) var(--s-3); }
.soil-item__name { font-family: var(--face-canopy); font-size: 1.05rem; font-weight: 500; color: var(--figure); }
.soil-item__role { font-family: var(--face-survey); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--moss); margin-top: 0.1rem; }
.soil-item__state { font-family: var(--face-survey); font-size: var(--t-small); color: var(--ink-on-dark-soft); margin-top: var(--s-2); }
.soil-item__state .ok { color: var(--w-ok); }

/* ---------------------------------------------------------------------------
   EDGES OUT — federation. Routes leave the ring without sacrificing the
   personal instance. Drawn outside the grove's body.
   --------------------------------------------------------------------------- */
.edges { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px dashed var(--line-bark); }
.edge {
  font-family: var(--face-survey); font-size: var(--t-small);
  color: var(--ink-on-dark);
  border: 1px solid var(--line-moss); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-4);
}
.edge b { color: var(--sunlight); font-weight: 500; }

/* ---------------------------------------------------------------------------
   THE LAWS — made visible. Three lines that run through everything.
   --------------------------------------------------------------------------- */
.laws { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.law { border-top: 2px solid var(--line-gold); padding-top: var(--s-3); }

/* small reusable pre-wiring pill */
.pending {
  display: inline-block; font-family: var(--face-survey);
  font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bark);
  background: color-mix(in srgb, var(--bark) 14%, transparent);
  border-radius: var(--r-pill); padding: 0.1rem 0.5rem;
}

/* ---------------------------------------------------------------------------
   PROVENANCE FOOTER — the live page names the exact source commit it came
   from (the deploy stamp). Kept from C1.4; the discipline travels into B.
   --------------------------------------------------------------------------- */
.seam {
  display: inline-flex; gap: 0.5ch; align-items: center; flex-wrap: wrap;
  font-family: var(--face-survey); font-size: var(--t-small);
  color: var(--moss);
  background: color-mix(in srgb, var(--dawn-top) 60%, transparent);
  border: 1px solid var(--line-moss);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-s);
}
.seam b { color: var(--ink-on-dark); font-weight: 500; }
.seam .pip { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--w-ok); box-shadow: 0 0 0.5em var(--w-ok); }

/* ---------------------------------------------------------------------------
   Small screens — the strata stack naturally; tighten the frame.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .ring__inner { padding: var(--s-5) var(--s-4) var(--s-4); }
  .masthead__thesis { flex-direction: row; align-items: flex-start; }
  .tree { max-width: none; }
}

/* ===========================================================================
   B2 — data-driven Canopy & Soil (rendered from state/forest-state.json)
   =========================================================================== */

/* a grove is a labelled cluster of trees inside the canopy band */
.grove-group { margin-bottom: var(--s-5); }
.grove-group:last-child { margin-bottom: 0; }
.grove-group__label {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--face-survey);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bark);
  padding-bottom: var(--s-2); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-bark);
}
.grove-group__count {
  font-weight: 500; color: var(--figure);
  background: color-mix(in srgb, var(--surface) 12%, transparent);
  border-radius: var(--r-pill); padding: 0.05rem 0.5rem;
}

/* pace tags under each trunk (real anatomy data) */
.tree__pace { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: var(--s-2); }
.pace-chip {
  font-family: var(--face-survey);
  font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: lowercase;
  color: var(--moss);
  background: color-mix(in srgb, var(--moss) 14%, transparent);
  border-radius: var(--r-pill); padding: 0.05rem 0.45rem;
}

/* seam chips in the tree foot — gate / edge / feed→horizontal */
.tree__seams { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.seam-chip {
  font-family: var(--face-survey);
  font-size: var(--t-micro); letter-spacing: 0.04em;
  border-radius: var(--r-pill); padding: 0.05rem 0.45rem;
  border: 1px solid transparent; white-space: nowrap;
}
.seam-chip--gate { color: var(--sunlight); border-color: var(--line-gold); background: color-mix(in srgb, var(--sunlight) 9%, transparent); }
.seam-chip--gate::before { content: "\2316 "; }
.seam-chip--edge { color: var(--bark); border-color: var(--line-bark); }
.seam-chip--edge::before { content: "\21AA "; }
.seam-chip--feed { color: var(--moss); border-color: var(--line-moss); }
.seam-chip--feed::before { content: "\2191 "; }

/* loading + honest failure states (no alarm colour — Theo's rule) */
.state-loading {
  font-family: var(--face-survey); font-size: var(--t-small);
  color: var(--moss); letter-spacing: 0.04em; padding: var(--s-3) 0;
}
.state-error {
  font-family: var(--face-path); font-size: var(--t-small);
  color: var(--bark); padding: var(--s-3) 0; max-width: 60ch;
}

/* ===========================================================================
   Contrast pass (self-caught at B2 render) — the dawn gradient is capped to the
   top (behind masthead + horizontals) over a solid cream floor; every section
   below sits on --floor, so the inherited light-on-dark text is flipped to ink.
   The bands that carry their own dark background (horizontals, soil) keep their
   light text and are unaffected.
   =========================================================================== */
body {
  color: var(--ink);
  background-attachment: scroll;
  background:
    radial-gradient(120% 70% at 82% 0%,
      color-mix(in srgb, var(--dawn-glow) 40%, transparent), transparent 52%)
      top center / 100% 780px no-repeat,
    linear-gradient(180deg,
      var(--dawn-top) 0%, var(--dawn-mid) 46%, var(--dawn-low) 82%, transparent 100%)
      top center / 100% 780px no-repeat,
    var(--floor);
}
.edge { color: var(--ink-soft); }
.edge b { color: var(--figure); }
/* .seam — the double collapse. Fill was --canopy (a GROUND) and label was --floor (the
   DARKEST ground): 1.10:1 dark / 1.14:1 light on BOTH halves. Takes the .rail__compose
   pair: --accent fill (6.88:1 / 4.19:1) + --ink-on-accent label (6.88:1 / 4.77:1).
   .seam b moves WITH the fill — --sunlight-soft on an --accent fill measures 1.68:1 dark,
   so leaving it would have traded one invisible element for another. Emphasis is carried
   by the bold weight it already has, not by a hue that cannot survive the ground. */
.seam { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); }
.seam b { color: var(--ink-on-accent); font-weight: 700; }

/* ===================== THE DOOR — B1 (set-password / sign-in) =====================
   The public-box boundary's visible half (state-model §5). The runtime enforces the
   boundary server-side (no session -> 401 on every projection + intent; operator pick A,
   gated canopy); this overlay is the Front Door the visitor meets. Session is carried as
   the runtime's HttpOnly `forest_session` cookie — the page stores nothing. Hidden until
   JS probes the runtime; shown only when there is no live session. */
.door{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--gutter);
  background:linear-gradient(160deg,var(--dawn-top),var(--dawn-mid) 60%,var(--dawn-low));
  background-color:var(--dawn-top);}
.door[hidden]{display:none;}
.door__card{width:100%;max-width:25rem;background:var(--surface-card);color:var(--ink);
  border:1px solid var(--line-gold);border-radius:var(--r-l);padding:var(--s-7) var(--s-6);
  box-shadow:var(--shadow-card);}
.door__eyebrow{font-family:var(--face-survey);font-size:var(--t-label);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--moss);}
.door__title{font-family:var(--face-canopy);font-size:var(--t-title);color:var(--ink);
  margin:var(--s-2) 0 var(--s-1);line-height:var(--leading-tight);}
.door__subtitle{font-family:var(--face-path);font-size:var(--t-body);color:var(--ink-soft);
  margin:0 0 var(--s-5);line-height:var(--leading-body);}
.door__field{display:block;margin-bottom:var(--s-4);}
.door__field[hidden]{display:none;}
.door__label{display:block;font-family:var(--face-survey);font-size:var(--t-label);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--bark);margin-bottom:var(--s-2);}
.door__input{width:100%;box-sizing:border-box;font-family:var(--face-path);font-size:var(--t-body);
  color:var(--ink);background:var(--floor);border:1px solid var(--line-bark);border-radius:var(--r-s);
  padding:var(--s-3) var(--s-4);}
.door__input:focus{outline:none;border-color:var(--sunlight);box-shadow:0 0 0 3px var(--line-gold);}
.door__submit{width:100%;font-family:var(--face-survey);font-size:var(--t-small);letter-spacing:.04em;
  color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-pill);
  padding:var(--s-3) var(--s-5);cursor:pointer;transition:background var(--dur-1) var(--ease);}
.door__submit:hover{background:var(--accent-lit);}
.door__submit:disabled{opacity:.6;cursor:default;}
.door__msg{min-height:1.2em;margin:var(--s-3) 0 0;font-family:var(--face-path);font-size:var(--t-small);color:var(--bark);}
.door__seam{margin:var(--s-5) 0 0;font-family:var(--face-survey);font-size:var(--t-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--moss);}
.door__seam .pip{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--w-ok);
  margin-right:.5em;vertical-align:middle;}

/* ===================== B4 — the Gate console =====================
   The S2 halt event rendered as the full S3 surface (state-model §6), then the one
   clean choice. Sits on the cream floor (ink text, paper cards). The halt surface is
   gold-lit — the grove's "needs you today" weather, never an alarm (Theo's rule: no
   red). Mirrors the Door's field/button patterns so the page reads as one piece. */
.gate { margin-top: var(--s-7); scroll-margin-top: 3.25rem; }
.gate .band__label, .gate .gate__title { color: var(--ink); }
.gate .band__label .dot { background: var(--sunlight); }      /* gold dot — the needs-you signal */
.gate .band__gloss { color: var(--ink-soft); }

.gate__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4); }
.gate__panel { background: var(--surface-card); color: var(--ink); border: 1px solid var(--line-bark);
  border-radius: var(--r-m); padding: var(--s-5); box-shadow: var(--shadow-card); }
.gate__panel-head { font-family: var(--face-canopy); font-weight: 500; font-size: var(--t-h); color: var(--ink); }
.gate__panel-sub { font-family: var(--face-path); font-size: var(--t-small); color: var(--ink-soft);
  margin: var(--s-2) 0 var(--s-4); line-height: var(--leading-body); }
.gate__panel-sub b { color: var(--bark); }

.gate__field { display: block; margin-bottom: var(--s-3); }
.gate__flabel { display: block; font-family: var(--face-survey); font-size: var(--t-label);
  letter-spacing: .04em; text-transform: uppercase; color: var(--bark); margin-bottom: var(--s-1); }
.gate__input { width: 100%; box-sizing: border-box; font-family: var(--face-path); font-size: var(--t-body);
  color: var(--ink); background: var(--floor); border: 1px solid var(--line-bark); border-radius: var(--r-s);
  padding: var(--s-2) var(--s-3); }
.gate__input:focus { outline: none; border-color: var(--sunlight); box-shadow: 0 0 0 3px var(--line-gold); }

/* .gate__btn — the Door's primary act (set-password / sign-in). Structurally the SAME
   defect as .rail__compose and fixed with the SAME pair: fill was --canopy (1.00:1 — it
   WAS the surface it sits on) and label was --floor (1.10:1). This is the button on the
   only way into the app. */
.gate__btn { width: 100%; margin-top: var(--s-2); cursor: pointer; font-family: var(--face-survey);
  font-size: var(--t-small); letter-spacing: .04em; color: var(--ink-on-accent); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r-pill); padding: var(--s-3) var(--s-5);
  transition: background var(--dur-1) var(--ease); }
.gate__btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }   /* lift on dark, DEEPEN on light — hover never reduces contrast */
.gate__btn:disabled { opacity: .6; cursor: default; }
.gate__msg { min-height: 1.2em; margin: var(--s-3) 0 0; font-family: var(--face-path);
  font-size: var(--t-small); color: var(--bark); }

/* the S3 surface — the halt rendered in full; the operator's one clean choice */
.gate__surface { margin-top: var(--s-5); }
.gate__surface[hidden] { display: none; }
.surface__card { background: var(--surface-card); border-radius: var(--r-l);
  padding: var(--s-5) var(--s-5) var(--s-4); box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); }
.surface__card--halt { border: 1px solid var(--line-gold); box-shadow: var(--shadow-lit); }
.surface__card--denied { border: 1px solid var(--line-bark); }
.surface__card--done { border: 1px solid color-mix(in srgb, var(--w-ok) 60%, transparent); }
.surface__card--declined { border: 1px solid var(--line-moss); }

.surface__mark { grid-row: 1 / span 2; align-self: start; font-family: var(--face-survey); font-size: 1.7rem; line-height: 1; }
.surface__card--halt .surface__mark { color: var(--sunlight); }
.surface__card--denied .surface__mark { color: var(--bark); }
.surface__card--done .surface__mark { color: var(--w-ok); }
.surface__card--declined .surface__mark { color: var(--moss); }

.surface__head { align-self: center; }
.surface__kicker { font-family: var(--face-survey); font-size: var(--t-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--bark); }
.surface__card--halt .surface__kicker { color: color-mix(in srgb, var(--sunlight) 64%, var(--bark)); }
.surface__claim { font-family: var(--face-canopy); font-weight: 500; font-size: var(--t-title);
  color: var(--ink); margin-top: var(--s-1); line-height: var(--leading-tight); }
.surface__claim b { color: var(--figure); }

.surface__fields { grid-column: 1 / -1; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.surface__row { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; gap: var(--s-3); align-items: baseline; }
.surface__row dt { font-family: var(--face-survey); font-size: var(--t-label); letter-spacing: .04em;
  text-transform: uppercase; color: var(--moss); margin: 0; }
.surface__row dd { font-family: var(--face-path); font-size: var(--t-body); color: var(--ink); margin: 0;
  line-height: var(--leading-body); }

.surface__choice { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.surface__choice .gate__btn { width: auto; flex: 1 1 12rem; margin-top: 0; }
.gate__btn--bless { background: var(--sunlight); color: var(--shadow); border-color: var(--sunlight); }   /* gold = the lit, affirmative act */
.gate__btn--bless:hover { background: var(--sunlight-soft); }
.gate__btn--decline { background: transparent; color: var(--bark); border-color: var(--line-bark); }
.gate__btn--decline:hover { background: color-mix(in srgb, var(--bark) 10%, transparent); }

.surface__msg { grid-column: 1 / -1; min-height: 1.2em; margin: var(--s-3) 0 0; font-family: var(--face-path);
  font-size: var(--t-small); color: var(--bark); }
.surface__note { grid-column: 1 / -1; margin: var(--s-3) 0 0; font-family: var(--face-path);
  font-size: var(--t-small); color: var(--ink-soft); }

/* S4 — standing authority: the live grants, each with a Revoke. Reads on the gate's floor band. */
.gate__active { margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px dashed color-mix(in srgb, var(--line-gold) 60%, transparent); }
.active__head { font-family: var(--face-survey); font-size: var(--t-label); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-on-dark-soft); margin-bottom: var(--s-3); }
.active__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-on-dark) 10%, transparent); }
.active__row:last-child { border-bottom: 0; }
.active__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.active__key { font-family: var(--face-canopy); color: var(--ink-on-dark); font-size: 1.04rem; }
.active__scope { font-family: var(--face-path); font-size: var(--t-small); color: var(--ink-on-dark-soft); }
.active__empty { font-family: var(--face-path); font-size: var(--t-small); color: var(--ink-on-dark-soft); margin: 0; }
.gate__btn--revoke { flex: 0 0 auto; background: transparent; color: var(--ink-on-dark-soft);
  border: 1px solid color-mix(in srgb, var(--bark) 70%, transparent); padding: var(--s-2) var(--s-4); }
.gate__btn--revoke:hover:not(:disabled), .gate__btn--revoke:focus-visible {
  color: var(--floor); background: var(--bark); border-color: var(--bark); }
.gate__btn--revoke:disabled { opacity: 0.55; cursor: default; }

/* S6 — the composition state, surfaced as WEATHER (gold --w-active = "needs you today"), NOT red
   alarm (tokens.css: state is read as weather, not alarm). The banner sits above the grants it sums:
   when the live grants compose past the blast-radius line the WHOLE is halted for fresh consent. */
.active__composition { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-s);
  font-family: var(--face-path); font-size: var(--t-small); line-height: var(--leading-body); }
.active__composition--safe { color: var(--ink-on-dark-soft); background: transparent;
  border-left: 2px solid var(--line-bark); padding: var(--s-2) var(--s-4); }
.active__composition--halt { color: var(--ink-on-dark);
  background: color-mix(in srgb, var(--w-active) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--w-active) 46%, transparent);
  border-left: 3px solid var(--w-active); }
.active__composition-title { display: block; font-family: var(--face-survey); letter-spacing: 0.03em;
  color: var(--sunlight-soft); margin-bottom: var(--s-1); }
.active__composition-body { display: block; }
.active__composition-body b, .active__composition-grants b { color: var(--sunlight-soft); }
.active__composition-grants { display: block; margin-top: var(--s-2); font-size: var(--t-small);
  color: var(--ink-on-dark-soft); }

/* B3 — Expiry Radar (+ sibling Horizontals): rows queried from the edge set.
   On a clearly-tagged DUMMY edge set in V1. Tight, calm, read-only. */
.radar { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.radar-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.3rem 0.6rem;
  align-items: baseline; font-size: var(--t-small); line-height: 1.3;
  padding-bottom: 0.25rem; border-bottom: 1px solid color-mix(in srgb, var(--line-gold) 28%, transparent);
}
.radar-row__when { font-family: var(--face-survey); letter-spacing: 0.03em; color: var(--sunlight); white-space: nowrap; }
.radar-row__what { color: var(--ink-on-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.radar-row__src { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-on-dark-soft); white-space: nowrap; }
.radar-row__amt { font-family: var(--face-survey); color: var(--ink-on-dark-soft); white-space: nowrap; }
.radar-row--overdue .radar-row__when { color: var(--badge-overdue); font-weight: 600; }
.horizon__tag { margin-top: var(--s-2); font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--ink-on-dark-soft); }
.dummy-tag { text-transform: uppercase; letter-spacing: 0.1em; padding: 0.05rem 0.35rem; border: 1px dashed color-mix(in srgb, var(--line-gold) 55%, transparent); border-radius: 3px; }

/* The Flow — outflows read in a warmer hue than neutral amounts */
.radar-row__amt--out { color: #d98a6a; }

/* The Workbench — a query over the canopy (tree pace + weight + open work), not edges */
.bench-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr auto auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line-bark) 35%, transparent);
}
.bench-row:last-child { border-bottom: 0; }
.bench-row__tree { font-family: var(--face-survey); letter-spacing: 0.03em; color: var(--figure); white-space: nowrap; }
.bench-row__work { color: var(--ink-on-dark); overflow: hidden; text-overflow: ellipsis; }
.bench-row__weight { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-on-dark-soft); white-space: nowrap; }
.bench-row__weight--load { color: var(--sunlight); }
/* the canopy read is the REAL snapshot, not dummy — a solid tag, never the dashed dummy one */
.live-tag { text-transform: uppercase; letter-spacing: 0.1em; padding: 0.05rem 0.35rem; border: 1px solid color-mix(in srgb, var(--line-moss) 70%, transparent); border-radius: 3px; color: var(--moss); }

.curate-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.curate-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--line-moss); border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--moss) 8%, transparent); }
.curate-row__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.curate-row__id { font-family: var(--face-mono, 'Spline Sans Mono', monospace); font-size: .9rem; color: var(--ink-on-dark);
  overflow-wrap: anywhere; word-break: break-word; }
.curate-row__src { font-size: .72rem; color: var(--moss); text-transform: uppercase; letter-spacing: .04em; }
.curate-row__act { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.curate-row__select { font-family: var(--face-survey, inherit); font-size: .85rem; padding: 6px 8px;
  border: 1px solid var(--line-moss); border-radius: 6px; background: var(--floor); color: var(--ink); }
.curate-row__btn { width: auto; margin-top: 0; padding: 6px 14px; white-space: nowrap; }
.curate-empty { display: flex; align-items: center; gap: var(--s-2); color: var(--moss); padding: var(--s-3); font-style: italic; }
.curate-empty__mark { font-style: normal; color: var(--figure); font-weight: 700; }
.curate-msg { margin-top: var(--s-2); color: var(--moss); min-height: 1.2em; }

@media (max-width: 560px) {
  .curate-row { flex-direction: column; align-items: stretch; }
  .curate-row__act { justify-content: space-between; }
  .curate-row__select { flex: 1 1 auto; }
}

/* ===================== THE HOLLOW — the residual holding pen (plan §3c / §5.2) =====================
   "Keep in drawer" sends an item here: kept, fitting no tree, held + visible (Ink Law). The pen is a
   quieter, recessed ground beneath the active sort list — it holds, it does not nag. Read-only in Phase 1. */
.curate-row__keep { width: auto; margin-top: 0; padding: 6px 12px; white-space: nowrap; font: inherit;
  font-size: .82rem; color: var(--moss); background: transparent; border: 1px solid var(--line-moss);
  border-radius: 7px; cursor: pointer; }
.curate-row__keep:hover { background: color-mix(in srgb, var(--moss) 12%, transparent); }
.curate-row__keep:disabled { opacity: .5; cursor: default; }
.hollow-list { display: flex; flex-direction: column; gap: var(--s-2); }
.hollow-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 8px 10px; border-radius: 8px; opacity: .85;
  background: color-mix(in srgb, var(--surface-deep) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-moss) 55%, transparent); }
.hollow-row__id { font-family: var(--face-mono, 'Spline Sans Mono', monospace); font-size: .85rem; color: var(--ink-on-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hollow-row__src { font-size: .7rem; color: var(--moss); text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; }

/* Phase 4 — the self-monitoring Hollow (overpopulation nudge + cluster suggest). */
.hollow-suggest { margin-top: var(--s-3); padding-top: var(--s-2); display: grid; gap: var(--s-2);
  border-top: 1px dashed color-mix(in srgb, var(--line-moss) 70%, transparent); }
.hollow-suggest__full { margin: 0; font-size: .78rem; font-style: italic; color: var(--sun, var(--amber, #c8a23a));
  padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--sun, #c8a23a) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sun, #c8a23a) 30%, transparent); }
.hollow-suggest__look { width: auto; justify-self: start; margin-top: 0; padding: 6px 14px; white-space: nowrap;
  font: inherit; font-size: .82rem; cursor: pointer; color: var(--moss); border-radius: 8px;
  background: color-mix(in srgb, var(--moss) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--moss) 35%, transparent); }
.hollow-suggest__look:hover { background: color-mix(in srgb, var(--moss) 16%, transparent); }
.hollow-suggest__none { margin: 0; font-size: .76rem; font-style: italic; color: var(--ink-soft); }
.hollow-suggest__clusters { display: flex; flex-direction: column; gap: var(--s-2); }
.hollow-cluster { display: grid; gap: 6px; padding: var(--s-2) var(--s-3); border-radius: var(--r-s, 8px);
  background: color-mix(in srgb, var(--surface) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-moss) 70%, transparent); }
.hollow-cluster__head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.hollow-cluster__count { font-size: .82rem; color: var(--ink-on-dark); }
.hollow-cluster__toks { font-family: var(--face-mono, 'Spline Sans Mono', monospace); font-size: .72rem; color: var(--moss);
  text-transform: uppercase; letter-spacing: .03em; }
.hollow-cluster__items { font-size: .76rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.hollow-cluster__grow { width: auto; justify-self: start; margin-top: 2px; padding: 6px 14px; white-space: nowrap; font-size: .82rem; }
.newtree__drain { margin-top: var(--s-3); padding-top: var(--s-3); display: grid; gap: var(--s-2);
  border-top: 1px dashed color-mix(in srgb, var(--line-moss) 70%, transparent); }
.newtree__drain-note { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.newtree__drain-note code { font-family: var(--face-mono, 'Spline Sans Mono', monospace); color: var(--figure); }
.newtree__drain-btn { width: auto; justify-self: start; margin-top: 0; padding: 6px 14px; white-space: nowrap; }

.conn-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.conn-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--line-moss); border-radius: var(--r-s);
  background: color-mix(in srgb, var(--moss) 8%, transparent);
}
.conn-row__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.conn-row__provider { font-family: var(--face-canopy); color: var(--ink); font-size: 1.04rem; }
.conn-row__account { font-family: var(--face-survey); font-size: var(--t-small); color: var(--ink-on-dark-soft); }
.conn-row__scope { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--moss); }
.conn-row__act { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.conn-row__act .gate__btn { width: auto; margin-top: 0; padding: 6px 14px; white-space: nowrap; }
.conn-row__status {
  width: 100%; flex: 0 0 100%; min-height: 1.2em;
  margin: var(--s-1) 0 0; padding: 0;
  font-family: var(--face-path); font-size: var(--t-small); color: var(--moss);
}
/* ---- LEG 4 (S13.1604) — the per-source FRESHNESS verdict on a connector row ----
   The runtime serves a typed state + the ACTION it implies; this paints it.

   INK LAW: every colour is a var(--badge-*) reference — no hex, and no NEW palette.
   The alarm speaks the shell's EXISTING honest-badge grammar rather than inventing a
   second one.

   H3 (the load-bearing rule, inherited from honest-badge.js): the FORM carries the
   "did we reach the truth?" bit, not the colour. `unknown` — the state a FAILED read
   coerces to — is the hollow, DASHED ring. So with colour stripped, an unchecked
   source and a healthy one CANNOT look alike. Every state we actually verified is a
   solid chip.

   THEO'S RULE holds: never red. `failing` is heavy gold, not alarm-red. */
.conn-fresh {
  width: 100%; flex: 0 0 100%;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--line-moss);
}
.conn-fresh__chip {
  flex: 0 0 auto;
  font-family: var(--face-survey); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent;                 /* solid chip by default (a VERIFIED state) */
  background: var(--badge-known); color: var(--bark);
}
.conn-fresh__action {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--face-path); font-size: var(--t-small); color: var(--ink-on-dark-soft);
}
.conn-fresh__when {
  flex: 0 0 auto;
  font-family: var(--face-survey); font-size: var(--t-micro); color: var(--moss);
}

/* the six verified states — solid chips, gold-graded by urgency, never red */
.conn-fresh--unlinked .conn-fresh__chip { background: var(--badge-overdue);  color: var(--badge-overdue-ink); }
.conn-fresh--fresh   .conn-fresh__chip { background: var(--badge-known);     color: var(--bark); }
.conn-fresh--silent  .conn-fresh__chip { background: var(--badge-known);     color: var(--bark); }
.conn-fresh--never   .conn-fresh__chip { background: var(--badge-known-due); color: var(--bark); }
.conn-fresh--stale   .conn-fresh__chip { background: var(--badge-known-due); color: var(--bark); }
.conn-fresh--failing .conn-fresh__chip { background: var(--badge-overdue);   color: var(--badge-overdue-ink); }

/* a FAILING or UNLINKED source's action is the sentence that matters most on this pane — it is
   the one telling him that the button he is about to click will not help (failing), or that the
   button he wants does not exist for this source at all (unlinked). Let them read. */
.conn-fresh--failing  .conn-fresh__action { color: var(--ink); }
.conn-fresh--unlinked .conn-fresh__action { color: var(--ink); }

/* H3 — the ONE hollow form: we could not reach the truth, and the SHAPE says so. */
.conn-fresh--unknown .conn-fresh__chip {
  background: var(--badge-unreachable);                 /* transparent, by token */
  border: 1px var(--badge-unreachable-form) var(--badge-unreachable-line);
  color: var(--badge-unreachable-ink);
}
.conn-fresh--unknown .conn-fresh__action { color: var(--moss); font-style: italic; }

.conn-empty { display: flex; align-items: center; gap: var(--s-2); color: var(--moss); padding: var(--s-3); font-style: italic; }
.conn-msg { margin-top: var(--s-2); min-height: 1.2em; }

@media (max-width: 560px) {
  .conn-row { flex-direction: column; align-items: stretch; }
  .conn-row__act { justify-content: flex-start; }
}

/* ===================== New tree (Phase 3 — propose-from-scratch) =====================
   A quiet disclosure in the curate band: author a tree, get a valid anatomy to commit.
   Collapsed by default so it never competes with sorting. Tokened to the dawn palette. */
.newtree {
  margin-top: var(--s-5);
  border: 1px solid var(--line-moss);
  border-radius: var(--r-m, 10px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}
.newtree__summary {
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  font-family: var(--face-survey);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: var(--figure);
  list-style: none;
}
.newtree__summary::-webkit-details-marker { display: none; }
.newtree[open] .newtree__summary { border-bottom: 1px solid var(--line-moss); }
.newtree__form { padding: var(--s-4); display: grid; gap: var(--s-3); }
.newtree__intro { margin: 0 0 var(--s-2); color: var(--ink-soft); font-size: var(--t-small); }
.newtree__field { display: grid; gap: 0.3rem; border: 0; padding: 0; margin: 0; }
.newtree__label {
  font-family: var(--face-survey);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--moss);
}
.newtree__req { text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-size: 0.8em; }
.newtree__input {
  font-family: var(--face-path);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-bark);
  border-radius: var(--r-s, 6px);
  padding: 0.45rem 0.6rem;
  width: 100%;
}
.newtree__input:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.newtree__area { resize: vertical; min-height: 3.2rem; font-family: var(--face-survey); font-size: var(--t-small); }
.newtree__hint { font-family: var(--face-survey); font-size: var(--t-small); color: var(--ink-soft); }
.newtree__hint code, .newtree__committed code, .newtree__path { font-family: var(--face-survey); color: var(--figure); }
.newtree__pace, .newtree__kind { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.newtree__pace label, .newtree__kind label {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--face-path); font-size: var(--t-small); color: var(--ink);
}
.newtree__structured {
  display: grid; gap: var(--s-2);
  padding: var(--s-3);
  border: 1px dashed var(--line-moss);
  border-radius: var(--r-s, 6px);
  background: color-mix(in srgb, var(--floor) 60%, transparent);
}
.newtree__fieldrow { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.newtree__half { width: 50%; }
.newtree__addfield, .newtree__anyway, .newtree__copy {
  justify-self: start;
  font-family: var(--face-survey); font-size: var(--t-small);
  background: transparent; color: var(--figure);
  border: 1px solid var(--line-gold); border-radius: var(--r-s, 6px);
  padding: 0.3rem 0.7rem; cursor: pointer;
}
.newtree__addfield:hover, .newtree__anyway:hover, .newtree__copy:hover { background: color-mix(in srgb, var(--sunlight) 14%, transparent); }
.newtree__emit { justify-self: start; margin-top: var(--s-2); }
.newtree__msg { font-family: var(--face-survey); font-size: var(--t-small); color: var(--bark); min-height: 1.2em; margin: 0; }
.newtree__result { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-3); }
.newtree__priorart {
  padding: var(--s-3);
  border-left: 3px solid var(--sunlight);
  background: color-mix(in srgb, var(--sunlight) 10%, transparent);
  border-radius: var(--r-s, 6px);
  display: grid; gap: var(--s-2);
}
.newtree__pa-lead { margin: 0; color: var(--ink); font-size: var(--t-small); }
.newtree__committed { margin: 0 0 var(--s-2); color: var(--ink-soft); font-size: var(--t-small); }
.newtree__json {
  font-family: var(--face-survey); font-size: var(--t-small);
  background: var(--surface-deep); color: var(--ink-on-dark);
  padding: var(--s-3); border-radius: var(--r-s, 6px);
  overflow-x: auto; white-space: pre; margin: 0;
}
.newtree__actions { display: flex; gap: 0.6rem; align-items: center; }
.newtree__download {
  font-family: var(--face-survey); font-size: var(--t-small);
  color: var(--figure); text-decoration: underline; text-underline-offset: 2px;
}

/* ===================== BAND COLLAPSE — minimize sections (S04.1417) =====================
   Additive. A chevron toggle on every band head folds the band body away. The "Sort the
   soil" (curate) wall ships collapsed by default; each band's state persists per-id in
   localStorage so a choice sticks across reloads. The chevron inherits each band's accent
   so it reads on that band's ground. Nothing here changes existing layout when expanded. */
.band__head { cursor: pointer; padding-right: 1.9rem; }
.band__toggle {
  position: absolute; top: var(--s-4); right: var(--s-5);
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  padding: 0.15rem 0.3rem; cursor: pointer; color: currentColor;
  display: inline-flex; align-items: center; line-height: 1;
  border-radius: var(--r-s); opacity: 0.7;
  transition: opacity var(--dur-1) var(--ease);
}
.band__head:hover .band__toggle,
.band__toggle:focus-visible { opacity: 1; }
.band__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.band__toggle .chev { display: inline-block; font-size: 0.82em; transition: transform 0.18s var(--ease); }
.band.is-collapsed .band__toggle .chev { transform: rotate(-90deg); }
.band.is-collapsed .band__head { margin-bottom: 0; }
.band.is-collapsed > :not(.band__head) { display: none !important; }