/* Eden's three faces, served from Eden itself: no visitor's page calls another host for them. SIL Open Font License 1.1, see fonts/. */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/schibsted-grotesk-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/schibsted-grotesk-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/schibsted-grotesk-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/schibsted-grotesk-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/schibsted-grotesk-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/schibsted-grotesk-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Red Hat Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/red-hat-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Red Hat Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/red-hat-mono-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Red Hat Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/red-hat-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Red Hat Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/red-hat-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Red Hat Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/red-hat-mono-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Red Hat Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/red-hat-mono-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/cormorant-garamond-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/cormorant-garamond-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url(fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url(fonts/cormorant-garamond-latin-ext-300-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* The dress, worn by the surface. Two mirrored worlds, one scale, one unit.
   The seal is the other world. Chrome is glass; content stands flat. Meaning
   is said in words, never in colour alone. Nothing moves unless something
   true changed. The primitives are inherited from the previous body by the
   founder's choice, pressed as such on 2026-09-22. */

:root {
  --paper: #EEEDEB; --raised: #F9F8F6; --fill: #E4E2DF;
  --ink: #18171A; --dim: #4B4B51; --faint: #66666C;
  --line: rgba(30, 26, 28, 0.14); --line-soft: rgba(30, 26, 28, 0.07); --line2: rgba(30, 26, 28, 0.26);
  --accent: #18171A; --accent-ink: #F9F8F6;
  --alarm: #9E3B2E; --stale-ink: #7A5A10; --stale-wash: rgba(122, 90, 16, 0.07);
  --live: #1C8A52; --live-wash: rgba(28, 138, 82, 0.10);
  --glass: rgba(255, 253, 250, 0.58); --glass-deep: rgba(245, 244, 241, 0.86); --glass-edge: rgba(20, 23, 26, 0.10); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --blur: blur(22px) saturate(1.2); --shadow: 0 24px 60px rgba(30, 26, 28, 0.12);
  --wash1: radial-gradient(1100px 520px at 76% 8%, rgba(48, 40, 38, 0.08), transparent 62%);
  --wash2: radial-gradient(800px 480px at 8% 96%, rgba(48, 40, 38, 0.05), transparent 58%);
  --read: 'Schibsted Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --hand: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --name: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --s00: 0.694rem; --s0: 0.833rem; --s1: 0.913rem; --s2: 1rem; --s3: 1.2rem; --s4: 1.44rem; --s5: 2.074rem;
  --measure: 68ch; --radius: 12px; --seal: 12px 4px 12px 4px; --seal-sm: 8px 3px 8px 3px;
  --u: 1rem; --g: 1rem; --g2: 1.5rem; --column: 46rem; --strip: 2.75rem; --spine: 4.4rem; --library: 18rem; --rail: 1.5rem; --aside: clamp(18rem, 22vw, 26rem); --gold: #c9a84c; --gold-soft: #e6d39a; --foot: 3.6rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #111113; --raised: #1A1A1D; --fill: #252428; --ink: #EFEEEC; --dim: #ADACB0; --faint: #9E9DA3;
  --line: rgba(239, 236, 232, 0.18); --line-soft: rgba(239, 236, 232, 0.115); --line2: rgba(239, 236, 232, 0.28);
  --accent: #EFEEEC; --accent-ink: #111113; --alarm: #E07B6C; --stale-ink: #D3A64A; --stale-wash: rgba(211, 166, 74, 0.09);
  --live: #4FBF7F; --live-wash: rgba(79, 191, 127, 0.10);
  --glass: rgba(255, 255, 255, 0.05); --glass-deep: rgba(20, 20, 22, 0.86); --glass-edge: rgba(255, 255, 255, 0.14); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --blur: blur(26px) saturate(1.45); --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  --wash1: radial-gradient(1100px 520px at 76% 8%, rgba(239, 230, 222, 0.065), transparent 62%);
  --wash2: radial-gradient(800px 480px at 8% 96%, rgba(239, 230, 222, 0.04), transparent 58%);
  color-scheme: dark;
}}
:root[data-theme="dark"] {
  --paper: #111113; --raised: #1A1A1D; --fill: #252428; --ink: #EFEEEC; --dim: #ADACB0; --faint: #9E9DA3;
  --line: rgba(239, 236, 232, 0.18); --line-soft: rgba(239, 236, 232, 0.115); --line2: rgba(239, 236, 232, 0.28);
  --accent: #EFEEEC; --accent-ink: #111113; --alarm: #E07B6C; --stale-ink: #D3A64A; --stale-wash: rgba(211, 166, 74, 0.09);
  --live: #4FBF7F; --live-wash: rgba(79, 191, 127, 0.10);
  --glass: rgba(255, 255, 255, 0.05); --glass-deep: rgba(20, 20, 22, 0.86); --glass-edge: rgba(255, 255, 255, 0.14); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --blur: blur(26px) saturate(1.45); --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  --wash1: radial-gradient(1100px 520px at 76% 8%, rgba(239, 230, 222, 0.065), transparent 62%);
  --wash2: radial-gradient(800px 480px at 8% 96%, rgba(239, 230, 222, 0.04), transparent 58%);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; height: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--read); font-size: var(--s2); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--wash1), var(--wash2); }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 500; margin: 0; text-wrap: balance; }
h1 { font-size: var(--s5); letter-spacing: -0.015em; } h2 { font-size: var(--s4); } h3 { font-size: var(--s3); }
p { margin: 0 0 0.8rem; max-width: var(--measure); text-wrap: pretty; }
a { color: var(--ink); text-decoration-thickness: 1px; text-decoration-color: var(--line2); text-underline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.dim { color: var(--dim); } .faint { color: var(--faint); font-size: var(--s1); }
.hand { font-family: var(--hand); font-size: var(--s0); font-variant-numeric: tabular-nums; }
.label { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--faint); }
code { font-family: var(--hand); font-size: 0.92em; }
[hidden] { display: none !important; }

/* controls */
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; }
button:hover { border-color: var(--ink); }
button.press { 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; white-space: nowrap; }
button.press:hover { opacity: 0.92; }
button.press.decline { background: transparent; color: var(--ink); border-color: var(--ink); }
button.press.ghost, button.press.ghost:hover { background: transparent; color: var(--faint); border-color: var(--line2); cursor: default; opacity: 1; }
button.choice { color: var(--dim); min-height: 2.2rem; }
button.choice:hover { color: var(--ink); }
button.choice[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.choice.faint { font-size: var(--s00); color: var(--faint); border-color: var(--line); }
button.choice.faint:hover { color: var(--dim); border-color: var(--line2); }
button:disabled, button[aria-disabled="true"] { cursor: default; }
button.choice:disabled { opacity: 0.55; }
button.choice:disabled:hover { color: inherit; border-color: var(--line2); }
button.choice[aria-pressed="true"]:disabled:hover { color: var(--paper); border-color: var(--ink); }
input:disabled, textarea:disabled { opacity: 0.55; }
button, .lib-row, .crumb, .pick, .dh { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, opacity 120ms ease; }
button.press:active:not(.ghost) { transform: translateY(1px); }
label { display: block; margin: 0 0 0.3rem; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.hint { font-size: var(--s0); color: var(--faint); line-height: 1.5; max-width: var(--measure); text-wrap: pretty; }
input:not([type]), input[type="text"], input[type="password"], input[type="number"], textarea { font: inherit; font-size: var(--s1); font-family: var(--hand); width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--line2); border-radius: var(--seal); background: transparent; color: var(--ink); caret-color: var(--ink); }
input:focus, textarea:focus { border-color: var(--ink); outline: none; }
textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
.field { display: grid; gap: 0.25rem; max-width: 34rem; align-content: start; }
.field .hint { margin-top: 0.1rem; }
/* A picker beneath a field: what the door already knows, narrowed as you type; the lit row is the one Enter takes. */
.pick[role="listbox"] { margin-top: 0.3rem; background: var(--raised); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.3rem; max-height: 14rem; overflow: auto; display: flex; flex-direction: column; }
.pick[role="listbox"] .prow { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; width: 100%; text-align: left; border: 0; border-radius: 6px; background: transparent; padding: 0.35rem 0.55rem; font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; min-height: 0; }
.pick[role="listbox"] .prow:hover, .pick[role="listbox"] .prow.lit { background: var(--fill); }
.pick[role="listbox"] .prow .v { font-family: var(--hand); font-size: var(--s1); flex: 0 0 auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick[role="listbox"] .prow .n { font-size: var(--s00); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; margin-left: auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u); }
@media (max-width: 40rem) { .row2 { grid-template-columns: 1fr; } }
.opts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; align-content: flex-start; }

/* states: a word in a dress */
.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-live { border: 1px solid var(--line2); background: var(--live-wash); } .state-live::before { background: var(--live); }
.state-held { border: 1px solid var(--line2); color: var(--stale-ink); background: var(--stale-wash); } .state-held::before { background: var(--stale-ink); }
.state-down { border: 1px dashed var(--line2); color: var(--dim); } .state-down::before { box-shadow: inset 0 0 0 1px var(--dim); }
.state-plain { border: 1px solid var(--line2); } .state-plain::before { content: none; }
.refusal { color: var(--alarm); border-left: 2px solid var(--alarm); padding: 0.35rem 0 0.35rem 1rem; max-width: var(--measure); }
.refusal p { margin: 0; }
.honest-empty { color: var(--dim); font-size: var(--s2); line-height: 1.55; border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.4rem; max-width: var(--measure); text-wrap: pretty; }
.note { border-left: 2px solid var(--line2); padding: 0.15rem 0 0.15rem 1rem; max-width: var(--measure); }
.note p { color: var(--dim); font-size: var(--s1); line-height: 1.6; margin: 0; }
.note .rule { display: block; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.2rem; }

/* the topbar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: var(--u); height: var(--strip); padding-inline: 1rem; border-bottom: 1px solid var(--line-soft); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-hi); font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.14em; text-transform: uppercase; }
.topbar .name { color: var(--ink); font-weight: 500; }
.topbar .where { color: var(--faint); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar #top-tally { flex: 0 4 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar #world { flex: none; }
.topbar .gap { flex: 1; }
@media (max-width: 48rem) { .topbar .where, .topbar #top-tally { display: none; } }

/* the path: where you stand, each part a seal to climb; with a rail beside, the strip names the level you stand on and the rail climbs */
@media not all and (max-width: 60rem) { .strip.path .crumb:not([aria-current="true"]), .strip.path .sep { display: none; } .strip.path .crumb[aria-current="true"] { padding-left: 0; max-width: none; } }
.strip.path { justify-content: flex-start; gap: 0.15rem; overflow: hidden; flex-wrap: wrap; height: auto; min-height: var(--strip); padding-block: 0.45rem; row-gap: 0; }
.strip.path .crumb { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0.15rem 0.35rem; border: 0; border-radius: 4px; background: transparent; color: var(--faint); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem; }
.strip.path .crumb:hover { color: var(--ink); background: var(--fill); }
.strip.path .crumb[aria-current="true"] { color: var(--ink); font-weight: 500; cursor: default; background: transparent; }
.strip.path .sep { color: var(--line2); }
.strip.path .who { margin-left: auto; color: var(--faint); flex: none; }
.lib-row .body .h.dim { color: var(--dim); }

/* the aside: what stands beside the one thing, in drawers */
.drawers-host { padding: 0.8rem 0.9rem 2rem; }
.drawers-host .drawers { border: 0; background: transparent; border-radius: 0; gap: 0.6rem; }
.drawers-host .drawer { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--raised); overflow: hidden; }
.drawers-host input:not([type]), .drawers-host input[type="text"] { font-size: var(--s0); padding: 0.5rem 0.7rem; }
.drawers-host .ask p { font-size: var(--s0); }
.drawers-host .facts .f { grid-template-columns: 7rem minmax(0, 1fr); gap: 0.6rem; padding: 0.4rem 0; }
.drawers-host .facts .f .v { font-size: var(--s0); }
.drawers-host .drawer > .dh { grid-template-columns: minmax(0, 1fr) auto; padding: 0.55rem 0.85rem; }
.drawers-host .drawer .t { font-size: var(--s1); }
.drawers-host .drawer .dc { padding: 0 0.85rem 0.8rem; gap: 0.45rem; }
.drawers-host .lines .ln { padding: 0.33rem 0; }
.drawers-host .drawers { gap: 0.5rem; }
/* A document widget: headings at the aside's scale, a bounded height, and read whole in the editor. */
.drawers-host .drawer .dc .prose { max-height: 22rem; overflow: auto; padding-right: 0.25rem; }
.drawers-host .drawer .dc .prose h1 { font-size: var(--s2); margin: 0 0 0.4rem; }
.drawers-host .drawer .dc .prose h2 { font-size: var(--s1); margin: 0.8rem 0 0.3rem; color: var(--ink); }
.drawers-host .drawer .dc .prose h3 { font-size: var(--s0); margin: 0.6rem 0 0.25rem; }
.drawers-host .drawer .dc .prose ul, .drawers-host .drawer .dc .prose ol { padding-left: 1.1rem; }
.drawers-host .drawer .dc .prose li { margin-bottom: 0.15rem; }
.drawers-host .expand { display: flex; justify-content: flex-end; }
.drawers-host .expand a.choice { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; min-height: 0; color: var(--faint); border: 1px solid var(--line); border-radius: var(--seal-sm); }
.drawers-host .expand a.choice:hover { color: var(--ink); border-color: var(--ink); }
.drawers-host .drawer .dc .ln { font-size: var(--s0); }
.drawers-host .drawer .dc p { font-size: var(--s0); }
.drawers-host .empty { font-size: var(--s0); color: var(--faint); }
/* A pick keeps one line: whichever half is longer gives way first, and neither is cut while there is room. */
.drawers-host .drawer .dc .pick { cursor: pointer; border: 0; background: transparent; text-align: left; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; padding: 0.35rem 0; border-radius: 0; width: 100%; min-width: 0; display: flex; gap: 0.6rem; align-items: baseline; border-bottom: 1px solid var(--line-soft); }
.drawers-host .drawer .dc .pick > span:first-child { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawers-host .drawer .dc .pick:hover { color: var(--ink); }
.drawers-host .drawer .dc .pick.on { color: var(--ink); font-weight: 500; }
.drawers-host .drawer .dc .pick .p { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; flex: 0 0 auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; }

/* the shell: spine, library, editor, foot */
.shell { display: grid; grid-template-columns: var(--spine) var(--library) minmax(0, 1fr) var(--aside); grid-template-rows: minmax(0, 1fr) var(--foot); height: calc(100% - var(--strip)); }
.organ { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.o-spine { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line-soft); align-items: center; padding-top: 0.5rem; gap: 2px; position: relative; }
.o-library { grid-column: 2; grid-row: 1; border-right: 1px solid var(--line-soft); }
.o-editor { grid-column: 3; grid-row: 1; }
.o-aside { grid-column: 4; grid-row: 1; border-left: 1px solid var(--line-soft); }
/* The rails: the library and beside each carry a thin rail at their inner edge, with a fold and, on the library's, the path as handles. */
.o-library { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); grid-template-rows: auto minmax(0, 1fr); }
.o-library > .strip { grid-column: 1; grid-row: 1; }
.o-library > .lib { grid-column: 1; grid-row: 2; }
.o-library > .rail { grid-column: 2; grid-row: 1 / 3; }
.o-aside { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.o-aside > .rail { grid-column: 1; grid-row: 1 / 3; }
.o-aside > .strip { grid-column: 2; grid-row: 1; }
.o-aside > .work { grid-column: 2; grid-row: 2; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.45rem 0 0.6rem; min-width: 0; min-height: 0; overflow: hidden; }
.fold { flex: none; width: 1.1rem; height: 1.1rem; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: transparent; color: var(--faint); font-family: var(--read); font-size: 0.9rem; line-height: 1; letter-spacing: 0; text-transform: none; display: grid; place-items: center; }
.fold:hover { color: var(--ink); border-color: var(--ink); }
.fold > span { display: block; transition: transform 160ms ease; transform: translateY(-1px); }
.shell[data-library="shut"] #fold-lib > span, .shell[data-beside="shut"] #fold-aside > span { transform: translateY(-1px) rotate(180deg); }
.handles { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-height: 0; overflow: hidden; }
.handle { flex: none; writing-mode: vertical-rl; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); background: transparent; border: 1px solid var(--line2); border-radius: var(--seal-sm); padding: 0.55rem 0.12rem; max-height: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.handle:hover { color: var(--ink); border-color: var(--ink); }
.handle[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); cursor: default; }
.shell[data-beside="open"] .rail-name { display: none; }
.rail-name { writing-mode: vertical-rl; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 0.2rem; }
/* Shut: the organ is its rail. */
.shell[data-library="shut"] { grid-template-columns: var(--spine) var(--rail) minmax(0, 1fr) var(--aside); }
.shell[data-beside="shut"] { grid-template-columns: var(--spine) var(--library) minmax(0, 1fr) var(--rail); }
.shell[data-library="shut"][data-beside="shut"] { grid-template-columns: var(--spine) var(--rail) minmax(0, 1fr) var(--rail); }
.shell[data-library="shut"] .o-library { grid-template-columns: var(--rail); }
.shell[data-library="shut"] .o-library > .strip, .shell[data-library="shut"] .o-library > .lib { display: none; }
.shell[data-library="shut"] .o-library > .rail { grid-column: 1; }
.shell[data-library="shut"] .whom { width: auto; padding-right: 1.2rem; }
.shell[data-beside="shut"] .o-aside { grid-template-columns: var(--rail); }
.shell[data-beside="shut"] .o-aside > .strip, .shell[data-beside="shut"] .o-aside > .work { display: none; }
.o-foot { grid-column: 1 / 5; grid-row: 2; flex-direction: row; align-items: center; gap: var(--u); border-top: 1px solid var(--line-soft); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-hi); padding-bottom: env(safe-area-inset-bottom, 0px); }
.strip { height: var(--strip); flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-inline: 0.9rem; border-bottom: 1px solid var(--line-soft); font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.strip .name { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.strip .reading { color: var(--faint); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.o-editor > .strip .name { font-family: var(--read); font-size: var(--s2); letter-spacing: 0; text-transform: none; }
.tile { width: 3.4rem; height: 3rem; border: 0; padding: 0; border-radius: var(--seal-sm); display: flex; align-items: center; justify-content: center; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.04em; color: var(--dim); background: transparent; }
.tile:hover { color: var(--ink); border: 0; }
.tile[aria-pressed="true"] { background: var(--fill); color: var(--ink); }
/* The press tile carries what waits on the hand anywhere: a count, as the tabs' counts beside. */
.tile { position: relative; }
.tile .n { position: absolute; top: 0.2rem; right: 0.25rem; font-family: var(--hand); font-size: var(--s00); line-height: 1; letter-spacing: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.3rem; min-width: 1rem; text-align: center; }
.lib { overflow: auto; flex: 1; min-height: 0; }
.lib, .work, .o-aside, .table-wrap, textarea, pre { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.lib-row { display: grid; grid-template-columns: 2px minmax(0, 1fr); border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; background: transparent; padding: 0; width: 100%; text-align: left; font: inherit; letter-spacing: 0; text-transform: none; border-radius: 0; color: inherit; }
.lib-row .bar { background: transparent; }
.lib-row .body { padding: 0.55rem 0.9rem; font-size: var(--s1); color: var(--dim); line-height: 1.45; min-width: 0; }
.lib-row .body .h { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-row .body .h.hand { font-family: var(--hand); font-size: var(--s0); }
.lib-row .body .s { display: block; font-size: var(--s0); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-row:not(.quiet):not(.on):hover { background: var(--line-soft); }
.lib-row:focus-visible, .drawer > .dh:focus-visible, .drawers-host .pick:focus-visible { outline-offset: -2px; }
.lib-row.on { background: var(--fill); } .lib-row.on .bar { background: var(--ink); } .lib-row.on .body { color: var(--ink); }
.lib-row.quiet { cursor: default; } .lib-row.quiet:hover { border-color: var(--line-soft); }
.lib-head { padding: 0.6rem 0.9rem 0.25rem; }
.lib-note { padding: 0.8rem 0.9rem; font-size: var(--s0); color: var(--faint); line-height: 1.5; border-bottom: 1px solid var(--line-soft); }
.work { flex: 1; min-height: 0; overflow: auto; padding: 1.2rem 1.4rem 2.5rem; }
.stack { display: grid; gap: 1.1rem; max-width: 62rem; }
.whom { width: calc(var(--spine) + var(--library)); flex: none; height: 100%; display: flex; align-items: center; padding-inline: 0.9rem; 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); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.said { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.said.alarm { color: var(--alarm); }
.said.live { color: var(--ink); }
.o-foot .gap { flex: 1; }
.o-foot .acts { padding-inline: 1rem; display: flex; gap: 0.6rem; align-items: center; flex: none; }

/* panes of content: flat, raised, no glass */
.panel { background: var(--raised); border: 1px solid var(--line-soft); border-radius: 14px; padding: 1.1rem 1.25rem; }
.panel > h3:first-child { margin-bottom: 0.6rem; }
.facts { display: flex; flex-direction: column; }
.facts .f { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--u); align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); }
.facts .f:last-child { border-bottom: 0; }
.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; }
.facts .f .v.hand { font-size: var(--s0); }
@media (max-width: 34rem) { .facts .f { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }
.stands { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
.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.nil .n { color: var(--faint); }

/* the drawer: a layer read at depth */
.drawers { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--raised); overflow: hidden; }
.drawer { border-top: 1px solid var(--line-soft); } .drawer:first-child { border-top: 0; }
.drawer > .dh { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: baseline; width: 100%; padding: 0.8rem 1.1rem; background: transparent; border: 0; border-radius: 0; text-align: left; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; cursor: pointer; }
.drawer > .dh:hover { background: var(--fill); }
.drawer .n { font-family: var(--hand); font-size: var(--s0); color: var(--faint); }
.drawer .t { font-size: var(--s3); color: var(--ink); }
.drawer .t small { font-family: var(--read); font-size: var(--s0); color: var(--faint); margin-left: 0.6rem; }
.drawer .where { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.drawer .where.out { color: var(--stale-ink); }
.drawer .dc { padding: 0 1.1rem 1.1rem 4.1rem; display: grid; gap: 0.8rem; }
.drawer .dc p { font-size: var(--s1); color: var(--dim); max-width: 62ch; margin: 0; }
.drawer[data-open="false"] .dc { display: none; }
@media (max-width: 48rem) { .drawer .dc { padding-left: 1.1rem; } .drawer > .dh { grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.5rem; } .drawer .t small { display: block; margin-left: 0; } }
.lines { display: flex; flex-direction: column; }
.lines .ln { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--s1); }
.lines .ln:last-child { border-bottom: 0; }
.lines .ln .p { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }

/* the dial and the measure */
.dial { display: grid; gap: 0.5rem; max-width: 34rem; }
.dial .opts button { flex: 1; }
.dial .say { font-size: var(--s0); color: var(--faint); line-height: 1.5; }

/* the ledger */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; 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 { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--faint); white-space: nowrap; }
td.hand { font-family: var(--hand); font-size: var(--s0); white-space: nowrap; }
td.alarm { color: var(--alarm); }

/* prose read from a ground: the source, a mind, a remembering */
.prose { max-width: var(--measure); }
.prose h1 { font-size: var(--s4); margin: 0 0 0.6rem; }
.prose h2 { font-size: var(--s3); margin: 1.6rem 0 0.5rem; }
.prose h3 { font-size: var(--s2); margin: 1.2rem 0 0.4rem; color: var(--dim); }
.prose p { margin: 0 0 0.8rem; }
.prose ul, .prose ol { margin: 0 0 0.8rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.25rem; }
.prose code { background: var(--fill); padding: 0 0.3em; border-radius: 3px; }
.prose pre { font-family: var(--hand); font-size: var(--s0); background: var(--fill); padding: 0.9rem 1rem; border-radius: var(--radius); overflow-x: auto; }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: 1.4rem 0; }
.prose blockquote { border-left: 2px solid var(--line2); margin: 0 0 0.8rem; padding-left: 1rem; color: var(--dim); }
pre.file { margin: 0; font-family: var(--hand); font-size: var(--s0); line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: var(--fill); border-radius: 14px; padding: 1.1rem 1.2rem; color: var(--ink); }

/* mid: beside stays a column, a step narrower, and the library rests on its rail unless it was opened here (eden.js) */
@media (max-width: 80rem) {
  /* The say box keeps the conversation's room: two lines of text area, and the attach seal and the hint share one line, the hint cut with an ellipsis rather than wrapping. */
  #say { min-height: 4rem; }
  .saybox { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.7rem; row-gap: 0.3rem; min-width: 0; }
  .saybox textarea { flex: 1 1 100%; }
  .saybox .attach { margin-top: 0; flex: 0 1 auto; min-width: 0; }
  .saybox .hint { flex: 1 1 14rem; min-width: 0; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* narrow: the shell becomes a page that scrolls; the spine and the foot stay */
@media (max-width: 60rem) {
  /* The viewport scrolls, never the body: a body that scrolls itself is what the sticky topbar, spine and foot would stick to, and it never moves. */
  html, body { height: auto; }
  body { overflow: visible; }
  .shell, .shell[data-library][data-beside] { height: auto; min-height: calc(100vh - var(--strip)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto; }
  /* No rails on a phone: the page scrolls, and nothing folds. */
  /* The library gives up its box: its path stands above the editor and its rows below it, so the thing you came for comes first. */
  .o-library { display: contents; }
  .o-aside { display: flex; }
  .o-library > .rail, .o-aside > .rail { display: none; }
  .o-spine::after { display: none; }
  .shell[data-library="shut"] .o-library > .strip, .shell[data-beside="shut"] .o-aside > .strip { display: flex; }
  .shell[data-library="shut"] .o-library > .lib, .shell[data-beside="shut"] .o-aside > .work { display: block; }
  .shell[data-beside="shut"] .o-aside { min-height: 0; }
  /* The six places share the width evenly, so none is cut at the edge. */
  .o-spine { grid-column: 1; grid-row: 1; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 0.35rem 0.5rem; gap: 0.2rem; overflow: hidden; position: sticky; top: var(--strip); z-index: 15; background: var(--paper); }
  .tile { width: auto; height: 2.4rem; padding-inline: 0.2rem; flex: 1 1 0; min-width: 0; }
  .o-library > .strip { grid-column: 1; grid-row: 2; }
  .o-library > .lib { grid-column: 1; grid-row: 4; border-top: 1px solid var(--line-soft); }
  .lib { overflow: visible; }
  .o-editor { grid-column: 1; grid-row: 3; }
  .o-aside { grid-column: 1; grid-row: 5; max-height: none; border-left: 0; border-top: 1px solid var(--line-soft); }
  /* In a session, what waits and what was kept are nearer than the library's rows: beside stands before them. */
  body.in-session .o-aside { grid-row: 4; }
  body.in-session .o-library > .lib { grid-row: 5; }
  .o-aside > .strip { display: flex; }
  .work { overflow: visible; padding: 1rem 1rem 2rem; }
  /* On a phone the page scrolls under the chrome, so its glass is deeper, and what was said stays legible over it. */
  .topbar, .o-foot { background: var(--glass-deep); }
  /* The foot carries what was said and the seals in one row while what was said fits beside them, and takes a second row only when it would be cut to nothing. The hand is named in the path strip above. */
  .o-foot { grid-column: 1; grid-row: 6; position: sticky; bottom: 0; z-index: 15; flex-wrap: wrap; row-gap: 0.35rem; height: auto; min-height: var(--foot); padding: 0.5rem var(--g) calc(0.5rem + env(safe-area-inset-bottom, 0px)); column-gap: 0.6rem; }
  .whom, .shell[data-library="shut"] .whom { display: none; }
  .said { flex: 1 1 9rem; padding-inline: 0; }
  .o-foot .gap { display: none; }
  .o-foot .acts { margin-left: auto; padding-inline: 0; flex-wrap: nowrap; gap: 0.4rem; }
  .o-foot button.press { padding-inline: 0.85rem; }
  /* The say box flows with the page here (the rule needs the weight to beat the base sticky), and the hint has its lines back: nothing sticks, so nothing is crowded. */
  .work .saybox { position: static; }
  .saybox .hint { white-space: normal; flex-basis: 100%; }
  #say { min-height: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; } }

/* the room: a conversation read from its branch */
.turns { display: grid; gap: 0.8rem; max-width: var(--measure); }
.turn { background: var(--raised); border: 1px solid var(--line-soft); border-radius: 14px; padding: 0.9rem 1.1rem; }
.turn.waiting { border-style: dashed; border-color: var(--line2); }
.turn.react { background: transparent; border-style: dotted; color: var(--faint); padding: 0.5rem 1.1rem; }
.react-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.react-chip { display: inline-flex; gap: 0.35rem; align-items: baseline; font-size: 0.9em; border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.05rem 0.55rem; }
.react-chip .g { font-size: 0.95em; filter: saturate(0.75) contrast(0.95); }
.react-chip.mind { border-style: dotted; }
.react-chip .n { color: var(--ink); font-family: var(--hand); font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; }
.react-chip .q { color: var(--faint); font-style: italic; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn { position: relative; }
.turn .react-open { opacity: 0.45; }
.turn:hover .react-open, .turn .react-open:focus { opacity: 1; }
.react-panel { position: absolute; right: 0.6rem; top: 2.2rem; z-index: 5; box-sizing: border-box; background: var(--raised); border: 1px solid var(--line2); border-radius: 12px; padding: 0.6rem; box-shadow: 0 8px 24px rgba(0,0,0,0.25); width: min(20rem, calc(100% - 1.2rem)); max-width: calc(100% - 1.2rem); }
.react-with { font-size: 0.85em; margin-bottom: 0.4rem; color: var(--ink); font-style: italic; }
.react-panel.inner { position: static; width: 100%; max-width: none; margin-top: 0.4rem; box-shadow: none; }
.inplace { position: relative; margin-top: 0.6rem; border: 1px solid var(--line2); border-radius: 12px; padding: 0.6rem; background: var(--raised); }
.inplace.say { border-color: var(--gold, #c9a84c); }
.inplace-text { width: 100%; box-sizing: border-box; border: 1px solid var(--line-soft); border-radius: 8px; background: transparent; color: var(--ink); padding: 0.4rem 0.6rem; font: inherit; resize: vertical; }
.inplace-foot { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.inplace-foot .gap { flex: 1; }
.react-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); gap: 0.05rem; }
.react-pick { border: 0; background: transparent; font-size: 1.05em; line-height: 1.7; cursor: pointer; border-radius: 8px; filter: saturate(0.72) contrast(0.95); opacity: 0.95; }
.react-pick:hover { filter: saturate(1); opacity: 1; }
.index-filter { margin: 0 0 0.5rem; gap: 0.25rem; }
.index-filter .choice { padding: 0.05rem 0.5rem; font-size: 0.8em; }
.react-ln .g { font-size: 1.05em; filter: saturate(0.8); }
.react-ln .n, .ln .n { font-family: var(--hand); font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.react-ln .q { font-style: italic; }
.react-pick:hover { background: var(--line-soft); }
.react-foot { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.react-any { width: 4rem; border: 1px solid var(--line-soft); border-radius: 999px; background: transparent; color: var(--ink); padding: 0.1rem 0.5rem; font-size: 0.9em; }
.turn details.workings { margin-top: 0.6rem; border-top: 1px dotted var(--line-soft); padding-top: 0.4rem; }
.turn details.workings > summary { cursor: pointer; list-style: none; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.turn details.workings > summary::-webkit-details-marker { display: none; }
.turn details.workings > summary::before { content: '\25B8'; display: inline-block; margin-right: 0.4rem; transition: transform 160ms ease; }
.turn details.workings[open] > summary::before { transform: rotate(90deg); }
.turn details.workings .proposes { margin-top: 0.4rem; }
.turn.react .prose { font-size: 0.92em; }
.turn .turn-h { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.4rem; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.turn .turn-h .who { color: var(--ink); font-weight: 500; }
.turn .turn-h .place { color: var(--faint); font-weight: 400; letter-spacing: 0.06em; }
.picker .row.sub { padding-left: 1.6rem; opacity: 0.85; }
.turn .turn-h .gap { flex: 1; }
.turn .turn-h .p { white-space: nowrap; }
.turn .proposes { border-left: 2px solid var(--line2); padding: 0.2rem 0 0.2rem 0.9rem; margin: 0 0 0.7rem; font-size: var(--s1); color: var(--dim); }
.turn .proposes .label { display: block; margin-bottom: 0.15rem; }
.turn .prose h1 { font-size: var(--s3); }
.turn .prose p:last-child, .turn .prose ul:last-child { margin-bottom: 0; }
textarea.author { min-height: 32rem; font-size: var(--s0); line-height: 1.6; width: 100%; max-width: none; }
#say { min-height: 5.5rem; }
.saybox { position: sticky; bottom: 0.6rem; background: var(--raised); padding: 0.6rem 0.7rem 0.6rem; border: 1px solid var(--line-soft); border-radius: var(--seal); box-shadow: 0 10px 28px -14px rgba(0,0,0,0.45), 0 1px 0 var(--line-soft); margin-top: 0.8rem; }
.saybox textarea { background: var(--paper); }
.saybox textarea { background: var(--raised); }
.attach { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.4rem; }
.attach input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.attach label.choice { cursor: pointer; display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0.35rem 0.7rem; margin: 0; letter-spacing: 0.08em; color: var(--dim); border: 1px solid var(--line2); border-radius: var(--seal-sm); transition: color 120ms ease, border-color 120ms ease; }
.attach label.choice:hover { color: var(--ink); border-color: var(--ink); }
.attach label.choice:has(+ input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip { font-family: var(--hand); font-size: var(--s00); color: var(--dim); border: 1px dashed var(--line2); border-radius: var(--seal); padding: 0.3rem 0.6rem; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.on { border-style: solid; color: var(--ink); }
.chip.busy { color: var(--accent); border-color: var(--accent); }
img.attached { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
a.choice { text-decoration: none; display: inline-flex; align-items: center; }
.work:has(.saybox) { padding-bottom: 0; }
.rings-table td.alarm { color: var(--alarm); }

/* a value shown once */
.panel.once { border: 1px dashed var(--line2); }
.value { font-family: var(--hand); font-size: var(--s1); word-break: break-all; user-select: all; background: var(--fill); border-radius: var(--radius); padding: 0.9rem 1rem; margin-top: 0.6rem; }
.ask { padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.ask:last-child { border-bottom: 0; }
.ask p { margin: 0 0 0.4rem; font-size: var(--s1); line-height: 1.5; }
.ask .opts { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: stretch; }
/* An ask's options read as the sentences they are; only drop stays a small seal. */
.ask .opts button.choice[data-answer] { font-family: var(--read); font-size: var(--s0); letter-spacing: 0; text-transform: none; text-align: left; line-height: 1.35; padding: 0.4rem 0.75rem; min-height: 2.2rem; color: var(--ink); border-color: var(--line); }
.ask .opts button.choice[data-answer]:hover { border-color: var(--ink); }
.ask .opts button.choice[data-drop] { align-self: center; }
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); }
.tab { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); background: transparent; border: 1px solid var(--line2); border-radius: var(--seal); padding: 0.3rem 0.7rem; min-height: 2.2rem; display: inline-flex; align-items: center; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-color: var(--ink); }
.tab.plus { padding: 0.35rem 0.6rem; min-width: 2rem; text-align: center; }
.turn.return { border-left: 2px solid var(--accent); }
.turn .asks { margin-top: 0.6rem; border-top: 1px dashed var(--line-soft); padding-top: 0.4rem; }
.prose.small { font-size: var(--s0); }
.lines .ln .done { color: var(--faint); text-decoration: line-through; }
button.choice.tick { min-width: 1.7rem; min-height: 1.6rem; padding: 0.1rem 0.4rem; }
.card .grants .opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
button.choice.grant[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* The thread: one, on the spine's edge, dim, and its rhythm says what is happening. The line under the topbar carries the state
   and shows nothing itself. A say landing passes down the spine quickly and lightly; a seat rung and waiting breathes slowly;
   reading scans the spine top to bottom and back; thinking dwells at its middle and breathes; writing the return lays itself
   down the spine, line after line, gathering toward the foot. Nothing is invented: each rhythm is a state the pulses report. */
.o-library, .o-aside { position: relative; } /* the spine is relative in its base rule, so that on a phone its sticky rule still wins */
.o-spine::after { content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 1.5px; pointer-events: none; opacity: 0; z-index: 3; background: linear-gradient(180deg, transparent 0%, var(--gold) 30%, var(--gold-soft) 50%, var(--gold) 70%, transparent 100%) no-repeat; background-size: 100% 24%; background-position: 0 0; transition: opacity 700ms ease; }
.line[data-live="true"] ~ .shell .o-spine::after { opacity: 0.55; }
.line[data-live="true"][data-doing="landing"] ~ .shell .o-spine::after { background-size: 100% 14%; animation: spine-pass 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.line[data-live="true"][data-doing="rung"] ~ .shell .o-spine::after { background-size: 100% 40%; background-position: 0 35%; animation: spine-breathe 3.2s ease-in-out infinite; }
.line[data-live="true"][data-doing="reading"] ~ .shell .o-spine::after { background-size: 100% 28%; animation: spine-scan 2.6s ease-in-out infinite alternate; }
.line[data-live="true"][data-doing="thinking"] ~ .shell .o-spine::after { background-size: 100% 46%; background-position: 0 50%; animation: spine-dwell 3.6s ease-in-out infinite; }
.line[data-live="true"][data-doing="writing the return"] ~ .shell .o-spine::after { background-size: 100% 20%; animation: spine-write 1.7s ease-in infinite; }
@keyframes spine-pass { from { background-position: 0 -20%; opacity: 0.2; } 40% { opacity: 0.55; } to { background-position: 0 120%; opacity: 0.15; } }
@keyframes spine-breathe { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.5; } }
@keyframes spine-scan { from { background-position: 0 0%; } to { background-position: 0 100%; } }
@keyframes spine-dwell { 0%, 100% { opacity: 0.25; background-size: 100% 40%; } 50% { opacity: 0.6; background-size: 100% 54%; } }
@keyframes spine-write { from { background-position: 0 0%; opacity: 0.2; } 60% { opacity: 0.55; } to { background-position: 0 100%; opacity: 0.6; } }
/* A read in flight breathes where it says so. */
.line[data-live="true"] ~ .shell .work > p.dim:only-child, .line[data-live="true"] ~ .shell .lib > .lib-note:only-child { animation: breathe-text 2s ease-in-out infinite; }
@keyframes breathe-text { 50% { opacity: 0.5; } }
/* The pace: a gold point that breathes beside what the door says the seat is doing. */
.ringing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; }
.live-state { display: inline-flex; align-items: center; gap: 0.45rem; }
.live-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 0.35; transform: scale(0.75); } }
/* The line under the topbar carries the state, data-live and data-doing, and shows nothing: the spine's thread is the one light. */
.line { height: 0; background: transparent; position: relative; overflow: hidden; }
.turn.landing { opacity: 0.6; border-left: 2px solid var(--gold, #c9a84c); }
.turn.landing .what { color: var(--gold, #c9a84c); }
.live-state { font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold, #c9a84c); }

/* ---- pass two: layout, formation, sizes, the use of space (2026-10-12) ---- */

/* One gutter: strips, rows and panes share --g, the editor --g2, so an edge in one organ is the edge in the next. */
.strip { padding-inline: var(--g); }
.o-editor > .strip { padding-inline: var(--g2); }
.o-editor > .work { padding: var(--g2) var(--g2) 2.5rem; }
.o-editor > .work:has(.saybox) { padding-bottom: 0; }
.o-aside > .work { padding: var(--g) var(--g) 2rem; }
.lib-row .body, .lib-head, .lib-note { padding-inline: var(--g); }

/* One column in the editor: the tabs, the turns, the say box and every sheet hold one measure, with one right edge. */
.stack { max-width: var(--column); gap: var(--g2); }
.stack > *, .turns > * { min-width: 0; }
.turns { max-width: none; gap: 0.75rem; }

/* Content stands flat on the paper: the one thing the editor reads is not a card. Cards remain for turns, drawers and cells. */
.o-editor .panel { background: transparent; border: 0; border-radius: 0; padding: 0; }
.o-editor .stack > .panel ~ .panel { border-top: 1px solid var(--line-soft); padding-top: var(--g2); }
.o-editor .stack > .panel.once, .o-editor .stack > .panel ~ .panel.once { border: 1px dashed var(--line2); border-radius: var(--radius); padding: var(--g) 1.25rem; }
.panel > h3:first-child { margin-bottom: 0.5rem; }
.honest-empty { border: 0; border-left: 2px solid var(--line2); border-radius: 0; padding: 0.15rem 0 0.15rem var(--g); color: var(--dim); }
.turn, .drawers, .drawers-host .drawer, pre.file, .stands .cell { border-radius: var(--radius); }
.facts .f { grid-template-columns: 8rem minmax(0, 1fr); }

/* The entry: the three ways in stand side by side where there is room, so every way is seen at once. */
.stack:has(#en-word) { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-width: none; align-items: start; column-gap: 2rem; }
.stack:has(#en-word) > .panel ~ .panel { border-top: 0; padding-top: 0; }
.stack:has(#en-word) > .note { grid-column: 1 / -1; }

/* Structure's counts read as one row where they fit. */
.stands { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }

/* The small seals speak in the read face, in their own case; uppercase hand stays for labels, readings and the hand's marks. */
button.choice, button.choice.faint, .tab, .attach label.choice, .drawers-host .expand a.choice { font-family: var(--read); font-size: var(--s0); letter-spacing: 0; text-transform: none; }
.ask .opts button.choice[data-answer] { font-size: var(--s0); }

/* A ghost seal is a reading, not a seal: the eye goes to what can be pressed. */
button.press.ghost, button.press.ghost:hover { border-color: transparent; color: var(--faint); padding-inline: 0.5rem; }

/* The foot follows the columns above it: whose hand under the spine and library, what was said from the editor's text edge. */
.o-foot { gap: 0; }
.whom { padding-inline: var(--g); }
.shell[data-library="shut"] .whom { width: auto; padding-right: 0; border-right: 0; }
.shell[data-library="shut"] .said { padding-left: var(--g); }
.said { padding-inline: var(--g2); flex: 1 1 auto; }
.o-foot .acts { padding-inline: var(--g); }

/* A session is named once where you read it: the editor's reading steps back while a session's tab is on. */
.o-editor:has(.tabs .tab.on:not(.plus)) #ed-reading { display: none; }
.tabs { padding-bottom: 0.75rem; }

/* A turn's head is one tight line: who gives way first, the time stays whole at the right. */
.turn { padding: 0.9rem 1.25rem 1rem; }
.turn .turn-h { flex-wrap: nowrap; letter-spacing: 0.08em; min-width: 0; }
.turn .turn-h .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn .turn-h .what, .turn .turn-h .when { flex: none; white-space: nowrap; }
.turn .prose { max-width: none; }

/* Beside's lines read what over when, so a day's message is not wrapped to ten rows at the aside's width. */
.drawers-host .lines .ln { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
.drawers-host .lines .ln .p { white-space: normal; }

/* A mind's layers: the number hangs in the margin, the body aligns under the title, titles at the read size. */
.o-editor .drawer > .dh { grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.85rem 1.25rem; }
.o-editor .drawer .dc { padding: 0 1.25rem 1.1rem 3.45rem; }
.o-editor .drawer .t { font-size: var(--s2); font-weight: 500; }

/* The dial is one segmented row, each choice on one line. */
.dial .opts { gap: 0; flex-wrap: nowrap; }
.dial .opts button { flex: 1 1 0; min-width: 0; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 0.5rem; }
.dial .opts button + button { margin-left: -1px; }
.dial .opts button:first-child { border-radius: 8px 0 0 8px; }
.dial .opts button:last-child { border-radius: 0 8px 8px 0; }
.dial .opts button[aria-pressed="true"] { position: relative; }

/* The pulse says a day once: the date steps back when the row above stands on the same day. */
td.hand .day.same { color: transparent; }

@media not all and (max-width: 60rem) {
  /* Beside with nothing in it rests on its rail, and the editor takes the width. */
  .shell:has(#beside > p.empty:only-child) { grid-template-columns: var(--spine) var(--library) minmax(0, 1fr) var(--rail); }
  .shell[data-library="shut"]:has(#beside > p.empty:only-child) { grid-template-columns: var(--spine) var(--rail) minmax(0, 1fr) var(--rail); }
  .shell:has(#beside > p.empty:only-child) .o-aside { grid-template-columns: var(--rail); }
  .shell:has(#beside > p.empty:only-child) .o-aside > .strip, .shell:has(#beside > p.empty:only-child) .o-aside > .work, .shell:has(#beside > p.empty:only-child) #fold-aside { display: none; }
  .shell:has(#beside > p.empty:only-child) .rail-name { display: block; }
}

@media (max-width: 60rem) {
  .o-editor > .strip, .o-editor > .work { padding-inline: var(--g); }
  .o-editor > .work { padding-top: var(--g); padding-bottom: 2rem; }
  .turn { padding: 0.8rem var(--g) 0.9rem; }
  /* The pass-two foot rules above stand at the base, so the phone's foot is restated here. */
  .o-foot { column-gap: 0.6rem; }
  .said { padding-inline: 0; flex: 1 1 9rem; }
  .o-foot .acts { padding-inline: 0; }
}
@media (max-width: 40rem) {
  /* A pulse on a phone is a short block, nothing cut at the right edge. */
  .table-wrap table thead { display: none; }
  .table-wrap table tr { display: flex; flex-wrap: wrap; column-gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
  .table-wrap table td { border: 0; padding: 0; }
  .table-wrap table td:nth-child(4) { flex: 1 0 100%; }
  .table-wrap table td:empty { display: none; }
  td.hand .day.same { display: none; }
}

/* ---- pass two, round two: denser, and the signals refined (2026-10-12) ---- */

/* Beside: a quarter of its width went to padding. Host, head and body each give a step, and the drawers sit closer. */
.drawers-host { padding: 0.75rem 0.75rem 1.5rem; }
.drawers-host .drawers { gap: 0.4rem; }
.drawers-host .drawer > .dh { padding: 0.5rem 0.7rem; gap: 0.5rem; align-items: center; }
.drawers-host .drawer .dc { padding: 0 0.7rem 0.65rem; gap: 0.4rem; }
.drawers-host .drawer .t { font-size: var(--s0); font-weight: 500; }
.drawers-host .facts .f { grid-template-columns: 6rem minmax(0, 1fr); gap: 0.5rem; padding: 0.3rem 0; }
.drawers-host .lines .ln { padding: 0.28rem 0; }
.drawers-host input:not([type]), .drawers-host input[type="text"] { padding: 0.4rem 0.6rem; font-size: var(--s00); }
.drawers-host .ask { padding: 0.35rem 0; }
.drawers-host .ask p { margin-bottom: 0.3rem; }
.drawers-host .ask .opts { gap: 0.3rem; }
.drawers-host .pick { padding: 0.3rem 0; }

/* The seals, a step smaller and denser; one height for every small seal, one for the press. */
button { padding: 0.3rem 0.7rem; }
button.choice, .tab, .attach label.choice, .ask .opts button.choice[data-answer] { min-height: 1.9rem; padding: 0.25rem 0.65rem; line-height: 1.3; }
.ask .opts button.choice[data-answer] { padding: 0.25rem 0.6rem; }
.tab.plus { min-width: 1.9rem; padding-inline: 0.45rem; }
button.press { min-height: 2.25rem; padding: 0.4rem 1.05rem; font-size: var(--s0); }
button.choice.tick { min-height: 1.5rem; min-width: 1.6rem; }
.topbar #world { padding: 0.25rem 0.6rem; font-size: var(--s00); border-color: var(--line); }
.topbar #world:hover { border-color: var(--ink); }
.drawers-host .expand a.choice { padding: 0.15rem 0.5rem; }

/* Fields: a step tighter, the same seal shape. */
input:not([type]), input[type="text"], input[type="password"], textarea { padding: 0.5rem 0.7rem; }
label { margin-bottom: 0.25rem; }
.field { gap: 0.2rem; }

/* Rows: the library, the facts and the lines sit a step closer. */
.lib-row .body { padding-block: 0.45rem; line-height: 1.4; }
.facts .f { padding: 0.35rem 0; }
.lines .ln { padding: 0.35rem 0; }
.stands .cell { padding: 0.65rem 0.8rem; }
.turn { padding: 0.75rem 1.1rem 0.85rem; }
.turns { gap: 0.6rem; }
.turn .turn-h { margin-bottom: 0.3rem; }
.panel > h3:first-child { margin-bottom: 0.4rem; }
.honest-empty { padding-block: 0.1rem; }

/* The signals. One chevron, drawn, not typed: on the folds, on a drawer's open and shut, on the aside's rail. */
.fold { width: 1.25rem; height: 1.25rem; border-color: var(--line); color: var(--faint); }
.fold > span { font-size: 0; width: 0.4rem; height: 0.4rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(1px) rotate(45deg); transition: transform 160ms ease; }
#fold-aside > span { transform: translateX(-1px) rotate(-135deg); }
.shell[data-library="shut"] #fold-lib > span { transform: translateX(-1px) rotate(-135deg); }
.shell[data-beside="shut"] #fold-aside > span { transform: translateX(1px) rotate(45deg); }
/* A drawer's where: the chevron alone, turning with the drawer; the words shut and open read as states, so they went. */
.drawer > .dh .where { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--s00); letter-spacing: 0.1em; }
.drawer > .dh .where::after { content: ''; width: 0.38rem; height: 0.38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(1px) rotate(-135deg); transition: transform 160ms ease; opacity: 0.8; }
.drawer[data-open="false"] > .dh .where::after { transform: translateY(-2px) rotate(45deg); }
.drawer > .dh:hover .where { color: var(--ink); }
/* The path's handles: the current level is ink, the others are quiet marks without a frame until hovered. */
.handle { border-color: transparent; padding: 0.45rem 0.1rem; }
.handle:hover { border-color: var(--line2); }
.handle[aria-current="true"] { border-color: var(--ink); }
.handles { gap: 0.2rem; }
/* States: the dot sits on the baseline's centre, the pill a hair tighter. */
.state { padding: 0.05rem 0.5rem 0.05rem 0.45rem; gap: 0.35rem; font-size: var(--s00); letter-spacing: 0.04em; }
.state::before { width: 5px; height: 5px; }
/* A tab that is on wears ink; the plus tab is a quiet square. */
.tab.on { background: var(--fill); }
.tab.plus { color: var(--faint); border-style: dashed; }
.tab.plus:hover, .tab.plus.on { border-style: solid; color: var(--ink); }
/* The library's strip and the aside's: the name is the one dark thing; the rest is faint. */
.strip .name { letter-spacing: 0.1em; }
.lib-row.on .bar { width: 2px; }
/* The chip, a step smaller. */
.chip { padding: 0.2rem 0.5rem; }

/* ---- pass two, round three: symmetry, the mind, the cockpit (2026-10-12) ---- */

/* Beside: one gutter, inside and out. The host, a drawer's head and its body share 0.75rem, so a drawer's text stands one unit from the drawer's edge and the drawer one unit from beside's; the strip's name stands on the same line. */
.o-aside > .strip { padding-inline: 0.75rem; }
.drawers-host { padding: 0.75rem; }
.drawers-host .drawer > .dh { padding: 0.5rem 0.75rem; }
.drawers-host .drawer .dc { padding: 0 0.75rem 0.7rem; }
.drawers-host .drawers { gap: 0.5rem; }

/* One segmented seal for every choice-of-one: the dial, the modes, a return's standing, a substance's direction and period. */
.modes, .dial .opts, .opts:has(> [data-learns]), .opts:has(> [data-sndir]), .opts:has(> [data-sbperiod]) { display: inline-flex; gap: 0; flex-wrap: nowrap; max-width: 100%; }
.modes > button, .dial .opts > button, .opts:has(> [data-learns]) > button, .opts:has(> [data-sndir]) > button, .opts:has(> [data-sbperiod]) > button { border-radius: 0; margin-left: -1px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-inline: 0.8rem; }
.modes > button:first-child, .dial .opts > button:first-child, .opts:has(> [data-learns]) > button:first-child, .opts:has(> [data-sndir]) > button:first-child, .opts:has(> [data-sbperiod]) > button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.modes > button:last-child, .dial .opts > button:last-child, .opts:has(> [data-learns]) > button:last-child, .opts:has(> [data-sndir]) > button:last-child, .opts:has(> [data-sbperiod]) > button:last-child { border-radius: 0 8px 8px 0; }
.modes > button[aria-pressed="true"], .opts > button.choice[aria-pressed="true"] { position: relative; z-index: 1; }
.dial .opts { display: flex; }
.dial .opts button:first-child { border-radius: 8px 0 0 8px; }
.dial .opts button:last-child { border-radius: 0 8px 8px 0; }

/* The mind, read: a document, not a card. The modes stand where a session's tabs stand; the layers are parted by a line; the number hangs in the margin; the mind's own words are set at the reading size in ink, the surface's explanations a step smaller and dim. */
.reading .modes { padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-soft); }
.reading .drawers { background: transparent; border: 0; border-radius: 0; }
.reading .drawer { border-top: 1px solid var(--line-soft); }
.reading .drawer:first-child { border-top: 0; }
.reading .drawer > .dh { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 1.1rem 0 0.9rem; align-items: baseline; }
.reading .drawer > .dh:hover { background: transparent; }
.reading .drawer > .dh:hover .t, .reading .drawer > .dh:hover .where { color: var(--ink); }
.reading .drawer .n { font-size: var(--s0); font-variant-numeric: tabular-nums; }
.reading .drawer .t { font-size: var(--s3); font-weight: 500; letter-spacing: -0.005em; }
.reading .drawer .t small { font-size: var(--s0); margin-left: 0.7rem; }
.reading .drawer .dc { padding: 0 0 1.4rem 2.95rem; gap: 0.7rem; }
.reading .drawer .dc > p { font-size: var(--s1); color: var(--dim); }
.reading .drawer .dc .prose { max-width: var(--measure); }
.reading .drawer .dc .prose p { font-size: var(--s2); color: var(--ink); margin-bottom: 0.6rem; }
.reading .drawer .dc .prose p:last-child { margin-bottom: 0; }
.reading .drawer .dc > .label { margin-top: 0.3rem; }
.reading .drawer .dc .lines .ln { font-size: var(--s2); padding: 0.4rem 0; }
.reading .drawer .dc .facts .f .v { font-size: var(--s2); }
.reading .drawer[data-open="false"] > .dh { padding-bottom: 1.1rem; }
/* The mind and a file, read whole or authored: a sheet, raised a step, with room around the text. */
.reading pre.file, .reading textarea.author { background: var(--raised); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.25rem 1.4rem; line-height: 1.75; font-size: var(--s0); tab-size: 2; }
.reading textarea.author { min-height: max(32rem, 60vh); box-shadow: var(--glass-hi); }
.reading textarea.author:focus { border-color: var(--line2); }
.reading .panel > p.dim:first-child { font-size: var(--s1); max-width: var(--measure); }
.reading .prose { line-height: 1.65; }
.reading .prose h1 { margin-bottom: 0.8rem; }
.reading .prose h2 { margin-top: 1.8rem; }

/* The cockpit: a seat's settings, a seat being made, the supply. Instruments in cells with one frame, one padding and one gap; dense, read as a board. */
.stack.cockpit { gap: 0.75rem; max-width: 56rem; }
.stack.cockpit > .panel, .o-editor .stack.cockpit > .panel ~ .panel { background: var(--raised); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 0.9rem 1rem 1rem; }
.stack.cockpit > .panel.head, .o-editor .stack.cockpit > .panel.head { background: transparent; border: 0; border-radius: 0; padding: 0 0 0.25rem; }
.stack.cockpit > .panel.once { border-style: dashed; border-color: var(--line2); }
.cockpit .head-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.25rem; }
.cockpit .head-row h3 { font-size: var(--s4); font-weight: 500; letter-spacing: -0.01em; }
.cockpit .panel > h3:first-child { font-size: var(--s1); font-weight: 500; color: var(--dim); margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line-soft); }
.cockpit .facts .f { grid-template-columns: 7rem minmax(0, 1fr); padding: 0.3rem 0; gap: 0.6rem; }
.cockpit .facts .f .v { font-size: var(--s1); line-height: 1.45; }
.cockpit .field { max-width: none; }
.cockpit .field + .field, .cockpit .field[style*="margin-top"] { margin-top: 0.75rem !important; }
.cockpit .hint { font-size: var(--s00); line-height: 1.45; }
.cockpit .dial { max-width: none; }
.cockpit .dial .say { font-size: var(--s00); }
.cockpit .card .grants .opts, .cockpit .opts { gap: 0.3rem; }
.cockpit .row2 { gap: 1rem; }
.cockpit .lib-row .body { padding-inline: 0; }
.cockpit .lines { margin-bottom: 0.25rem; }
.cockpit p.dim { font-size: var(--s1); }
@media not all and (max-width: 64rem) {
  .stack.cockpit { grid-template-columns: 1fr 1fr; align-items: start; }
  .stack.cockpit > .panel.head, .stack.cockpit > .panel:has(.row2), .stack.cockpit > .panel.once, .stack.cockpit > .honest-empty { grid-column: 1 / -1; }
}
/* A board's instruments: a facts-only cell spans the board with its facts in two columns; a lone cell spans it; a segmented choice wraps its words before it cuts them. */
@media not all and (max-width: 64rem) {
  .stack.cockpit > .panel:has(> h3 + .facts), .stack.cockpit > .panel:only-child { grid-column: 1 / -1; }
  .stack.cockpit > .panel:has(> h3 + .facts) .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}
.dial .opts > button, .opts:has(> [data-learns]) > button { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; padding-block: 0.3rem; }

/* ---- the say's room, by the founder's word (2026-10-12): the tabs sit symmetric and smaller; the say box is the box and one row of marks ---- */
.o-editor > .work:has(.tabs) { padding-top: 1rem; }
.tabs { padding-bottom: 0.5rem; margin-bottom: -0.5rem; gap: 0.3rem; }
.tab, .tab.plus { min-height: 1.7rem; padding-block: 0.15rem; }
.tab.plus { min-width: 1.7rem; }
.saybox { padding: 0.5rem 0 0.5rem; }
#say, .o-editor .saybox #say { min-height: 4.2rem; }
.attach { margin-top: 0.3rem; gap: 0.4rem; min-height: 1.8rem; }
/* A mark: a small drawn sign with its word as its title and for the screen reader; a seal without a word. */
.mark, .attach label.choice.mark { width: 1.8rem; min-height: 1.8rem; height: 1.8rem; padding: 0; justify-content: center; border-radius: 50%; color: var(--faint); border-color: var(--line); }
.mark:hover, .attach label.choice.mark:hover { color: var(--ink); border-color: var(--ink); }
.attach .hint { font-size: var(--s00); margin: 0; flex: 1 1 10rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 80rem) { .saybox .attach { flex: 1 1 100%; } }
@media (max-width: 60rem) { .saybox .attach .hint { white-space: normal; flex-basis: 100%; } #say { min-height: 4.2rem; } }

/* The say's marks and pickers: a mark may be pressed, and a picker opens above the row, within the say box. */
.attach { position: relative; }
button.mark[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--fill); }
.chip .x { border: 0; background: transparent; color: var(--faint); padding: 0 0.2rem; font: inherit; cursor: pointer; min-height: 0; }
.chip .x:hover { color: var(--ink); }
.picker { position: absolute; left: 0; bottom: calc(100% + 0.4rem); width: min(32rem, 100%); background: var(--raised); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.4rem; z-index: 6; }
.picker input { font-size: var(--s0); padding: 0.4rem 0.6rem; margin-bottom: 0.3rem; }
.picker .rows { max-height: 14rem; overflow: auto; display: flex; flex-direction: column; }
.picker .row { display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; background: transparent; padding: 0.35rem 0.5rem; font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; min-height: 0; }
.picker .row:hover { background: var(--fill); }
.picker .row .h { display: block; font-size: var(--s1); }
.picker .row .s { display: block; font-size: var(--s00); color: var(--faint); font-family: var(--hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .empty { margin: 0.3rem 0.5rem; }

/* ---- the marks, by the founder's word (2026-10-12): the sign is the whole mark. No frame; faint, ink on hover, a fill when pressed; dense, on a grid of 1.6rem ---- */
.mark, .attach label.choice.mark, button.choice.mark { width: 1.6rem; height: 1.6rem; min-height: 1.6rem; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--faint); display: inline-flex; align-items: center; justify-content: center; transition: color 120ms ease, background-color 120ms ease; }
.mark:hover, .attach label.choice.mark:hover, button.choice.mark:hover { color: var(--ink); border: 0; background: transparent; }
button.mark[aria-pressed="true"], button.choice.mark[aria-pressed="true"] { color: var(--ink); background: var(--fill); border: 0; }
button.mark:focus-visible, .attach label.choice.mark:has(+ input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 1px; }
.attach { gap: 0.15rem; }
.attach .chip, .attach .hint { margin-left: 0.35rem; }
/* The folds and the rail: a bare chevron, no ring around it. */
.fold { border: 0; width: 1.25rem; height: 1.25rem; background: transparent; }
.fold:hover { border: 0; color: var(--ink); }
.fold > span { width: 0.42rem; height: 0.42rem; border-width: 1.25px; }

/* ---- pass three: beside's width, the pickers, and the edges (2026-10-12, by the founder's word) ---- */

/* Beside, open with something in it: the fold stands in the strip's row, and the drawers take the whole width under it,
   one gutter each side, the same gutter inside each drawer. The strip's name stands on the drawers' text edge.
   Shut, or empty, the rail is the whole organ as before, and carries the vertical name. */
@media not all and (max-width: 60rem) {
  .shell[data-beside="open"] .o-aside:not(:has(#beside > p.empty:only-child)) > .rail { grid-row: 1; justify-content: center; padding: 0; border-bottom: 1px solid var(--line-soft); }
  .shell[data-beside="open"] .o-aside:not(:has(#beside > p.empty:only-child)) > .strip { padding-left: 0; }
  .shell[data-beside="open"] .o-aside:not(:has(#beside > p.empty:only-child)) > .work { grid-column: 1 / 3; }
}
/* A drawer's body fills its drawer: paragraphs, prose and fields take the drawer's width, nothing holds a measure narrower than the drawer. */
.drawers-host .drawer .dc p, .drawers-host .drawer .dc .hint, .drawers-host .drawer .dc .field, .drawers-host .drawer .dc .prose, .drawers-host .drawer .dc .note, .drawers-host .drawer .dc .refusal, .drawers-host .drawer .dc .honest-empty { max-width: none; }
.drawers-host .drawer .dc .prose p { max-width: none; }
.drawers-host .drawer .dc .prose img { max-width: 100%; height: auto; }
.drawers-host .drawer .dc .prose pre, .drawers-host .drawer .dc pre.file { max-width: 100%; overflow-x: auto; padding: 0.6rem 0.7rem; }
/* The read-whole link stands on the drawer's head line, not as a lone row with air above the text. */
.drawers-host .expand { margin-top: -0.2rem; margin-bottom: -0.1rem; }
.drawers-host .drawer .dc > .expand + .prose { margin-top: 0; }

/* The pickers: a row is never squeezed. Rows stack and the list scrolls when it is long; a long question wraps to two lines and
   then ends in an ellipsis; the picker is the say's whole width. (The rows stood in a flex column with min-height 0, and a column
   taller than the picker shrank every row onto the next; the fault seen at the desk.) */
.picker { width: 100%; max-width: none; padding: 0.35rem; }
.picker .rows { display: block; max-height: min(18rem, 50vh); overscroll-behavior: contain; }
.picker .row { flex: none; padding: 0.4rem 0.6rem; }
.picker .row + .row { margin-top: 1px; }
.picker .row .h { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; text-wrap: pretty; }
.picker .row .s { margin-top: 0.1rem; }
.picker input { margin: 0.1rem 0 0.35rem; }

/* The cockpit's cells share one height across a row, so two instruments side by side end on one line; the dial's segments take
   the width their words need, so none wraps while another stands half empty; two fields side by side start on one line. */
@media not all and (max-width: 64rem) { .stack.cockpit { align-items: stretch; } }
.dial .opts > button { flex: 1 1 auto; }
.cockpit .row2 { row-gap: 0.75rem; }
.cockpit .row2 > .field { margin-top: 0 !important; }

/* The pulse: the outcome is the column with words, so it takes the width the others leave, and no other column wraps a value. */
@media not all and (max-width: 40rem) {
  .table-wrap table th:nth-child(4), .table-wrap table td:nth-child(4) { width: 99%; }
  .table-wrap table td:not(:nth-child(4)) { white-space: nowrap; }
}
/* The pulse's when: the day stands on its own small line where the day changes, and is not there at all where it does not,
   so the column is a time's width and the outcome has room to say what happened. */
td.hand .day { display: block; font-size: var(--s00); color: var(--faint); line-height: 1.3; letter-spacing: 0.04em; }
td.hand .day.same { display: none; }
th, td { padding-right: 0.75rem; }

/* ---- beside in tabs, a preview in place, a reply on a line, a folder mind (2026-10-12, by the founder's word) ---- */
/* Beside a room, the drawers stand in tabs: one strip of signs under the strip, each a bare mark with a count, the one on in ink with a fill. The strip's reading names the tab on. */
.btabs { display: flex; gap: 0.15rem; align-items: center; margin: -0.25rem 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line-soft); }
.btab { position: relative; width: 2rem; height: 1.8rem; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--faint); display: inline-flex; align-items: center; justify-content: center; transition: color 120ms ease, background-color 120ms ease; }
.btab:hover { color: var(--ink); border: 0; }
.btab[aria-pressed="true"] { color: var(--ink); background: var(--fill); }
.btab .n { position: absolute; top: 0; right: 0.1rem; font-family: var(--hand); font-size: 0.6rem; line-height: 1; letter-spacing: 0; color: var(--ink); background: var(--paper); border-radius: 999px; padding: 0.05rem 0.2rem; min-width: 0.85rem; text-align: center; }
.btab[aria-pressed="true"] .n { background: var(--ink); color: var(--paper); }
.btab:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
/* A preview: the eye on a file's row; pressed, the file reads under its row, in a sheet that scrolls past a measure. */
.mark.pv { width: 1.4rem; height: 1.4rem; min-height: 1.4rem; vertical-align: middle; margin-right: 0.1rem; }
.mark.pv[aria-pressed="true"] { color: var(--ink); background: var(--fill); }
.drawers-host .lines .ln.previewing { display: block; }
.pv-body { margin: 0.35rem 0 0.2rem; padding: 0.5rem 0.65rem; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--paper); max-height: 24rem; overflow: auto; }
.pv-body .prose.small { font-size: var(--s0); }
.pv-body .prose.small p { max-width: none; }
.pv-body pre.file { padding: 0.5rem 0.6rem; font-size: var(--s00); background: transparent; }
.pv-body img.attached { max-height: 20rem; width: auto; }
/* The reply seal: a small seal that stands under selected words in a turn, and carries them into the say as a quote. */
.o-editor > .work { position: relative; }
.quote { position: absolute; z-index: 5; font-family: var(--read); font-size: var(--s00); letter-spacing: 0; text-transform: none; padding: 0.2rem 0.55rem; min-height: 0; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--seal-sm); box-shadow: var(--shadow); }
.quote:hover { opacity: 0.92; }
/* A folder mind's parts: the add-a-line field chooses its part as a segmented seal. */
.reading .drawer .dc #m-parts { display: inline-flex; gap: 0; }
.reading .drawer .dc #m-parts > button { border-radius: 0; margin-left: -1px; }
.reading .drawer .dc #m-parts > button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.reading .drawer .dc #m-parts > button:last-child { border-radius: 0 8px 8px 0; }

/* A preview may pop out: the file in a tab of the browser's own, the hand already there. */
.pv-body .pop { display: block; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); text-decoration: none; margin-bottom: 0.35rem; }
.pv-body .pop:hover { color: var(--ink); }
/* A file's row: the eye, the name and its kind, the pin, on one line; the marks are bare signs. */
.drawers-host .lines .ln.file { display: block; }
.drawers-host .lines .ln.file .fr { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.drawers-host .lines .ln.file .fb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawers-host .lines .ln.file .fb .hand { font-size: var(--s00); }
.mark.pin { width: 1.4rem; height: 1.4rem; min-height: 1.4rem; flex: none; }
.mark.pin[aria-pressed="true"] { color: var(--ink); background: var(--fill); }

/* ---- the reader: one sheet over the editor for any file named anywhere (2026-10-12) ---- */
.o-editor { position: relative; }
.reader { position: absolute; top: var(--strip); left: 0; right: 0; bottom: 0; z-index: 8; background: var(--paper); display: flex; flex-direction: column; }
.reader[hidden] { display: none; }
.rhead { display: flex; align-items: center; gap: 0.2rem; padding: 0.45rem var(--g2); border-bottom: 1px solid var(--line-soft); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); min-height: var(--strip); }
.rhead .rt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--s1); }
.rhead .rn { color: var(--ink); font-weight: 500; }
.rhead .rt .hand { font-size: var(--s00); }
.rhead .rfind { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--faint); margin-right: 0.4rem; }
.rhead .rfind input { width: 10rem; font-size: var(--s00); padding: 0.25rem 0.5rem; border-radius: var(--seal-sm); }
.rhead .rfind input { width: 12rem; }
.rhead a.mark { text-decoration: none; }
.rbody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--g2) var(--g2) 3rem; }
.rbody .prose { max-width: var(--column); }
.rbody pre.file { max-width: var(--column); }
.rbody img.attached { max-width: min(100%, var(--column)); }
.rbody mark { background: var(--gold-soft); color: #14171A; border-radius: 2px; padding: 0 0.05em; }
.rbody mark.on { outline: 2px solid var(--gold); }
@media (max-width: 60rem) { .reader { position: fixed; top: var(--strip); } .rhead { padding-inline: var(--g); flex-wrap: wrap; } .rbody { padding: var(--g); } }
.rhead .rfind, .rhead #r-count { white-space: nowrap; flex: none; }

/* ---- the carry: words selected raise one row of marks; a highlight is a title over its words with its source (2026-10-12) ---- */
.carry { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 0.1rem; padding: 0.15rem; background: var(--raised); border: 1px solid var(--line2); border-radius: 8px; box-shadow: var(--shadow); }
.carry .mark { width: 1.7rem; height: 1.7rem; min-height: 1.7rem; }
.carry .ctitle { width: 16rem; font-size: var(--s00); padding: 0.25rem 0.5rem; border-radius: 6px; }
.carry .hint { font-size: 0.62rem; margin: 0 0.4rem 0 0.3rem; white-space: nowrap; max-width: none; }
.quote { display: none; }
.drawers-host .lines .ln.hl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.4rem; align-items: start; }
.drawers-host .lines .ln.hl .hlt { min-width: 0; }
.drawers-host .lines .ln.hl .hlw { grid-column: 1 / -1; margin: 0.1rem 0 0.2rem; padding: 0.1rem 0 0.1rem 0.6rem; border-left: 2px solid var(--line2); color: var(--dim); font-size: var(--s00); white-space: pre-wrap; max-height: 6.5rem; overflow: hidden; }
.drawers-host .lines .ln.hl .hla { display: inline-flex; gap: 0.05rem; }
.drawers-host .lines .ln.hl .hla .mark { width: 1.35rem; height: 1.35rem; min-height: 1.35rem; }
.drawers-host .lines .ln.previewing .p { margin-left: 0.4rem; }

/* ---- the UX pass: the shell's words (2026-10-12) ---- */
/* A reading that carries a path, an id or a commit keeps its case (the editor's strip says so with `path`), and so does the foot's said line, which names paths, commits and addresses in most of what it says: the hand face, small, not capitals. Labels, the strips' names and the other readings stay uppercase. */
.o-editor > .strip .reading.path, .said { text-transform: none; letter-spacing: 0.04em; }
/* The level you stand on is ink, not a filled capsule: the one filled thing on a page is the press. */
.handle[aria-current="true"] { background: transparent; color: var(--ink); border-color: transparent; font-weight: 500; }
/* ---- the UX pass: the seat (2026-10-12) ---- */
/* The shell lines fold under one line, for the few who need them: a details panel with a drawn chevron, as a drawer's. */
.o-editor details.panel > summary { cursor: pointer; list-style: none; font-size: var(--s1); font-weight: 500; color: var(--dim); display: flex; align-items: center; gap: 0.5rem; }
.o-editor details.panel > summary::-webkit-details-marker { display: none; }
.o-editor details.panel > summary::after { content: ''; width: 0.38rem; height: 0.38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease; opacity: 0.8; margin-left: auto; }
.o-editor details[open].panel > summary::after { transform: translateY(1px) rotate(-135deg); }
.o-editor details[open].panel > summary { margin-bottom: 0.5rem; color: var(--ink); }
.o-editor details.panel > summary:hover { color: var(--ink); }
/* ---- the UX pass: the room (2026-10-12) ---- */
/* The reply stands first in a return; what it proposes, lacks, settles or answers follows, then the asks. */
.turn .proposes { margin: 0.7rem 0 0; }
.turn .proposes + .proposes { margin-top: 0.4rem; }
/* The key is said beside the marks, quietly, in a standing session. */
.attach .hint.key { text-align: right; color: var(--faint); }
/* ---- the UX pass: beside (2026-10-12) ---- */
/* The tabs' counts at the scale's smallest size, not under it. */
.btab .n { font-size: var(--s00); }
/* A tab's only drawer stands open with no fold: its head is a title, not a seal. */
.drawers-host .drawer.lone > .dh { cursor: default; }
.drawers-host .drawer.lone > .dh:hover { background: transparent; }
.drawers-host .drawer.lone > .dh .where { display: none; }
/* The pin and read whole are marks: a bare sign, its word as its title, a fill when the pin is in. */
.drawers-host .lines .ln .p button.mark.pin { vertical-align: middle; }
.drawers-host .expand a.choice.mark { width: 1.6rem; height: 1.6rem; min-height: 1.6rem; padding: 0; border: 0; border-radius: 5px; color: var(--faint); }
.drawers-host .expand a.choice.mark:hover { color: var(--ink); border: 0; }
/* The one list of files: a group's name stands over its lines only when another group stands beside it. */
.drawers-host .drawer .dc > .label { margin-top: 0.35rem; }
.drawers-host .drawer .dc > .label:first-child { margin-top: 0; }
/* A proposal's row: the title with the path it is for, then its why on a line of its own; declining opens one field for the reason. */
.drawers-host .lines .ln.file.prop .why { margin: 0.1rem 0 0.15rem 1.7rem; font-size: var(--s00); color: var(--dim); line-height: 1.45; }
.drawers-host .lines .ln.file.prop .dwhy { margin: 0.2rem 0 0.3rem 1.7rem; width: calc(100% - 1.7rem); font-size: var(--s00); padding: 0.3rem 0.5rem; }
/* A drawer's body never grows past its drawer: the column may shrink to nothing, so a row's one-line text is cut with an ellipsis instead of pushing the marks out. */
.drawers-host .drawer .dc { grid-template-columns: minmax(0, 1fr); }
.drawers-host .drawer .dc > * { min-width: 0; }
.drawers-host .lines .ln.file { min-width: 0; }
.drawers-host .lines .ln.file .fr { min-width: 0; width: 100%; }

/* ---- the say's slots: highlights given a purpose for this say stand above the box, reply or weigh, and land as quotes with their sources (2026-10-12) ---- */
.slots { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.4rem; }
.slot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.1rem 0.5rem; align-items: center; padding: 0.3rem 0.6rem; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--raised); }
.slot .label { white-space: nowrap; }
.slot .st { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: transparent; padding: 0; font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; min-height: 0; font-size: var(--s0); }
.slot .st .hand { font-size: var(--s00); }
.slot .mark { width: 1.4rem; height: 1.4rem; min-height: 1.4rem; }
.slot .sw { grid-column: 1 / -1; margin: 0.15rem 0 0.1rem; padding: 0.1rem 0 0.1rem 0.6rem; border-left: 2px solid var(--line2); color: var(--dim); font-size: var(--s00); white-space: pre-wrap; max-height: 8rem; overflow: auto; }

/* Other ways in: a word and a key, folded under the accounts. */
details.other-ways > summary { cursor: pointer; font-size: var(--s1); color: var(--dim); list-style: none; }
details.other-ways > summary::-webkit-details-marker { display: none; }
details.other-ways > summary::before { content: '+ '; color: var(--faint); }
details.other-ways[open] > summary::before { content: '\2013 '; }
/* The first minutes: three steps, a step that stands quieted. */
.begin-step.done { opacity: 0.78; }
.begin-step h3 .faint { font-family: var(--hand); margin-right: 0.3rem; }

/* ---- the digital pass, phase one (2026-10-16): pearl, the corners, the groove, the stepper, the quiet tally, the spine's signs ---- */
/* The corners: what the hand holds now (the say while written in, an instrument while set) is framed by four hairline
   corners, not a heavier card; the reader, which is a sheet over the editor, always. Drawn on a pseudo-element, so no element's own background or border changes. */
:root { --corner: 9px; --corner-ink: var(--line2); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --lift: var(--raised); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lift: #36353B; } }
:root[data-theme="dark"] { --lift: #36353B; }
.saybox::before, .stack.cockpit > .panel:not(.head)::before, .reader::before {
  content: ''; position: absolute; inset: -5px; pointer-events: none; border-radius: 2px; opacity: 0; transition: opacity 220ms var(--ease), inset 220ms var(--ease);
  background:
    linear-gradient(var(--corner-ink), var(--corner-ink)) top left / var(--corner) 1px, linear-gradient(var(--corner-ink), var(--corner-ink)) top left / 1px var(--corner),
    linear-gradient(var(--corner-ink), var(--corner-ink)) top right / var(--corner) 1px, linear-gradient(var(--corner-ink), var(--corner-ink)) top right / 1px var(--corner),
    linear-gradient(var(--corner-ink), var(--corner-ink)) bottom left / var(--corner) 1px, linear-gradient(var(--corner-ink), var(--corner-ink)) bottom left / 1px var(--corner),
    linear-gradient(var(--corner-ink), var(--corner-ink)) bottom right / var(--corner) 1px, linear-gradient(var(--corner-ink), var(--corner-ink)) bottom right / 1px var(--corner);
  background-repeat: no-repeat;
}
.stack.cockpit > .panel:not(.head) { position: relative; }
.saybox:focus-within::before, .stack.cockpit > .panel:not(.head):focus-within::before { opacity: 1; inset: -7px; --corner-ink: var(--dim); }
.reader::before { inset: 0.5rem; opacity: 1; z-index: 1; }
.stack.cockpit > .panel:not(.head):focus-within { border-color: var(--line); }

/* The groove: a choice of one is a row of cells in a soft well, the one chosen raised in it. The solid ink block was the loudest
   thing on a seat's page; the choice still reads by its lift, its weight and aria-pressed, never by colour alone. */
.modes, .dial .opts, .opts:has(> [data-learns]), .opts:has(> [data-sndir]), .opts:has(> [data-sbperiod]) { background: var(--fill); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--line-soft); }
.modes > button, .dial .opts > button, .opts:has(> [data-learns]) > button, .opts:has(> [data-sndir]) > button, .opts:has(> [data-sbperiod]) > button,
.modes > button:first-child, .dial .opts > button:first-child, .opts:has(> [data-learns]) > button:first-child, .opts:has(> [data-sndir]) > button:first-child, .opts:has(> [data-sbperiod]) > button:first-child,
.modes > button:last-child, .dial .opts > button:last-child, .opts:has(> [data-learns]) > button:last-child, .opts:has(> [data-sndir]) > button:last-child, .opts:has(> [data-sbperiod]) > button:last-child { border: 0; border-radius: 7px; margin-left: 0; background: transparent; min-height: 1.75rem; }
.modes > button[aria-pressed="true"], .dial .opts > button[aria-pressed="true"], .opts:has(> [data-learns]) > button[aria-pressed="true"], .opts:has(> [data-sndir]) > button[aria-pressed="true"], .opts:has(> [data-sbperiod]) > button[aria-pressed="true"],
.modes > button[aria-pressed="true"]:disabled:hover, .dial .opts > button[aria-pressed="true"]:disabled:hover { background: var(--lift); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--line-soft); }
.modes > button:not([aria-pressed="true"]):hover, .dial .opts > button:not([aria-pressed="true"]):hover { color: var(--ink); background: color-mix(in srgb, var(--raised) 45%, transparent); }
.dial .opts { display: flex; }
.modes { width: fit-content; }

/* The stepper: a number is set by its field, by two marks, or read off a hairline whose short thick thumb stands where the value
   does in its range (the second picture's slider, as a reading). The surface wraps every number field it is given. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; text-align: center; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper { display: grid; grid-template-columns: 2rem 4.5rem 2rem minmax(0, 1fr); align-items: center; gap: 0.35rem; max-width: 22rem; }
.stepper input[type="number"] { padding: 0.4rem 0.3rem; }
.stepper .step { width: 2rem; height: 2rem; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); }
.stepper .step:hover:not(:disabled) { color: var(--ink); border-color: var(--line2); }
.stepper .step:disabled { opacity: 0.4; }
.stepper .track { position: relative; height: 1.2rem; margin-left: 0.5rem; }
.stepper .track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line2); }
.stepper .track::after { content: ''; position: absolute; top: calc(50% - 1.5px); height: 3px; width: 1.6rem; border-radius: 1px; background: var(--ink); left: calc(var(--at, 0) * (100% - 1.6rem)); transition: left 220ms var(--ease); }

/* The tally: the counts in ink, their words faint, in the hand's own case; it said STRUCTURE and USE in capitals on every page. */
.topbar #top-tally { text-transform: none; letter-spacing: 0.02em; font-size: var(--s00); color: var(--faint); }
.topbar #top-tally b { font-weight: 500; color: var(--ink); }
.topbar #top-tally .sep { color: var(--line2); margin: 0 0.45rem; }

/* The spine's signs: each place a drawn sign over its word, on the marks' grid; a short hairline parts one place from the next. */
@media not all and (max-width: 60rem) {
  .o-spine { gap: 0.15rem; }
  .tile { height: 3.6rem; flex-direction: column; gap: 0.3rem; }
  .tile svg { width: 17px; height: 17px; opacity: 0.8; transition: opacity 120ms ease; }
  .tile:hover svg, .tile[aria-pressed="true"] svg { opacity: 1; }
  .tile + .tile::before { content: ''; position: absolute; top: -0.1rem; left: 38%; right: 38%; height: 1px; background: var(--line); }
  .tile[aria-pressed="true"]::before, .tile[aria-pressed="true"] + .tile::before { opacity: 0; }
}
@media (max-width: 60rem) { .tile svg { display: none; } }
@media (max-width: 60rem) { .work .saybox { position: relative; } }

/* ---- the threshold, 2026-10-16: the door before entering, brought forward from phase four by the founder's word ---- */
/* Before a hand enters, the shell sets aside what it cannot yet use (the spine, the library, beside, whose hand) and the
   editor is one calm column: one line in the names' serif, the way in framed as the one thing held, the rest folded. */
/* !important: the shell's columns are also set by :has(#beside …) rules, whose id outweighs any class; the door state wins them all. */
body.at-door .shell { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) var(--foot); }
body.at-door .o-spine, body.at-door .o-library, body.at-door .o-aside, body.at-door .whom, body.at-door .o-editor > .strip { display: none; }
body.at-door .o-editor { grid-column: 1; grid-row: 1; }
body.at-door .o-foot { grid-column: 1; grid-row: 2; padding-inline: max(var(--g2), calc((100% - 34rem) / 2)); }
body.at-door .o-editor > .work { display: grid; align-content: center; min-height: 100%; padding-block: 3rem 4rem; }
.door { width: 100%; max-width: 34rem; margin: 0 auto; display: grid; gap: 2.25rem; }
.door-head { display: grid; gap: 0.9rem; }
.door-line { font-family: var(--name); font-weight: 300; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.005em; text-wrap: balance; }
.door-way { position: relative; display: grid; gap: 1rem; padding: 1.5rem 1.5rem 1.25rem; background: var(--raised); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.door-way::before { content: ''; position: absolute; inset: -7px; pointer-events: none; --k: var(--line2); --c: 10px;
  background:
    linear-gradient(var(--k), var(--k)) top left / var(--c) 1px no-repeat, linear-gradient(var(--k), var(--k)) top left / 1px var(--c) no-repeat,
    linear-gradient(var(--k), var(--k)) top right / var(--c) 1px no-repeat, linear-gradient(var(--k), var(--k)) top right / 1px var(--c) no-repeat,
    linear-gradient(var(--k), var(--k)) bottom left / var(--c) 1px no-repeat, linear-gradient(var(--k), var(--k)) bottom left / 1px var(--c) no-repeat,
    linear-gradient(var(--k), var(--k)) bottom right / var(--c) 1px no-repeat, linear-gradient(var(--k), var(--k)) bottom right / 1px var(--c) no-repeat; }
.door-way .field { max-width: none; }
.door-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.door-accounts button.choice { min-height: 2.75rem; font-size: var(--s1); color: var(--ink); border-color: var(--line2); background: var(--paper); }
.door-accounts button.choice:hover { border-color: var(--ink); }
.door-way > .hint { font-size: var(--s0); margin: 0; }
.door-way details.other-ways { border-top: 1px solid var(--line-soft); padding-top: 0.9rem; margin-top: 0.15rem; }
.door-way details.other-ways > summary { font-size: var(--s0); }
.door-other { display: grid; gap: 1.5rem; margin-top: 1.1rem; }
.door-ow { display: grid; gap: 0.6rem; }
.door-ow h3 { font-size: var(--s2); }
.door-ow p.dim { font-size: var(--s0); line-height: 1.55; margin: 0; }
.door .panel.once { border: 1px dashed var(--line2); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
details.door-about > summary { cursor: pointer; list-style: none; font-size: var(--s0); color: var(--faint); text-align: center; }
details.door-about > summary::-webkit-details-marker { display: none; }
details.door-about > summary:hover { color: var(--ink); }
details.door-about > summary::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 0.5rem; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 160ms ease; }
details.door-about[open] > summary::after { transform: translateY(0) rotate(-135deg); }
.door-about-body { display: grid; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.door-about-body p { font-size: var(--s1); color: var(--dim); margin: 0; }
@media (max-width: 60rem) {
  body.at-door .shell { grid-template-rows: auto auto; height: auto; min-height: calc(100vh - var(--strip)); }
  body.at-door .o-editor > .work { padding-block: 2rem 2.5rem; align-content: start; }
  body.at-door .o-foot { padding-inline: var(--g); }
  .door { gap: 1.75rem; }
  .door-way { padding: 1.15rem 1.1rem 1rem; }
}
@media (max-width: 26rem) { .door-accounts { grid-template-columns: 1fr; } }
/* In the door, the other ways fold under the same small chevron as what Eden is; the + and – stand elsewhere as they were. */
.door-way details.other-ways > summary::before { content: none; }
.door-way details.other-ways > summary::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 0.5rem; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 160ms ease; }
.door-way details.other-ways[open] > summary::after { transform: translateY(0) rotate(-135deg); }
.door-way details.other-ways > summary:hover { color: var(--ink); }

/* ---- the digital pass, phase 2a (2026-10-16): the names' serif, the breath in ticks, the stages as a track ---- */
/* A mind's name is set in the names' serif wherever it is the title of what you read: the mind's page, its row in the library,
   and the head of what it said in a session. Everything else stays in the read face and the hand. */
.mind-name { font-family: var(--name); font-weight: 400; letter-spacing: 0; text-transform: none; }
.o-editor > .strip .name.mind-name { font-size: var(--s4); line-height: 1; }
.lib-row .body .h.mind-name { font-size: 1.12rem; line-height: 1.25; }
.turn.return .turn-h .who, .turn.react .turn-h .who { font-family: var(--name); font-size: 1.1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1; }

/* The breath in ticks: twenty upright hairlines, as the first picture's power bar, the lit ones in ink; near the breath they keep their ink and the words beside them say so. */
.ticks { display: flex; gap: 3px; align-items: stretch; height: 0.85rem; margin: 0.35rem 0 0.15rem; }
.ticks i { flex: none; width: 2px; background: var(--line2); border-radius: 0.5px; }
.ticks i.on { background: var(--ink); }
.ticks.near i.on { background: var(--alarm); }
.lines .ln > .ticks { grid-column: 1 / -1; }
.lib-row .body .ticks { margin: 0.35rem 0 0.25rem; }

/* The stages as a track under the live line: each stop a point and its word; past stops in ink, the stop now in gold and breathing
   with the thread, those not yet reached faint. It lights no further than the pulses have said. */
.stage-track { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0; flex: 1 1 100%; font-family: var(--hand); font-size: var(--s00); letter-spacing: 0.06em; color: var(--faint); margin-top: 0.15rem; }
.stage-track .st { display: inline-flex; align-items: center; gap: 0.35rem; }
.stage-track .st + .st::before { content: ''; width: 1.4rem; height: 1px; background: var(--line2); margin: 0 0.45rem; }
.stage-track .st i { width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line2); }
.stage-track .st.past { color: var(--dim); } .stage-track .st.past i { background: var(--ink); box-shadow: none; }
.stage-track .st.past + .st::before { background: var(--ink); }
.stage-track .st.now { color: var(--ink); } .stage-track .st.now i { background: var(--gold); box-shadow: none; animation: glow 1.8s ease-in-out infinite; }

/* ---- the walk, 2026-10-16: every place at 1500 and 400 wide, the misfits it found ---- */
/* The pulse's acts: the outcome is their fifth column, not their fourth; the rule above was written for the rings, where the fourth is
   the outcome, and in the acts it stretched who acted and pushed what happened to the right. */
@media not all and (max-width: 40rem) {
  .table-wrap table.acts-table th:nth-child(4), .table-wrap table.acts-table td:nth-child(4) { width: auto; white-space: nowrap; }
  .table-wrap table.acts-table th:nth-child(5), .table-wrap table.acts-table td:nth-child(5) { width: 99%; white-space: normal; }
}
/* Structure's six counts stand six in a row, three or two where narrower; never five and an orphan. */
.stands { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 70rem) { .stands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .stands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On a phone, beside with nothing in it is not a section: "beside · nothing stands beside this" closed most pages. */
@media (max-width: 60rem) { .o-aside:has(#beside > p.empty:only-child) { display: none; } }
/* On a phone a line with seals puts them under its words, and a path in the hand may break anywhere rather than squeeze to a column. */
@media (max-width: 40rem) {
  .o-editor .lines .ln:has(> .p button) { grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; }
  .o-editor .lines .ln:has(> .p button) > .p { justify-self: start; }
}
.lines .ln .hand { overflow-wrap: anywhere; }

/* ---- motion, 2026-10-16: screens, panels and tabs move as a change of place, never as decoration ---- */
/* A route's change runs as a view transition (data-vt="route"): the editor's work leaves toward one side and the next comes in from
   the other, forward right to left, back left to right; the strip, the library and beside cross over. The chrome (the topbar, the
   spine, the foot) does not move. A beside tab's change (data-vt="tab") moves beside alone. */
.o-editor > .work { view-transition-name: ed-work; }
.o-editor > .strip { view-transition-name: ed-strip; }
.o-library > .lib { view-transition-name: lib; }
#beside { view-transition-name: beside; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: var(--ease); }
::view-transition-old(ed-strip), ::view-transition-old(lib) { animation: vt-fade-out 180ms ease-in both; }
::view-transition-new(ed-strip), ::view-transition-new(lib) { animation: vt-fade-in 300ms var(--ease) 80ms both; }
:root[data-vt="route"]::view-transition-old(ed-work) { animation: vt-out-left 220ms cubic-bezier(0.4, 0, 1, 1) both; }
:root[data-vt="route"]::view-transition-new(ed-work) { animation: vt-in-right 420ms var(--ease) 70ms both; }
:root[data-vt="route"][data-nav="back"]::view-transition-old(ed-work) { animation-name: vt-out-right; }
:root[data-vt="route"][data-nav="back"]::view-transition-new(ed-work) { animation-name: vt-in-left; }
:root[data-vt]::view-transition-old(beside) { animation: vt-out-left-soft 200ms cubic-bezier(0.4, 0, 1, 1) both; }
:root[data-vt]::view-transition-new(beside) { animation: vt-in-right-soft 380ms var(--ease) 60ms both; }
:root[data-vt][data-nav="back"]::view-transition-old(beside) { animation-name: vt-out-right-soft; }
:root[data-vt][data-nav="back"]::view-transition-new(beside) { animation-name: vt-in-left-soft; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-28px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(36px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(28px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-36px); } }
@keyframes vt-out-left-soft { to { opacity: 0; transform: translateX(-14px); } }
@keyframes vt-in-right-soft { from { opacity: 0; transform: translateX(18px); } }
@keyframes vt-out-right-soft { to { opacity: 0; transform: translateX(14px); } }
@keyframes vt-in-left-soft { from { opacity: 0; transform: translateX(-18px); } }

/* The foot's act, when it changes, comes in from the right, once. */
#foot-acts .cta-in { animation: cta-in 360ms var(--ease) both; }
#foot-acts .cta-in + .cta-in { animation-delay: 60ms; }
@keyframes cta-in { from { opacity: 0; transform: translateX(10px); } }
/* A drawer opened by the hand eases open, once per opening. */
.drawer.opening .dc { animation: open-down 300ms var(--ease) both; }
@keyframes open-down { from { opacity: 0; transform: translateY(-6px); } }
/* The reader comes in as a sheet from the right. */
.reader:not([hidden]) { animation: sheet-in 380ms var(--ease) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateX(28px); } }
/* A turn that lands while you read settles in, once. */
.turn.arrive { animation: arrive 520ms var(--ease) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }
/* Less motion, never none: a device that asks for reduced motion still sees what changed, as a short fade in place. Nothing
   travels, grows or breathes; the move between places, a turn landing, the reader, the foot's act and a drawer only fade. */
@keyframes still-in { from { opacity: 0; } }
@keyframes still-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none !important; }
  ::view-transition-old(*) { animation: still-out 110ms ease-in both !important; }
  ::view-transition-new(*) { animation: still-in 180ms ease-out 100ms both !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .turn.arrive, .reader:not([hidden]), #foot-acts .cta-in, .drawer.opening .dc { animation: still-in 200ms ease-out both !important; }
}

/* ---- the groove everywhere (2026-10-17): every choice of one in the groove; grants as switches in the same well ---- */
/* A choice of one among pressed seals (the supply, the merkava's supply, the dial and the birth of a mind made, offered or mine
   alone, a line's kind, the mind, the ground to move to) stands in the groove like the dial and the modes, the one chosen raised. */
.opts:has(> button.choice[aria-pressed]):not(:has(> .grant, > .tick)), .card .grants .opts {
  width: fit-content; max-width: 100%; background: var(--fill); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--line-soft);
}
.opts:has(> button.choice[aria-pressed]):not(:has(> .grant, > .tick)) > button.choice, .card .grants .opts > button.choice.grant {
  border: 0; border-radius: 7px; margin-left: 0; background: transparent; min-height: 1.75rem; line-height: 1.25; padding-block: 0.3rem; text-align: left;
  transition: background 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.opts:has(> button.choice[aria-pressed]):not(:has(> .grant, > .tick)) > button.choice[aria-pressed="true"], .card .grants .opts > button.choice.grant[aria-pressed="true"],
.opts:has(> button.choice[aria-pressed]):not(:has(> .grant, > .tick)) > button.choice[aria-pressed="true"]:disabled:hover, .card .grants .opts > button.choice.grant[aria-pressed="true"]:disabled:hover {
  background: var(--lift); color: var(--ink); border-color: transparent; font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--line-soft);
}
.opts:has(> button.choice[aria-pressed]):not(:has(> .grant, > .tick)) > button.choice:not([aria-pressed="true"]):not(:disabled):hover, .card .grants .opts > button.choice.grant:not([aria-pressed="true"]):not(:disabled):hover { color: var(--ink); background: color-mix(in srgb, var(--raised) 45%, transparent); }
/* A grant is a switch, not a choice of one: read and write, the web and a link, each held or not. Each wears the stage track's dot,
   a hollow ring when not held and ink when held, so the eye reads switches where the groove alone would say one of. */
.card .grants .opts > button.choice.grant { display: inline-flex; align-items: center; gap: 0.45rem; padding-inline: 0.65rem 0.8rem; }
.card .grants .opts > button.choice.grant::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line2); transition: background 160ms var(--ease), box-shadow 160ms var(--ease); }
.card .grants .opts > button.choice.grant[aria-pressed="true"]::before { background: var(--ink); box-shadow: none; }