/* The dress — the Voice Protocol made visible.
 *
 * One painted world, two layers. The ground is monochrome — a quiet field
 * on a 120px grid, lit by two ambient washes — and it is the same world
 * everywhere. On it stands Eden's layer: glass, and the governed rainbow.
 * The meaning of a pane arrives as its color, worn as a crown; the rainbow
 * is spent like a voice and never decorates.
 *
 * Two lights, one identity: the white world and the black world, mirrored
 * around the same axis — never one dimmed into the other. The seal — the
 * one accent that means a real act — is always made of the other world:
 * in daylight the press is night; at night the press is daylight.
 *
 * Alarm is believed, because it is never wasted. Nothing moves unless
 * something true has changed. The faces are the body's own, carried in
 * its ground — nothing is fetched.
 */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Mono';
  src: url('fonts/red-hat-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Mono';
  src: url('fonts/red-hat-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Mono';
  src: url('fonts/red-hat-mono-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* the white world */
  --paper: #ECEDEE;
  --raised: #F7F8F8;
  --fill: #E2E4E6;
  --ink: #14171A;
  --dim: #4A5257;
  /* Three readable weights, not two and a decoration. Faint carries every
     label, hint, footnote and reading in this body, so it is load-bearing
     wherever it appears and clears AA against every ground it sits on. */
  --faint: #636B70;
  --line: rgba(20, 23, 26, 0.14);
  --line-soft: rgba(20, 23, 26, 0.07);
  --line2: rgba(20, 23, 26, 0.26);
  --accent: #14171A;        /* the seal — made of the other world */
  --accent-ink: #F7F8F8;
  --alarm: #9E3B2E;         /* flat, believed, never wasted */
  --stale-ink: #7A5A10;     /* the stale reading — amber survives here */
  --stale-wash: rgba(122, 90, 16, 0.07);
  --live: #1C8A52;          /* a mark, never a text color */
  --live-wash: rgba(28, 138, 82, 0.10);

  /* the glass — Eden's layer */
  --glass: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(20, 23, 26, 0.10);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --blur-amt: 22px;
  --blur: blur(var(--blur-amt)) saturate(1.2);
  --g1: rgba(20, 23, 26, 0.02);
  --g2: rgba(20, 23, 26, 0.035);
  --g3: rgba(20, 23, 26, 0.06);
  --shadow: 0 24px 60px rgba(20, 23, 26, 0.12);

  /* the field */
  --gridline: rgba(20, 23, 26, 0.05);
  --wash1: radial-gradient(1100px 520px at 76% 8%, rgba(20, 23, 26, 0.10), transparent 62%);
  --wash2: radial-gradient(800px 480px at 8% 96%, rgba(20, 23, 26, 0.06), transparent 58%);

  /* the governed rainbow — each meaning owns its gradient; crowns and
     dots on glass only, never text, never ground */
  --g-seat: linear-gradient(120deg, #7C6FE8, #4E9FE8);
  --g-offer: linear-gradient(120deg, #1FB5A3, #4FCF6E);
  --g-grant: linear-gradient(120deg, #C9962E, #E4BE62);
  --g-care: linear-gradient(120deg, #E27D9E, #EFAF7E);
  --g-body: linear-gradient(120deg, #3BAECB, #7C6FE8);
  --g-work: linear-gradient(120deg, #3EE08C, #4CCFE0);

  --read: 'Schibsted Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --work: 'Schibsted Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --hand: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* one scale, and nothing between its steps */
  --s00: 0.68rem;
  --s0: 0.78rem;
  --s1: 0.875rem;
  --s2: 1rem;
  --s3: 1.15rem;
  --s4: 1.55rem;
  --s5: 2.35rem;

  --measure: 68ch;
  --radius: 10px;
  /* act geometry: round is a state mark; the seal cut is an act */
  --seal: 12px 4px 12px 4px;
  --seal-sm: 8px 3px 8px 3px;

  /* the shell: four organs, declared before any content exists. One
     spacing unit and its multiples; there are no eyeballed gaps. */
  --u: 0.9rem;
  --strip: 2.75rem;
  --spine: 4rem;
  --library: 17.5rem;
  --foot: 3.6rem;

  /* the front door's four bands, their heights declared before any content
     exists. Fixed, not minimum: every band begins at the same y in every
     filling, so switching stations moves nothing. The build refuses copy
     that would not fit — the content is sized to the band, never the band
     to the content. */
  --band-say: 2.8rem;
  --band-work: 6.6rem;
  --band-act: 2.5rem;
  --band-note: 2.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* the black world — mirrored, never dimmed */
    --paper: #0B0D0E;
    --raised: #15181A;
    --fill: #1D2124;
    --ink: #EDEFF0;
    --dim: #A6AFB3;
    --faint: #7B868D;
    --line: rgba(237, 239, 240, 0.15);
    --line-soft: rgba(237, 239, 240, 0.07);
    --line2: rgba(237, 239, 240, 0.26);
    --accent: #EDEFF0;
    --accent-ink: #0B0D0E;
    --alarm: #E08A7A;
    --stale-ink: #E6C36A;
    --stale-wash: rgba(230, 195, 106, 0.08);
    --live: #3EE08C;
    --live-wash: rgba(62, 224, 140, 0.09);
    --glass: rgba(255, 255, 255, 0.055);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --blur-amt: 26px;
    --blur: blur(var(--blur-amt)) saturate(1.45);
    --g1: rgba(255, 255, 255, 0.03);
    --g2: rgba(255, 255, 255, 0.046);
    --g3: rgba(255, 255, 255, 0.075);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    --gridline: rgba(237, 239, 240, 0.05);
    --wash1: radial-gradient(1100px 520px at 76% 8%, rgba(237, 239, 240, 0.07), transparent 62%);
    --wash2: radial-gradient(800px 480px at 8% 96%, rgba(237, 239, 240, 0.045), transparent 58%);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--work);
  font-size: var(--s2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* the field: two ambient washes and the 120px grid, fading as the page
   descends. Decoration ends where the work begins. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--wash1), var(--wash2);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, var(--gridline) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, var(--gridline) 0 1px, transparent 1px 120px);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.4) 70%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.4) 70%, transparent);
}

/* the reading surfaces keep the same voice, set a little looser */
body.reading { font-family: var(--read); line-height: 1.65; }

h1, h2, h3 { line-height: 1.25; font-weight: 500; margin: 0 0 0.5rem; }
h1 { font-size: var(--s4); letter-spacing: -0.01em; }
h2 { font-size: var(--s3); margin-top: 2.25rem; }
h3 { font-size: var(--s2); margin-top: 1.25rem; }
body.reading h1 { font-weight: 500; }

p { margin: 0 0 1rem; }
a { color: var(--ink); text-decoration-thickness: 1px; text-decoration-color: var(--line2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--ink); color: var(--paper); }

.dim { color: var(--dim); }
.faint { color: var(--faint); font-size: var(--s1); }
.lede { font-size: var(--s3); color: var(--dim); }
.hand { font-family: var(--hand); font-size: var(--s0); font-variant-numeric: tabular-nums; }

/* the micro-label: the identity's quiet caption voice */
.mono-label, th {
  font-family: var(--hand); font-size: var(--s00);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
}

/* ---------------------------------------------------------------- layout */

.page { max-width: var(--measure); margin: 0 auto; padding: 3rem 1.5rem 6rem; }
.page.wide { max-width: 78rem; }

@media (max-width: 62rem) {
  .page { padding: 2.25rem 1.25rem 4rem; }
}

/* ---------------------------------------------------------- the shell
   Four organs, and every surface stands inside them: the spine of the
   nine rooms, the library of what this room holds, the editor where one
   thing is rendered, and the foot where the press lives.
 *
 * The press sits at one x on every surface and in every state. A room
 * with nothing to press says so in that same place rather than leaving
 * it blank — an empty foot would read as a surface still loading.
 *
 * The shell is an instrument, not a document: it is the screen, it fills
 * the viewport exactly, and nothing inside it can move anything else.
 * Below its width it scrolls rather than reflowing, because a control
 * that moves is a control a hand cannot learn. */

/* Below its width the shell scrolls rather than reflowing, because a control
   that moves is a control a hand cannot learn. `overflow: hidden` clipped it
   instead: at 900px the editor's right edge stood 154px past the viewport with
   no way to reach it, and the room a person was in could not be read at all.
   The horizontal axis scrolls; the vertical stays owned by the organs. */
body.studio-page { overflow-x: auto; overflow-y: hidden; }

.studio {
  display: grid;
  grid-template-columns: var(--spine) var(--library) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--foot);
  height: 100vh; width: 100%; min-width: 62rem;
}

/* -- the spine: the nine rooms, always there ---------------------------
   Anchors, never presses. The seal marks an act; moving between rooms
   is not one, and nothing in the spine may wear it. */

.spine { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-height: 0; }
.spine .mark {
  height: var(--strip); flex: none;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--hand); font-size: var(--s1); font-weight: 500;
  letter-spacing: 0.1em; color: var(--ink);
}
.spine nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: calc(var(--u) * 0.5) 0; }
/* A room at rest is dim, never faint. Faint is for text that carries
   nothing; the name of a room a person navigates by carries everything,
   and at this size it needs the contrast rather than less of it. */
.spine nav a {
  width: 3rem; height: 3rem; position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: var(--seal-sm); text-decoration: none; color: var(--dim);
  transition: color 160ms ease, background-color 160ms ease;
}
.spine nav a::before {
  content: ''; position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem;
  width: 2px; border-radius: 0 2px 2px 0; background: transparent;
}
.spine nav a:hover { background: var(--line-soft); color: var(--ink); }
.spine nav a[aria-current="page"] { background: var(--fill); color: var(--ink); }
.spine nav a[aria-current="page"]::before { background: var(--ink); }
/* the smallest step of the one scale, and no smaller: a size chosen to fit
   a tile is a size chosen for the tile rather than for the person */
.spine nav a .tag { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
/* a count only where a number is honest; where none is, nothing is drawn */
.spine nav a .count {
  position: absolute; top: 0.25rem; right: 0.35rem;
  font-family: var(--hand); font-size: var(--s00); color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.spine nav a .count:empty { display: none; }

/* the stem: what is yours rather than the room's, at the foot of the spine.
   Neither is a press — the panel opens a reading, and leaving writes nothing
   to any record — so neither wears the seal. */
.spine .stem {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: calc(var(--u) * 0.5) 0; border-top: 1px solid var(--line-soft);
}
.spine .stem button {
  width: 3rem; height: 3rem; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: var(--seal-sm); background: transparent; color: var(--dim);
  letter-spacing: 0; text-transform: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.spine .stem button:hover { background: var(--line-soft); color: var(--ink); }
.spine .stem button[aria-expanded="true"] { background: var(--fill); color: var(--ink); }
.spine .stem .tag { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }

/* -- the library: what this room holds --------------------------------- */

.library { grid-column: 2; grid-row: 1; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-height: 0; }
.library .list { flex: 1; min-height: 0; overflow-y: auto; }
.library .list .honest-empty { border: 0; padding: calc(var(--u) * 2) calc(var(--u) * 1.1); margin: 0; font-size: var(--s1); }

/* a row in the library: what this room holds, one per line. Choosing here is
   the only thing that changes the editor, so a row is a choice and never a
   press — nothing in this column writes anything. */
.library .lib-row {
  width: 100%; text-align: left; display: grid;
  grid-template-columns: 2px minmax(0, 1fr) auto; align-items: center;
  border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0;
  background: transparent; padding: 0; color: inherit;
  font-family: var(--read); font-size: var(--s1); letter-spacing: 0; text-transform: none;
  transition: background-color 140ms ease;
}
.library .lib-row:hover { background: var(--line-soft); }
.library .lib-row .bar { align-self: stretch; background: transparent; }
.library .lib-row[aria-current="true"] { background: var(--fill); }
.library .lib-row[aria-current="true"] .bar { background: var(--ink); }
.library .lib-row .body { display: block; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.1) calc(var(--u) * 0.65) calc(var(--u)); min-width: 0; }
.library .lib-row .title { display: block; color: var(--dim); line-height: 1.35; }
.library .lib-row[aria-current="true"] .title { color: var(--ink); }
.library .lib-row .says { display: block; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 0.2rem; }
/* a chosen row stands on --fill, and faint does not clear the floor there */
.library .lib-row[aria-current="true"] .says { color: var(--dim); }
.library .lib-row .n { font-family: var(--hand); font-size: var(--s0); color: var(--dim); font-variant-numeric: tabular-nums; padding-right: calc(var(--u) * 1.1); }

/* ------------------------------------------------------------- arrival
   Where a person learns Eden. Every word of a guide is the body's own —
   what you decide comes from the shape that holds the act, and the law is
   quoted rather than retold, in a register of its own so nobody mistakes
   my sentence for the invariant. */

.greet { font-size: var(--s4); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.35rem; }
.said { max-width: var(--measure); color: var(--dim); }

/* the knowledge base: a studio inside the room. Subjects on one side, one
   page open beside them — a knowledge base is a place you move around in,
   and a list you scroll is not that. */
.kb {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0; margin-top: 1.5rem;
  border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden;
}
.kb .rail { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.kb .pane { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); min-width: 0; }
.kb .pane > .faint { margin: 0 0 1rem; max-width: var(--measure); }

.kb .cat, .kb .page {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 0;
  background: transparent; color: inherit;
  font-family: var(--read); letter-spacing: 0; text-transform: none;
  transition: background-color 140ms ease;
}
.kb .cat:hover, .kb .page:hover { background: var(--line-soft); }

.kb .cat {
  padding: calc(var(--u) * 0.75) calc(var(--u) * 0.9);
  border-bottom: 1px solid var(--line-soft);
}
.kb .cat[aria-current="true"] { background: var(--fill); }
.kb .cat .title { display: block; font-size: var(--s1); color: var(--dim); line-height: 1.35; }
.kb .cat[aria-current="true"] .title { color: var(--ink); font-weight: 500; }
.kb .cat .says { display: block; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 0.2rem; }
.kb .cat[aria-current="true"] .says { color: var(--dim); }

/* the pages of the open subject, indented beneath it */
.kb .pages { display: flex; flex-direction: column; border-bottom: 1px solid var(--line-soft); padding: calc(var(--u) * 0.4) 0; }
.kb .pages .honest-empty { border: 0; padding: calc(var(--u) * 1.2) calc(var(--u) * 0.9); margin: 0; text-align: left; font-size: var(--s0); }
.kb .page { padding: 0.35rem calc(var(--u) * 0.8) 0.35rem calc(var(--u) * 1.5); position: relative; }
.kb .page::before {
  content: ''; position: absolute; left: calc(var(--u) * 0.8); top: 0.55rem; bottom: 0.55rem;
  width: 2px; border-radius: 0 2px 2px 0; background: transparent;
}
.kb .page[aria-current="true"]::before { background: var(--ink); }
.kb .page .title { display: block; font-size: var(--s1); color: var(--dim); line-height: 1.4; }
.kb .page[aria-current="true"] .title { color: var(--ink); }
.kb .page .says { display: block; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.kb .guide { margin: 0; box-shadow: none; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kb .guide > .strip { padding-left: 0; padding-right: 0; }
.kb .guide .inside { padding: calc(var(--u) * 1.2) 0 0; }

@media (max-width: 62rem) {
  .kb { grid-template-columns: minmax(0, 1fr); }
  .kb .rail { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}

.guide {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); border-radius: 14px;
  box-shadow: var(--glass-hi), var(--shadow);
  overflow: hidden; margin: 1.5rem 0 0; max-width: 60rem;
}
.guide > .strip { border-bottom: 1px solid var(--line-soft); }
.guide .inside { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 1.8); }
.guide h3 { font-size: var(--s1); font-family: var(--hand); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin: 1.75rem 0 0.75rem; }
.guide h3:first-child { margin-top: 0; }
.guide .honest-empty { text-align: left; padding: 1rem 1.25rem; }

/* what you decide: one row per thing a person settles */
.decisions { display: flex; flex-direction: column; }
.decisions .d { padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
.decisions .d:last-child { border-bottom: 0; }
.decisions .k { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; }
.decisions .field { font-family: var(--hand); font-size: var(--s1); color: var(--ink); }
.decisions .says { margin: 0; color: var(--dim); font-size: var(--s1); line-height: 1.6; max-width: var(--measure); }

/* the law, quoted. A rule is set apart because it is not the surface talking */
.laws { display: flex; flex-direction: column; gap: 0.75rem; }
.law { margin: 0; border-left: 2px solid var(--line2); padding: 0.15rem 0 0.15rem calc(var(--u) * 1.1); max-width: var(--measure); }
.law .rule { display: block; font-size: var(--s00); letter-spacing: 0.14em; color: var(--faint); margin-bottom: 0.2rem; }
.law p { margin: 0; color: var(--dim); font-size: var(--s1); line-height: 1.6; }

/* the facts of a standing: a label and its one value, never a paragraph */
.facts { display: flex; flex-direction: column; margin: 1.25rem 0 2rem; max-width: var(--measure); }
.facts .f { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--u); align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
.facts .f .k { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.facts .f .v { font-size: var(--s1); color: var(--ink); line-height: 1.5; word-break: break-word; }

/* -- the editor: one thing, rendered ----------------------------------- */

.editor { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; min-height: 0; }
.editor .work { flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 3); }
.editor .work > header { margin-bottom: 1.5rem; }
.editor .work > header p { max-width: var(--measure); }

/* -- the strip: every organ's head, one height ------------------------- */

.strip {
  height: var(--strip); flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--u);
  padding: 0 calc(var(--u) * 1.1); border-bottom: 1px solid var(--line-soft);
  font-family: var(--hand); font-size: var(--s00);
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.strip .name { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.strip .reading { color: var(--faint); flex: none; font-variant-numeric: tabular-nums; }

/* the editor's strip carries the room's name, and a room is now named for
   what happens in it — a sentence, not a table. A sentence is set as one:
   the reading face at body size, no tracking, no capitals. It is the one
   line every room shares, so it is where a person learns where they are. */
.editor > .strip { position: relative; z-index: 2; }
.editor > .strip .name { font-family: var(--read); font-size: var(--s2); letter-spacing: 0; text-transform: none; font-weight: 500; }

/* the lens, opened: a word's meaning, read from the body's own lexicon.
   It lands in the strip's reading slot — the place the shell already keeps
   for a reading — and stands over the work rather than in it, so opening
   a word moves nothing and closing it restores nothing. Ink on the raised
   ground, wrapped at a measure a definition can be read at. */
.editor > .strip .reading:not(:empty) {
  position: absolute; top: calc(100% + 0.6rem); right: calc(var(--u) * 1.6);
  max-width: min(46ch, calc(100% - var(--u) * 3.2));
  white-space: normal; text-align: left;
  font-family: var(--read); font-size: var(--s1); font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.55;
  color: var(--ink); background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.75rem 0.95rem;
  box-shadow: var(--shadow);
}

/* -- the foot: the press, at one x ------------------------------------- */

.foot {
  grid-column: 1 / 4; grid-row: 2;
  display: flex; align-items: center; gap: var(--u);
  padding: 0 calc(var(--u) * 1.6) 0 0;
  border-top: 1px solid var(--line-soft);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi);
}
.foot .whom {
  width: calc(var(--spine) + var(--library)); flex: none; height: 100%;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0 calc(var(--u) * 1.1); border-right: 1px solid var(--line-soft);
  font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); overflow: hidden;
}
.foot .whom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot .says {
  font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
  padding-left: calc(var(--u) * 0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.foot .gap { flex: 1; }
.foot .acts { margin-top: 0; flex-wrap: nowrap; flex: none; }

/* ------------------------------------------------ the state ladder, once
   one state, one dress, both products. A dress always sits beside the
   name it qualifies; the name is the word. */

.state {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.1rem 0.55rem; border-radius: 999px;
  font-family: var(--hand); font-size: var(--s0); white-space: nowrap;
}
.state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.state-drawn    { border: 1px dashed var(--line2); color: var(--dim); }
.state-drawn::before    { background: transparent; box-shadow: inset 0 0 0 1px var(--dim); }
.state-present  { border: 1px solid var(--line2); color: var(--ink); }
.state-present::before  { content: none; }
.state-bound    { border: 3px double var(--line2); color: var(--ink); }
.state-bound::before    { content: none; }
.state-live     { border: 1px solid var(--line2); color: var(--ink); background: var(--live-wash); }
.state-live::before     { background: var(--live); }
.state-released { border: 0; color: var(--dim); background: var(--fill); }
.state-released::before { content: none; }
.state-unknown  { border: 1px solid var(--line); color: var(--dim); }
.state-unknown::before  { background: var(--line2); }

/* ------------------------------------------------------------- controls
   declining is never dimmer or slower than accepting. A press wears the
   seal — the other world entire; round is a state mark, the seal cut is
   an act. */

button {
  font: inherit; font-family: var(--hand); font-size: var(--s00);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line2); border-radius: var(--seal-sm);
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
button:hover { border-color: var(--ink); }

button[data-form="press"], button.primary {
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: var(--seal);
  font-family: var(--read); font-size: var(--s1); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  padding: 0.55rem 1.3rem; min-height: 2.5rem;
}
button[data-form="press"]:hover, button.primary:hover { border-color: var(--accent); opacity: 0.92; }

button[data-form="choice"], button[data-form="counsel"] {
  background: transparent; color: var(--dim);
  border: 1px solid var(--line2); border-radius: var(--seal-sm);
  font-family: var(--hand); font-size: var(--s00);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 0.95rem; min-height: 2.3rem;
}
button[data-form="choice"]:hover, button[data-form="counsel"]:hover { color: var(--ink); border-color: var(--ink); }
button.chosen { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ------------------------------------------------------------ the lens
   A word that can be opened. Eden's words are exact and not being replaced;
   a reader who knows one is never slowed, and a reader who does not can
   ask. So the word stays bare in the line — its own face, size and colour —
   and wears one quiet mark: a dotted rule beneath it, in the hairline
   colour, never the alarm. Dotted is the mark of a meaning held; a solid
   rule is a link and a wavy one is an error, and this is neither.
 *
   It is a counsel: it changes nothing and asks nothing. It is a real
   control, so a finger opens it as well as a pointer. Opening paints the
   word on the fill and sets its rule solid; the meaning appears beside the
   room's name, over the work, and the line the word sits in does not move
   by a pixel. Pressing the word again closes it; leaving the room closes it. */
button.word {
  display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit;
  line-height: inherit; color: inherit; background: transparent;
  border: 0; border-radius: 2px; padding: 0; margin: 0; min-height: 0;
  cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--line2);
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  transition: text-decoration-color 160ms ease, background-color 160ms ease;
}
button.word:hover { text-decoration-color: currentColor; }
button.word[aria-expanded="true"] {
  color: var(--ink); background: var(--fill);
  box-shadow: 0 0 0 3px var(--fill);
  text-decoration-style: solid; text-decoration-color: currentColor;
}

/* a state word wearing its dress is the same lens in a pill: the dress
   stays the dress, and the dotted rule is added beneath the word */
button.word.state {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.1rem 0.55rem; border-radius: 999px;
  font-family: var(--hand); font-size: var(--s0); letter-spacing: 0; text-transform: none;
  white-space: nowrap; box-shadow: none;
}
button.word.state-drawn    { border: 1px dashed var(--line2); color: var(--dim); }
button.word.state-present  { border: 1px solid var(--line2); color: var(--ink); }
button.word.state-bound    { border: 3px double var(--line2); color: var(--ink); }
button.word.state-live     { border: 1px solid var(--line2); color: var(--ink); background: var(--live-wash); }
button.word.state-released { border: 0; color: var(--dim); background: var(--fill); }
button.word.state-unknown  { border: 1px solid var(--line); color: var(--dim); }
button.word.state[aria-expanded="true"] { color: var(--ink); background: var(--fill); border-color: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }

label { display: block; margin: 1.4rem 0 0.35rem; font-size: var(--s00); font-family: var(--hand); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

input[type="text"], input[type="email"], textarea, select {
  font: inherit; font-size: var(--s1); font-family: var(--hand);
  width: 100%; max-width: 30rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line2); border-radius: var(--seal);
  background: transparent; color: var(--ink);
  caret-color: var(--ink);
  transition: border-color 160ms ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); outline: none; }
textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
/* a hint under a field stays with its field: the field's width, a short gap */
input + p.faint, textarea + p.faint, select + p.faint { margin: 0.35rem 0 0; max-width: 30rem; font-size: var(--s0); line-height: 1.5; }

.acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; align-items: center; }

/* ------------------------------------------------- one thing per room
   Every room used to arrive at one weight: panels, then a stack of
   labelled fields, then a press, all of it glass. Nothing said what
   mattered. Now the room's own layer is flat — the lede, the section
   heads, the fields and the records it lists stand on the paper — and the
   glass is spent on exactly one thing: the claim card, where the act is.
   A room with nothing to press is led by its honest-empty, and that is
   drawn at the size of the thing it stands in for. */

/* the lede: the room's one sentence, first and largest */
.editor .work > p.dim:first-child { font-size: var(--s3); line-height: 1.5; color: var(--dim); max-width: var(--measure); margin-bottom: 1.5rem; }

/* a section head begins a new act; a hairline and air above it, so the
   room reads as a few things in order rather than one long stack */
.editor .work > h2 { font-size: var(--s3); font-weight: 500; margin: 3rem 0 0.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); max-width: var(--measure); }
.editor .work > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.editor .work > h3 { font-size: var(--s1); font-family: var(--hand); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin: 1.75rem 0 0.5rem; }
.editor .work > p { max-width: var(--measure); }

/* the room's press, set apart from the fields above it by air alone */
.editor .work > .acts { margin-top: 1.75rem; }
.editor .work > .acts button[data-form="press"] { min-width: 9rem; }

/* a record listed in a room stands flat on the paper: a hairline, no
   glass, no shadow. It is a fact, and a fact does not need to float. */
.editor .work .panel { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line-soft); padding: 1rem 1.15rem; }
.editor .work .panel h3 { font-size: var(--s2); }
.editor .work .panel .acts { margin-top: 0.75rem; }
/* the claim card keeps the glass, wherever it stands: it is the one thing */
.editor .work .panel.card { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--glass-edge); box-shadow: var(--glass-hi), var(--shadow); padding: 1.25rem 1.35rem; }

/* --------------------------------------------------------- the glass
   Eden's layer: panes float over the painted world. The crown — a 2px
   meaning-gradient — is the pane's only color, worn where the meaning
   owns it. */

.panel {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); border-radius: 14px;
  padding: 1.25rem 1.35rem; margin: 0 0 1rem;
  box-shadow: var(--glass-hi), var(--shadow);
}
.panel > h3:first-child { margin-top: 0; }
.panel.armed { border-color: var(--line2); outline: 1px solid var(--line2); outline-offset: 0; }
.panel.quiet { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line-soft); }

[data-meaning] > .panel::after, .panel[data-meaning]::after {
  content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
  border-radius: 0 0 2px 2px; background: var(--g-mean, none);
}
[data-meaning="seat"] { --g-mean: var(--g-seat); }
[data-meaning="offer"] { --g-mean: var(--g-offer); }
[data-meaning="grant"] { --g-mean: var(--g-grant); }
[data-meaning="care"] { --g-mean: var(--g-care); }
[data-meaning="body"] { --g-mean: var(--g-body); }
[data-meaning="work"] { --g-mean: var(--g-work); }

/* the meaning dot: the crown's small form, beside a row's name */
.meaning-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--g-mean, var(--line2)); flex: none; }

/* --------------------------------------------------- the claim card
   One geometry for every ruling this body makes — seating, revoking,
   registering, signing, closing a return, pressing a remembering. Seven
   fields, and the same seven every time: the act, what becomes true,
   from, under, bounds, what refusing costs, and the press.
 *
 * The card is the rendering only. The gate renders it, the surface arms
 * it, and a hand rules it — so arming and ruling live on the surface
 * holding the card and never inside it.
 *
 * Three lamps say where the act stands, because "nothing has been
 * written yet" should be a thing a person can see rather than a thing
 * they are promised. */

.claim {
  position: relative; overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); border-radius: 14px;
  box-shadow: var(--glass-hi), var(--shadow);
  margin: 0 0 1rem;
}
.claim::after {
  content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
  border-radius: 0 0 2px 2px; background: var(--g-mean, none); opacity: 0.85;
}
.claim .act-strip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--u);
  height: 2.5rem; padding: 0 calc(var(--u) * 1.4);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--hand); font-size: var(--s00);
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.claim .act-strip .act { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.claim .act-strip .kind { color: var(--faint); flex: none; }

/* the three motions, drawn as three */
.claim .motions {
  display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  padding: 0.55rem calc(var(--u) * 1.4); border-bottom: 1px solid var(--line-soft);
}
.claim .motions .motion { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.claim .motions .lamp { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--line2); }
.claim .motions .motion.on .lamp { background: var(--live); }
.claim .motions .motion span { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.claim .motions .motion.on span { color: var(--ink); }
.claim .motions .rendering { margin-left: auto; font-family: var(--hand); font-size: var(--s00); color: var(--faint); overflow: hidden; text-overflow: ellipsis; }

.claim .fields { padding: calc(var(--u) * 1.4); }
.claim .becomes { margin: 0 0 calc(var(--u) * 1.2); font-size: var(--s3); line-height: 1.45; color: var(--ink); max-width: 52ch; }
.claim .pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * 1.2);
  border-bottom: 1px solid var(--line-soft); margin-bottom: calc(var(--u) * 1.2);
}
.claim .pair p { margin: 0; font-size: var(--s1); line-height: 1.55; color: var(--dim); }
.claim .pair p.hand { font-size: var(--s0); }
.claim .cost { border-left: 2px solid var(--line2); padding: 0.15rem 0 0.15rem calc(var(--u)); max-width: 52ch; }
.claim .cost p { margin: 0; font-size: var(--s1); line-height: 1.55; color: var(--dim); }

/* bounds, and the sweep: where the act seats, and everything it touches */
.claim .bounds { border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: calc(var(--u) * 1.2); }
.claim .bounds .b { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; border-bottom: 1px solid var(--line-soft); }
.claim .bounds .b:last-child { border-bottom: 0; }
.claim .bounds .b .k { padding: 0.4rem 0 0.4rem 0.8rem; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.claim .bounds .b .v { padding: 0.4rem 0.8rem 0.4rem 0; font-family: var(--hand); font-size: var(--s0); line-height: 1.5; color: var(--dim); word-break: break-all; }

/* the note: what is true right now, and who the press belongs to */
.claim .note {
  display: flex; align-items: center; gap: 0.6rem;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 1.4);
  border-top: 1px solid var(--line-soft);
  font-family: var(--hand); font-size: var(--s00);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.claim .note .lamp { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--line2); }
.claim .note .said { color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.claim .note .gap { flex: 1; }
.claim .note .whose { flex: none; }
/* inside a card an honest-empty keeps the voice and drops the frame: the
   card is already the box, and a box inside a box reads as a second thing */
.claim .fields .honest-empty { border: 0; padding: 0 0 0.5rem; margin: 0 0 calc(var(--u) * 1.2); text-align: left; font-size: var(--s1); max-width: 52ch; }
.claim.armed { border-color: var(--line2); }
.claim.armed .note .lamp { background: var(--stale-ink); }
.claim.armed .note .said { color: var(--ink); }
.claim.ruled .note .lamp { background: var(--live); }

/* the label above a field: the identity's quiet caption voice */
.claim .fields .mono-label { display: block; color: var(--faint); margin-bottom: 0.3rem; }

/* Arm and Rule never occupy the same place */
.ritual { display: flex; gap: 3.5rem; align-items: flex-start; margin-top: 1rem; flex-wrap: wrap; }
.ritual > div { min-width: 8rem; }
.claim .ritual { margin: 0; padding: 0 calc(var(--u) * 1.4) calc(var(--u) * 1.2); }

.difference {
  font-family: var(--hand); font-size: var(--s0); line-height: 1.55;
  background: var(--fill); color: var(--ink);
  padding: 0.85rem 1rem; border-radius: var(--radius);
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  margin: 0.75rem 0 0;
}

/* a place ready, never a person's omission. Set left, at reading size, in
   a hairline frame that says "here" without saying "missing" — a centred
   box reads as a drop target, and a dashed one as a form nobody filled. */
.honest-empty {
  color: var(--dim); font-size: var(--s2); line-height: 1.55;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem 1.6rem; margin: 1rem 0; max-width: var(--measure);
  text-align: left; text-wrap: pretty;
}
/* when the honest-empty is the room — nothing listed, nothing to press —
   it leads at the lede's size, because it is the room's one truth */
.editor .work > .honest-empty:first-child, .editor .work > p.dim:first-child + .honest-empty { font-size: var(--s3); padding: 2rem 1.8rem; }

.refusal { color: var(--alarm); border-left: 2px solid var(--alarm); padding: 0.35rem 0 0.35rem 1rem; margin: 1rem 0; }

/* the readings: fresh · stale · unreachable — always mark and word */
.reading-stale { color: var(--stale-ink); background: var(--stale-wash); border-radius: 999px; padding: 0.1rem 0.55rem; font-family: var(--hand); font-size: var(--s0); }
.reading-unreachable { color: var(--alarm); font-family: var(--hand); font-size: var(--s0); }

/* ----------------------------------------------------------------- rows */

.rows { display: flex; flex-direction: column; gap: 0.5rem; }
.row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; }
.row .what { min-width: 0; }
.row .what .name { font-family: var(--hand); font-size: var(--s0); color: var(--dim); word-break: break-all; }
.row .what .says { color: var(--dim); font-size: var(--s1); }

/* the walk: depth on the page is depth in the graph */
.row[data-depth="1"] { margin-left: 1.25rem; }
.row[data-depth="2"] { margin-left: 2.5rem; }
.row[data-depth="3"] { margin-left: 3.75rem; }

table { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1.5rem; font-size: var(--s1); }
th, td { text-align: left; padding: 0.5rem 1rem 0.5rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { color: var(--faint); }
td.hand { font-family: var(--hand); font-size: var(--s0); word-break: break-all; }

/* --------------------------------------------------------------- lenses */

.lenses { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem; }
.lens-group { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.lens-group > span { font-size: var(--s0); color: var(--faint); margin-right: 0.15rem; }
.lens-group button { padding: 0.25rem 0.7rem; font-size: var(--s00); }

/* ------------------------------------------------------------ front door
   The one surface that is not a studio. A stranger holds no joints, so no
   meaning has earned a colour yet: this whole surface is monochrome, and
   the rainbow begins only once someone is inside and something means
   something to them.
 *
 * Four stations flank one screen, two per side, the screen optically
 * centred. The stations never move. The screen is set once by its tallest
 * filling and never resizes — every filling lives in the same cell, and the
 * hidden ones are what hold the height. Switching is opacity, nothing else,
 * because nothing about the layout is happening.
 *
 * The one pane on this surface keeps the softer 28px cut. A studio holds
 * dozens of panes and needs them to read as instruments set into one
 * surface; this holds exactly one, for exactly one visitor. */

.door { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 1.5); }
.door .ring {
  display: grid; grid-template-columns: auto minmax(0, 34rem) auto;
  grid-template-rows: auto auto auto; gap: 0 calc(var(--u) * 1.5);
  align-items: start;
}
.door .head { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; margin-bottom: calc(var(--u) * 2); }
/* the lede is where a stranger learns what Eden is. It is set at body size,
   not caption size: it is the one sentence this surface is for. */
.door .head .lede { font-size: var(--s2); line-height: 1.55; color: var(--dim); text-align: center; max-width: 32rem; margin: 0; text-wrap: pretty; }
.door .stations { display: flex; flex-direction: column; gap: var(--u); align-self: center; }
.door .stations.left { grid-column: 1; grid-row: 2; }
.door .stations.right { grid-column: 3; grid-row: 2; }
.door .stations button {
  width: 6.6rem; height: 6.6rem; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid var(--line2); border-radius: 14px;
  background: transparent; color: var(--dim);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.door .stations button:hover { border-color: var(--ink); color: var(--ink); }
.door .stations button[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.door .stations button .name { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.12em; text-transform: uppercase; }

/* the screen: one pane, one size, forever */
.door .screen {
  grid-column: 2; grid-row: 2; width: 100%; overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); border-radius: 28px;
  box-shadow: var(--glass-hi), var(--shadow);
}
.door .screen > .strip { padding: 0 calc(var(--u) * 1.6); }
.door .fillings { display: grid; padding: calc(var(--u) * 1.6); }
.door .filling {
  grid-area: 1 / 1; align-self: start;
  display: grid;
  grid-template-rows: var(--band-say) var(--band-work) var(--band-act) var(--band-note);
  gap: var(--u);
  transition: opacity 240ms cubic-bezier(.2, .7, .2, 1);
}
/* the hidden fillings are what hold the height, so none of them may be gone */
.door .filling[aria-hidden="true"] { visibility: hidden; opacity: 0; pointer-events: none; }

.door .say { margin: 0; font-size: var(--s1); line-height: 1.55; color: var(--dim); text-align: center; align-self: start; }
.door .work { align-self: start; overflow: hidden; }
.door .act { align-self: start; }
.door .act button { width: 100%; }
.door .note { margin: 0; font-size: var(--s0); line-height: 1.5; color: var(--faint); text-align: center; align-self: start; }

/* one field at a time, and it begins where every other station's does */
.door .gate > div[hidden] { display: none; }
.door .gate label { margin: 0 0 0.3rem; }
.door .note .alarm { color: var(--alarm); }
.door .note button { margin-left: 0.4rem; padding: 0; border: 0; background: none; color: var(--dim); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.door .note button:hover { color: var(--ink); }
.door .work input, .door .work textarea { max-width: none; }
.door .work label { margin-top: 0; }
/* the ask fills its band rather than sitting in it, because what a person
   is writing there is longer than a code */
.door .work textarea { min-height: 0; height: calc(var(--band-work) - 1.7rem); resize: none; }

/* what stands: two columns of counts, sized to fill the work band exactly */
.door .counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--u) * 2); }
.door .counts .c { display: flex; align-items: baseline; justify-content: space-between; gap: var(--u); height: calc(var(--band-work) / 3); border-bottom: 1px solid var(--line-soft); }
.door .counts .c .k { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.door .counts .c .n { font-family: var(--hand); font-size: var(--s1); font-variant-numeric: tabular-nums; color: var(--ink); }
.door .counts .c .n.nil { color: var(--faint); }
.door.stale .counts .c .n, .door.stale .counts .c .n.nil { color: var(--stale-ink); }
.door .foot-note { grid-column: 2; grid-row: 3; margin: calc(var(--u) * 1.5) 0 0; text-align: center; }

@media (max-width: 58rem) {
  .door .ring { grid-template-columns: minmax(0, 34rem); }
  .door .head, .door .screen, .door .foot-note { grid-column: 1; }
  .door .stations { grid-column: 1; flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .door .stations.left { grid-row: 2; }
  .door .screen { grid-row: 3; }
  .door .stations.right { grid-row: 4; margin-top: var(--u); }
  .door .foot-note { grid-row: 5; }
  .door .stations button { width: 5.4rem; height: 5.4rem; }
}

.door-mark {
  font-size: var(--s3); font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 0.25rem;
}
.stands { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin: 1rem 0 2rem; }
.stands .cell { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 0.9rem; background: var(--raised); }
.stands .cell .n { font-family: var(--hand); font-size: var(--s4); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stands .cell .k { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.3rem; color: var(--faint); }
.stands .cell .s { font-size: var(--s0); color: var(--dim); margin-top: 0.4rem; line-height: 1.45; }
.stands .cell.nil .n { color: var(--faint); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2rem; }

hr { border: 0; border-top: 1px solid var(--line-soft); margin: 2.5rem 0; }

/* ------------------------------------------------------------- the panel
   the person's own organ: a glass drawer, identical on every surface.
   It travels with the bond and stores nothing. */
/* the panel is opened from the stem, so nothing floats over the work: a
   control that hovers above a surface eventually lands on something */
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(340px, 92vw); overflow-y: auto;
  padding: 1rem 1.25rem 4rem;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-left: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--shadow);
  z-index: 30;
}
.drawer h2 { font-size: var(--s3); }
.drawer .offer h4 { font-size: var(--s2); margin: 0 0 .25rem; }
.drawer .turns > div { border-top: 1px solid var(--line-soft); padding-top: .5rem; margin-top: .5rem; }
.card.armed { outline: 1px solid var(--line2); outline-offset: 2px; }

/* ------------------------------------------------- motion, under the law
   the pointer asks · the work needs a decision · something true changed.
   Nothing loops, nothing pulses, nothing takes focus. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}