/* =====================================================================
   QQuill · mini — the desktop Thing View's CSS, lifted from qquill-desktop
   (renderer/styles/qq-tokens.css, tokens.css, global.css, components.css,
   qq-desktop.css) and trimmed to what this one screen uses. Two schemes: the
   dark one is the apps'; the light one (html[data-scheme='light']) is the
   mini's own paper — every surface, ink and tint is a token below, and the
   element inks are re-issued in js/elements.js applyScheme for the drawings.

   Three systems ride on custom properties (see js/app.js):
   · the FOCUS cursor — `--scale` / `--fade` are set inline per rail and on the
     thing box; the browser transitions the VARIABLES (registered below) and
     every size and ink is a calc() of them, with no transition of its own;
   · the SPINE — `data-corner` names the corner an element's two lines meet at
     and `data-spine` the sides still drawn; `--on-*` / `--j-*` / `--gx/--gy`
     transition, the side colours and the rounded corners derive from them, so
     an element switch never moves layout;
   · the TWEAK panel — every `--k-*` number is a knob written onto :root.
   ===================================================================== */

/* ---------- fonts (the four the view needs) ---------- */
/* WOFF2 first (Prompt without its Thai block — no pack reads Thai), the TTFs stay as the fallback.
   The two symbol faces block rather than swap: a fallback would print letters where glyphs belong. */
@font-face { font-family: 'astrodot'; src: url('fonts/Astrodotbasic.woff2') format('woff2'), url('fonts/Astrodotbasic.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'prompt'; src: url('fonts/Prompt-Regular.woff2') format('woff2'), url('fonts/Prompt-Regular.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'lato'; src: url('fonts/Lato-Regular.woff2') format('woff2'), url('fonts/Lato-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'sigil-spellweaver'; src: url('fonts/SpellweaverNodes.woff2') format('woff2'), url('fonts/SpellweaverNodes.ttf') format('truetype'); font-display: block; }

/* ---------- registered properties: the browser interpolates these, everything else derives ---------- */
@property --scale { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --fade { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --lift { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --on-l { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --on-t { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --on-r { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --on-b { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --j-tl { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --j-tr { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --j-bl { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --j-br { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --gx { syntax: '<number>'; inherits: false; initial-value: -0.3; }
@property --gy { syntax: '<number>'; inherits: false; initial-value: -0.3; }
@property --rail { syntax: '<color>'; inherits: true; initial-value: #8ca6bd; }
@property --el-color { syntax: '<color>'; inherits: true; initial-value: #fff3e3; }

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  /* surface */
  --bg: #12151A;
  --bg-list: #12151A;
  --card: #1F252B;
  --card-border: #1C2126;
  --group-card: #1A1F24;
  --water-border: #41505E;
  --surface: #1f252b;
  --surface-2: #252c34;
  /* foreground */
  --fg: #FFF3E3;
  --fg-between: #8CA6BD;
  --fg-light: #556573;
  --text-primary: #fff3e3;
  --text-secondary: #8ca6bd;
  --text-hint: #556573;
  --primary: #FEFEFE;
  --upvote: #E04A16;
  --success: #3a9459;
  /* elements */
  --el-akasha: #5A15CC;
  --el-air: #FCBD3F;
  --el-fire: #FA1928;
  --el-water: #006FBE;
  --el-earth: #0FB500;
  --air: #fcbd3f; --fire: #fa1928; --water: #006fbe; --earth: #0fb500; --akasha: #5a15cc;
  /* shape */
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --radius-card: 18px; --radius-sm: 10px; --radius-pill: 999px;
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.5);
  /* tints and floats (the light scheme re-issues them) */
  --hover: rgba(255, 255, 255, 0.04); --hover-2: rgba(255, 255, 255, 0.05); --tint: rgba(255, 255, 255, 0.03);
  --code-bg: rgba(255, 255, 255, 0.07); --thumb: rgba(255, 255, 255, 0.08);
  --float-bg: rgba(20, 24, 29, 0.97); --veil: rgba(6, 8, 11, 0.62);
  --centre-bg: radial-gradient(circle at 35% 35%, rgba(255, 243, 227, 0.2) 0%, rgba(255, 243, 227, 0.05) 55%, rgba(10, 12, 16, 0.95) 100%), #0b0e12;
  --centre-line: rgba(255, 243, 227, 0.22); --centre-glow: rgba(255, 243, 227, 0.12);
  --hairline: 0.5px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 32px;
  /* type */
  --font-title: 'prompt', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'prompt', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'lato', 'Menlo', monospace;
  --font-glyph: 'astrodot', 'lato', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --fs-body: 14px; --fs-small: 12px; --fs-tiny: 10px;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- the knobs (js/app.js applyKnobs writes the live values onto <html>) ----
     The first paint, before applyKnobs() runs: keep every value in step with the
     KNOBS spec's `d`. Only knobs `isCSSKnob()` accepts belong here — a select with
     no `css` mapper (falloff, pivotView, glyphSide, rowMoon, planetMod, zodiacMod,
     recession, elementLean) is a JS-side switch and writes no token.
     The tweak panel's Copy CSS emits exactly this block after a Reset. */
  --k-depthScale: 0.84; --k-childScale: 0.63; --k-ancestorScale: 0.82; --k-minScale: 0.45;
  --k-fadeScale: 0.94; --k-minFade: 0.52; --k-offThreadFade: 1; --k-siblingScale: 1; --k-sigilFade: 0.95;
  --k-hoverLift: 1; --k-glowSize: 29px; --k-glowAlpha: 0.49;
  --k-transitionMs: 260ms; --k-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --k-rowFont: 12.5px; --k-rowPadX: 8px; --k-rowPadY: 6px; --k-rowGap: 6px; --k-railIndent: 10px;
  --k-glyphSize: 16px; --k-metaFont: 10px; --k-headGap: 5px; --k-toolSize: 22px;
  --k-spineWidth: 1.5px; --k-spineWidthH: 1.5px; --k-lipRadius: 10px; --k-boxRadius: 23px; --k-cornerMode: 1; --k-cornerAll: 1; --k-minimapAlign: flex-start; --k-spineMs: 720ms; --k-bodyInsetR: 13px; --k-spineGhost: 0%;
  --k-titleFont: 34px; --k-sigilSize: 102px; --k-bodyFont: 15px; --k-qnFont: 12px;
  --k-thingGap: 17px; --k-headBelow: 15px; --k-boxPadTop: 28px; --k-boxInset: 18px;
  /* the spine, in its own names */
  --spine-w: var(--k-spineWidth);
  --spine-w-h: var(--k-spineWidthH);
  --lip-r: var(--k-lipRadius);
  --spine-ms: var(--k-spineMs);
  --body-inset-r: var(--k-bodyInsetR);
  --spine-ghost: var(--k-spineGhost);
}

/* ---------- resets (global.css) ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ---------- the light scheme: paper ----------
   Warm off-white ground, a whiter card on it, hairlines a shade darker than
   the ground, ink a warm near-black. The element inks are deepened so a 1.5 px
   line and a 10 px label both hold on paper (js/elements.js LIGHT_PALETTE has
   the same values — keep them together). */
html[data-scheme='light'] {
  color-scheme: light;
  --bg: #F5F2EC; --bg-list: #F5F2EC;
  --card: #FCFBF8; --card-border: #E6E1D8; --group-card: #F1EDE6; --water-border: #CFC8BC;
  --surface: #FCFBF8; --surface-2: #F1EDE6;
  --fg: #1F1B16; --fg-between: #5B6470; --fg-light: #8A8F96;
  --text-primary: #1F1B16; --text-secondary: #5B6470; --text-hint: #8A8F96;
  --primary: #1F1B16;
  --el-akasha: #5A15CC; --el-air: #B8860B; --el-fire: #D1121F; --el-water: #0A5FA8; --el-earth: #118A0A;
  --air: #b8860b; --fire: #d1121f; --water: #0a5fa8; --earth: #118a0a; --akasha: #5a15cc;
  --shadow-pop: 0 12px 40px rgba(40, 32, 18, 0.16);
  --hover: rgba(31, 27, 22, 0.04); --hover-2: rgba(31, 27, 22, 0.06); --tint: rgba(31, 27, 22, 0.03);
  --code-bg: rgba(31, 27, 22, 0.06); --thumb: rgba(31, 27, 22, 0.14);
  --float-bg: rgba(252, 251, 248, 0.97); --veil: rgba(60, 52, 40, 0.35);
  --centre-bg: radial-gradient(circle at 35% 35%, rgba(31, 27, 22, 0.1) 0%, rgba(31, 27, 22, 0.03) 55%, #EDE8DF 100%);
  --centre-line: rgba(31, 27, 22, 0.18); --centre-glow: rgba(31, 27, 22, 0.08);
}
/* on paper the thing box and the rows sit a breath above the ground */
html[data-scheme='light'] .qq-td-thingbox { box-shadow: 0 1px 2px rgba(40, 32, 18, 0.05), 0 0 0 0.5px var(--card-border); }
html[data-scheme='light'] .qq-td-thingbox[data-focus='true'] {
  box-shadow: 0 1px 2px rgba(40, 32, 18, 0.05), 0 0 0 0.5px var(--card-border),
    calc(var(--k-glowSize) * var(--gx)) calc(var(--k-glowSize) * var(--gy)) var(--k-glowSize) 0
    color-mix(in srgb, var(--el-color) calc(var(--k-glowAlpha) * 60%), transparent);
}
html[data-scheme='light'] .rail[data-focus='true'] {
  box-shadow: calc(var(--k-glowSize) * var(--gx)) calc(var(--k-glowSize) * var(--gy)) var(--k-glowSize) 0
    color-mix(in srgb, var(--rail) calc(var(--k-glowAlpha) * 60%), transparent);
}
html[data-scheme='light'] .qq-td-side-card, html[data-scheme='light'] .qq-field-row { box-shadow: 0 0 0 0.5px var(--card-border); }

html, body, #app { height: 100%; width: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: default; }
input, textarea, select { font-family: inherit; color: inherit; background: none; border: none; outline: none; }
input, textarea, [contenteditable='true'], .selectable { user-select: text; cursor: text; }
a { color: inherit; }
kbd { font-family: var(--font-mono); font-size: 0.85em; border: 0.5px solid var(--water-border); border-radius: 4px; padding: 0 4px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--water-border); }
::-webkit-scrollbar-track { background: transparent; }
.glyph, .astrodot { font-family: var(--font-glyph); line-height: 1; display: inline-block; font-weight: 400; }
.glyph-text { display: inline-block; line-height: 1; }
.qq-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
#app { position: relative; }
.qq-scope { box-sizing: border-box; height: 100%; font-family: var(--font-text); font-size: 15px; line-height: 1.45; color: var(--fg); background: var(--bg); }
@keyframes qq-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the detail shell ---------- */
.qq-detail {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 6;
  animation: qq-fade 0.22s var(--ease-soft);
  /* the accent eases when the thing changes its symbol; every consumer follows */
  transition: --el-color var(--spine-ms) var(--ease-soft);
}
.qq-detail-head {
  padding: 18px 32px 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
}
.qq-detail-back {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--fg-light);
  border-radius: 8px;
  padding: 6px 10px 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 11px;
}
.qq-detail-back:hover { color: var(--fg); border-color: var(--water-border); }
.qq-detail-back svg { width: 14px; height: 14px; }
.qq-detail-crumb { font-family: var(--font-text); font-size: 12px; color: var(--fg-light); display: flex; align-items: center; gap: 4px; min-width: 0; }
.qq-detail-crumb strong { color: var(--fg); font-weight: 600; }
.qq-detail-crumb-id { opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.qq-detail-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qq-detail-actions .qq-btn[data-active='true'] { border-color: var(--el-color); color: var(--fg); }
.qq-detail-body { flex: 1; overflow-y: auto; padding: 0; }
.qq-detail-body::-webkit-scrollbar { width: 8px; }
.qq-detail-body::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 4px; }

.qq-btn {
  border: 1px solid var(--card-border);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qq-btn:hover { background: #1a2026; }
.qq-btn-primary { background: var(--el-color, var(--fg)); color: var(--el-on, var(--bg)); border-color: transparent; font-weight: 600; }
.qq-btn-primary:hover { filter: brightness(1.08); }
.qq-btn-icon { padding: 7px 9px; color: var(--fg-light); }
.qq-btn-icon:hover, .qq-btn-icon[data-active='true'] { color: var(--fg); }
.qq-detail-more { padding: 7px 10px; font-size: 14px; line-height: 1; }
.qq-empty { padding: 32px 16px; font-family: var(--font-text); font-size: 12px; color: var(--fg-light); text-align: center; font-style: italic; line-height: 1.5; }

/* ---------- Thing detail — wide layout ---------- */
.qq-thing-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  padding: 28px 40px 60px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  transition: grid-template-columns 0.28s var(--ease-soft);
}
.qq-thing-detail-narrow { grid-template-columns: 1fr 34px; max-width: 880px; }
.qq-td-main { min-width: 0; }

/* ---------- the spine: which corner carries the ink ----------
   data-corner="tl|tr|bl|br" names the corner where an element's two lines
   meet; data-spine lists the sides still drawn (a bar can be switched off);
   data-double="true" draws each line as a pair; data-side="right" mirrors the
   row head (see .rail[data-side]). CSS knows corners and sides; family →
   corner is prefs.spines (js/app.js spineSpec). Every side is ALWAYS present
   at a constant width — only --on-* (ink), --j-* (the joint), --gx/--gy (the
   glow) transition, and the rounded corners derive from them — so a switch
   never moves layout (the double edge is the one accepted 2 px step).
   Opposite sides share a layer (top + bottom on the box, left + right on
   ::before): no diagonal colour joins, and the two sides that DO meet share
   the rounded corner. `--k-cornerAll` 1 rounds every corner whatever the ink
   (the default — a glow never reveals a square corner); else `--k-cornerMode`
   1 rounds every corner an inked line touches (the joint and each bar's free
   end); 0 rounds the joint only. */
[data-spine] {
  --on-l: 0; --on-t: 0; --on-r: 0; --on-b: 0;
  --j-tl: 0; --j-tr: 0; --j-bl: 0; --j-br: 0;
  --c-tl: max(var(--k-cornerAll), var(--j-tl), calc(var(--k-cornerMode) * max(var(--on-l), var(--on-t))));
  --c-tr: max(var(--k-cornerAll), var(--j-tr), calc(var(--k-cornerMode) * max(var(--on-t), var(--on-r))));
  --c-br: max(var(--k-cornerAll), var(--j-br), calc(var(--k-cornerMode) * max(var(--on-r), var(--on-b))));
  --c-bl: max(var(--k-cornerAll), var(--j-bl), calc(var(--k-cornerMode) * max(var(--on-l), var(--on-b))));
  --spine-w-eff: var(--spine-w);
  --spine-w-h-eff: var(--spine-w-h);
  --silent: color-mix(in srgb, var(--spine-ink) var(--spine-ghost, 0%), transparent);
  --sc-l: color-mix(in srgb, var(--spine-ink) calc(clamp(0, var(--on-l), 1) * 100%), var(--silent));
  --sc-t: color-mix(in srgb, var(--spine-ink) calc(clamp(0, var(--on-t), 1) * 100%), var(--silent));
  --sc-r: color-mix(in srgb, var(--spine-ink) calc(clamp(0, var(--on-r), 1) * 100%), var(--silent));
  --sc-b: color-mix(in srgb, var(--spine-ink) calc(clamp(0, var(--on-b), 1) * 100%), var(--silent));
  /* the glow hugs the inked sides */
  --gx: -0.3; --gy: -0.3;
  position: relative;
  border-left: 0;
  border-right: 0;
  border-top: var(--spine-w-h-eff) solid var(--sc-t);
  border-bottom: var(--spine-w-h-eff) solid var(--sc-b);
}
[data-spine]::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--spine-w-h-eff)) 0;
  border: 0 solid transparent;
  border-left: var(--spine-w-eff) solid var(--sc-l);
  border-right: var(--spine-w-eff) solid var(--sc-r);
  border-radius: inherit;
  pointer-events: none;
}
[data-spine~="left"] { --on-l: 1; }
[data-spine~="top"] { --on-t: 1; }
[data-spine~="right"] { --on-r: 1; --gx: 0.3; }
[data-spine~="bottom"] { --on-b: 1; --gy: 0.3; }
/* the joint: the element's corner, rounded whichever bars are on */
[data-corner="tl"] { --j-tl: 1; }
[data-corner="tr"] { --j-tr: 1; }
[data-corner="bl"] { --j-bl: 1; }
[data-corner="br"] { --j-br: 1; }
/* the double edge: each line a pair, never under 3px (below that `double` paints solid) */
[data-double="true"] {
  --spine-w-eff: max(3px, calc(var(--spine-w) * 2));
  --spine-w-h-eff: max(3px, calc(var(--spine-w-h) * 2));
  border-top-style: double;
  border-bottom-style: double;
}
[data-double="true"]::before { border-left-style: double; border-right-style: double; }
/* a planet's HAND — the line style and weight it draws its family's spine in (a sign wears its
   ruler's); it wins over the double edge (spineSpec drops `double` when a hand applies) */
[data-hand='solid'], [data-hand='dashed'], [data-hand='dotted'] {
  --spine-w-eff: calc(var(--spine-w) * var(--hand-w, 1));
  --spine-w-h-eff: calc(var(--spine-w-h) * var(--hand-w, 1));
}
[data-hand='dashed'] { border-top-style: dashed; border-bottom-style: dashed; }
[data-hand='dashed']::before { border-left-style: dashed; border-right-style: dashed; }
[data-hand='dotted'] { border-top-style: dotted; border-bottom-style: dotted; }
[data-hand='dotted']::before { border-left-style: dotted; border-right-style: dotted; }
/* a sign's MODALITY along the vertical bar: cardinal initiates hard at the corner and tapers away ·
   fixed sustains (no mask) · mutable swells in the middle and recedes toward both ends */
[data-env='ramp'][data-corner='tl']::before, [data-env='ramp'][data-corner='tr']::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0, 0, 0, 0.2) 100%);
}
[data-env='ramp'][data-corner='bl']::before, [data-env='ramp'][data-corner='br']::before {
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 22%, rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 22%, rgba(0, 0, 0, 0.2) 100%);
}
[data-env='morph']::before {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, #000 50%, rgba(0, 0, 0, 0.28) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, #000 50%, rgba(0, 0, 0, 0.28) 100%);
}

/* The thing's own rail — the sub-thing look at thing scale: the element's
   spine sides in the accent, one rounded corner where its two lines meet (the
   same corner rule as a row). `--scale` / `--fade` here are the ROOT's
   recession — the title, sigil and body derive from them. */
.qq-td-thingbox {
  --ink: color-mix(in srgb, var(--el-color) calc(min(1, var(--fade)) * 100%), var(--card));
  --spine-ink: var(--ink);
  --td-inset: var(--k-boxInset);
  border-radius:
    calc(var(--k-boxRadius) * var(--c-tl)) calc(var(--k-boxRadius) * var(--c-tr))
    calc(var(--k-boxRadius) * var(--c-br)) calc(var(--k-boxRadius) * var(--c-bl));
  padding: calc(var(--k-boxPadTop) * var(--scale)) var(--td-inset) 24px;
  background: var(--card);
  outline: none;
  transition:
    --scale var(--k-transitionMs) var(--k-ease),
    --fade var(--k-transitionMs) var(--k-ease),
    --on-l var(--spine-ms) var(--ease-soft), --on-t var(--spine-ms) var(--ease-soft),
    --on-r var(--spine-ms) var(--ease-soft), --on-b var(--spine-ms) var(--ease-soft),
    --j-tl var(--spine-ms) var(--ease-soft), --j-tr var(--spine-ms) var(--ease-soft),
    --j-bl var(--spine-ms) var(--ease-soft), --j-br var(--spine-ms) var(--ease-soft),
    --gx var(--spine-ms) var(--ease-soft), --gy var(--spine-ms) var(--ease-soft),
    box-shadow 200ms var(--k-ease);
}
.qq-td-thingbox[data-focus='true'] {
  box-shadow: calc(var(--k-glowSize) * var(--gx)) calc(var(--k-glowSize) * var(--gy)) var(--k-glowSize) 0
    color-mix(in srgb, var(--el-color) calc(var(--k-glowAlpha) * 100%), transparent);
}
.qq-td-head {
  --td-sigil: calc(var(--k-sigilSize) * var(--scale) * var(--sigil-m, 1));
  display: grid;
  grid-template-columns: var(--td-sigil) minmax(0, 1fr);
  gap: calc(var(--k-thingGap) * var(--scale));
  align-items: start;
  margin: 0 0 calc(var(--k-headBelow) * var(--scale));
}
.qq-thing-detail-narrow .qq-td-head { --sigil-m: 0.83; gap: calc(14px * var(--scale)); }
.qq-td-title-sigil {
  width: var(--td-sigil);
  height: var(--td-sigil);
  flex-shrink: 0;
  margin: 0;
  opacity: 0.95;
  transition: opacity 0.18s;
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.qq-td-title-sigil:hover { opacity: 1; }
.qq-td-title-sigil svg { width: 100%; height: 100%; display: block; }
.qq-charged-sigil { position: relative; display: block; width: 100%; height: 100%; flex: 0 0 auto; isolation: isolate; }
.qq-charged-sigil > svg {
  position: relative; z-index: 2; display: block; width: 100%; height: 100%;
  filter: var(--sigil-glow, none);
  /* the fade rides the leaf svg's opacity (nothing nests under it, so nothing compounds) */
  opacity: calc(1 - (1 - min(1, var(--fade))) * var(--k-sigilFade));
  transition: filter 0.4s;
}
.qq-charged-sigil[data-charged='true']::before { content: ''; position: absolute; inset: 2.5%; border-radius: 50%; background: var(--card); z-index: 1; pointer-events: none; }
.qq-td-head-col { min-width: 0; display: flex; flex-direction: column; gap: calc(8px * var(--scale)); }
.qq-td-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: max(9px, calc(var(--k-titleFont) * var(--scale) * var(--text-m, 1)));
  line-height: 1.15;
  color: color-mix(in srgb, var(--fg) calc(min(1, var(--fade)) * 100%), var(--card));
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.qq-td-title-editable { cursor: text; display: block; flex: 1; min-width: 0; border-radius: 6px; }
.qq-td-title-editable:hover { background: color-mix(in srgb, var(--bg) 45%, transparent); }
.qq-td-title.is-empty { color: var(--fg-light); font-style: italic; font-weight: 500; }
/* likewise the title: the same face, size and weight as the <h1> it replaces —
   a textarea (never an <input>) so a long title wraps exactly as it renders */
.qq-td-title-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  display: block;
  field-sizing: content;
  font-family: var(--font-title);
  font-size: max(9px, calc(var(--k-titleFont) * var(--scale) * var(--text-m, 1)));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--fg) calc(min(1, var(--fade)) * 100%), var(--card));
  padding: 0;
}
.qq-td-title-input::placeholder { color: var(--fg-light); font-style: italic; font-weight: 500; }
/* the Q-Notation line — element-coloured: glyph · correspondence name · moon · age */
.qq-td-qn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  font-family: var(--font-text);
  font-size: max(7px, calc(var(--k-qnFont) * var(--scale)));
  line-height: 1.2;
  color: color-mix(in srgb, var(--el-color) calc(min(1, var(--fade)) * 100%), var(--card));
}
.qq-td-qn-glyph { position: relative; background: none; border: none; padding: 0 1px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; }
.qq-td-qn-glyph:hover { filter: brightness(1.3); }
.qq-td-qn-glyph[data-pivoted='true']::after { content: ''; position: absolute; left: -3px; top: -1px; width: 4px; height: 4px; border-radius: 50%; background: var(--el-color); }
.qq-td-qn-pivot { background: none; border: none; padding: 0 1px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; color: var(--fg-light); }
.qq-td-qn-pivot:hover { color: var(--el-color); }
.qq-td-qn-label {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-text); font-size: 1em; font-weight: 600; letter-spacing: 0.04em;
  color: inherit;
}
.qq-td-qn-label:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.qq-td-qn-sep, .qq-td-qn-muted { color: var(--fg-light); }
.qq-td-qn svg { display: inline-block; vertical-align: middle; }
.qq-td-qn-trail { display: inline-flex; align-items: center; }
.qq-td-section-label {
  font-family: var(--font-text);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-light);
  margin: 24px 0 12px;
}

/* --- the markdown body: click to edit --- */
.qq-md {
  cursor: text; font-family: var(--font-text);
  font-size: max(8px, calc(var(--k-bodyFont) * var(--scale)));
  line-height: 1.7;
  color: color-mix(in srgb, var(--fg) calc(min(1, var(--fade)) * 100%), var(--card));
  margin: calc(18px * var(--scale)) 0 calc(26px * var(--scale)); border-radius: 8px;
}
.qq-md:hover { background: color-mix(in srgb, var(--bg) 40%, transparent); }
.qq-md p { margin: 0 0 10px; }
.qq-md p:last-child { margin-bottom: 0; }
.qq-md h1, .qq-md h2, .qq-md h3 { font-family: var(--font-title); color: inherit; margin: 14px 0 6px; line-height: 1.25; }
.qq-md h1 { font-size: 1.38em; } .qq-md h2 { font-size: 1.17em; } .qq-md h3 { font-size: 1.03em; }
.qq-md ul, .qq-md ol { margin: 0 0 10px; padding-left: 22px; }
.qq-md li { margin: 2px 0; }
.qq-md code { font-family: var(--font-mono); font-size: 0.86em; background: var(--code-bg); border-radius: 4px; padding: 1px 5px; }
.qq-md pre { background: var(--bg); border: 0.5px solid var(--card-border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0 0 10px; }
.qq-md pre code { background: none; padding: 0; }
.qq-md blockquote { border-left: 2px solid color-mix(in srgb, var(--el-color, var(--card-border)) 60%, transparent); margin: 0 0 10px; padding: 2px 0 2px 12px; color: inherit; font-style: italic; opacity: 0.9; }
.qq-md hr { border: none; border-top: 0.5px solid var(--water-border); margin: 12px 0; }
.qq-md a, .qq-extlink { color: var(--el-water, #58a6d8); text-decoration: underline; text-underline-offset: 2px; }
.qq-wikilink { color: var(--el-water); text-decoration: underline; text-underline-offset: 2px; }
.qq-md-empty { color: var(--fg-light); font-style: italic; }
/* the body's editor IS the body: every metric of .qq-md above, with a caret in it */
.qq-md-input {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0;
  margin: calc(18px * var(--scale)) 0 calc(26px * var(--scale));
  font-family: var(--font-text);
  font-size: max(8px, calc(var(--k-bodyFont) * var(--scale)));
  line-height: 1.7;
  color: color-mix(in srgb, var(--fg) calc(min(1, var(--fade)) * 100%), var(--card));
  min-height: 1.7em;
  resize: none;
  outline: none;
  overflow: hidden;
  display: block;
  field-sizing: content;
}
.qq-md-input::placeholder { color: var(--fg-light); font-style: italic; }

/* --- the branch toolbar: New sub-thing · [zap] n · [sort] ⇅ --- */
.qq-td-subbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 6px; }
.qq-td-subbar-add, .qq-td-subbar-charge, .qq-td-subbar-sort { flex: 0 0 auto; }
.qq-td-subbar-add {
  display: inline-flex; align-items: center; gap: 5px; margin-right: auto;
  padding: 4px 10px 4px 7px; border: 1px dashed var(--card-border); border-radius: 8px; background: transparent;
  font-family: var(--font-text); font-size: 11.5px; color: var(--fg-light); cursor: pointer;
}
.qq-td-subbar-add:hover { color: var(--fg); border-color: var(--fg-light); }
.qq-td-subbar-charge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 8px;
  border: 1px solid var(--card-border); border-radius: 8px; background: transparent;
  font-family: var(--font-text); font-size: 11.5px; color: var(--fg-light); cursor: pointer;
}
.qq-td-subbar-charge:hover { color: var(--fg); border-color: var(--el-color, var(--fg-light)); }
.qq-td-subbar-charge[data-charged='true'] { color: var(--el-color, var(--fg)); border-color: color-mix(in srgb, var(--el-color, var(--fg-light)) 55%, transparent); }
.qq-td-subbar-charge-n { font-family: var(--font-mono); font-size: 11px; }
.qq-td-subbar-note { flex: 1 1 140px; min-width: 0; font-family: var(--font-text); font-size: 10.5px; color: var(--fg-light); opacity: 0.8; }
.qq-td-subbar-sort { display: flex; align-items: center; gap: 6px; }
.qq-algodd { position: relative; display: inline-block; }
.qq-algodd-trig {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 4px 8px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--fg); font-family: var(--font-text); font-size: 12px;
}
.qq-algodd-trig:hover { border-color: var(--el-color); }
.qq-algodd-icon .qq-algodd-trig { padding: 5px 7px; gap: 0; color: var(--fg-light); }
.qq-algodd-icon .qq-algodd-trig:hover { color: var(--fg); }
.qq-algodd-name { font-family: var(--font-title); font-weight: 600; font-size: 12px; text-align: left; }
.qq-algodd-chev { width: 14px; height: 14px; color: var(--fg-light); }
.qq-algodd-menu {
  position: fixed; z-index: 40; width: 260px;
  background: var(--float-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--card-border); border-radius: 12px; padding: 4px;
  box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 1px;
  animation: qq-algodd-in 160ms var(--ease-soft);
}
@keyframes qq-algodd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.qq-algodd-opt { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; text-align: left; color: var(--fg-between); }
.qq-algodd-opt > .qq-icon { color: var(--fg-light); }
.qq-algodd-opt:hover { background: var(--hover); color: var(--fg); }
.qq-algodd-opt[data-active='true'] { background: var(--hover-2); color: var(--fg); box-shadow: 0 0 0 1px var(--el-color) inset; }
.qq-algodd-opt[data-active='true'] > .qq-icon, .qq-algodd-opt:hover > .qq-icon { color: var(--mode-accent, var(--fg)); }
.qq-algodd-opt-name { font-family: var(--font-title); font-weight: 600; font-size: 12.5px; }
.qq-algodd-opt-blurb { font-size: 11px; color: var(--fg-light); margin-top: 1px; }
.qq-feed-toggle {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 999px; padding: 4px 8px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-light); cursor: pointer;
}
.qq-feed-toggle:hover { color: var(--fg); }
.qq-feed-toggle[data-active='true'] { color: var(--fg); border-color: var(--el-akasha); background: var(--hover-2); }

/* ---------- the branch outliner (the PO `.rail` rows inside the detail) ----------
   Every row's size and ink is a calc() of its own `--scale` / `--fade` (set
   inline by applyFocusScale). Only the variables, the spine tokens and the
   glow transition — a derived property with its own transition would restart
   its easing every frame and lag behind. */
.qq-outline { margin: 4px 0 20px; }
.qq-outline .tree { padding: 0 0 6px; }
.qq-outline-empty { padding: 18px 8px; text-align: left; }
.rail {
  --rail: var(--text-secondary);
  --ink: color-mix(in srgb, var(--rail) calc(min(1, var(--fade)) * 100%), var(--card));
  --spine-ink: var(--ink);
  --lip-s: calc(var(--lip-r) * var(--scale));
  --tail: 0px;
  padding-inline: var(--spine-w-eff);
  border-radius: calc(var(--lip-s) * var(--c-tl)) calc(var(--lip-s) * var(--c-tr)) calc(var(--lip-s) * var(--c-br)) calc(var(--lip-s) * var(--c-bl));
  margin-top: calc(var(--k-rowGap) * var(--scale));
  transition:
    --scale var(--k-transitionMs) var(--k-ease),
    --fade var(--k-transitionMs) var(--k-ease),
    --rail var(--spine-ms) var(--ease-soft),
    --on-l var(--spine-ms) var(--ease-soft), --on-t var(--spine-ms) var(--ease-soft),
    --on-r var(--spine-ms) var(--ease-soft), --on-b var(--spine-ms) var(--ease-soft),
    --j-tl var(--spine-ms) var(--ease-soft), --j-tr var(--spine-ms) var(--ease-soft),
    --j-bl var(--spine-ms) var(--ease-soft), --j-br var(--spine-ms) var(--ease-soft),
    --gx var(--spine-ms) var(--ease-soft), --gy var(--spine-ms) var(--ease-soft),
    box-shadow 200ms var(--k-ease);
}
/* the focus cursor: the glow sits on the rail (its box IS the spine + lip), offset toward the inked sides */
.rail[data-focus='true'] {
  box-shadow: calc(var(--k-glowSize) * var(--gx)) calc(var(--k-glowSize) * var(--gy)) var(--k-glowSize) 0
    color-mix(in srgb, var(--rail) calc(var(--k-glowAlpha) * 100%), transparent);
}
/* the cursor's row is tinted in both views and in both states — entering the
   editor must not change a single pixel. The :hover pair is not optional:
   `.rail[data-focus='true'] > .rail-head` (0,2,1) outranks `.rail-head:hover`
   (0,1,1), so without it the focused row alone would stop answering the pointer. */
.rail[data-focus='true'] > .rail-head { background: color-mix(in srgb, var(--rail) 8%, transparent); }
.rail[data-focus='true'] > .rail-head:hover { background: color-mix(in srgb, var(--rail) 12%, transparent); }
/* the turned node carries the marker; descendants just follow */
.rail[data-pivoted='true'] > .rail-head > .node-symbol { position: relative; }
.rail[data-pivoted='true'] > .rail-head > .node-symbol::after { content: ''; position: absolute; left: -3px; top: -1px; width: 4px; height: 4px; border-radius: 50%; background: var(--rail); }
/* Head = TWO rows: glyph · meta · tools, then the text full-width beneath. */
.rail-head {
  --lift: 1;
  --fv: min(1, calc(var(--fade) * var(--lift)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 1px;
  gap: calc(var(--k-headGap) * var(--scale));
  font-size: calc(var(--k-rowFont) * var(--scale));
  /* the head's box IS the rail's border box: it reaches over the line room on top and both sides (a
     childless rail's bottom too — see --tail), so its tint fills the rail to the rounded edge; the
     content does not move, the padding grows by exactly the margin */
  margin: calc(-1 * var(--spine-w-h-eff)) calc(-1 * var(--spine-w-eff)) 0;
  padding:
    calc(var(--k-rowPadY) * var(--scale) + var(--spine-w-h-eff))
    calc(var(--k-rowPadX) * var(--scale) + var(--spine-w-eff))
    calc((var(--k-rowPadY) + 1px) * var(--scale) + var(--tail))
    calc((var(--k-rowPadX) + 2px) * var(--scale) + var(--spine-w-eff));
  border-radius: calc(var(--lip-s) * var(--c-tl)) calc(var(--lip-s) * var(--c-tr)) calc(var(--lip-s) * var(--c-br)) calc(var(--lip-s) * var(--c-bl));
  cursor: pointer;
  min-height: calc(26px * var(--scale));
  /* a receded row lifts under the pointer so it can still be read and clicked; a full-size row never grows */
  scale: min(var(--lift), calc(1 / var(--scale)));
  transform-origin: 0 50%;
  transition: --lift 120ms var(--k-ease), background 120ms;
}
.rail-head:hover { --lift: var(--k-hoverLift); background: color-mix(in srgb, var(--rail) 9%, transparent); }
.rail-body {
  padding-left: calc(var(--k-railIndent) * var(--scale));
  padding-right: var(--body-inset-r);
  padding-bottom: 4px;
  transition: padding-bottom var(--spine-ms) var(--ease-soft);
}
[data-spine~="bottom"] > .rail-body { padding-bottom: 8px; }
/* a childless rail: the air under the text moves from its (empty) body into the head, and the head reaches
   over the bottom line's room too, so the tint fills the rail to its bottom edge */
.rail:not(:has(> .rail-body > .rail)) { --tail: calc(4px + var(--spine-w-h-eff)); }
.rail[data-spine~="bottom"]:not(:has(> .rail-body > .rail)) { --tail: calc(8px + var(--spine-w-h-eff)); }
.rail:not(:has(> .rail-body > .rail)) > .rail-head { margin-bottom: calc(-1 * var(--spine-w-h-eff)); }
.rail:not(:has(> .rail-body > .rail)) > .rail-body { padding-bottom: 0; }
.rail-head > .node-symbol { order: 1; min-height: calc(20px * var(--scale)); }
.rail-head > .node-meta { order: 2; }
.rail-head > .node-tools { order: 3; margin-inline-start: auto; min-height: calc(20px * var(--scale)); }
.rail-head > .node-main { order: 4; flex: 1 0 100%; line-height: 1.35; }
/* the glyph follows the corner: a tr / br row mirrors its head — tools first, then the meta, the glyph at the right edge; the text stays full-width beneath */
.rail[data-side="right"] > .rail-head > .node-tools { order: 1; margin-inline-start: 0; margin-inline-end: auto; }
.rail[data-side="right"] > .rail-head > .node-meta { order: 2; }
.rail[data-side="right"] > .rail-head > .node-symbol { order: 3; }
.rail[data-side="right"] > .rail-head { transform-origin: 100% 50%; padding-inline: calc(var(--k-rowPadX) * var(--scale) + var(--spine-w-eff)) calc((var(--k-rowPadX) + 2px) * var(--scale) + var(--spine-w-eff)); }
.rail[data-side="right"][data-pivoted='true'] > .rail-head > .node-symbol::after { left: auto; right: -3px; }
.node-symbol {
  display: inline-flex; align-items: center; cursor: pointer; padding: 0 2px; background: none; flex: 0 0 auto; border: none;
  font-size: calc(var(--k-glyphSize) * var(--scale));
  color: color-mix(in srgb, var(--rail) calc(var(--fv) * 100%), var(--card));
}
.node-symbol:hover { filter: brightness(1.3); }
.node-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  color: color-mix(in srgb, var(--text-hint) calc(var(--fv) * 100%), var(--card));
  font-family: var(--font-mono); font-size: calc(var(--k-metaFont) * var(--scale));
}
.node-meta-label { color: color-mix(in srgb, var(--rail) calc(var(--fv) * 100%), var(--card)); }
.node-meta-sep { opacity: 0.6; }
.node-meta-moon { display: inline-flex; align-items: center; gap: var(--sp-2); opacity: var(--fv); }
.node-meta-moon svg { width: 1em; height: 1em; display: block; }
.node-shells { display: inline-flex; align-items: center; gap: 1px; border: none; background: transparent; cursor: pointer; padding: 0 2px; opacity: 0.65; flex: 0 0 auto; font-size: 0.9em; }
.node-shells:hover { opacity: 1; }
.node-shell-step { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.node-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.node-tools { display: flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.tool-btn {
  width: calc(var(--k-toolSize) * var(--scale)); height: calc(var(--k-toolSize) * var(--scale));
  display: grid; place-items: center; border-radius: 6px;
  color: var(--text-hint); opacity: 0; transition: opacity 0.12s, background 0.12s;
  font-size: calc(14px * var(--scale)); line-height: 1;
}
.rail-head:hover .tool-btn, .rail.focused > .rail-head .tool-btn, .rail[data-focus='true'] > .rail-head .tool-btn { opacity: 1; }
.tool-btn:hover { background: var(--surface); color: var(--text-primary); }
.outline-content {
  font-family: var(--font-body);
  font-size: 1em;
  color: color-mix(in srgb, var(--text-primary) calc(var(--fv) * 100%), var(--card));
  line-height: 1.4;
  width: 100%;
  border: none;
  background: transparent;
  padding: 1px 4px 1px 0;
  margin: 0;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 6px;
  cursor: text;
  display: block;
  min-height: 1.5em;
  field-sizing: content;
}
.outline-content::placeholder { color: var(--text-secondary); font-style: italic; opacity: 0.7; }
/* Editing wears nothing of its own: the row under the cursor is already tinted
   and glowing, whether its words are a textarea or their rendering. The caret
   is the only difference (see .rail[data-focus]). */
.outline-content:focus { outline: none; }
/* An idle row renders its markdown with the textarea's exact metrics (it
   shares every .outline-content declaration), so the swap never reflows a
   plain row. Children size in em only — `--scale` carries them — and nothing
   here transitions. */
.outline-content-md { cursor: text; }
.outline-content-md > :first-child { margin-top: 0; }
.outline-content-md > :last-child { margin-bottom: 0; }
.outline-content-md p { margin: 0 0 0.3em; }
.outline-content-md h1, .outline-content-md h2, .outline-content-md h3, .outline-content-md h4 { font-family: var(--font-title); font-size: 1.05em; line-height: 1.3; margin: 0.3em 0 0.15em; color: inherit; }
.outline-content-md h1 { font-size: 1.15em; }
.outline-content-md ul, .outline-content-md ol { margin: 0 0 0.3em; padding-left: 1.5em; }
.outline-content-md ul ul, .outline-content-md ol ol, .outline-content-md ul ol, .outline-content-md ol ul { margin: 0; }
.outline-content-md code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); border-radius: 4px; padding: 0 0.3em; }
.outline-content-md pre { background: var(--bg); border: 0.5px solid var(--card-border); border-radius: 6px; padding: 0.4em 0.6em; overflow-x: auto; margin: 0 0 0.3em; }
.outline-content-md pre code { background: none; padding: 0; }
.outline-content-md blockquote { border-left: 2px solid color-mix(in srgb, var(--rail) 55%, transparent); padding-left: 0.6em; margin: 0 0 0.3em; color: inherit; font-style: italic; opacity: 0.9; }
.outline-content-md hr { border: 0; border-top: 0.5px solid var(--water-border); margin: 0.4em 0; }
.outline-content-md-empty { color: var(--text-secondary); font-style: italic; opacity: 0.7; }
/* GFM tables — the body and the rows share mdToHTML */
.qq-md-tablewrap { overflow-x: auto; max-width: 100%; margin: 0 0 0.3em; }
.qq-md table, .outline-content-md table { border-collapse: collapse; font-size: 0.95em; line-height: 1.3; }
.qq-md th, .qq-md td, .outline-content-md th, .outline-content-md td { border: 0.5px solid var(--water-border); padding: 0.15em 0.5em; text-align: left; vertical-align: top; }
.qq-md th, .outline-content-md th { font-weight: 600; color: var(--fg-between); background: var(--tint); }
[data-align='center'] { text-align: center; }
[data-align='right'] { text-align: right; }

/* ---------- fire and water read to the right (spineSpec `lean`, knob elementLean) ----------
   Scoped `> .rail-head` throughout: the head is the rail's own child and nested rails
   live in .rail-body, so a leaning row never leans its children. text-align inherits
   into .node-main and the rendered markdown — but NOT into a textarea, whose UA style
   pins it to `start`, so every editor has to be told again (below) or the words would
   jump back to the left the moment you typed in them. The GLYPH and the meta move
   through data-side, not through this: .rail-head is a flex row, and text-align moves
   text inside items, never items. */
.rail[data-lean='right'] > .rail-head { text-align: right; }
.rail[data-lean='right'] > .rail-head .outline-content { padding: 1px 0 1px 4px; }
/* the editors lean with what they replace — a textarea does not inherit text-align */
.rail[data-lean='right'] > .rail-head textarea,
.rail[data-lean='right'] > .rail-head input,
.qq-td-thingbox[data-lean='right'] .qq-td-title-input,
.qq-td-thingbox[data-lean='right'] .qq-md-input { text-align: right; }
.rail[data-lean='left'] > .rail-head textarea,
.rail[data-lean='left'] > .rail-head input { text-align: left; }
/* a bullet must hug its line: `inside` folds the marker into the line box, where
   text-align can carry it to the edge — padding alone leaves it in the old gutter */
.rail[data-lean='right'] > .rail-head ul,
.rail[data-lean='right'] > .rail-head ol {
  padding-left: 0;
  padding-right: 1.5em;
  list-style-position: inside;
}
.rail[data-lean='right'] > .rail-head blockquote {
  border-left: 0;
  border-right: 2px solid color-mix(in srgb, var(--rail) 55%, transparent);
  padding-left: 0;
  padding-right: 0.6em;
}
/* code and tables keep their own reading direction; only the block moves */
.rail[data-lean='right'] > .rail-head pre,
.rail[data-lean='right'] > .rail-head code { text-align: left; }
.rail[data-lean='right'] > .rail-head table { margin-left: auto; }
.rail[data-lean='right'] > .rail-head .qq-src-chips { justify-content: flex-end; }
/* a quarter carries its OWN station's element, so it overrides the row it sits in */
.rail > .rail-head .qq-qcell[data-lean='left'] { text-align: left; }
.rail > .rail-head .qq-qcell[data-lean='right'] { text-align: right; }
.rail > .rail-head .qq-qcell[data-lean='left'] textarea { text-align: left; }
.rail > .rail-head .qq-qcell[data-lean='right'] textarea { text-align: right; }
/* the thing box leans as a whole: the sigil changes column, it does not merely re-align */
.qq-td-thingbox[data-lean='right'] .qq-td-title,
.qq-td-thingbox[data-lean='right'] .qq-td-title-input,
.qq-td-thingbox[data-lean='right'] .qq-md,
.qq-td-thingbox[data-lean='right'] .qq-md-input { text-align: right; }
.qq-td-thingbox[data-lean='right'] .qq-td-head { grid-template-columns: minmax(0, 1fr) var(--td-sigil); }
.qq-td-thingbox[data-lean='right'] .qq-td-title-sigil { order: 2; }
.qq-td-thingbox[data-lean='right'] .qq-td-qn { justify-content: flex-end; }
.qq-td-thingbox[data-lean='right'] .qq-md ul,
.qq-td-thingbox[data-lean='right'] .qq-md ol { padding-left: 0; padding-right: 22px; list-style-position: inside; }
.qq-td-thingbox[data-lean='right'] .qq-md blockquote {
  border-left: 0;
  border-right: 2px solid color-mix(in srgb, var(--el-color, var(--fg-light)) 55%, transparent);
  padding: 2px 12px 2px 0;
}
.qq-td-thingbox[data-lean='right'] .qq-md pre,
.qq-td-thingbox[data-lean='right'] .qq-md code { text-align: left; }
.qq-td-thingbox[data-lean='right'] .qq-md table { margin-left: auto; }
/* the fold pill: a long row shows its first block until you open it */
.qq-fold {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 0.55em; border-radius: 999px;
  font: inherit; line-height: 1.4; cursor: pointer;
  border: 0.5px solid color-mix(in srgb, var(--rail) 40%, transparent);
  color: color-mix(in srgb, var(--rail) calc(var(--fv) * 100%), var(--card));
}
.qq-fold:hover { background: color-mix(in srgb, var(--rail) 12%, transparent); }
.rail[data-editing='true'] > .rail-head .qq-fold { opacity: 0.45; pointer-events: none; }
/* drag-and-drop: the glyph is the handle */
.node-symbol { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.qq-dragging, body.qq-dragging * { cursor: grabbing !important; user-select: none !important; }
.qq-outline .tree { position: relative; }
.rail[data-dragging='true'] { opacity: 0.45; }
.tree[data-dnd='true'] .rail-head:hover { --lift: 1; background: transparent; }
.qq-drop-line { position: absolute; height: 2px; border-radius: 1px; background: var(--rail); box-shadow: 0 0 6px var(--rail); pointer-events: none; z-index: 3; }
.qq-drop-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rail); }

/* ---------- the resonant field ---------- */
.qq-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qq-field-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.qq-field-pill { border: 0.5px solid var(--card-border); border-radius: 8px; padding: 2px 8px; font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--fg-light); }
.qq-field-note { font-family: var(--font-text); font-size: 11px; color: var(--fg-light); text-transform: none; letter-spacing: 0; margin: -6px 0 10px; }
.qq-field-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.qq-field-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 6px 6px; border-radius: 8px;
  color: var(--fg-between); font-family: var(--font-text); font-size: 13px;
}
.qq-field-row:hover { background: var(--hover); color: var(--fg); }
.qq-field-row svg { flex: 0 0 auto; }
.qq-field-row-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qq-field-score { font-family: var(--font-mono); font-size: 10px; color: var(--fg-light); flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; }

/* ---------- the side rail ---------- */
.qq-td-side {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 18px; align-self: start; min-width: 0;
  max-height: calc(100vh - 148px);
}
.qq-td-side-scroll { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.qq-td-side-scroll::-webkit-scrollbar { width: 6px; }
.qq-td-side-scroll::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 3px; }
.qq-td-side-toggle {
  position: absolute; top: 8px; left: -14px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--card); border: 0.5px solid var(--card-border); color: var(--fg-light); cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 4;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.qq-td-side-toggle:hover { color: var(--fg); border-color: var(--el-color, var(--fg-light)); }
.qq-thing-detail-narrow .qq-td-side { align-items: center; }
.qq-thing-detail-narrow .qq-td-side-scroll { display: none; }
.qq-thing-detail-narrow .qq-td-side-toggle { position: static; margin-top: 4px; }
.qq-td-side-card { background: var(--card); border: 0.5px solid var(--card-border); border-radius: 14px; padding: 16px; }
.qq-td-side-card h6 {
  font-family: var(--font-title); font-weight: 600; font-size: 12px; color: var(--fg);
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.1em;
}
.qq-td-corresp-h6 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qq-td-theme-btn {
  border: 0.5px solid var(--card-border); border-radius: 14px; background: transparent; color: var(--fg-light);
  font-size: 10px; padding: 3px 9px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.qq-td-theme-btn:hover { color: var(--fg); border-color: var(--fg-light); }
.qq-td-corresp { display: flex; flex-direction: column; gap: 6px; }
.qq-td-corresp-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 0.5px solid var(--water-border); font-family: var(--font-text); font-size: 12px; }
.qq-td-corresp-row:first-child { border-top: none; }
.qq-td-corresp-key { font-family: var(--font-text); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-light); width: 70px; flex: 0 0 auto; }
.qq-td-corresp-val { color: var(--fg); flex: 1; display: flex; align-items: center; gap: 6px; }
.qq-td-corresp-val .astrodot { font-size: 14px; line-height: 1; }
.qq-td-corresp-el { width: 100%; border: none; background: transparent; cursor: pointer; text-align: left; padding: 6px 0; font: inherit; color: inherit; }
.qq-td-corresp-el:hover { opacity: 0.8; }
.qq-td-corresp-name { font-family: var(--font-title); font-weight: 600; font-size: 13px; color: var(--fg); }
.qq-td-corresp-dim { color: var(--fg-light); font-size: 10.5px; }
.qq-td-corresp-meaning { font-family: var(--font-text); font-size: 11.5px; line-height: 1.5; color: var(--fg-between); padding: 0 0 4px; }
.qq-td-corresp-attr { font-family: var(--font-text); font-size: 10.5px; line-height: 1.45; color: var(--fg-light); font-style: italic; padding: 0 0 6px; }
.qq-td-corresp-browse { border: none; border-top: 0.5px solid var(--water-border); background: transparent; cursor: pointer; font: inherit; font-size: 11px; color: var(--fg-light); gap: 6px; padding: 8px 0 2px; text-align: left; }
.qq-td-corresp-browse:hover { color: var(--fg); }
.qq-td-natal-label {
  font-family: var(--font-text); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-light);
  margin: 14px 0 4px; padding-top: 10px; border-top: 0.5px dashed var(--water-border);
}
.qq-td-natal-key { display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; letter-spacing: 0.04em; }
.qq-td-natal-name { flex: 1; min-width: 0; }
.qq-td-natal-line { font-family: var(--font-mono); font-size: 10px; color: var(--fg-light); white-space: nowrap; }
.qq-td-wheel { display: flex; justify-content: center; margin: 6px 0 10px; }
.qq-td-wheel svg { max-width: 100%; height: auto; }
.qq-td-tree-wrap { overflow-x: auto; padding: 6px 0 2px; display: flex; justify-content: var(--k-minimapAlign, flex-start); }
.qq-tree-node[data-focus='true'] circle { filter: drop-shadow(0 0 4px currentColor); }
.qq-related-row { padding: 8px 0; border-top: 0.5px solid var(--water-border); font-family: var(--font-text); font-size: 12px; color: var(--fg); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.qq-related-row:hover { color: var(--el-color); }
.qq-related-row svg { flex: 0 0 auto; }
.qq-related-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- perspectives: avatars, the header chip, the row chip, the card ----------
   An avatar is a round chip sized by `--ava` (px): the face inside is em-sized,
   so one chip rule serves the header (18), the card (24), the editor (40) and
   the row chip, which derives from `--scale` like everything else in a row. */
.qq-ava { --ava: var(--ava-px, 18px); display: inline-grid; place-items: center; width: var(--ava); height: var(--ava); font-size: var(--ava); border-radius: 50%; background: var(--ava-bg); color: var(--ava-ink); flex: 0 0 auto; overflow: hidden; vertical-align: middle; }
.qq-ava > svg { width: 78%; height: 78%; display: block; }
.qq-ava-letter { font-family: var(--font-title); font-weight: 600; font-size: 0.55em; line-height: 1; }
.qq-td-author { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--fg-light); font: inherit; cursor: pointer; background: none; border: none; }
.qq-td-author:hover .qq-td-author-name { text-decoration: underline dotted; text-underline-offset: 3px; color: var(--fg); }
.node-persp { display: inline-flex; align-items: center; padding: 0 1px; background: none; border: none; cursor: pointer; }
.node-persp .qq-ava { --ava: calc(14px * var(--scale)); }
.node-persp-empty { opacity: 0; color: var(--text-hint); transition: opacity 0.12s; font-size: 1em; }
.rail-head:hover .node-persp-empty, .rail[data-focus='true'] > .rail-head .node-persp-empty, .rail.picked > .rail-head .node-persp-empty { opacity: 0.6; }
.node-persp-empty:hover { opacity: 1; }
.node-became { display: inline-flex; align-items: center; padding: 0 2px; background: none; border: none; cursor: pointer; color: var(--text-hint); font-size: 0.95em; }
.node-became:hover { color: var(--fg); }
/* under a synthesis: where it was gathered from */
.qq-src-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 0 1px; font-size: calc(var(--k-metaFont) * var(--scale)); }
.qq-src-lead { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-hint); }
.qq-src-chip { border: 0.5px solid var(--card-border); border-left-width: 2px; border-radius: 0 7px 7px 0; padding: 1px 6px; background: var(--bg); color: var(--fg-between); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font: inherit; }
.qq-src-chip i { font-style: normal; color: var(--fg-light); }
.qq-src-chip:hover { color: var(--fg); }
.qq-src-chip.gone { color: var(--fg-light); font-style: italic; }
/* picked rows — the basket */
.rail.picked > .rail-head { background: color-mix(in srgb, var(--rail) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rail) 60%, transparent); }
/* the selection bar */
.qq-selbar { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 14px; background: var(--card); border: 0.5px solid var(--card-border); box-shadow: var(--shadow-pop); animation: qq-fade 0.16s var(--ease-soft); font-family: var(--font-text); }
.qq-selbar-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-light); padding: 0 6px; white-space: nowrap; }
.qq-selbar-sep { width: 1px; height: 18px; background: var(--card-border); }
.qq-selbar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 0.5px solid var(--card-border); font-size: 12px; color: var(--fg-between); background: transparent; cursor: pointer; white-space: nowrap; }
.qq-selbar-btn:hover:not(:disabled) { color: var(--fg); background: var(--hover); }
.qq-selbar-btn.primary { border-color: var(--el-color, var(--fg-light)); color: var(--fg); font-weight: 600; }
.qq-selbar-btn.ghost { border-color: transparent; color: var(--fg-light); padding: 6px; }
/* the layer columns: Momentum · Emergence beside the branch, stacked when the outline is narrow */
.qq-outline-columned { display: flex; align-items: flex-start; gap: 26px; } /* the gap + the column's padding is where the accolade lives */
.qq-outline-columned > .qq-layer-1 { flex: 1 1 380px; min-width: 300px; }
.qq-layer-n { flex: 1 1 300px; min-width: 250px; border-left: 0.5px solid var(--card-border); padding-left: 10px; position: sticky; top: 18px; align-self: flex-start; max-height: calc(100vh - 190px); display: flex; flex-direction: column; min-height: 0; }
.qq-layer-scroll { min-height: 0; overflow: visible; scrollbar-width: thin; padding: 0 6px 0 0; }
.qq-layer-head { display: flex; align-items: baseline; gap: 7px; padding: 0 0 4px 8px; }
.qq-layer-pill { font-family: var(--font-mono); font-size: 9.5px; border: 0.5px solid var(--water-border); border-radius: 999px; padding: 0 6px; color: var(--fg-light); }
.qq-layer-label { font-family: var(--font-title); font-weight: 600; font-size: 11.5px; color: var(--fg-between); }
.qq-layer-hint { font-size: 10.5px; color: var(--fg-light); }
.qq-layer-add { margin-left: auto; opacity: 1; width: 20px; height: 20px; font-size: 12px; }
.qq-outline[data-layout='stacked'].qq-outline-columned { display: block; }
.qq-outline[data-layout='stacked'] .qq-layer-n { position: static; max-height: none; margin-top: 18px; border-left: none; border-top: 0.5px solid var(--card-border); padding: 12px 0 0; }
.qq-thing-detail:has(.qq-outline-columned) { max-width: 1440px; padding: 20px 24px 60px; gap: 20px; }
/* the perspectives card */
.qq-persp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.qq-persp-head h6 { margin: 0; }
.qq-persp-mode { background: var(--bg); border: 0.5px solid var(--card-border); border-radius: 6px; padding: 3px 6px; font-size: 10.5px; color: var(--fg-light); cursor: pointer; }
.qq-persp-rows { display: flex; flex-direction: column; }
.qq-persp-row { display: grid; grid-template-columns: 24px 1fr auto 22px; align-items: center; gap: 8px; padding: 6px 0; border-top: 0.5px solid var(--water-border); font-family: var(--font-text); font-size: 12px; color: var(--fg); }
.qq-persp-row:first-child { border-top: none; }
.qq-persp-row[data-pid='all'] { color: var(--fg-light); }
.qq-persp-all { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.qq-persp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: baseline; gap: 6px; }
.qq-persp-count { color: var(--fg-light); font-family: var(--font-mono); font-size: 10px; }
.qq-persp-roses { display: inline-flex; gap: 4px; }
.qq-rose { display: block; }
.qq-persp-row .tool-btn { opacity: 1; width: 22px; height: 22px; font-size: 13px; }
.qq-persp-add { display: inline-flex; align-items: center; gap: 5px; width: 100%; margin-top: 8px; padding: 5px 10px 5px 7px; border: 1px dashed var(--card-border); border-radius: 8px; background: transparent; font-family: var(--font-text); font-size: 11px; color: var(--fg-light); cursor: pointer; }
.qq-persp-add:hover { color: var(--fg); border-color: var(--fg-light); }
/* the perspective popover + the persona editor */
.qq-persp-pop { position: fixed; z-index: 60; width: 220px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; animation: fadeIn 0.1s ease; display: flex; flex-direction: column; gap: 1px; }
.qq-persp-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 8px; text-align: left; font-family: var(--font-text); font-size: 12px; color: var(--fg-between); }
.qq-persp-opt:hover { background: var(--hover-2); color: var(--fg); }
.qq-persp-opt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-persp-opt .qq-icon:last-child { color: var(--fg-light); }
.qq-pe { display: flex; flex-direction: column; gap: 8px; }
.qq-pe-preview { display: flex; align-items: center; gap: 12px; }
.qq-pe-name { flex: 1; font-family: var(--font-title); font-size: 16px; border-bottom: 1px dashed var(--card-border); padding: 4px 0; color: var(--fg); }
.qq-pe-name:focus { border-bottom-color: var(--el-color, var(--fg-light)); }
.qq-pe-glyphs { grid-template-columns: repeat(8, 1fr); }
.qq-pe-sigil-face { display: grid; place-items: center; }
.qq-pe-swatches { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; }
.qq-pe-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; padding: 0; }
.qq-pe-swatch:hover { border-color: var(--fg-light); }
.qq-pe-swatch.active { border-color: var(--fg); }
.qq-pe-wheel { position: relative; display: block; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 1px dashed var(--fg-light); cursor: pointer; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.qq-pe-wheel input { position: absolute; inset: -25%; width: 150%; height: 150%; padding: 0; border: 0; cursor: pointer; opacity: 0; }
.qq-pe-grads { display: flex; gap: 6px; }
.qq-pe-grad { padding: 3px 10px; border-radius: 999px; border: 0.5px solid var(--card-border); font-size: 11px; color: var(--fg-between); text-transform: capitalize; }
.qq-pe-grad.active { border-color: var(--fg); color: var(--fg); }
.qq-btn-danger { color: #e06666; border-color: color-mix(in srgb, #e06666 40%, transparent); }
/* the synthesis modal */
.qq-synth { display: flex; flex-direction: column; gap: 10px; }
.qq-synth-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-light); }
.qq-synth-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow: auto; }
.qq-synth-sources li { display: flex; gap: 8px; align-items: center; border-left: 2px solid var(--el); padding: 3px 8px; font-size: 12px; color: var(--fg-between); }
.qq-synth-sources li i { font-style: normal; color: var(--fg-light); }
.qq-synth-draft { width: 100%; min-height: 90px; background: var(--bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; font-family: var(--font-text); font-size: 13.5px; line-height: 1.6; color: var(--fg); resize: vertical; field-sizing: content; }
.qq-synth-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qq-synth-k { font-family: var(--font-text); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-light); width: 90px; flex: 0 0 auto; }
.qq-synth-els, .qq-synth-persps { display: flex; gap: 6px; flex-wrap: wrap; }
.qq-synth-el, .qq-synth-persp { display: inline-flex; gap: 5px; align-items: center; padding: 4px 10px; border-radius: 999px; border: 0.5px solid var(--card-border); font-size: 11.5px; color: var(--fg-between); text-transform: capitalize; }
.qq-synth-el.on { border-color: var(--el); background: color-mix(in srgb, var(--el) 18%, transparent); color: var(--fg); }
.qq-synth-persp.on { border-color: var(--fg); color: var(--fg); }

/* ---------- symbol palette (SymbolGrid parity) ---------- */
.sym-pop {
  position: fixed; z-index: 60; width: 224px;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop); padding: 10px; animation: fadeIn 0.1s ease;
}
.sym-group-label { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-hint); font-weight: 700; margin: 6px 2px 4px; }
.sym-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sym-cell { --el: var(--text-secondary); height: 30px; display: grid; place-items: center; border-radius: 7px; background: var(--group-card); border: 1px solid transparent; }
.sym-cell:hover { border-color: var(--water-border); }
.sym-cell.active { background: color-mix(in srgb, var(--el) 22%, var(--surface)); border-color: var(--el); }

/* ---------- the palette as a rose cross (js/rosecross.js) ----------
   Three tiers of petals around a still centre, drawn around the glyph they will
   change. Each petal carries its symbol's ink in `--ink`; the line is traced on
   the way in (animateRose sets stroke-dashoffset), and the fill and the glyph
   arrive behind it with `data-drawn`. */
.rose-pop {
  width: auto;
  padding: 14px 14px 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--fg-light);
  animation: fadeIn 0.14s ease;
}
.rose-wrap { display: block; }
.rose-cross { color: var(--fg-light); }
.rose-petal { cursor: pointer; }
.rose-petal-fill {
  fill: color-mix(in srgb, var(--ink) 13%, transparent);
  opacity: 0;
  transition: opacity 220ms ease, fill 160ms ease;
}
.rose-petal-line {
  stroke: color-mix(in srgb, var(--ink) 62%, transparent);
  stroke-width: 1;
  stroke-linejoin: round;
}
.rose-glyph { fill: var(--ink); opacity: 0; transition: opacity 260ms ease; pointer-events: none; }
.rose-petal[data-drawn='true'] .rose-petal-fill { opacity: 1; }
.rose-petal[data-drawn='true'] .rose-glyph { opacity: 0.92; }
.rose-petal[data-current='true'] .rose-petal-fill { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.rose-petal[data-current='true'] .rose-petal-line { stroke: var(--ink); stroke-width: 1.4; }
.rose-petal[data-sel='true'] .rose-petal-fill { fill: color-mix(in srgb, var(--ink) 42%, transparent); }
.rose-petal[data-sel='true'] .rose-petal-line { stroke: var(--ink); stroke-width: 1.6; }
.rose-petal[data-sel='true'] .rose-glyph { opacity: 1; }
.rose-name {
  margin-top: 10px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--fg-between);
  letter-spacing: 0.02em;
  min-height: 1.3em;
}
@media (prefers-reduced-motion: reduce) {
  .rose-petal-fill, .rose-glyph { transition: none; }
  .rose-pop { animation: none; }
}

/* ---------- the pivot popover: the three moves as list-form cards ---------- */
.qq-pivot-pop {
  position: fixed; z-index: 60; width: 300px;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop); padding: 8px; animation: fadeIn 0.1s ease;
  display: flex; flex-direction: column; gap: 4px;
}
.qq-pivot-pop-head { font-family: var(--font-text); font-size: 12px; color: var(--fg); padding: 4px 6px 6px; line-height: 1.4; }
.qq-pivot-pop-head .muted, .qq-pivot-pop .muted { color: var(--fg-light); font-weight: 400; }
.qq-pivot-move {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px 8px 8px; border-radius: 9px; text-align: left;
  background: var(--group-card); border-left: 3px solid var(--to); color: var(--fg-between);
}
.qq-pivot-move:hover:not(:disabled) { background: color-mix(in srgb, var(--to) 14%, var(--group-card)); color: var(--fg); }
.qq-pivot-move:disabled { border-left-color: var(--card-border); }
.qq-pivot-move-glyph { display: grid; place-items: center; }
.qq-pivot-move-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qq-pivot-move-title { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); font-weight: 600; font-size: 12px; color: var(--fg); }
.qq-pivot-move-title kbd { margin-left: auto; color: var(--fg-light); font-weight: 400; }
.qq-pivot-move-tip { font-size: 10.5px; color: var(--fg-light); }
.qq-pivot-move-alg { font-family: var(--font-mono); font-size: 10px; color: var(--fg-light); }
.qq-pivot-pop-scope { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px 4px; border-top: 0.5px solid var(--card-border); margin-top: 2px; font-size: 10.5px; color: var(--fg-between); }
.qq-pivot-pop-scope label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.qq-pivot-pop-scope input { accent-color: var(--from); }
.qq-pivot-pop-hist { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; font-size: 11px; color: var(--fg-light); }
.qq-pivot-pop-hist:hover { background: var(--hover-2); color: var(--fg); }

/* ---------- elemental history (the shell chain) ---------- */
.qq-shellh-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.qq-shellh-step { position: relative; padding: 10px 0 12px 16px; border-left: 2px solid var(--el); }
.qq-shellh-step:last-child { border-left-color: transparent; }
.qq-shellh-step::before { content: ''; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--el); }
.qq-shellh-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-between); }
.qq-shellh-el { display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; }
.qq-shellh-step.now .qq-shellh-el { color: var(--el); font-weight: 600; }
.qq-shellh-what { color: var(--fg-light); }
.qq-shellh-when { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-light); }
.qq-shellh-text { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--fg); user-select: text; }
.qq-shellh-text p { margin: 0 0 6px; }
.qq-shellh-text.muted { color: var(--fg-light); font-style: italic; }

/* ---------- ⋯ menu, modal, toast ---------- */
.qq-menu {
  position: fixed; z-index: 60; width: 200px;
  background: var(--float-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--card-border); border-radius: 12px; padding: 4px;
  box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 1px;
  animation: qq-algodd-in 160ms var(--ease-soft);
  max-height: min(72vh, 560px); overflow-y: auto; scrollbar-width: thin;
}
.qq-menu-item { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 8px; font-family: var(--font-text); font-size: 12.5px; color: var(--fg-between); }
.qq-menu-item > .qq-icon { color: var(--fg-light); }
.qq-menu-item:hover { background: var(--hover-2); color: var(--fg); }
.qq-menu-item[data-danger='true'] { color: #e06666; }
.qq-menu-item[data-active='true'] { color: var(--fg); }
.qq-menu-check { margin-left: auto; color: var(--fg-light); font-size: 11px; }
.qq-menu-sep { height: 0.5px; background: var(--card-border); margin: 3px 6px; }

.qqm-veil { position: fixed; inset: 0; z-index: 80; background: var(--veil); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.12s ease; }
.qqm-modal { width: min(560px, 100%); max-height: min(86vh, 720px); background: var(--card); border: 0.5px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; overflow: hidden; }
.qqm-modal[data-wide='true'] { width: min(760px, 100%); }
.qqm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 0.5px solid var(--card-border); }
.qqm-head h3 { font-family: var(--font-title); font-weight: 600; font-size: 14px; color: var(--fg); margin: 0; }
.qqm-x { color: var(--fg-light); width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; }
.qqm-x:hover { background: var(--bg); color: var(--fg); }
.qqm-body { padding: 14px 18px; overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.qqm-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 18px 14px; border-top: 0.5px solid var(--card-border); }
.qqm-json { width: 100%; min-height: 300px; height: 48vh; background: var(--bg); border: 0.5px solid var(--card-border); border-radius: 10px; padding: 12px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--fg); resize: vertical; white-space: pre; overflow: auto; }
.qqm-hint { font-size: 12px; color: var(--fg-light); line-height: 1.5; }
.qqm-hint code { font-family: var(--font-mono); color: var(--fg-between); }
.qqm-import { display: flex; flex-direction: column; gap: 10px; }
.qqm-file { align-self: flex-start; cursor: pointer; }

.qq-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); z-index: 90;
  background: var(--float-bg); border: 0.5px solid var(--water-border); color: var(--fg);
  border-radius: 999px; padding: 8px 16px; font-family: var(--font-text); font-size: 12px;
  box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none;
  transition: opacity 0.18s var(--ease-soft), transform 0.18s var(--ease-soft);
}
.qq-toast[data-on='true'] { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the tweak panel ---------- */
.qq-tweak {
  position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 300px;
  max-height: min(72vh, 680px); display: flex; flex-direction: column;
  background: var(--float-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--card-border); border-radius: 14px;
  box-shadow: var(--shadow-pop);
  animation: qq-algodd-in 160ms var(--ease-soft);
  font-family: var(--font-text);
}
.qq-tweak[hidden] { display: none; }
.qq-tweak-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 0.5px solid var(--card-border); font-size: 12px; color: var(--fg); }
.qq-tweak-head span { color: var(--fg-light); font-size: 10.5px; flex: 1; }
.qq-tweak-x { color: var(--fg-light); width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; }
.qq-tweak-x:hover { background: var(--bg); color: var(--fg); }
.qq-tweak-body { overflow: auto; padding: 6px 10px; scrollbar-width: thin; }
.qq-tweak details { border-top: 0.5px solid var(--card-border); padding: 4px 0 6px; }
.qq-tweak details:first-child { border-top: none; }
.qq-tweak summary { cursor: pointer; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-light); padding: 6px 4px; list-style: none; }
.qq-tweak summary::-webkit-details-marker { display: none; }
.qq-tweak details[open] summary { color: var(--fg); }
.qq-tweak-row { display: grid; grid-template-columns: 88px 1fr 46px; align-items: center; gap: 8px; padding: 3px 4px; font-size: 11px; color: var(--fg-between); }
.qq-tweak-k { font-family: var(--font-mono); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-tweak-row output { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-light); text-align: right; }
.qq-tweak-row input[type='range'] { width: 100%; accent-color: var(--el-color); cursor: pointer; }
.qq-tweak-row select { background: var(--bg); border: 0.5px solid var(--card-border); border-radius: 6px; padding: 3px 6px; font-size: 11px; color: var(--fg); }
.qq-tweak-presets { display: flex; gap: 6px; padding: 2px 4px 6px; }
.qq-tweak-presets .qq-btn { flex: 1; justify-content: center; padding: 4px 8px; font-size: 10.5px; }
.qq-tweak-spines { display: flex; flex-direction: column; gap: 3px; padding: 2px 4px 6px; }
.qq-tweak-spine { display: grid; grid-template-columns: 62px 22px 1fr 1fr 1fr; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-between); }
.qq-tweak-spine-el { display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; color: var(--el); }
.qq-tweak-corner { display: grid; grid-template-columns: repeat(2, 9px); gap: 2px; }
.qq-tweak-corner-c { width: 9px; height: 9px; padding: 0; border: 1px solid var(--el); border-radius: 2px; background: transparent; cursor: pointer; opacity: 0.55; }
.qq-tweak-corner-c:hover { opacity: 1; }
.qq-tweak-corner-c[aria-pressed='true'] { background: var(--el); opacity: 1; }
.qq-tweak-corner-c:focus-visible { outline: 1px solid var(--fg); outline-offset: 1px; }
.qq-tweak-spine label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: var(--font-mono); }
.qq-tweak-spine input { accent-color: var(--el); }
.qq-tweak-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px 10px; border-top: 0.5px solid var(--card-border); }
.qq-tweak-foot .qq-btn { padding: 5px 10px; font-size: 11px; }

/* ---------- the realm (list) ---------- */
/* ---------- the logo (the app's wordmark, drawn through a mask so it takes any ink) ---------- */
.qq-logo { display: inline-block; flex: 0 0 auto; background: currentColor; -webkit-mask: url('assets/qquill-logo.svg') center / contain no-repeat; mask: url('assets/qquill-logo.svg') center / contain no-repeat; aspect-ratio: 2424 / 1167; }
.qq-list-brand { display: flex; align-items: flex-end; gap: 8px; color: var(--fg); }
.qq-list-brand .qq-logo { height: 26px; }
.qq-list-brand-mini { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-light); padding-bottom: 2px; }
/* ---------- the foot: discreet, on every screen ---------- */
.qq-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; padding: 28px 20px 32px; font-family: var(--font-text); font-size: 11px; color: var(--fg-light); }
.qq-foot a { color: var(--fg-light); text-decoration: none; border-bottom: 0.5px solid transparent; transition: color 0.12s, border-color 0.12s; }
.qq-foot a:hover { color: var(--fg); border-bottom-color: var(--fg-light); }
.qq-foot-brand { display: inline-flex; align-items: flex-end; gap: 5px; }
.qq-foot-brand .qq-logo { height: 13px; opacity: 0.85; }
.qq-foot-brand span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.qq-foot-sep { opacity: 0.45; }
.qq-foot-by a { font-weight: 600; letter-spacing: 0.08em; }
/* the light / dark switch */
.qq-btn-icon[data-act='scheme'] { color: var(--fg-light); }
.qq-btn-icon[data-act='scheme']:hover { color: var(--fg); }
/* the rendered view: the eye in the sub-bar (hidden until the thing carries math, tables or long rows) */
.qq-read-toggle[hidden] { display: none; }
.qq-read-toggle { display: inline-flex; align-items: center; }

.qq-list-wrap { max-width: 880px; margin: 0 auto; width: 100%; padding: 8px 40px 60px; }
.qq-list-row { padding: 9px 10px; gap: 12px; }
.qq-list-row:hover { background: var(--card); }
.qq-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qq-list-row .qq-field-row-title { font-family: var(--font-title); font-size: 15px; color: var(--fg); }
.qq-list-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--el-color, var(--fg-light)); }
.qq-list-meta i { font-style: normal; color: var(--fg-light); }
.qq-list-meta strong { font-weight: 600; letter-spacing: 0.03em; }
.qq-list-meta svg { display: inline-block; }
.qq-list-empty { padding: 60px 16px; font-size: 13px; font-style: normal; }
.qq-list-empty kbd { font-family: var(--font-mono); border: 0.5px solid var(--water-border); border-radius: 4px; padding: 0 5px; font-size: 11px; }
.qq-list-foot { margin-top: 28px; text-align: center; font-size: 11px; color: var(--fg-light); }
.qq-list-foot code { font-family: var(--font-mono); }
.qq-list-foot a { color: var(--fg-between); }

/* ---------- the pin gate ---------- */
body.locked #app { visibility: hidden; }
.pin-gate { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 20px; transition: opacity 0.25s var(--ease-soft); }
.pin-gate.is-open { opacity: 0; pointer-events: none; }
.pin-card { width: min(320px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: qq-fade 0.3s var(--ease-soft); }
.pin-logo { width: 200px; aspect-ratio: 2424 / 1167; background: currentColor; -webkit-mask: url('assets/qquill-logo.svg') center / contain no-repeat; mask: url('assets/qquill-logo.svg') center / contain no-repeat; color: var(--fg); margin-bottom: 2px; }
.pin-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-light); }
.pin-bottom { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pin-bottom .qq-foot { padding: 4px 20px 10px; }
.pin-scheme { width: 30px; height: 30px; border-radius: 50%; border: 0.5px solid var(--card-border); background: var(--card); color: var(--fg-light); display: inline-grid; place-items: center; cursor: pointer; }
.pin-scheme:hover { color: var(--fg); border-color: var(--water-border); }
.pin-sub { font-size: 12px; color: var(--fg-light); letter-spacing: 0.04em; }
.pin-dots { display: flex; gap: 14px; margin: 10px 0 14px; }
.pin-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--water-border); transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.pin-dots i[data-on='true'] { background: var(--fg); border-color: var(--fg); transform: scale(1.1); }
.pin-gate.is-wrong .pin-dots { animation: pin-shake 0.4s var(--ease-soft); }
.pin-gate.is-wrong .pin-dots i { border-color: var(--el-fire); background: var(--el-fire); }
@keyframes pin-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 68px); gap: 10px; }
.pin-pad button { height: 56px; border-radius: 14px; background: var(--card); border: 0.5px solid var(--card-border); font-family: var(--font-title); font-size: 20px; color: var(--fg); transition: background 0.1s, border-color 0.1s, transform 0.08s; }
.pin-pad button:hover { border-color: var(--water-border); }
.pin-pad button:active { transform: scale(0.96); background: var(--surface-2); }
.pin-foot { margin-top: 14px; font-size: 10.5px; color: var(--fg-light); line-height: 1.5; max-width: 260px; }

/* `?nofs` — emulate a browser without field-sizing (see js/app.js FIELD_SIZING) */
html[data-nofs] textarea { field-sizing: fixed; }

/* ---------- motion: off when the system asks ---------- */
@media (prefers-reduced-motion: reduce) {
  .rail, .rail-head, .rail-body, .qq-td-thingbox, .qq-detail, [data-spine]::before, .qq-charged-sigil > svg { transition-duration: 0ms !important; }
}

/* ---------- small screens: the side rail flows under the thing ---------- */
@media (max-width: 900px) {
  .qq-detail { --text-m: 0.76; --sigil-m: 0.75; }
  .qq-detail-head { padding: 12px 16px 8px; gap: 10px; }
  .qq-detail-crumb-id { display: none; }
  .qq-thing-detail, .qq-thing-detail-narrow { grid-template-columns: 1fr; gap: 20px; padding: 16px 14px 60px; max-width: none; }
  .qq-td-thingbox { --td-inset: 18px; padding: calc(16px * var(--scale)) var(--td-inset) 18px; }
  .qq-td-head { gap: calc(12px * var(--scale)); }
  .qq-td-side { position: static; max-height: none; }
  .qq-td-side-toggle { display: none; }
  .qq-thing-detail-narrow .qq-td-side-scroll { display: flex; }
  .qq-list-wrap { padding: 8px 14px 60px; }
  .tool-btn { opacity: 1; }
  .qq-tweak { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 60vh; }
}

/* ---------- math (KaTeX, loaded on the side) ----------
   `.qq-math` is the marked TeX a row shows until KaTeX has landed (js/md.js). */
.qq-math { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-between); white-space: pre-wrap; }
.qq-math-display { display: block; text-align: center; padding: 0.2em 0; }
.qq-md-math { margin: 0 0 0.3em; overflow-x: auto; overflow-y: hidden; }
.qq-md .qq-md-math { margin: 0 0 10px; }
.qq-md .katex, .outline-content-md .katex, .qq-quad-text .katex, .qq-shellh-text .katex, .qq-synth .katex { font-size: 1.08em; }
.qq-md .katex-display, .outline-content-md .katex-display, .qq-quad-text .katex-display { margin: 0.25em 0; }

/* ---------- the mind-map field: every synthesis drawn back to its sources ----------
   The anchor is ZERO height and sticky, so the SVG is a viewport-sized band rather than
   as tall as the branch; everything is measured against the SVG's own box (js/mindmap.js).
   Nothing between here and .qq-detail-body may scroll, transform, contain or filter — sticky
   and every measurement die silently. */
.qq-outline-wrap { position: relative; }
.qq-mm-anchor { position: sticky; top: 18px; height: 0; z-index: 3; pointer-events: none; }
.qq-mm { position: absolute; inset-inline: 0; top: 0; overflow: visible; pointer-events: none; display: block; }
/* only the connectors take the pointer, not the surface */
.qq-mm-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.qq-mm-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; transition: opacity 140ms var(--ease-soft); }
/* the accolade (a stroke, never a fill) */
.qq-mm-cap { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; transition: opacity 140ms var(--ease-soft); }
.qq-mm-arrow { fill: currentColor; stroke: none; opacity: 0.4; transition: opacity 140ms var(--ease-soft); }
[data-conn][data-whole='true'] .qq-mm-cap { stroke-width: 1.9; opacity: 0.8; }
[data-conn][data-kind='stub'] .qq-mm-line { stroke-dasharray: 3 4; opacity: 0.26; }
/* hover lifts one gathering and pushes the rest back */
.qq-mm[data-hot] .qq-mm-line, .qq-mm[data-hot] .qq-mm-cap, .qq-mm[data-hot] .qq-mm-arrow { opacity: 0.1; }
.qq-mm[data-hot] [data-conn]:hover .qq-mm-line, .qq-mm[data-hot] [data-conn]:hover .qq-mm-cap, .qq-mm[data-hot] [data-conn]:hover .qq-mm-arrow { opacity: 1; }
/* the placed node: no transition — the controller springs it per frame, a transition would restart every frame */
.qq-outline-wrap[data-mm-live='true'] .qq-layer-n > .qq-layer-scroll > .tree > .rail { will-change: transform; }
/* magnetism off (the stack is taller than the band): the column scrolls itself, the lines draw to what is in view */
.qq-layer[data-mm-flow='true'] > .qq-layer-scroll { overflow-y: auto; padding-right: 4px; }
/* in columns the lines carry the provenance; a chip stays only for what has no line — another thing's row, a deleted one */
.qq-outline[data-layout='columns'] .qq-src-chip[data-linked='true'] { display: none; }
.qq-outline[data-layout='columns'] .qq-src-chips:not(:has(.qq-src-chip:not([data-linked='true']))) { display: none; }

/* ---------- the pivot: the thought as four quarters (Air TL · Fire TR · Water BR · Earth BL) ---------- */
.qq-pivotq { display: flex; flex-direction: column; gap: 10px; }
.qq-pivotq-sub { font-family: var(--font-text); font-size: 12px; color: var(--fg-between); line-height: 1.45; }
.qq-pivotq-sub b { text-transform: capitalize; }
.qq-quads { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--water-border); border: 0.5px solid var(--water-border); border-radius: 14px; overflow: hidden; }
.qq-quad { --el: var(--fg-light); display: flex; flex-direction: column; gap: 8px; min-height: 200px; min-width: 0; padding: 12px 14px; background: var(--card); }
.qq-quad[data-here='true'] { background: color-mix(in srgb, var(--el) 9%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--el) 55%, transparent); }
.qq-quad-head { display: flex; align-items: flex-start; gap: 10px; }
.qq-quad-head > .glyph, .qq-quad-head > .glyph-text { flex: 0 0 auto; margin-top: 1px; }
.qq-quad-head-text { flex: 1; min-width: 0; }
.qq-quad-prompt { display: flex; align-items: baseline; gap: 7px; font-family: var(--font-title); font-weight: 600; font-size: 13px; color: var(--fg); }
.qq-quad-el { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--el); }
.qq-quad-alt { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; font-family: var(--font-text); font-size: 10.5px; color: var(--fg-light); }
.qq-quad-alt kbd { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-light); border: 0.5px solid var(--card-border); border-radius: 4px; padding: 0 4px; }
.qq-quad-turn { gap: 5px; padding: 4px 9px; font-size: 11px; color: var(--fg); border-color: color-mix(in srgb, var(--el) 60%, transparent); }
.qq-quad-turn:hover:not(:disabled) { background: color-mix(in srgb, var(--el) 18%, var(--card)); }
.qq-quad-turn:disabled { opacity: 0.4; }
.qq-quad-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.qq-quad-text { font-family: var(--font-text); font-size: 12.5px; line-height: 1.5; color: var(--fg); max-height: 150px; overflow: auto; scrollbar-width: thin; user-select: text; }
.qq-quad-text p { margin: 0 0 4px; }
.qq-quad-text .muted, .qq-pivotq .muted { color: var(--fg-light); }
.qq-quad-now { border-left: 2px solid var(--el); padding-left: 9px; }
.qq-quad-was { border-left: 2px dashed color-mix(in srgb, var(--el) 50%, transparent); padding-left: 9px; }
.qq-quad-was-k { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-light); }
.qq-quad-was .qq-quad-text { color: var(--fg-between); font-size: 12px; max-height: 90px; }
.qq-quad-use { background: none; border: none; padding: 0; color: var(--fg-light); font: inherit; letter-spacing: 0; text-transform: none; cursor: pointer; }
.qq-quad-use:hover { color: var(--fg); text-decoration: underline dotted; text-underline-offset: 3px; }
.qq-quad-draft { width: 100%; min-height: 54px; max-height: 160px; background: var(--bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 7px 9px; font-family: var(--font-text); font-size: 12.5px; line-height: 1.5; color: var(--fg); resize: vertical; field-sizing: content; }
.qq-quad-draft:focus { outline: none; border-color: var(--el); }
.qq-quad-draft:disabled { opacity: 0.4; }
.qq-quad-draft::placeholder { color: var(--fg-light); font-style: italic; }
/* the Akasha medallion: the still centre the four quarters turn around */
/* the still centre of the four quarters: the dot (the point) over the infinite (the whole) — it carries no name */
.qq-centre {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
  width: 54px; height: 54px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: var(--centre-bg);
  border: 1px solid var(--centre-line); box-shadow: 0 0 0 5px var(--card), 0 0 24px var(--centre-glow);
}
.qq-centre-dot, .qq-centre-inf { display: inline-flex; line-height: 1; }
.qq-centre-inf { margin-top: -4px; }
.qq-pivotq-scope { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--fg-between); }
.qq-pivotq-scope label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.qq-pivotq-scope input { accent-color: var(--from); }
.qq-pivotq-scope .qq-pivot-pop-hist { margin-left: auto; }
@media (max-width: 640px) {
  .qq-quads { grid-template-columns: 1fr; grid-template-rows: none; }
  .qq-centre { display: none; }
}

/* ---------- the correspondence table, browsable (a modal) ---------- */
.qq-corr { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; height: min(64vh, 560px); min-height: 320px; }
.qq-corr-nav { overflow-y: auto; scrollbar-width: thin; border-right: 0.5px solid var(--card-border); padding-right: 8px; display: flex; flex-direction: column; gap: 1px; }
.qq-corr-band { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-light); margin: 10px 6px 4px; }
.qq-corr-band:first-child { margin-top: 2px; }
.qq-corr-sym { --el: var(--fg-light); display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; text-align: left; padding: 5px 6px; border-radius: 8px; border: none; background: transparent; font-family: var(--font-text); font-size: 12px; color: var(--fg-between); cursor: pointer; }
.qq-corr-sym > .glyph, .qq-corr-sym > .glyph-text { grid-row: span 2; justify-self: center; }
.qq-corr-sym-name { color: var(--fg); }
.qq-corr-sym > i { font-style: normal; font-size: 10.5px; color: var(--fg-light); }
.qq-corr-sym:hover { background: var(--hover-2); }
.qq-corr-sym[data-active='true'] { background: color-mix(in srgb, var(--el) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--el) 50%, transparent); }
.qq-corr-detail { overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.qq-corr-head { display: flex; align-items: center; gap: 12px; padding: 2px 0 12px; border-bottom: 0.5px solid var(--card-border); margin-bottom: 8px; }
.qq-corr-head-text { flex: 1; min-width: 0; }
.qq-corr-title { font-family: var(--font-title); font-weight: 600; font-size: 17px; color: var(--fg); }
.qq-corr-dim { color: var(--fg-light); font-size: 11px; }
.qq-corr-entries { display: flex; flex-direction: column; }
.qq-corr-entry { padding: 9px 10px; border-radius: 10px; }
.qq-corr-entry[data-active='true'] { background: var(--hover); box-shadow: inset 0 0 0 1px var(--card-border); }
.qq-corr-entry-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-light); }
.qq-corr-badge { font-size: 9px; padding: 1px 6px; border-radius: 999px; border: 0.5px solid var(--card-border); color: var(--fg-between); letter-spacing: 0.04em; }
.qq-corr-use { margin-left: auto; background: none; border: 0.5px solid var(--card-border); border-radius: 999px; padding: 1px 8px; font: inherit; color: var(--fg-light); cursor: pointer; opacity: 0; transition: opacity 0.12s; }
.qq-corr-entry:hover .qq-corr-use, .qq-corr-use:focus-visible { opacity: 1; }
.qq-corr-use:hover { color: var(--fg); border-color: var(--fg-light); }
.qq-corr-name { font-family: var(--font-title); font-weight: 600; font-size: 14px; margin: 3px 0 2px; }
.qq-corr-entry p { margin: 0 0 3px; font-family: var(--font-text); font-size: 12px; line-height: 1.5; color: var(--fg-between); }
.qq-corr-entry p.qq-corr-dim { font-style: italic; font-size: 11px; }
@media (max-width: 640px) {
  .qq-corr { grid-template-columns: 1fr; height: auto; }
  .qq-corr-nav { max-height: 160px; border-right: none; border-bottom: 0.5px solid var(--card-border); }
}

/* ---------- a turned row as four quarters ----------
   Each station of a pivoted sub-thing sits in its element's quarter of the row and wears that
   element's corner (the same [data-spine] rules as a row), placed OPPOSITE the corner so every
   corner points at the centre: water (br) top-left · earth (bl) top-right · fire (tr) bottom-left
   · air (tl) bottom-right. An empty quarter stays empty, so two stations meet as a diagonal, a
   side-by-side or a stacked pair. The rail wears where the thought stands now; a past quarter's
   words edit in place; a quarter it has not stood in is a faint cell — a press turns it there. */
.qq-quadrow { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: 'tl tr' 'bl br'; gap: calc(3px * var(--scale)) calc(6px * var(--scale)); padding-top: calc(2px * var(--scale)); }
.qq-qcell {
  --ink: color-mix(in srgb, var(--rail) calc(min(1, var(--fade)) * 100%), var(--card));
  --spine-ink: var(--ink);
  display: flex; flex-direction: column; gap: calc(2px * var(--scale)); min-width: 0;
  padding: calc(3px * var(--scale)) calc(7px * var(--scale)) calc(4px * var(--scale));
  border-radius: calc(var(--lip-s) * var(--c-tl)) calc(var(--lip-s) * var(--c-tr)) calc(var(--lip-s) * var(--c-br)) calc(var(--lip-s) * var(--c-bl));
}
.qq-qcell[data-pos='tl'] { grid-area: tl; }
.qq-qcell[data-pos='tr'] { grid-area: tr; }
.qq-qcell[data-pos='bl'] { grid-area: bl; }
.qq-qcell[data-pos='br'] { grid-area: br; }
/* the head sits at the corner: below the text for a bottom corner, at the right edge for a right one */
.qq-qcell[data-vpos='bottom'] { flex-direction: column-reverse; }
.qq-qcell-head { display: flex; align-items: center; gap: calc(4px * var(--scale)); min-height: calc(16px * var(--scale)); font-family: var(--font-mono); font-size: calc(var(--k-metaFont) * var(--scale)); color: color-mix(in srgb, var(--rail) calc(var(--fv) * 100%), var(--card)); }
.qq-qcell[data-side='right'] .qq-qcell-head { flex-direction: row-reverse; }
.qq-qcell-glyph { display: inline-flex; align-items: center; font-size: calc(var(--k-glyphSize) * 0.8 * var(--scale)); line-height: 1; }
.qq-qcell-when { color: color-mix(in srgb, var(--text-hint) calc(var(--fv) * 100%), var(--card)); }
.qq-qcell-back { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 5px; border: none; background: none; cursor: pointer; color: var(--text-hint); opacity: 0; transition: opacity 0.12s, background 0.12s; font-size: 1em; }
.qq-qcell:hover .qq-qcell-back, .rail[data-focus='true'] .qq-qcell-back { opacity: 0.8; }
.qq-qcell-back:hover { background: var(--surface); color: var(--text-primary); opacity: 1; }
/* a past station reads a shade back; the present one is the row's own text */
.qq-qcell[data-now='false'] { opacity: 0.8; }
.qq-qcell-text { font-family: var(--font-body); font-size: 0.95em; line-height: 1.4; color: color-mix(in srgb, var(--fg-between) calc(var(--fv) * 100%), var(--card)); word-break: break-word; user-select: text; }
.qq-qcell-text > :first-child { margin-top: 0; }
.qq-qcell-text > :last-child { margin-bottom: 0; }
.qq-qcell-text p { margin: 0 0 0.3em; }
.qq-qcell-text ul, .qq-qcell-text ol { margin: 0 0 0.3em; padding-left: 1.5em; }
.qq-qcell-text blockquote { border-left: 2px solid color-mix(in srgb, var(--rail) 55%, transparent); padding-left: 0.6em; margin: 0 0 0.3em; font-style: italic; }
.qq-qcell-text code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); border-radius: 4px; padding: 0 0.3em; }
.qq-qcell-text h1, .qq-qcell-text h2, .qq-qcell-text h3, .qq-qcell-text h4 { font-family: var(--font-title); font-size: 1.05em; margin: 0.3em 0 0.15em; }
.qq-qcell .outline-content { padding-right: 0; }
/* a past quarter's words, edited in place (the textarea stands where the text stood) */
.qq-qcell-text[data-act] { cursor: text; }
.qq-qcell-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; background: transparent; resize: none; outline: none; overflow: hidden; field-sizing: content; min-height: 1.4em; font-family: var(--font-body); font-size: 0.95em; line-height: 1.4; color: color-mix(in srgb, var(--fg-between) calc(var(--fv) * 100%), var(--card)); }
/* a quarter the thought has not stood in stays EMPTY — the space itself says there is more. Only the
   pointer over it reveals a + ; a click opens a draft written as that element (a non-empty draft
   turns the thought there with those words, the old words staying in the quarter it leaves). */
.qq-qcell-empty { cursor: text; min-height: calc(22px * var(--scale)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s; border-radius: calc(var(--lip-s) * 0.7); color: color-mix(in srgb, var(--rail) 65%, transparent); padding: calc(3px * var(--scale)) calc(6px * var(--scale)); }
.qq-qcell-empty:hover { opacity: 1; background: color-mix(in srgb, var(--rail) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rail) 22%, transparent); }
/* drafting keeps the faint ground — the cell is invisible otherwise, and you would be
   typing into nothing — but not the ring: that is editing chrome */
.qq-qcell-empty[data-drafting='true'] { opacity: 1; background: color-mix(in srgb, var(--rail) 6%, transparent); }
.qq-qcell-plus { display: inline-flex; opacity: 0.7; font-size: 1em; }
.qq-qcell-empty[data-drafting='true'] { justify-content: stretch; align-items: stretch; cursor: auto; }
.qq-qcell-empty[data-drafting='true'] .qq-qcell-plus { display: none; }
.qq-qcell-draft { color: var(--fg); }
.qq-qcell-draft::placeholder { color: var(--fg-light); font-style: italic; }
/* the row's ⊞: quarters on / off */
.node-quad { display: inline-flex; align-items: center; padding: 0 2px; background: none; border: none; cursor: pointer; color: var(--text-hint); font-size: 0.95em; opacity: 0.7; }
.node-quad[aria-pressed='true'] { color: color-mix(in srgb, var(--rail) calc(var(--fv) * 100%), var(--card)); opacity: 1; }
.node-quad:hover { color: var(--fg); opacity: 1; }

/* ==========================================================================
   The public pair: the landing and the about page
   ==========================================================================
   Both sit at `#/` and `#/about`, outside the realm and outside the pin. They
   share one shell (`.qq-page`), one head and one foot, and they are the only
   two screens a stranger ever meets. Everything here is scheme-aware through
   the same tokens the editor uses, so the paper palette needs no second pass.
   ========================================================================== */

.qq-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  animation: qq-fade 0.22s var(--ease-soft);
}
/* The public pages read at WCAG AA: their quiet grey (links, the fine print, the foot, small
   labels) is lifted to 4.5:1 on the ground and on a card. The reel is a picture of the editor, so
   it keeps the editor's own grey (the :root and light values above — keep the four together). */
.qq-page { --fg-light: #788FA2; --text-hint: #788FA2; }
html[data-scheme='light'] .qq-page { --fg-light: #696D72; --text-hint: #696D72; }
.qq-page .qq-reel { --fg-light: #556573; --text-hint: #556573; }
html[data-scheme='light'] .qq-page .qq-reel { --fg-light: #8A8F96; --text-hint: #8A8F96; }
.qq-page-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.qq-page-body::-webkit-scrollbar { width: 8px; }
.qq-page-body::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 4px; }
/* The public pages scroll the DOCUMENT, not a box (app.js render stamps html[data-flow=doc]; the
   editor keeps its fixed, inner-scrolling frame). On a phone that is the difference between the
   browser's bars folding away as you read, a tap on the status bar going to the top, and neither. */
html[data-flow='doc'], html[data-flow='doc'] body, html[data-flow='doc'] #app { height: auto; min-height: 100%; overflow: visible; }
html[data-flow='doc'] { overflow-y: auto; scrollbar-color: var(--thumb) transparent; }
html[data-flow='doc'] .qq-page { position: relative; inset: auto; min-height: 100vh; min-height: 100dvh; }
html[data-flow='doc'] .qq-page-body { overflow: visible; overscroll-behavior: auto; }
html[data-flow='doc'] .qq-page-landing::before { position: fixed; }
/* the entrance fades without the lift: a transform would make the page the owl's containing block for its duration */
html[data-flow='doc'] .qq-page { animation-name: fadeIn; }
/* the page editor's bar stays docked to the bottom of the screen */
html[data-flow='doc'] .qq-ek-bar { position: sticky; bottom: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* words on a public page can be selected and copied (the editor's chrome stays unselectable) */
.qq-page { user-select: text; -webkit-user-select: text; cursor: auto; }
.qq-page button, .qq-page .qq-btn, .qq-page-head, .qq-reel { user-select: none; -webkit-user-select: none; }

.qq-page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 32px; border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0; z-index: 4; background: var(--bg);
}
.qq-page-brand { display: flex; align-items: flex-end; gap: 8px; color: var(--fg); text-decoration: none; }
.qq-page-brand .qq-logo { height: 24px; }
.qq-page-brand-mini { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-light); padding-bottom: 2px; }
.qq-page-nav { display: flex; align-items: center; gap: 12px; }
.qq-page-link {
  font-family: var(--font-text); font-size: 12.5px; color: var(--fg-light); text-decoration: none;
  border-bottom: 0.5px solid transparent; transition: color 0.14s, border-color 0.14s;
}
.qq-page-link:hover { color: var(--fg); border-bottom-color: var(--fg-light); }
.qq-page-link[data-here='true'] { color: var(--fg); border-bottom-color: var(--fg); }

/* ---------- the owl behind the landing ----------
   Adam's owl etching (the one on adamblvck.com: the owl with the quill over the
   four kerubic beasts), faint and still behind everything. It sits on the page
   shell, which does not scroll, so the words pass over it; the head, the cards
   and the stage are opaque and cover it. The edges fade out (the etching's black
   ground would otherwise print as a hard rectangle). Never inverted: on the dark
   scheme the paper glows and the black sky vanishes into the page, so the owl
   reads moonlit. Grey AVIF with a WebP fallback, 15 / 41 KB. */
.qq-page-landing::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('assets/owl-1100.webp') center 40% / cover no-repeat;
  background-image: image-set(url('assets/owl-1100.avif') type('image/avif'), url('assets/owl-1100.webp') type('image/webp'));
  opacity: 0.075;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 42%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 42%, #000 30%, transparent 100%);
}
html[data-scheme='dark'] .qq-page-landing::before { opacity: 0.07; }
html[data-scheme='light'] .qq-page-landing::before { opacity: 0.055; }
.qq-page-landing > .qq-page-body { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .qq-page-landing::before {
    background-image: url('assets/owl-640.webp');
    background-image: image-set(url('assets/owl-640.avif') type('image/avif'), url('assets/owl-640.webp') type('image/webp'));
    background-position: center 30%;
  }
}
@media print { .qq-page-landing::before { display: none; } }

/* ---------- the hero ---------- */
.qq-hero { max-width: 1000px; margin: 0 auto; padding: 44px 24px 8px; }
.qq-hero-head { text-align: center; }
.qq-hero-title { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 0; }
.qq-hero-logo {
  display: inline-block; height: clamp(46px, 9vw, 86px); aspect-ratio: 2424 / 1167;
  background: currentColor; color: var(--fg);
  -webkit-mask: url('assets/qquill-logo.svg') center / contain no-repeat;
  mask: url('assets/qquill-logo.svg') center / contain no-repeat;
}
.qq-hero-mini {
  font-family: var(--font-mono); font-size: clamp(12px, 1.6vw, 17px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--fg-light); padding-bottom: clamp(4px, 1vw, 10px);
}
.qq-hero-lede {
  margin: 18px auto 0; max-width: 46ch; font-family: var(--font-text);
  font-size: clamp(14px, 1.7vw, 17.5px); line-height: 1.55; color: var(--fg-between); text-wrap: balance;
}

/* ---------- the stage: the editor, painted by js/reel.js ---------- */
.qq-hero-stage { margin: 26px 0 0; }
.qq-reel {
  position: relative; height: clamp(300px, 46vh, 470px); overflow: hidden;
  border-radius: var(--radius-card); border: 1px solid var(--card-border); background: var(--bg-list);
  /* a picture of the editor, not the editor: nothing in it is reachable */
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
}
.qq-reel-detail {
  position: relative; inset: auto; z-index: 0; background: none; animation: none; padding: 22px 26px 0;
  will-change: transform; transition: transform 0.55s var(--ease-soft);
}
/* the reel has no toolbar, so the outliner's "start the branch" instructions have nobody to instruct */
.qq-reel-detail .qq-outline-empty { visibility: hidden; }
.qq-reel-detail .qq-td-thingbox { max-width: none; }
.qq-reel-title .qq-td-title { cursor: default; }
.qq-reel-qn { pointer-events: none; }
.qq-reel-body { margin: 6px 0 2px; }
.qq-reel-body .qq-md:hover { background: none; }
.qq-reel-caption {
  margin: 14px auto 0; max-width: 62ch; min-height: 2.6em; text-align: center;
  font-family: var(--font-text); font-size: 13px; line-height: 1.5; color: var(--fg-light);
  opacity: 0; transition: opacity 0.3s var(--ease-soft); text-wrap: balance;
}
.qq-reel-caption[data-on='true'] { opacity: 1; }
/* the reel is aria-hidden, so its story is told once in text for anything not looking */
.qq-reel-alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the door ---------- */
.qq-hero-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.qq-cta-big { padding: 11px 20px; font-size: 14px; border-radius: var(--r-md); }
.qq-cta-quiet {
  font-family: var(--font-text); font-size: 12.5px; color: var(--fg-light); text-decoration: none;
  border-bottom: 0.5px solid color-mix(in srgb, var(--fg-light) 40%, transparent); transition: color 0.14s, border-color 0.14s;
}
.qq-cta-quiet:hover { color: var(--fg); border-bottom-color: var(--fg); }
.qq-hero-fine { margin: 14px 0 0; text-align: center; font-family: var(--font-text); font-size: 11.5px; color: var(--fg-light); }

/* ---------- the explanation below it ---------- */
.qq-land-sec { max-width: 1000px; margin: 0 auto; padding: 56px 24px; border-top: 1px solid var(--card-border); }
.qq-land-sec:first-of-type { border-top: none; }
.qq-land-h2 { margin: 0; font-family: var(--font-title); font-size: clamp(19px, 2.4vw, 25px); font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.qq-land-lede { margin: 10px 0 0; font-family: var(--font-text); font-size: 14.5px; color: var(--fg-between); max-width: 58ch; }
.qq-land-after { margin: 22px 0 0; font-family: var(--font-text); font-size: 13.5px; line-height: 1.6; color: var(--fg-light); max-width: 68ch; }

.qq-land-quads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 30px 0 0; }
/* Each card wears its element's spine the way a row does in the editor: app.js spineAttrs
   stamps data-spine / data-corner / data-lean, the shared [data-spine] rules draw the two
   inked sides meeting at the joint, and every corner rounds (--c-*). The glow is the
   editor's focus glow, pushed toward the inked sides (--gx / --gy); it lives on ::after
   (::before carries the side lines) and only its opacity moves, so it stays on the
   compositor. app.js wireQuadGlow walks it from card to card while they are in view. */
.qq-land-quad {
  --spine-ink: var(--el);
  --quad-r: 16px;
  display: flex; flex-direction: column; gap: 3px; padding: 18px 18px 20px;
  background: var(--card);
  border-radius: calc(var(--quad-r) * var(--c-tl)) calc(var(--quad-r) * var(--c-tr)) calc(var(--quad-r) * var(--c-br)) calc(var(--quad-r) * var(--c-bl));
  isolation: isolate;
}
.qq-land-quad::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-1 * var(--spine-w-h-eff)) 0; border-radius: inherit;
  background: color-mix(in srgb, var(--el) 9%, transparent);
  box-shadow: calc(28px * var(--gx)) calc(28px * var(--gy)) 28px 0 color-mix(in srgb, var(--el) 52%, transparent);
  opacity: 0; transition: opacity 0.9s var(--ease-soft);
}
.qq-land-quad[data-lit='true']::after { opacity: 1; transition-duration: 0.35s; }
html[data-scheme='light'] .qq-land-quad { box-shadow: 0 1px 2px rgba(40, 32, 18, 0.05); }
html[data-scheme='light'] .qq-land-quad::after { box-shadow: calc(28px * var(--gx)) calc(28px * var(--gy)) 28px 0 color-mix(in srgb, var(--el) 34%, transparent); }
.qq-land-quad[data-el='air'] { --el: var(--el-air); }
.qq-land-quad[data-el='fire'] { --el: var(--el-fire); }
.qq-land-quad[data-el='water'] { --el: var(--el-water); }
.qq-land-quad[data-el='earth'] { --el: var(--el-earth); }
/* an element's NAME is words, so it reads at 4.5:1 on a card (the landing's cards, the about page's
   list): the lines keep the pure ink, the letters take a step toward the page's own ink where the
   pure one is too dark (or, on paper, too light) */
.qq-page [data-el='air'] { --el-text: var(--el-air); }
.qq-page [data-el='fire'] { --el-text: color-mix(in srgb, var(--el-fire) 74%, var(--fg)); }
.qq-page [data-el='water'] { --el-text: color-mix(in srgb, var(--el-water) 70%, var(--fg)); }
.qq-page [data-el='earth'] { --el-text: var(--el-earth); }
html[data-scheme='light'] .qq-page [data-el='air'] { --el-text: color-mix(in srgb, var(--el-air) 74%, var(--fg)); }
html[data-scheme='light'] .qq-page [data-el='fire'] { --el-text: var(--el-fire); }
html[data-scheme='light'] .qq-page [data-el='water'] { --el-text: var(--el-water); }
html[data-scheme='light'] .qq-page [data-el='earth'] { --el-text: color-mix(in srgb, var(--el-earth) 92%, var(--fg)); }
/* the lean, as in the editor: the right-cornered families read from the right */
.qq-land-quad[data-lean='right'] { align-items: flex-end; text-align: right; }
/* a right-to-left page already reads from the right: its start IS the right, so nothing flips */
.qq-page[dir='rtl'] .qq-land-quad[data-lean='right'] { align-items: flex-start; }
.qq-land-quad b { font-family: var(--font-title); font-size: 16px; font-weight: 600; color: var(--el-text); }
.qq-land-quad span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-light); transition: color 0.6s var(--ease-soft); }
.qq-land-quad[data-lit='true'] span { color: color-mix(in srgb, var(--el-text) 80%, var(--fg-light)); transition-duration: 0.3s; }
.qq-land-quad i { margin-top: 6px; font-style: normal; font-family: var(--font-text); font-size: 13px; line-height: 1.55; color: var(--fg-between); }

.qq-land-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 0; }
.qq-land-card { padding: 20px; background: var(--card); border-radius: var(--r-md); box-shadow: 0 0 0 0.5px var(--card-border); }
.qq-land-card h3 { margin: 0 0 8px; font-family: var(--font-title); font-size: 15.5px; font-weight: 600; color: var(--fg); }
.qq-land-card p { margin: 0; font-family: var(--font-text); font-size: 13px; line-height: 1.6; color: var(--fg-between); }
.qq-land-card kbd {
  font-family: var(--font-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  background: var(--code-bg); color: var(--fg); border: 0.5px solid var(--card-border);
}

.qq-land-sec-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.qq-land-half p { margin: 12px 0 0; font-family: var(--font-text); font-size: 13.5px; line-height: 1.65; color: var(--fg-between); }
.qq-land-half .qq-cta-quiet { display: inline-block; margin-top: 16px; }

.qq-land-sigil { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; }
.qq-land-sigil-art { justify-self: center; }
.qq-land-sigil-copy p { margin: 12px 0 0; font-family: var(--font-text); font-size: 13.5px; line-height: 1.65; color: var(--fg-between); }
.qq-land-sigil-copy a { color: var(--fg); text-decoration: none; border-bottom: 0.5px solid var(--fg-light); }
.qq-land-sigil-copy a:hover { border-bottom-color: var(--fg); }

/* ---------- the about page's prose ---------- */
.qq-page-prose { max-width: 740px; margin: 0 auto; padding: 8px 24px 0; }
.qq-page-hero { padding: 52px 0 8px; }
/* the about page's head: the words, and Adam beside them (as on the other studio About pages) */
.qq-about-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 48px); align-items: end; }
.qq-about-portrait { margin: 0; width: clamp(150px, 22vw, 220px); }
.qq-about-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--card-border); border-radius: var(--r-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
html[data-scheme='light'] .qq-about-portrait img { box-shadow: 0 14px 32px rgba(40, 32, 18, 0.16); }
@media (max-width: 640px) {
  .qq-about-head { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 32px; }
  .qq-about-portrait { order: -1; width: min(180px, 52%); }
}
.qq-page-h1 { margin: 0; font-family: var(--font-title); font-size: clamp(30px, 5vw, 46px); font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.qq-page-lede { margin: 16px 0 0; font-family: var(--font-text); font-size: clamp(15px, 2vw, 18px); line-height: 1.55; color: var(--fg-between); text-wrap: pretty; }
.qq-page-sec { padding: 34px 0; border-top: 1px solid var(--card-border); }
.qq-page-sec h2 { margin: 0 0 14px; font-family: var(--font-title); font-size: clamp(18px, 2.3vw, 23px); font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.qq-page-sec p { margin: 0 0 14px; font-family: var(--font-text); font-size: 14.5px; line-height: 1.7; color: var(--fg-between); }
.qq-page-sec p:last-child { margin-bottom: 0; }
.qq-page-sec b { color: var(--fg); font-weight: 600; }
.qq-page-sec i { color: var(--fg); font-style: italic; }
.qq-page-sec a { color: var(--fg); text-decoration: none; border-bottom: 0.5px solid var(--fg-light); }
.qq-page-sec a:hover { border-bottom-color: var(--fg); }
.qq-page-aside {
  padding: 14px 16px; border-radius: var(--r-md); background: var(--card);
  box-shadow: 0 0 0 0.5px var(--card-border); font-size: 13px !important; color: var(--fg-light) !important;
}
.qq-page-dl { margin: 0 0 16px; display: grid; gap: 8px; }
.qq-page-dl > div { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 12px; align-items: baseline; padding: 9px 12px; border-inline-start: 2px solid var(--el); background: var(--card); border-radius: var(--r-sm); }
.qq-page-dl > div[data-el='air'] { --el: var(--el-air); }
.qq-page-dl > div[data-el='fire'] { --el: var(--el-fire); }
.qq-page-dl > div[data-el='water'] { --el: var(--el-water); }
.qq-page-dl > div[data-el='earth'] { --el: var(--el-earth); }
.qq-page-dl dt { font-family: var(--font-title); font-size: 14px; font-weight: 600; color: var(--el-text, var(--el)); }
.qq-page-dl dd { margin: 0; font-family: var(--font-text); font-size: 13.5px; line-height: 1.55; color: var(--fg-between); }
.qq-page-list { margin: 0; padding-inline-start: 20px; }
.qq-page-list li { margin: 0 0 9px; font-family: var(--font-text); font-size: 14px; line-height: 1.6; color: var(--fg-between); }

/* ---------- the newsletter ---------- */
.qq-land-news { max-width: 1000px; }
.qq-about-feedback { max-width: 1000px; margin: 0 auto; text-align: center; }
.qq-about-feedback p { margin: 0.5em auto 1.1em; max-width: 60ch; }
.qq-news { max-width: 560px; margin: 0 auto; text-align: center; }
.qq-page-prose + .qq-land-news .qq-news { margin: 0 auto; }
.qq-news-label { display: block; font-family: var(--font-title); font-size: clamp(18px, 2.3vw, 23px); font-weight: 600; color: var(--fg); }
.qq-news-blurb { margin: 10px 0 18px; font-family: var(--font-text); font-size: 13.5px; line-height: 1.6; color: var(--fg-between); }
.qq-news-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qq-news-input {
  flex: 1 1 260px; max-width: 340px; padding: 10px 13px; border-radius: var(--r-md);
  border: 1px solid var(--card-border); background: var(--card); color: var(--fg);
  font-family: var(--font-text); font-size: 14px; outline: none; transition: border-color 0.14s;
}
.qq-news-input:focus { border-color: var(--fg-light); }
.qq-news-input:disabled { opacity: 0.6; }
.qq-news-submit { padding: 10px 20px; font-size: 14px; }
.qq-news-note { margin: 12px 0 0; font-family: var(--font-text); font-size: 11.5px; line-height: 1.5; color: var(--fg-light); min-height: 2.4em; }
.qq-news-note[data-state='ok'] { color: var(--success); }
.qq-news-note[data-state='error'] { color: var(--upvote); }
.qq-news[data-done='true'] .qq-news-row { opacity: 0.55; }

/* ---------- the sigil, whole ---------- */
.qq-sigview { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; }
.qq-sigview-art { justify-self: center; color: var(--el-color); }
.qq-sigview-letters { display: flex; flex-wrap: wrap; gap: 5px; }
.qq-sigview-letters span {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 6px; background: var(--code-bg); border: 0.5px solid var(--card-border);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--fg);
}
.qq-sigview-letters i { font-family: var(--font-text); font-size: 12px; color: var(--fg-light); }
.qq-sigview-note { margin: 14px 0 0; font-family: var(--font-text); font-size: 12.5px; line-height: 1.6; color: var(--fg-between); }
.qq-sigview-sky { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-family: var(--font-text); font-size: 12px; color: var(--fg-light); }
.qq-sigview-sky strong { color: var(--fg); font-weight: 600; }

/* ---------- small forms in a modal (the pin) ---------- */
.qq-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.qq-form-note { margin: 0; font-family: var(--font-text); font-size: 12.5px; line-height: 1.6; color: var(--fg-light); }
.qq-form-row { display: flex; flex-direction: column; gap: 6px; }
.qq-form-row span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-light); }
.qq-form-row input {
  padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--card-border);
  background: var(--card); color: var(--fg); font-family: var(--font-mono); font-size: 18px;
  letter-spacing: 0.4em; outline: none;
}
.qq-form-row input:focus { border-color: var(--fg-light); }
.qq-form-err { margin: 0; font-family: var(--font-text); font-size: 12px; color: var(--upvote); }

.pin-out { margin-top: 16px; font-family: var(--font-text); font-size: 11.5px; color: var(--fg-light); text-decoration: none; border-bottom: 0.5px solid transparent; }
.pin-out:hover { color: var(--fg); border-bottom-color: var(--fg-light); }
.qq-list-example { margin-top: 14px; }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  /* two by two, each card in the corner its joint names: the four meet as the Z4 square,
     joints outward, and the glow walks round it */
  .qq-land-quads { grid-template-columns: repeat(2, 1fr); }
  .qq-land-quad[data-corner='tl'] { order: 1; }
  .qq-land-quad[data-corner='tr'] { order: 2; }
  .qq-land-quad[data-corner='bl'] { order: 3; }
  .qq-land-quad[data-corner='br'] { order: 4; }
  .qq-land-cards { grid-template-columns: 1fr; }
  .qq-land-sec-split { grid-template-columns: 1fr; gap: 34px; }
  .qq-land-sigil { grid-template-columns: 1fr; gap: 22px; }
  .qq-sigview { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .qq-page-head { padding: 12px 16px; }
  .qq-page-nav .qq-btn-primary { padding: 7px 11px; font-size: 12px; }
  .qq-hero { padding: 34px 16px 4px; }
  .qq-land-sec { padding: 40px 16px; }
  .qq-page-prose { padding: 4px 16px 0; }
  .qq-land-quads { grid-template-columns: 1fr; gap: 14px; }
  .qq-land-quads > .qq-land-quad[data-corner] { order: 0; }
  .qq-reel { height: min(400px, 58svh); }
  .qq-reel-detail { padding: 14px 12px 0; }
  /* the reel at phone size: the same editor, drawn a size smaller, so more of the branch fits the band */
  .qq-reel-detail { --k-titleFont: 25px; --k-sigilSize: 70px; --k-bodyFont: 13.5px; --k-boxPadTop: 18px; --k-boxInset: 13px; --k-rowFont: 12px; --k-railIndent: 8px; }
  .qq-reel-caption { min-height: 3.2em; padding-inline: 4px; }
  .qq-page-dl > div { grid-template-columns: 1fr; gap: 2px; }
  /* the door: one column of full-width buttons, the quiet link under them */
  .qq-hero-cta { flex-direction: column; align-items: stretch; gap: 10px; max-width: 380px; margin-inline: auto; }
  .qq-hero-cta .qq-cta-big { width: 100%; justify-content: center; padding: 13px 20px; font-size: 15px; }
  .qq-hero-cta .qq-cta-quiet { align-self: center; margin-top: 4px; padding: 6px 2px; font-size: 13.5px; }
  .qq-hero-fine { padding-inline: 8px; }
  /* body copy a step up for reading on a phone */
  .qq-land-half p, .qq-land-sigil-copy p, .qq-land-card p { font-size: 14.5px; }
  .qq-land-after { font-size: 14px; }
  .qq-land-quad i { font-size: 14px; }
  .qq-land-half .qq-cta-quiet, .qq-land-acts .qq-cta-quiet { padding: 6px 0; }
  /* the newsletter: a full-width field and button */
  .qq-news-row { flex-direction: column; align-items: stretch; }
  .qq-news-input { max-width: none; flex: none; }
  .qq-news-submit { padding: 13px 20px; }
  /* the foot: links a thumb can hit */
  .qq-page .qq-foot { gap: 4px 6px; font-size: 12px; padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px)); }
  .qq-page .qq-foot a { display: inline-block; padding: 7px 4px; }
}
/* a phone's browser zooms the page into any field set under 16px when it takes focus: never on a public page */
@media (max-width: 900px) and (pointer: coarse) {
  .qq-page input:not([type='checkbox']):not([type='radio']):not([type='range']), .qq-page textarea, .qq-page select { font-size: 16px; }
}
/* the notch and the rounded corners in landscape: keep the head and the words inside the safe area */
@supports (padding: max(0px)) {
  .qq-page-head { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .qq-page-body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (min-width: 641px) {
  @supports (padding: max(0px)) {
    .qq-page-head { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .qq-page, .qq-reel-caption, .qq-reel-detail, .qq-land-quad::after, .qq-land-quad span { animation: none; transition: none; }
}


/* ==========================================================================
   The copy: the language button and the settings page
   ========================================================================== */
.qq-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--fg-light); }
.qq-lang-btn span { font-size: 12px; color: var(--fg); max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-lang-btn:hover span { color: var(--fg); }
.qq-page-nav .qq-page-link[data-here='true'] { color: var(--fg); }

.qq-set { max-width: 1080px; margin: 0 auto; padding: 8px 24px 0; }
.qq-set .qq-page-hero { max-width: 760px; }
.qq-set-sec { padding: 34px 0; border-top: 1px solid var(--card-border); }
.qq-set-sec h2 { margin: 0 0 10px; font-family: var(--font-title); font-size: clamp(18px, 2.3vw, 23px); font-weight: 600; color: var(--fg); }
.qq-set-note { margin: 0 0 12px; max-width: 72ch; font-family: var(--font-text); font-size: 13.5px; line-height: 1.65; color: var(--fg-between); }
.qq-set-note code, .qq-set-note kbd { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: var(--code-bg); color: var(--fg); }
.qq-set-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-light); }

/* languages: a grid of native names, the active one lit in air */
.qq-set-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin-top: 16px; }
.qq-set-lang {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 13px; text-align: start;
  border-radius: var(--r-md); border: 1px solid var(--card-border); background: var(--card); color: var(--fg); cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.qq-set-lang:hover { border-color: var(--fg-light); }
.qq-set-lang[data-active='true'] { border-color: var(--el-color); background: color-mix(in srgb, var(--el-color) 10%, var(--card)); }
.qq-set-lang-name { font-size: 15px; font-family: var(--font-text); }
.qq-set-lang-en { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--fg-light); }

/* look */
.qq-set-look { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 14px; }
.qq-set-look-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qq-set-look-row .qq-set-k { min-width: 150px; }
.qq-set-segs { display: inline-flex; border: 1px solid var(--card-border); border-radius: var(--r-pill); overflow: hidden; }
.qq-set-seg { padding: 6px 12px; border: 0; background: none; color: var(--fg-light); font-family: var(--font-text); font-size: 12px; cursor: pointer; }
.qq-set-seg + .qq-set-seg { border-inline-start: 1px solid var(--card-border); }
.qq-set-seg[aria-pressed='true'] { background: color-mix(in srgb, var(--el-color) 16%, transparent); color: var(--fg); }
.qq-set-theme, .qq-set-target {
  padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--card-border); background: var(--card);
  color: var(--fg); font-family: var(--font-text); font-size: 13px;
}

/* the copy editor */
.qq-set-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 14px; }
.qq-set-bar-item { display: inline-flex; align-items: center; gap: 8px; }
.qq-set-search { flex: 1 1 240px; padding: 6px 10px; border: 1px solid var(--card-border); border-radius: var(--r-sm); background: var(--card); color: var(--fg-light); }
.qq-set-search input { flex: 1; border: 0; outline: none; background: none; color: var(--fg); font-family: var(--font-text); font-size: 13px; }
.qq-set-grid { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.qq-set-groups {
  position: sticky; top: 66px; display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 90px); overflow-y: auto;
  padding: 6px; border-radius: var(--r-md); background: var(--card); box-shadow: 0 0 0 0.5px var(--card-border);
}
.qq-set-group {
  display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border: 0; border-radius: 7px; background: none;
  color: var(--fg-between); font-family: var(--font-text); font-size: 12.5px; text-align: start; cursor: pointer;
}
.qq-set-group i { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--fg-light); }
.qq-set-group:hover { background: var(--hover-2); color: var(--fg); }
.qq-set-group[data-active='true'] { background: color-mix(in srgb, var(--el-color) 14%, transparent); color: var(--fg); }
/* on a lit tile or group the quiet grey would drop under 4.5:1: it takes the middle ink instead */
.qq-set-lang[data-active='true'] .qq-set-lang-en { color: var(--fg-between); }
.qq-set-group[data-active='true'] i { color: var(--fg); }
.qq-set-rows { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qq-set-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--card); box-shadow: 0 0 0 0.5px var(--card-border);
}
.qq-set-row[data-status='missing'] { box-shadow: 0 0 0 0.5px var(--card-border), inset 2px 0 0 color-mix(in srgb, var(--upvote) 70%, transparent); }
.qq-set-row[data-status='edited'] { box-shadow: 0 0 0 0.5px var(--card-border), inset 2px 0 0 var(--el-color); }
.qq-set-key { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qq-set-key code { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-light); word-break: break-all; }
.qq-set-chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--r-pill); border: 1px solid var(--card-border); color: var(--fg-light); }
.qq-set-chip[data-status='edited'] { border-color: var(--el-color); color: var(--fg); }
.qq-set-chip[data-status='missing'] { border-color: color-mix(in srgb, var(--upvote) 70%, transparent); color: var(--upvote); }
.qq-set-src { font-family: var(--font-text); font-size: 13px; line-height: 1.55; color: var(--fg-between); white-space: pre-wrap; overflow-wrap: anywhere; }
.qq-set-cat { display: inline-block; min-width: 3.2em; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-light); }
.qq-set-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qq-set-plurals { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qq-set-val {
  width: 100%; box-sizing: border-box; min-height: 34px; padding: 7px 9px; resize: vertical; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--card-border); background: var(--bg); color: var(--fg);
  font-family: var(--font-text); font-size: 13px; line-height: 1.5; outline: none; field-sizing: content;
}
.qq-set-val:focus { border-color: var(--el-color); }
.qq-set-val::placeholder { color: color-mix(in srgb, var(--fg-light) 70%, transparent); font-style: italic; }
.qq-set-flags { display: flex; align-items: center; gap: 8px; min-height: 0; }
.qq-set-flags:empty { display: none; }
.qq-set-warn { font-family: var(--font-mono); font-size: 10px; color: var(--upvote); }
.qq-set-reset { margin-inline-start: auto; border: 0; background: none; color: var(--fg-light); cursor: pointer; font-size: 14px; }
.qq-set-reset:hover { color: var(--fg); }
.qq-set-found { font-family: var(--font-text); font-size: 12px; color: var(--fg-light); padding: 2px 4px; }

/* sharing */
.qq-set-by { margin: 6px 0 14px; }
.qq-set-by input { padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--card-border); background: var(--card); color: var(--fg); font-family: var(--font-text); font-size: 13px; min-width: 220px; }
.qq-set-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qq-set-actions .qq-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.qq-set-preview-list { margin: 10px 0 0; padding-inline-start: 18px; font-family: var(--font-text); font-size: 12.5px; line-height: 1.6; color: var(--fg-between); }

@media (max-width: 860px) {
  .qq-set-grid { grid-template-columns: 1fr; }
  .qq-set-groups { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
  .qq-set-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .qq-set { padding: 4px 16px 0; }
  .qq-page-nav { gap: 8px; }
  .qq-page-nav .qq-page-link[href='#/settings'] { display: none; }
  .qq-lang-btn span { display: none; }
}

/* right-to-left pages: the prose turns, the drawn editor keeps its geometry */
.qq-page[dir='rtl'] .qq-hero-head, .qq-page[dir='rtl'] .qq-hero-fine, .qq-page[dir='rtl'] .qq-reel-caption { text-align: center; }
.qq-page[dir='rtl'] .qq-reel, .qq-page[dir='rtl'] .qq-set-src, .qq-page[dir='rtl'] .qq-set-key { direction: ltr; }
.qq-page[dir='rtl'] .qq-set-src[lang='en'] { text-align: left; }

/* ==========================================================================
   The page, edited where it stands (js/pageedit.js)
   ==========================================================================
   Every word on the landing and About sits in a <qq-t data-k>: an inline
   element no other rule names, so in reading mode it costs the page nothing.
   Edit mode (`.qq-page[data-editing]`) makes each one a target and marks where
   it stands: edited here (the accent, solid), out of date or ahead of the
   translations (the flag colour, wavy), not written in this language (dotted).
   The open line shows its source in place, ringed; the bar docks under the
   page as the last row of the page's column, so it never covers the words.
   ========================================================================== */
:root { --flag: #F2994A; }
html[data-scheme='light'] { --flag: #B85A0E; }

.qq-page[data-editing='true'] qq-t[data-k] {
  cursor: text; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color 0.14s var(--ease-soft), box-shadow 0.14s var(--ease-soft);
}
.qq-page[data-editing='true'] qq-t[data-k]:hover {
  background: color-mix(in srgb, var(--el-color) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--el-color) 14%, transparent);
}
.qq-page[data-editing='true'] qq-t[data-st='edited'] {
  text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--el-color);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.24em;
}
.qq-page[data-editing='true'] qq-t[data-st='missing'] {
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--upvote);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.24em;
}
.qq-page[data-editing='true'] qq-t[data-flag='behind'], .qq-page[data-editing='true'] qq-t[data-flag='ahead'] {
  text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: var(--flag);
  text-decoration-thickness: 1px; text-underline-offset: 0.26em;
}
.qq-page[data-editing='true'] qq-t[data-editing='true'] {
  outline: 1.5px solid var(--el-color); outline-offset: 4px; padding: 0 1px;
  background: color-mix(in srgb, var(--el-color) 7%, transparent); box-shadow: none;
  text-decoration: none; text-transform: none; white-space: pre-wrap; caret-color: var(--el-color);
}
.qq-page[data-editing='true'] qq-t[data-kept='true'] { animation: qq-ek-kept 0.9s var(--ease-soft); }
@keyframes qq-ek-kept { from { background-color: color-mix(in srgb, var(--el-color) 36%, transparent); } to { background-color: transparent; } }
/* a button or a label becomes words for the while: it keeps its look, loses its click */
.qq-page[data-editing='true'] [data-twin] { cursor: text; }
.qq-page[data-editing='true'] .qq-reel-caption[data-k]:not([data-k='']) { cursor: pointer; }

/* the switch, in the head and in the copy section */
.qq-edit-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--fg-light); }
.qq-edit-btn span { font-size: 12px; color: var(--fg); }
.qq-edit-btn[aria-pressed='true'] { border-color: var(--el-color); background: color-mix(in srgb, var(--el-color) 16%, var(--bg)); color: var(--fg); }
.qq-land-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.qq-land-acts .qq-cta-quiet { margin-top: 0; }

/* the reel's words, under the stage while the page is edited */
.qq-ek-script {
  max-width: 820px; margin: 16px auto 0; padding: 14px 16px 12px; border-radius: var(--r-md);
  background: var(--card); border: 1px dashed color-mix(in srgb, var(--el-color) 45%, var(--card-border));
}
.qq-ek-script-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; font-family: var(--font-text); font-size: 12px; line-height: 1.5; color: var(--fg-light); }
.qq-ek-script-head b { font-family: var(--font-title); font-size: 14px; font-weight: 600; color: var(--fg); }
.qq-ek-script-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qq-ek-script-list li { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: baseline; }
.qq-ek-tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-light); white-space: nowrap;
}
.qq-ek-script-list li[data-el] .qq-ek-tag::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.qq-ek-script-list li[data-el='air'] { --dot: var(--el-air); }
.qq-ek-script-list li[data-el='fire'] { --dot: var(--el-fire); }
.qq-ek-script-list li[data-el='water'] { --dot: var(--el-water); }
.qq-ek-script-list li[data-el='earth'] { --dot: var(--el-earth); }
.qq-ek-script-words { font-family: var(--font-text); font-size: 13px; line-height: 1.55; color: var(--fg-between); white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.qq-ek-script-list li[data-tag='say'] .qq-ek-script-words, .qq-ek-script-list li[data-tag='end'] .qq-ek-script-words { color: var(--fg-light); font-style: italic; }
.qq-ek-script-list li[data-tag='title'] .qq-ek-script-words { font-family: var(--font-title); font-size: 14.5px; color: var(--fg); font-weight: 600; }

/* the bar: the last row of the page's column */
.qq-ek-bar {
  flex: none; position: relative; z-index: 5; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 24px 12px; border-top: 1px solid var(--card-border); background: var(--float-bg);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.16); font-family: var(--font-text); font-size: 12px; color: var(--fg-between);
  animation: qq-fade 0.2s var(--ease-soft);
}
.qq-ek-hint { margin: 0; font-size: 12px; line-height: 1.55; color: var(--fg-light); }
.qq-ek-hint kbd, .qq-ek-script-head kbd {
  font-family: var(--font-mono); font-size: 10.5px; padding: 0 5px; border-radius: 4px;
  background: var(--code-bg); color: var(--fg); border: 0.5px solid var(--card-border);
}
.qq-ek-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.qq-ek-title { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); }
.qq-ek-title b { font-weight: 600; }
.qq-ek-lang { color: var(--fg-between); }
.qq-ek-lang::before { content: '·'; margin-inline-end: 7px; color: var(--fg-light); }
.qq-ek-pages .qq-set-seg { padding: 4px 11px; font-size: 11.5px; }
.qq-ek-counts { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-light); }
.qq-ek-counts [data-flag] { color: var(--flag); }
.qq-ek-acts { margin-inline-start: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.qq-ek-acts .qq-btn, .qq-ek-line-acts .qq-btn { padding: 5px 11px; font-size: 11.5px; }

/* the line you are in */
.qq-ek-line { display: flex; flex-direction: column; gap: 5px; padding-bottom: 9px; border-bottom: 1px dashed var(--card-border); }
.qq-ek-line-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.qq-ek-key { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-light); word-break: break-all; }
.qq-ek-flag { font-family: var(--font-mono); font-size: 10.5px; color: var(--flag); }
.qq-ek-ok { font-family: var(--font-mono); font-size: 10.5px; color: var(--success); }
.qq-ek-note { font-size: 11.5px; color: var(--upvote); }
.qq-ek-ver { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-light); opacity: 0.85; }
.qq-ek-line-acts { margin-inline-start: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.qq-ek-ref { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; line-height: 1.5; }
.qq-ek-ref .qq-set-cat { flex: none; min-width: 8.5em; }
.qq-ek-ref-text { color: var(--fg-between); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 4.6em; overflow: auto; }
.qq-ek-was .qq-ek-ref-text { color: var(--fg-light); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fg-light) 55%, transparent); }

/* the settings page's side of it */
.qq-set-row[data-flag='behind'], .qq-set-row[data-flag='ahead'] { box-shadow: 0 0 0 0.5px var(--card-border), inset 2px 0 0 var(--flag); }
.qq-set-chip[data-flag] { border-color: color-mix(in srgb, var(--flag) 70%, transparent); color: var(--flag); }
.qq-set-was { margin-top: 6px; color: var(--fg-light); }
.qq-set-was .qq-set-cat { min-width: 0; margin-inline-end: 6px; }
.qq-set-confirm {
  border: 1px solid color-mix(in srgb, var(--flag) 60%, transparent); border-radius: var(--r-pill); background: none;
  color: var(--flag); font-family: var(--font-mono); font-size: 10px; padding: 1px 8px; cursor: pointer;
}
.qq-set-confirm:hover { background: color-mix(in srgb, var(--flag) 14%, transparent); }
.qq-set-group-flag { color: var(--flag) !important; margin-inline-start: auto; margin-inline-end: 6px; }
.qq-set-lang-behind { color: var(--flag); }
.qq-set-inplace { margin-inline-start: auto; }

/* a touch screen has no Enter, Esc or Tab to be told about */
@media (hover: none) { .qq-ek-hint { display: none; } }
@media (max-width: 640px) {
  /* the head's pencil goes icon-only (its title names it); the landing's own button keeps its words */
  .qq-page-head .qq-edit-btn span { display: none; }
  .qq-ek-bar { padding: 8px 12px 10px; gap: 7px; }
  .qq-ek-hint { display: none; }
  .qq-ek-main { gap: 6px 10px; }
  .qq-ek-title b { display: none; } /* the pencil and the language say it */
  .qq-ek-lang::before { content: none; }
  .qq-ek-acts { margin-inline-start: 0; width: 100%; flex-wrap: nowrap; }
  .qq-ek-acts .qq-btn { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
  .qq-ek-acts [data-ek='settings'] { display: none; } /* Settings is a tap away in the head */
  .qq-ek-ref { flex-direction: column; gap: 2px; }
  .qq-ek-script-list li { grid-template-columns: 1fr; gap: 2px; }
}
/* the head holds one more button than it did: the wordmark's MINI gives way before the primary button wraps */
@media (max-width: 480px) {
  .qq-page-brand-mini { display: none; }
  .qq-page-nav { gap: 6px; }
  .qq-page-nav .qq-btn-primary { white-space: nowrap; }
}
.qq-page[dir='rtl'] .qq-ek-key, .qq-page[dir='rtl'] .qq-ek-ver { direction: ltr; }
@media (prefers-reduced-motion: reduce) {
  .qq-page[data-editing='true'] qq-t[data-kept='true'], .qq-ek-bar { animation: none; }
}