/* =====================================================================
   components.css -- Praxis component-level styles
   Sister to theme.css. theme.css owns design tokens; this file owns
   the rules that consume them. Component blocks are delimited with
   start/end sentinels so they can be moved or audited without
   ambiguity.
   ===================================================================== */

/* ===== YUMI PANEL — Stage 2.3 ===== */

/* Bloom -- Yumi's global presence (replaces the old 'Y' FAB). A warm
   SVG heart on the warm surface: NO dark vessel.
   R-POLISH B1 · AMB-1 (THE CORNER LAW): the flower is ONE of the two ruled
   fixed elements (bottom-right; the "+" create door owns bottom-left), and it
   carries ONE ruled size and ONE ruled glow at every width and on every route.
   The per-route caption that used to stack beneath the orb is RETIRED (L5), so
   the button is now the orb alone -- hence the column flex + gap collapse to a
   single centred item. Its accessible name is the button's own aria-label. */
.yumi-bloom {
  position: fixed;
  /* B-M · P4 (safe-area insets): the orb is the ONE fixed corner element (AMB-1)
     that skipped the pattern its own sibling +Add FAB already uses (:12912). A
     static 24px offset sits INSIDE a notched iPhone's ~34px home-indicator
     gesture band in standalone PWA mode; add the inset so the tap target clears
     it. Additive padding, never a replacement — env() is 0 in a browser tab, so
     desktop/tab render is byte-unchanged; the delta is standalone-PWA-only. */
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  right: var(--sp-5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* AMB-1 · THE ONE RULED SIZE + THE ONE RULED GLOW.
   B1-FIX · THE HOUR (R2): re-ruled to the reference's flower -- 42px (was 56),
   and the REDUCED glow (0 0 8px at 32%, was 0 3px 12px at 38%). The world is
   now one twilight ground on every route, so the old two-ground hedge is gone:
   --gold resolves to the world gold (#C79A3A) under .yumi-bloom via theme.css's
   dark remap, which is exactly the reference's flower colour, so ONE recipe
   holds at every width and on every route. The offset drops to 0 0 because a
   lit corner ambience should sit AROUND the mark, not cast it downward.
   Position is untouched: bottom-right at --sp-5, already AMB-1's ruled corner.
   z-index stays 9999 per the ledger -- the reference's z:5 is mockup-local and
   must NOT be copied into an app that stacks panels above the flower. */
.yumi-bloom-orb {
  display: block;
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 32%, transparent));
}

.yumi-bloom-orb svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* L5: .yumi-bloom-line and its :hover are RETIRED with the caption family. */

.yumi-bloom:focus {
  outline: none;
}

.yumi-bloom:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* Bloom motion: slow petal rotation, a breathing core, a glowing halo,
   two twinkling embers. transform-box: fill-box anchors transform-origin
   to each group's own box so rotation/scale pivot on Bloom's centre. */
.yumi-bloom-petals,
.yumi-bloom-core,
.yumi-bloom-halo {
  transform-box: fill-box;
  transform-origin: center;
}

.yumi-bloom-petals  { animation: yumi-bloom-spin 22s linear infinite; }
.yumi-bloom-core    { animation: yumi-bloom-breathe 4.5s ease-in-out infinite; }
.yumi-bloom-halo    { animation: yumi-bloom-glow 6s ease-in-out infinite; }
.yumi-bloom-ember-a { animation: yumi-bloom-twinkle 5s ease-in-out infinite; }
.yumi-bloom-ember-b { animation: yumi-bloom-twinkle 6.5s ease-in-out infinite; animation-delay: -2.4s; }

@keyframes yumi-bloom-spin { to { transform: rotate(360deg); } }
@keyframes yumi-bloom-breathe {
  0%, 100% { transform: scale(0.9); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes yumi-bloom-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.82; transform: scale(1.06); }
}
@keyframes yumi-bloom-twinkle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .yumi-bloom-petals,
  .yumi-bloom-core,
  .yumi-bloom-halo,
  .yumi-bloom-ember-a,
  .yumi-bloom-ember-b {
    animation: none;
  }
}

/* ===== R-ARC Slice 9 — THE RAISED HAND (additive; body FAB only) =====
   The seat's ONLY visible change: when Yumi holds a genuine noticing the body
   FAB brightens ONE static step — the rest gold lifts to --gold-hi and a wide
   two-layer gold-hi halo lights the orb. STATIC in the held state: no pulse, no badge, no
   count, no words, no intensification over time, ever (YG-12 anti-coercion).
   The base spin/breathe/glow (above) are untouched — the raise adds ZERO
   motion. The one-time entry easing on the glow is SR-1's "one gentle
   transition"; it settles to static and is disabled under reduced-motion. The
   persistent hint line is RD-6's to retire (deferred, R-POLISH L5) — the seat
   never touches it. */
.yumi-bloom-orb { transition: filter 420ms var(--ease); }
.yumi-bloom--raised { --gold: var(--gold-hi); }
.yumi-bloom--raised .yumi-bloom-orb {
  /* SEAT-VIS (v3.230): a wide, STILL, two-layer gold-hi halo. The single 15px
     glow passed a screenshot diff but read invisibly to a human glance at arm's
     length; a symmetric 30px + 44px halo lights the orb without adding motion. */
  filter:
    drop-shadow(0 0 30px color-mix(in srgb, var(--gold-hi) 55%, transparent))
    drop-shadow(0 0 44px color-mix(in srgb, var(--gold-hi) 45%, transparent));
}
@media (prefers-reduced-motion: reduce) {
  .yumi-bloom-orb { transition: none; }
}

/* ===== Alive Yumi — in-chat Bloom + presence states (additive) ===== */
/* The in-panel Bloom lives in the panel-head crest slot: static, crest-sized,
   no launcher line. Scoped under #panel-crest so the body FAB is untouched. */
.yumi-panel .yumi-panel-head #panel-crest .yumi-bloom {
  position: static;
  bottom: auto;
  right: auto;
  z-index: auto;
  gap: 0;
}
.yumi-panel .yumi-panel-head #panel-crest .yumi-bloom-orb {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 7px color-mix(in srgb, var(--gold) 32%, transparent));
}
.yumi-panel .yumi-panel-head #panel-crest .yumi-bloom-orb svg {
  width: 30px;
  height: 30px;
}

/* Overlay layers stay hidden until a state activates them; transform anchored
   to each group's own box so motion pivots on Bloom's centre. */
.bloom-pulse,
.bloom-ripple,
.bloom-swirl,
.bloom-comet {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Per-state living motion. Gated to no-preference so reduced-motion users get a
   still Bloom; resting keeps the base spin/breathe/glow (untouched above). */
@media (prefers-reduced-motion: no-preference) {
  /* LISTENING -- lean in + inward ripple */
  .yumi-bloom--listening .yumi-bloom-orb { transform: scale(0.93); }
  .yumi-bloom--listening .yumi-bloom-petals { animation-duration: 15s; }
  .yumi-bloom--listening .bloom-ripple { opacity: 1; }
  .yumi-bloom--listening .bloom-ripple circle { animation: yumi-bloom-ripple-in 2s var(--ease) infinite; }
  .yumi-bloom--listening .bloom-ripple circle:nth-child(2) { animation-delay: 0.66s; }
  .yumi-bloom--listening .bloom-ripple circle:nth-child(3) { animation-delay: 1.33s; }
  /* THINKING -- concentric swirl + tighter spin */
  .yumi-bloom--thinking .yumi-bloom-orb { transform: scale(0.97); }
  .yumi-bloom--thinking .yumi-bloom-petals { animation-duration: 7s; }
  .yumi-bloom--thinking .yumi-bloom-core { animation-duration: 2.6s; opacity: 0.85; }
  .yumi-bloom--thinking .bloom-swirl { opacity: 0.9; animation: yumi-bloom-swirl-spin 2.4s linear infinite; }
  /* SPEAKING -- outward pulse + brighter core */
  .yumi-bloom--speaking .bloom-pulse { opacity: 1; }
  .yumi-bloom--speaking .bloom-pulse circle { animation: yumi-bloom-pulse-out 1.6s var(--ease) infinite; }
  .yumi-bloom--speaking .bloom-pulse circle:nth-child(2) { animation-delay: 0.8s; }
  .yumi-bloom--speaking .yumi-bloom-core { animation: yumi-bloom-core-speak 1.6s ease-in-out infinite; }
  /* ACTING -- directed comet surge (trigger wired by the command lane, Prompt 3) */
  .yumi-bloom--acting .yumi-bloom-orb { animation: yumi-bloom-orb-surge 720ms var(--ease); }
  .yumi-bloom--acting .yumi-bloom-halo { opacity: 0.9; }
  .yumi-bloom--acting .yumi-bloom-petals { animation-duration: 5s; }
  .yumi-bloom--acting .bloom-comet { opacity: 1; animation: yumi-bloom-comet-surge 720ms var(--ease); }
}

@keyframes yumi-bloom-ripple-in { 0% { transform: scale(1.8); opacity: 0; } 25% { opacity: 0.5; } 100% { transform: scale(0.55); opacity: 0; } }
@keyframes yumi-bloom-swirl-spin { to { transform: rotate(-360deg); } }
@keyframes yumi-bloom-pulse-out { 0% { transform: scale(0.7); opacity: 0; } 25% { opacity: 0.55; } 100% { transform: scale(2); opacity: 0; } }
@keyframes yumi-bloom-core-speak { 0%, 100% { transform: scale(0.96); opacity: 0.92; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes yumi-bloom-orb-surge { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes yumi-bloom-comet-surge { 0% { transform: translate(0, 0) scale(0.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-10px, 8px) scale(1); opacity: 0; } }

/* Reduced-motion: keep the alive states still. (State motion above is already
   no-preference-gated; this names the new state classes explicitly.) */
@media (prefers-reduced-motion: reduce) {
  .yumi-bloom--listening .yumi-bloom-petals,
  .yumi-bloom--listening .bloom-ripple circle,
  .yumi-bloom--thinking .yumi-bloom-petals,
  .yumi-bloom--thinking .yumi-bloom-core,
  .yumi-bloom--thinking .bloom-swirl,
  .yumi-bloom--speaking .yumi-bloom-core,
  .yumi-bloom--speaking .bloom-pulse circle,
  .yumi-bloom--acting .yumi-bloom-orb,
  .yumi-bloom--acting .yumi-bloom-petals,
  .yumi-bloom--acting .bloom-comet {
    animation: none;
  }
}

.yumi-panel {
  position: fixed;
  bottom: calc(var(--sp-5) + 100px);
  right: var(--sp-5);
  width: 380px;
  max-width: calc(100vw - var(--sp-5) - var(--sp-5));
  height: 540px;
  max-height: calc(100vh - var(--sp-6) - var(--sp-6));
  background: var(--surface);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-md);
  /* Stage 5.1 surface-set: hairline + lit-edge highlight + Yumi-tier
     shadow per A3.3 (gentle end of Tier 2). Background stays
     --surface for now -- the Yumi panel's internal --bg / --surface
     mix (input row, message bubbles) predates 5.1; not touched here
     since the brief is a material pass, not a Yumi internal restyle. */
  box-shadow:
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-yumi);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9998;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
}

.yumi-panel.yumi-panel-open {
  display: flex;
}

.yumi-panel-title {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  color: var(--ink);
}

.yumi-panel-close {
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: var(--fs-display);
  line-height: 1;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
}

.yumi-panel-close:hover {
  color: var(--ink);
}

.yumi-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-4);
  font-size: var(--fs-body);
  color: var(--ink);
}

.yumi-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.yumi-greeting {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  color: var(--ink-2);
  line-height: 1.4;
}

.yumi-panel-input {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.yumi-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  outline: none;
}

.yumi-input:focus {
  border-color: var(--gold);
}

.yumi-send-btn,
.yumi-mic-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.yumi-send-btn:hover,
.yumi-mic-btn:hover {
  color: var(--gold);
}

.yumi-mic-btn {
  color: var(--ink-3);
}

.yumi-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.yumi-msg {
  width: fit-content;
  max-width: 85%;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
}

.yumi-msg-user {
  margin-left: auto;
  margin-right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
}

.yumi-msg-yumi {
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  color: var(--ink);
}

.yumi-msg-typing {
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  color: var(--ink-3);
  font-style: italic;
}

.yumi-msg-error {
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* yumi-intelligence Stage III: live-web grounding indicator -- two quiet chips
   (web source + optional reader-model theme) + an honest source line, sitting
   ABOVE Yumi's reply. Both COLOR the question; neither answers it. Tokens only
   (the mockup's one raw rgba theme-border is replaced by a color-mix of
   --marginalia-color). Ported from design/yumi-intelligence-mockup.html. */
.ground-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 11px;
}
.ground-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  border-radius: var(--radius-pill);
  padding: 5px 11px;
}
.ground-chip.web {
  color: var(--river);
  background: color-mix(in srgb, var(--river) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--river) 32%, transparent);
}
.ground-chip.theme {
  color: var(--marginalia-color);
  background: color-mix(in srgb, var(--marginalia-color) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--marginalia-color) 35%, transparent);
}
.ground-chip .gdot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}
.ground-chip.web .gdot {
  background: var(--river);
  box-shadow: 0 0 7px var(--river);
}
.ground-chip.theme .gdot {
  background: var(--marginalia-color);
  box-shadow: 0 0 7px var(--marginalia-color);
}
.ground-source {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.ground-source a {
  color: var(--river);
  text-decoration: none;
}
.ground-source a:hover {
  text-decoration: underline;
}

.yumi-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.yumi-mic-btn.yumi-mic-recording {
  color: var(--gold);
  border-color: var(--gold);
}

.yumi-mic-btn.yumi-mic-processing {
  color: var(--ink-3);
  opacity: 0.7;
}

.yumi-mic-btn.yumi-mic-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Alive Yumi -- voice-in affordances. touch-action:none so a press-and-hold
   does not scroll. Listening = pulsing gold ring (capture in either mode);
   hands-free = a steady "armed" gradient while the loop is on. */
.yumi-mic-btn { touch-action: none; }
.yumi-mic-btn.yumi-mic-listening {
  color: var(--gold);
  border-color: var(--gold);
}
.yumi-mic-btn.yumi-mic-handsfree {
  color: var(--br-deep);
  background: var(--grad);
  border-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .yumi-mic-btn.yumi-mic-listening { animation: yumi-mic-pulse 1.4s ease-in-out infinite; }
}
@keyframes yumi-mic-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .yumi-mic-btn.yumi-mic-listening { animation: none; }
}

/* ===== Alive Yumi -- Prompt 3: command action layer (chip / takeover / ask /
   confirm). Additive, tokens only, reduced-motion-safe. ===== */
.yumi-cmd-chip {
  position: fixed;
  left: 50%;
  top: 84px;
  z-index: 10000;
  transform: translate(-50%, -8px);
  background: var(--surface);
  border: 1px solid var(--river);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--river);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: none;
}
.yumi-cmd-chip.is-on { opacity: 1; transform: translate(-50%, 0); }

.yumi-takeover-sweep {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 34%, color-mix(in srgb, var(--gold) 28%, transparent) 50%, transparent 66%);
  opacity: 0;
  transform: translateX(-60%);
}
@media (prefers-reduced-motion: no-preference) {
  .yumi-takeover-sweep.is-sweep { animation: yumi-takeover-sweep-kf 560ms var(--ease); }
}
@keyframes yumi-takeover-sweep-kf {
  0%   { opacity: 0; transform: translateX(-60%); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

.yumi-cmd-ask,
.yumi-cmd-confirm {
  margin: 6px 0 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.yumi-cmd-ask-q {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
}
.yumi-cmd-ask-row { display: flex; flex-wrap: wrap; gap: 6px; }
.yumi-cmd-pick,
.yumi-cmd-go,
.yumi-cmd-no {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.yumi-cmd-pick { color: var(--river); background: transparent; border: 1px solid var(--river); }
.yumi-cmd-go   { color: var(--text-on-dark); background: var(--grad); border: none; }
.yumi-cmd-no   { color: var(--ink-2); background: transparent; border: 1px solid var(--line-2); }
@media (prefers-reduced-motion: reduce) {
  .yumi-takeover-sweep.is-sweep { animation: none; }
}

/* ===== END YUMI PANEL ===== */


/* =====================================================================
   DW-1 (Stage 3) -- scoped UA body-margin reset. theme.css body{} never
   resets the 8px UA margin; at >=760 (the desktop horizontal-nav band)
   those 16px push the nav links past the viewport, producing the 768
   h-scroll. Reset at >=760 ONLY, so <=759 (the mobile hamburger bar) stays
   byte-unchanged. Centered/auto layouts (every page column, the nav pill)
   re-center (the nav pill sits 8px higher); the surfaces regain 16px of
   usable width. A residual 8px page h-scroll at 768 (the nav list overruns
   its pill) is a separate nav-fit item (DW-NAV768), out of this batch's
   About+Arcs scope.
   ===================================================================== */
@media (min-width: 760px) { body { margin: 0; } }
/* B-M: the mobile companion. DW-1 reset the UA margin at >=760 only; below 760
   the 8px UA body margin survives, and where full-bleed OPAQUE chrome sits on it
   (the mobile nav, background:var(--surface)) it reads as an ~8px ground-tone
   hairline down both edges — the fill differs in shade from the ground token, so
   it is not masked the way transparent-on-ground content is. Reset it here too;
   ≤759 now matches ≥760. Kept as a separate mirror rule (not by dropping DW-1's
   min-width) so each band's reset is self-documenting and independently
   revertable. FELT DELTA (390, private tab): the hairline band beside the mobile
   nav goes; the nav fill reads edge-to-edge. */
@media (max-width: 759px) { body { margin: 0; } }

/* B-M: kill the default tap-highlight flash. Mobile Safari / Android WebView
   paint a translucent grey/blue box over an element on every tap; Praxis gives
   its own :active / hover feedback, so the default box is noise. Set on `html`
   (the property inherits) so it covers every tappable element app-wide with one
   rule. Unscoped is correct: the highlight only exists on touch, so this is inert
   on desktop. Transparent, not a custom colour — no new token, no new hex.
   FELT DELTA (390, any tap): no grey/blue box flashes when tapping controls. */
html { -webkit-tap-highlight-color: transparent; }

/* B-M: contain the overscroll bounce. In standalone PWA (and mobile browsers),
   scrolling past the top/bottom of the app rubber-bands the whole viewport and
   chains the scroll to the surface behind — both read as "web page", not "app".
   `contain` on the root stops the chaining and the glassy bounce while leaving
   inner-panel scrolling untouched (contain, not none, so nothing that scrolls
   stops scrolling). Y-axis only — the app never scrolls horizontally at the root.
   FELT DELTA (390): no rubber-band / scroll-chaining at the top or bottom edge. */
html { overscroll-behavior-y: contain; }

/* =====================================================================
   R2 / DW-NAV768 · THE NAV FIT, CLOSED (R-POLISH B4)

   The residual the block above names and defers. Reproduced and measured at
   768 (viewport 753 after the scrollbar), not inferred:

     available inside the pill : 753 - 20 padL - 14 padR   = 719px
     actually needed           : 51 wordmark + 18 gap
                               + 222 search  + 18 gap
                               + 442 list                  = 751px

   That surplus is the PRESSURE, not the symptom, and the two are not the same
   number — the search box keeps yielding under it, so what finally escapes the
   viewport is smaller than the 32px shortfall. The SYMPTOM, measured: the list's
   last child (the avatar) lands at x=772 against a 753 viewport, and
   `document.scrollWidth - clientWidth` reads **18px** of h-scroll.

   WHY IT OVERFLOWS RATHER THAN COMPRESSING: `.app-nav-list` carries
   flex-shrink:0, so it cannot yield; `.app-nav-search` (shrink:1) has already
   given up everything it can. The slack has to come from inside the list, and
   it is there: 5 gaps at 32px = 160px of the list's 442px is gap, against 282px
   of actual links.

   FIXED BY TIGHTENING THAT GAP IN THE TIGHT BAND ONLY. 32 -> 20 frees 60px,
   which clears the 18px with real margin and keeps every link at full size — no
   truncation, no hidden item, no font change. Bounded at 839 because the band is
   measurably clear from ~785 up (751 + 34 padding), so the roomy desktop nav
   above it is byte-unchanged, and <=759 (the hamburger bar) is never entered.

   THE RULE ITSELF LIVES BELOW, immediately after `.app-nav-list`'s base
   declaration (:775). Placed here first, it silently lost: a media query adds no
   specificity, so the later base `gap:32px` simply won on source order and the
   overflow was unchanged — measured, not assumed.
   ===================================================================== */

/* ===== TOP NAV -- Stage 3.10a Stage 1 =====
   Persistent bar at the top of every route. Two items (Books,
   Notebook) plus a left-aligned Praxis wordmark. Active route is
   marked by a 2px gold underline toggled in renderRoute() (Stage
   A). The 2px line's space is reserved on every link via a
   transparent border-bottom so toggling the active class does not
   shift layout. Mobile (56px height, hamburger panel) is Stage 4
   -- this block is desktop-only. */

.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1080px;
  padding: 11px 14px 11px 20px;
  /* Canon §4-A (June 2026): nav chrome is SOLID -- no backdrop-filter,
     no blur -- at every width (the iOS overflow-composite bug, fixed at
     v3.106). THE HOUR's reference mockup frosts the nav
     (rgba(21,24,38,.60) + blur(22px)); that VALUE is adopted as a solid
     composite (--nav-solid) and the BLUR is deliberately NOT, because the
     canon guardrail outranks the mockup and the nav parents overflowing
     absolutely-positioned children (the menu). Over the twilight ground the
     two read nearly identically; only content scrolling under it differs.
     Fork surfaced for Preston in docs/checkpoints/r-polish-b1-fix.md.

     B1-FIX · NAV VISIBILITY: the nav was position:static, so it scrolled
     entirely off-screen (measured: top -80px at scroll 600, height 80).
     That -- not B1's fixed ::before -- was the regression. sticky/top:0
     keeps it in flow (no page-content offset, unlike fixed), so the
     original "not fixed/sticky" rationale is preserved while the nav stays
     reachable. z-index 30: above page surfaces, far below the overlay tier
     (intro summon 9990 / Bloom 9999 / modals 10021) per the z-ledger. */
  background: var(--nav-solid);
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* DEVICE FELT PASS (Finding 2) — the status-bar scrim. On MOBILE the nav is
   position:relative (an intentional iOS-composite-bug avoidance, components.css ~5572)
   and scrolls away; once gone, page content — which carries no top safe-area — scrolls
   under the iOS status bar (dark header text over the clock, no nav behind). This fixed
   strip of exactly env(safe-area-inset-top) keeps a solid ground cover in the status-bar
   zone at every scroll position. background:var(--surface) is the SAME per-ground token
   the mobile nav paints and it flips light/dark via [data-ground="dark"] on <body>, so
   it reads as the nav's status-bar cap persisting on both parchment and dark grounds.
   Zero-height no-op on non-notch devices (env resolves to 0). z:25 sits ABOVE page
   content and BELOW the nav (30) and every full-screen overlay (scan-surface 9000,
   Bloom 9999, nav-open 10010, capdoor-scrim 10020, sheet/modal 10021) — each of which
   therefore covers it on its surface. pointer-events:none so it never eats a tap. */
#statusbar-scrim{
  position:fixed; top:0; left:0; right:0;
  height:env(safe-area-inset-top, 0px);
  background:var(--surface); z-index:25; pointer-events:none;
}

/* ============================================================================
   HD-1 · REVEAL ON INTENT. The header leaves while you read and comes back the
   instant you reach for it (any upward scroll), or when ⌘K calls it.

   DESKTOP-ONLY BY CONSTRUCTION. The tuck is a `transform`, and canon §2 forbids
   transform on any ancestor of an absolutely-positioned child that can overflow
   it -- the iOS composite bug. Below 760 the nav parents exactly that (the
   full-viewport mobile menu), so the transform is scoped to >=760 and mobile
   keeps its existing in-flow behaviour, unchanged, as the brief requires.

   The translate clears the desktop pill's own 14px top margin as well as its
   height, so the tuck leaves no sliver hanging at the viewport edge.

   The transition LIST itself is not declared here: a later .app-nav rule
   (~line 10818, the writing-canvas focus dim) owns the nav's transition at equal
   specificity and would win anyway, so both properties are declared there. */
@media (min-width:760px){
  .app-nav.nav-tucked{
    transform:translateY(calc(-100% - 20px));
  }
}
@media (prefers-reduced-motion:reduce){
  .app-nav{ transition:none; }
}

.app-nav-wordmark {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1;
  color: var(--wordmark);
  text-decoration: none;
}

/* Phase 3.1: global search chrome -- VISUAL ONLY (scope A). The input
   is focusable native chrome; no query logic, no results, no word-mark
   handler. Recessed honey well (--sunk) with the pill radius; the river
   accent marks focus. The mono ⌘K badge is a styled affordance hint,
   not a wired shortcut. */
.app-nav-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 38px;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(58,40,16,.07);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.app-nav-search:focus-within {
  border-color: var(--river-l);
}

.app-nav-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
}

.app-nav-search-input::placeholder {
  color: var(--ink-3);
}

.app-nav-search-kbd {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-2);
}

.app-nav-list {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* R2 / DW-NAV768 (R-POLISH B4): the 18px nav overflow in the tight band. Full
   arithmetic and reasoning at the block near :625. Sits AFTER the base rule
   above — equal specificity, so source order is the whole mechanism. */
@media (min-width: 760px) and (max-width: 839px) {
  .app-nav-list { gap: 20px; }
}

.app-nav-link {
  /* Batch 1: pill nav links (mockup .nav .links a) -- padding + pill
     radius; the active state is a --wash background fill rather than
     the prior gold underline. */
  display: inline-block;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color var(--motion-base) var(--ease),
              background-color var(--motion-base) var(--ease);
}

.app-nav-link:hover {
  color: var(--ink);
}

/* Canon §4-B: active is NOT a wash pill anymore -- it is a gold
   underline (desktop) / gold left-bar (mobile menu), applied per
   breakpoint below. Scoped :not(.app-nav-profile) so the avatar chip
   (also an .app-nav-link) keeps its gradient + its own gold-outline
   active treatment, never this. */
.app-nav-link.app-nav-link-active:not(.app-nav-profile),
.app-nav-link.app-nav-link-active:not(.app-nav-profile):hover {
  color: var(--ink);
}

/* Phase 3.1: static profile chip -- replaces the Account nav item.
   STATIC glyph (a person silhouette, fill: currentColor so it carries
   no hardcoded color); routes to #account. It keeps the .app-nav-link
   class + data-route="account" so renderRoute's active-toggle marks it
   with no JS change. The full-border treatment overrides .app-nav-link's
   reserved 2px transparent bottom; active swaps the ring to gold. A
   dynamic user-initial is a deliberate later follow-up. */
.app-nav-profile {
  /* Batch 1: gradient avatar circle showing the user's initial
     (populated in renderRoute). Mockup .nav .me. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--grad);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
}

.app-nav-profile:hover {
  filter: brightness(1.06);
}

/* Active (on the Account route) = gold-light outline ring, mockup
   .me outline treatment. */
.app-nav-profile.app-nav-link-active,
.app-nav-profile.app-nav-link-active:hover {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.app-nav-profile-initial {
  display: block;
  line-height: 1;
}

/* Canon §4 mobile-menu profile row: name + "Account" label, shown only
   inside the open mobile menu (rule in the max-width:759 block); hidden
   everywhere else so the desktop avatar stays a bare gradient circle. */
.app-nav-profile-meta {
  display: none;
}

/* Phase 3.1: desktop pill geometry. Stays in-flow (no fixed/sticky) --
   only margin (inset from the viewport edges so the honey ground shows
   around it), full corner rounding, and a warm lift give the floating-
   pill read. No content-offset math, no per-page breakage. Scoped to
   >=760px so the 56px mobile hamburger bar (max-width:759px) is
   untouched. The full border overrides the base bar's border-bottom. */
@media (min-width: 760px) {
  .app-nav {
    margin: 14px auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 30px -18px rgba(58,40,16,.4);
  }

  /* Canon §4-B: desktop nav links = mono uppercase; active = a 2px gold
     underline. The transparent border-bottom reserves the underline's
     space so toggling active never shifts layout. */
  .app-nav-link:not(.app-nav-profile) {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 6px 2px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
  }
  .app-nav-link.app-nav-link-active:not(.app-nav-profile),
  .app-nav-link.app-nav-link-active:not(.app-nav-profile):hover {
    border-bottom-color: var(--gold);
  }

  /* Canon §4-C: keep the wired Cmd/Ctrl+K search but recess it -- no
     longer flex-grow across the bar, capped width, quieter --wash
     hairline so it does not compete with wordmark + links + avatar. */
  .app-nav-search {
    flex: 0 1 auto;
    max-width: 240px;
    border-color: var(--wash);
  }
}

/* ===== END TOP NAV ===== */


/* ===== SHARED TYPE -- Stage 3.2 Batch 1 =====
   Generic mono-kicker eyebrow (mockup .eyebrow), reusable above any
   page title. Not surface-specific -- chrome/shared-type role. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* ===== END SHARED TYPE ===== */

/* ===== SPOTLIGHT -- global search (Cmd/Ctrl+K) -- Batch 4B =====
   The 2nd sanctioned blur surface (alongside .app-nav): a backdrop scrim
   plus a centered near-opaque glass panel, reconciled from the mockup's
   global search. Tokens only -- the translucent fill is the new
   --glass-spotlight; the scrim is a color-mix of --ink (no hardcoded
   color). Default chips use --surface-2; sub-theory (idea) chips get a
   per-id luminous radial inline via spotlightRender (hue = stColorForId). */
.spotlight-backdrop {
  display: none;
}

.spotlight-backdrop.spotlight-backdrop-open {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--scrim);
  z-index: 10000;
}

.spotlight-panel {
  display: none;
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: calc(100vw - var(--sp-5) - var(--sp-5));
  max-height: calc(100vh - 160px);
  flex-direction: column;
  overflow: hidden;
  background: var(--glass-spotlight);
  /* UMBER / canon §4-A: spotlight overlay is SOLID -- blur removed. */
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spotlight);
  z-index: 10001;
  font-family: var(--font-body);
  color: var(--ink);
}

.spotlight-panel.spotlight-open {
  display: flex;
}

.spotlight-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.spotlight-input-glyph {
  font-size: 18px;
  color: var(--ink-3);
}

.spotlight-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
}

.spotlight-input-kbd {
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.spotlight-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.spotlight-results {
  overflow-y: auto;
}

.spotlight-group {
  padding: 10px 0;
}

.spotlight-group-head {
  padding: 8px 20px 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.spotlight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}

.spotlight-item-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.spotlight-item-label {
  color: var(--ink);
  font-weight: 500;
}

.spotlight-item-type {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
}

.spotlight-item-active {
  background: var(--wash);
}


/* ===== SHELF PAGE HEADER + ACTION BUTTONS -- Stage 3.10a Stage 1 =====
   /books header. Title-block left, action buttons top-right. CSS
   grid carries the layout so no wrapper divs were added to
   renderShelf() -- the four direct children (.shelf-title,
   .shelf-subtitle, .shelf-new-book, .shelf-new-book-bulk OR
   .shelf-signin-prompt) place themselves via explicit grid-column
   / grid-row. Signed-out branch has only the sign-in prompt; it
   spans the action columns so it sits where the buttons would. */

/* Stage 2 (mockup-fidelity): header is the mockup's flex .pagehd -- the left
   headline block (title + count) and the right actions cluster, bottom-aligned
   and pushed apart. Replaces the Batch-2 grid whose shared top row caused the
   eyebrow/seg overlap (the eyebrow is now gone). */
.shelf-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 48px 0 32px 0;
}

.shelf-headline {
  min-width: 0;
}

.shelf-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}

/* Mockup .pagehd .sub: the book-count line under the title. */
.shelf-count {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-2);
}

.shelf-new-book,
.shelf-new-book-bulk,
.shelf-resolve-covers-btn,
.shelf-scan-btn,
.shelf-signin-prompt {
  /* Stage 2: header is now flex (.pagehd); the former grid-row / align-self
     placement is dropped. These keep only their type + shape. */
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
}

.shelf-new-book {
  /* Phase 3.1: signature gold->river gradient (--grad). The gradient's
     stops live in theme.css; components.css only references the token. */
  font-weight: 600;
  background: var(--grad);
  color: var(--text-on-dark);
  border: 1px solid transparent;
}

.shelf-new-book:hover {
  filter: brightness(1.06);
}

.shelf-new-book-bulk {
  grid-column: 3;
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.shelf-new-book-bulk:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* 3.10d: secondary button shape, mirrors .shelf-new-book-bulk.
   Implicit grid column 4 -- .shelf-header's explicit template is
   1fr auto auto; grid-auto-columns: auto creates column 4 on demand. */
.shelf-resolve-covers-btn {
  grid-column: 4;
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.shelf-resolve-covers-btn:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.shelf-resolve-covers-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* 6.1b: shelf-photo scan trigger -- secondary shape, mirrors
   .shelf-resolve-covers-btn. The :disabled state carries the
   'Scanning…' busy label. */
.shelf-scan-btn {
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.shelf-scan-btn:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.shelf-scan-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* 6.1b: the file input paired with .shelf-scan-btn. Offscreen-clip
   (not display:none, which suppresses the iOS camera capture intent)
   so the input stays focusable/operable while invisible. */
.shelf-scan-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 6.1c: scan status line -- empty/error messaging under the header
   actions. Full-width row (degrades to a block if the header is not a
   grid), right-aligned to sit beneath the action cluster, muted. The
   :empty rule collapses it whenever the text is cleared. */
.shelf-scan-status {
  grid-column: 1 / -1;
  justify-self: end;
  max-width: 420px;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
  text-align: right;
}

.shelf-scan-status:empty {
  display: none;
}

.shelf-signin-prompt {
  grid-column: 2 / span 2;
  background: var(--ink);
  color: var(--text-on-dark);
  border: none;
}

.shelf-signin-prompt:hover {
  background: var(--br-deep);
}

/* ===== END SHELF PAGE HEADER + ACTION BUTTONS ===== */


/* ===== SHELF VIEW TOGGLE + LIST VIEW -- Stage 3 (chrome-fidelity) =====
   The right-side header cluster (Covers|List seg + action buttons) as one
   right-aligned flex row, spanning the header's two auto columns so the
   Covers header reads exactly as before, with the seg added at its left.
   Tokens only; no blur. */
.shelf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Canon §4-E: decluttered toolbar -- the secondary actions (Scan shelf /
   Bulk add / Resolve covers) move out of the header cluster into a quiet
   chip row below it, leaving only the primary "+ Add book" + the seg up
   top. Chip look is supplied via the container so the buttons keep their
   functional classes + disabled states. */
.shelf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px 0;
}

.shelf-chips button {
  height: 38px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease),
              color var(--motion-base) var(--ease);
}

.shelf-chips button:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.shelf-chips button:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Segmented Covers|List toggle -- the app's pill idiom (mirrors the
   sub-theory register toggle): mono-uppercase options, active gets --wash. */
.shelf-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.shelf-seg-option {
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
}

.shelf-seg-option.is-active {
  background: var(--wash);
  color: var(--ink);
}

/* List view -- compact text rows of the same books (no cover thumbnails). */
.shelf-rows {
  display: flex;
  flex-direction: column;
}

.shelf-book-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
}

.shelf-book-row:hover {
  background: var(--wash);
}

.shelf-book-row-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
}

.shelf-book-row-author {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}

/* Right-align the carried status pill (reuses .shelf-book-status* styling). */
.shelf-book-row .shelf-book-status {
  margin-left: auto;
  align-self: center;
}


.notebook {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}


/* ===== NOTEBOOK PAGE HEADER + ACTION BUTTONS -- Stage 3.2a =====
   Twins the Shelf header (sibling grammar): transparent container (NO
   glass -- glass stays on the chrome pills per 3.1), Cormorant title
   matching .shelf-title, action buttons pushed right. Flex (not the
   shelf's grid) because this header is title + 4 buttons with no
   subtitle row -- .notebook-title { margin-right:auto } drives the
   title-left / buttons-right split. The Settings + "What does Yumi
   see?" toggles keep their existing secondary rule (1726) which
   already mirrors .shelf-new-book-bulk; only the two NEW buttons
   (+ New entry primary, + New arc secondary) are styled here. */

.notebook-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 48px 0 32px 0;
}

.notebook-title-block {
  margin-right: auto;
}

.notebook-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.notebook-new-entry,
.notebook-new-arc {
  align-self: start;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
}

/* Primary -- mirrors .shelf-new-book: the signature gold->river
   gradient (--grad), warm-white text, brightness lift on hover. */
.notebook-new-entry {
  font-weight: 600;
  background: var(--grad);
  color: var(--text-on-dark);
  border: 1px solid transparent;
}

.notebook-new-entry:hover {
  filter: brightness(1.06);
}

/* Secondary -- mirrors .shelf-new-book-bulk: transparent + --border
   hairline, warming on hover. Matches the Settings / What-does-Yumi-see
   toggles' existing treatment so all four header buttons read as a set. */
.notebook-new-arc {
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.notebook-new-arc:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* ===== END NOTEBOOK PAGE HEADER + ACTION BUTTONS ===== */


/* ===== ARCS PAGE -- Stage 5.3 Stage 1 =====
   The Arcs page is the third top-nav surface (Books / Notebook /
   Arcs). Stage 1 wires only the empty scaffold -- container, page
   header, title, placeholder subtitle. The teaching panel, worked
   examples, and Find-this-book line land in 5.3 Stages 2-4.

   Container shape mirrors .shelf (max-width 1280, 32px horizontal
   padding). Header register matches .shelf-title (Cormorant
   Garamond 40px, --ink) and .shelf-subtitle (DM Sans muted ink) --
   but without text-transform:uppercase, because the subtitle here
   is sentence-cased teaching copy, not a metadata strap. No new
   CSS variables; reuses --font-serif, --font-body, --ink, --ink-3. */

.arcs-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Stage 3 (mockup-fidelity): header is the mockup flex .pagehd -- the left
   headline (title + teaching) and a top-right "+ Create an arc" button,
   bottom-aligned and pushed apart. */
.arcs-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 48px 0 32px 0;
}

.arcs-headline {
  min-width: 0;
}

.arcs-page-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}

.arcs-page-subtitle {
  margin: 8px 0 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* C2 teaching paragraph. Serif, generous line-height, max-width capped
   on the paragraph (not the container) so the line length stays in
   readable territory while the page itself keeps its 1280px breathing
   room. Color --ink (not --ink-2) -- this paragraph IS the teaching;
   it shouldn't recede the way a subtitle does. Size 21px sits between
   .arcs-page-title (40px serif) and body copy (15px sans), giving the
   paragraph the weight of "the introduction" called for by the spec. */
.arcs-teaching {
  margin: 24px 0 0 0;
  max-width: 62ch;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

/* Stage 3 (mockup-fidelity): "+ Create an arc" button -- moved into the page
   header (top-right). Gradient primary; the former two-column create section
   and its align-self placement are removed. */
.arcs-create-btn {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--grad);
  color: var(--text-on-dark);
  border: 1px solid transparent;
  white-space: nowrap;
}

.arcs-create-btn:hover {
  filter: brightness(1.06);
}

/* Stage 3 (mockup-fidelity): the 1/2/3 explainer list and its mobile stack
   rule are removed with the create section. */

/* Stage 5.3 Stage 3b: worked-example cards (Pedagogy of Desire live,
   Pedagogy of Flow illustrated). Both cards share the base register
   so they read as siblings; the live/illustrated split is carried by
   opacity + cursor + hover behavior, not by structural redesign. */

/* Canon §4-F: arcs grids are 3-up on desktop (base), 1-up on mobile (the
   max-width:759 override). Applies to both the examples and "Your arcs". */
.arcs-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 64px 0;
}

/* Your arcs: the signed-in user's own arc list, rendered above the worked
   examples. Cards reuse .arc-card / .arc-card-live; this block only
   supplies the section stack + heading. Tokens only. */
.arcs-yours {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 56px 0;
}

/* Base card register. --surface-2 fill + --ink-4 hairline matches the
   tier-1 card pattern named in components.css line 2038 (the shelf
   book cards, the notebook entry cards, the artifact cards) -- the
   wheat field sits below, so cards must be opaque, not translucent.
   No new tokens introduced. Anchor reset (color, text-decoration)
   applies only to the live card (which IS an <a>); the illustrated
   card is a <div> and inherits body color naturally. */
.arc-card {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-lg);
  padding: 20px;
  color: inherit;
  text-decoration: none;
  /* Stage 5.1 motion: card-lift on hover is a permitted micro-motion
     (A4.3). Re-timed transition matching the shelf-book card's hover
     behavior. */
  transition: transform var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease),
              opacity var(--motion-base) var(--ease);
}

.arc-card-text {
  /* Group the title + description so the cover row sits visibly below
     the prose, not interleaved with it. */
}

.arc-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.arc-card-description {
  margin: 8px 0 0 0;
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Canon §4-G: a single constellation thumb banner (top), then title +
   description, then a mono meta line of computed counts. Replaces the
   5-cover row (the cover CSS below is now unused by renderArcsPage). */
.arc-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  margin: 0 0 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--gold-light) 26%, var(--surface-2)),
    var(--surface-2) 72%);
}

.arc-card-thumb-spark {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 10px
    color-mix(in srgb, var(--gold-light) 50%, transparent));
}

.arc-card-thumb-spark path {
  fill: var(--gold-light);
}

.arc-card-meta {
  margin: 14px 0 0 0;
  padding: 14px 0 0 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Live card: full visual weight, anchor cursor, subtle lift on hover.
   The Pedagogy of Desire card is the only one a user can click into;
   hover affords that. */
.arc-card-live {
  cursor: pointer;
}

.arc-card-live:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Illustrated card design call (treatment): lower opacity (0.78) +
   default cursor + no hover lift + a small mono-caps label above the
   title. The label is the explicit cue ("Illustrated example" tells
   the user what this card IS); the opacity is the implicit cue (it
   recedes slightly from the live card). Both cues together prevent
   the card from reading as a broken/missing/coming-soon variant of
   the live card. No greyscale, no dashed border, no "ghost" styling
   -- those treatments overshoot and make the card look broken. */
.arc-card-illustrated {
  opacity: 0.78;
  cursor: default;
}

.arc-card-label {
  display: inline-block;
  margin: 0 0 12px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Cover thumbnails row (live card only). Five small covers in a
   horizontal flex row. Heights are fixed; widths vary by each book's
   aspect ratio. Null-coverUrl placeholder block matches the shelf's
   .shelf-book-cover-placeholder pattern (--color-surface fill, no
   icon, no copy) -- placeholders read as "cover loading" rather than
   "no cover ever", which is honest because the async fetch may still
   resolve them. */
.arc-card-covers {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.arc-card-cover,
.arc-card-cover-placeholder {
  display: block;
  height: 72px;
  width: auto;
  border-radius: 2px;
}

.arc-card-cover {
  object-fit: contain;
  object-position: center bottom;
}

.arc-card-cover-placeholder {
  /* Reserve a placeholder width so the row's layout doesn't collapse
     before covers resolve. 48px sits within the typical book-cover
     aspect-ratio range (paperback ~0.66) for a 72px-tall thumb. */
  width: 48px;
  background: var(--color-surface);
  border: 1px solid var(--ink-4);
}

/* Mobile: cards already stack via the flex-column on .arcs-examples.
   Tighten the card's inner padding and shrink the cover thumbnails
   so the live card's five-cover row doesn't wrap awkwardly on narrow
   screens. 720px matches the breakpoint used by .arcs-create above. */
@media (max-width: 720px) {
  .arc-card {
    padding: 24px;
  }
  .arc-card-cover,
  .arc-card-cover-placeholder {
    height: 56px;
  }
  .arc-card-cover-placeholder {
    width: 40px;
  }
}

/* Stage 3 (mockup-fidelity): dashed "Start another arc" create tile -- a grid
   cell (a reset <button>) that opens the arc editor (mockup line 175). Reuses
   the .arc-card box (surface-2 fill, ink-4 border, radius, 20px padding) but
   overrides to a dashed, centered, button-reset affordance. */
.arc-card-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  border-style: dashed;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  cursor: pointer;
}

.arc-card-start:hover {
  color: var(--ink-2);
  border-color: var(--ink-3);
}

.arc-card-start-icon {
  display: inline-flex;
}

.arc-card-start-label {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink-2);
}

/* ----- Umber layout port (surface 3): mock arcs frame (scoped under .arcs) -----
   design/praxis-umber-mockup.html #s-arcs. Arcs is a DARK surface; tokens flip
   via [data-ground="dark"] (--ink->text-d, --ink-3->muted, --surface->surface-d).
   Appended -> wins for the renamed elements. The live arc-card nav (<a href=#arc/>),
   _arcCardThumb, and the start-tile -> openArcEditor are unchanged. */
.arcs { max-width:1080px; margin:0 auto; padding:0 var(--sp-5); }
.arcs-head { margin-bottom:var(--sp-6); max-width:680px; }
.arcs-title { font-family:var(--font-serif); font-size:clamp(30px,5vw,46px); color:var(--ink); margin:0 0 10px; }
.arcs-teach { font-family:var(--font-serif); font-style:italic; font-size:18px; color:var(--ink-3); line-height:1.5; }
.arcs-section-h { display:flex; align-items:baseline; gap:12px; margin:var(--sp-6) 0 var(--sp-4); }
.arcs-section-h h2 { font-family:var(--font-serif); font-size:24px; color:var(--ink); margin:0; }
.arcs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.arcs .arc-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; transition:transform var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
.arcs .arc-card:hover { transform:translateY(-3px); border-color:var(--line-2); }
.arcs .arc-card-thumb { height:140px; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.arcs .arc-card-thumb svg { width:100%; height:100%; display:block; }
.arcs .arc-card-body { padding:16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.arcs .arc-card-title { font-family:var(--font-serif); font-size:21px; color:var(--ink); line-height:1.15; }
.arcs .arc-card-desc { font-size:13.5px; color:var(--ink-3); line-height:1.55; flex:1; }
.arcs .arc-card-meta { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--gold); opacity:.92; padding:16px 18px; border-top:1px solid var(--border); }
.arcs .arc-card-start { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:300px; background:transparent; border:1px dashed var(--line-2); border-radius:var(--radius-lg); color:var(--ink-3); cursor:pointer; transition:color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
.arcs .arc-card-start:hover { color:var(--gold); border-color:var(--gold); }
.arcs .arc-card-start-icon { line-height:0; }
.arcs .arc-card-start-label { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; }
/* Bug B — arc-create editor body: compact single-question field. The shared
   openEditor textarea is rows="8" (intrinsic ~193px) and content-box, so a
   min-height floor can't shrink it; cap the actual height (height:72px) +
   box-sizing:border-box so the field renders ~72px under .arcs without touching
   the shared rows attr (which the journal/marginalia/artifact editors share).
   resize:vertical is inherited from the base rule — the user can still drag it
   taller. Scoped to .arcs → only the arc-create field is affected. */
.arcs .notebook-editor-body { min-height:72px; height:72px; box-sizing:border-box; }

/* ============================================================================
   Wave 7 · Surface C — Arcs reskinned to .lum-amber ("your thinking" ground).
   The .arcs box becomes a full-bleed amber ground with a centered 1080 content
   column (the book/notebook full-bleed pattern); a scoped token remap recolours
   the inherited chrome, and explicit rules add the glass card, the per-arc mini-
   constellation band (PraxisMarks lights + threads, glow by maturity), the
   Recent/Name/Maturity sort + "N arcs" count, and the begin tile. NO Published-
   only toggle / .pub chip / consequence line -- the arc record carries no
   published or consequence field (DEFERRED, a data-model task). Washes via
   color-mix off --lum-*; no raw hex. Look ref: design Wave 7 arcs-amber.html.
   ============================================================================ */
/* R5 S6 (dead-code cut): the Wave 7 .arcs.lum-amber dark arcs-list skin (glass +
   backdrop-blur) was deadened in S2 — the root is now .arcs.lum-amber-deep (the
   Universal light skin below END-ARCS). Grep-verified zero JS callers ('arcs lum-amber'
   non-deep = comment-only; live emits 'arcs lum-amber-deep'). Removed. */

/* ============================================================================
   R5 · Surface C — Arcs LIST reskinned to Universal v1.2 LIGHT. Option-B: the
   route stays in umberGroundDark; this scoped .lum-amber-deep block re-points the
   globals the base .arcs rules consume to the shared Shelf/Home light set, paints
   the weathered-light ground, and rebuilds the grid (D1: auto-FIT + grid-auto-rows
   equal-height tiles). Cards go solid parchment (the .arcs.lum-amber glass +
   backdrop-blur skin above is now INERT — swept in S6). Marks are the fixed
   --subtheory jewel hues on a light band; cards carry no renderer text, so no
   renderer-global (--ink/--sunk) re-point is needed here (unlike the interior field).
   Re-point values verbatim from the R3 home skin (components.css:11707-11741).
   ============================================================================ */
.arcs.lum-amber-deep{
  max-width:none; margin:0; padding:56px var(--sp-5) 80px; min-height:100vh;
  --ink:#241710; --ink-2:#645940; --ink-3:#645940; --ink-4:#978b6d;
  --surface:#fffdf8; --surface-2:#efe7d6; --border:#e3d8c1; --line-2:#e3d8c1;
  --gold:#a8761a; --gold-deep:#855410; --gold-hi:#d9a441; --gold-light:#d9a441;
  --thread:#c2a463;
  --field-1:#f2c25a; --field-2:#e07a52; --field-3:#d98f8a; --field-4:#f5bace; --field-5:#a9b98c;
  --field-6:#98d4b0; --field-7:#8590d8; --field-8:#f8e078; --field-9:#e8b068; --field-10:#b8896c;
  background-color:#f4efe4;
  background-image:
    radial-gradient(70% 55% at 14% 2%,  rgba(248,228,176,.55) 0%, rgba(248,228,176,0) 60%),
    radial-gradient(62% 52% at 89% 12%, rgba(232,200,135,.42) 0%, rgba(232,200,135,0) 62%),
    radial-gradient(82% 62% at 72% 104%,rgba(232,176,104,.32) 0%, rgba(232,176,104,0) 60%),
    linear-gradient(155deg,#f4efe4,#eee4cd);
  background-attachment:fixed;
}
.arcs.lum-amber-deep > *{ max-width:1080px; margin-left:auto; margin-right:auto; }
.arcs.lum-amber-deep .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.arcs.lum-amber-deep .arcs-title{ font-family:var(--font-serif); color:var(--ink); }
.arcs.lum-amber-deep .arcs-teach{ font-family:var(--font-serif); font-style:italic; color:var(--ink-2); }
.arcs.lum-amber-deep .arcs-section-h h2{ font-family:var(--font-serif); color:var(--ink); }
/* control bar (mock .bar): segmented sort + count */
.arcs.lum-amber-deep .arcs-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 auto 18px; }
.arcs.lum-amber-deep .arcs-seg{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px; background:var(--surface-2); }
.arcs.lum-amber-deep .arcs-seg-btn{ font-family:var(--font-body); font-size:12px; color:var(--ink-3); background:none; border:none; border-radius:var(--radius-pill); padding:6px 13px; cursor:pointer; }
.arcs.lum-amber-deep .arcs-seg-btn:hover{ color:var(--ink); }
.arcs.lum-amber-deep .arcs-seg-btn.is-on{ color:#3d2807; background:linear-gradient(180deg,var(--field-1),var(--gold)); font-weight:600; }
.arcs.lum-amber-deep .arcs-count{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); }
/* D1: auto-fit grid + equal-height tiles */
.arcs.lum-amber-deep .arcs-grid{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows:1fr; gap:16px; }
/* solid parchment card (base .arcs .arc-card fill/border render light via the re-point) */
.arcs.lum-amber-deep .arc-card:hover{ transform:translateY(-3px); border-color:var(--gold-hi); box-shadow:0 20px 44px -30px rgba(36,23,16,.35); }
.arcs.lum-amber-deep .arc-card-meta{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-2); border-top:1px solid var(--border); }
/* mini-constellation band — subtle light gradient; jewel-hue marks + muted threads */
.arcs.lum-amber-deep .arc-card-thumb{ height:112px; margin:0; border:none; border-bottom:1px solid var(--border); border-radius:0; background:radial-gradient(ellipse 90% 80% at 50% 42%, var(--surface-2) 0%, var(--surface) 64%); }
.arcs.lum-amber-deep .arc-const-threads{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.arcs.lum-amber-deep .arc-const-threads path{ fill:none; stroke:var(--thread); stroke-width:.9; opacity:.7; }
.arcs.lum-amber-deep .arc-light{ position:absolute; transform:translate(-50%,-50%); line-height:0; }
.arcs.lum-amber-deep .arc-const-empty::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, var(--gold-hi), transparent 70%); opacity:.5; }
/* begin tile */
.arcs.lum-amber-deep .arc-card-start{ background:transparent; border:1px dashed var(--ink-3); color:var(--ink-3); }
.arcs.lum-amber-deep .arc-card-start:hover{ color:var(--gold); border-color:var(--gold); }
.arcs.lum-amber-deep .arc-card-start-icon{ color:var(--gold); }
.arcs.lum-amber-deep .arc-card-start-label{ font-family:var(--font-serif); font-style:italic; color:var(--ink-2); }
@media (max-width:759px){ .arcs.lum-amber-deep .arcs-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   DW-1 (Fork A) -- ARCS list desktop composition tier (>=1200 only; ADDITIVE).
   Below 1200 the list is byte-unchanged (the 1080 centered column). At the
   composition tier the content column widens so the existing auto-fit card
   grid (minmax(240px,1fr), line 1734) uses the width -- D1 occupancy >=60% at
   1920 -- while the teaching paragraph is capped to a reading measure, fixing
   the 137ch D2 line. The head's eyebrow/title are short and self-cap; only the
   teach needs the measure cap. Tokens only -- no hex, no --lum-*.
   ===================================================================== */
@media (min-width: 1200px) {
  .arcs.lum-amber-deep > * { max-width:1360px; }
  .arcs.lum-amber-deep .arcs-teach { max-width:66ch; }
}

/* =====================================================================
   XL-1 · THE ARCS INDEX AT THE WIDE DESK (R-POLISH B4)

   Measured at HEAD: the >=1200 governor caps content at 1360px. The wrapper is
   full-bleed, so the honest occupancy figure is the GOVERNED content, not the
   wrapper's trivial 100%:

     1920 -> 1360/1905 = 71.4%  PASS
     2560 -> 1360/2545 = 53.4%  FAIL

   Raised to 1560 — the same wide-desk width Book Detail (:11503) and the arc
   Field (:12810) already use, so the app keeps ONE composition width.

   THE LIST ARCHETYPE COMES FREE, and that is why nothing else changes here:
   `.arcs-grid` is already `repeat(auto-fit, minmax(240px, 1fr))` (:1814), so a
   wider governor IS more columns the moment there are cards to fill them —
   XL-1's "list pages gain columns/density" with no grid rewrite and no new
   breakpoint behaviour to regression-test. Verified against a seeded multi-arc
   library, not inferred from the 2-card example row.
   ===================================================================== */
@media (min-width: 1600px) {
  .arcs.lum-amber-deep > * { max-width:1560px; }
  /* MEASURED, then fixed: "Arcs to learn from" holds exactly TWO cards, and
     `auto-fit` stretches them to fill whatever it is given — 672px each at the
     1360 governor, and 772px each once widened above. A 772x112 thumbnail plate
     is a letterbox, and widening the desk without this cap would have made a
     pre-existing stretch visibly worse. Bounding the track lets the two examples
     sit at teaching size beside the ~247px real arc cards instead of ballooning.
     Scoped to THIS tier: the 1200-1599 band is DW-1's and stays untouched. */
  .arcs.lum-amber-deep #arcs-examples{
    grid-template-columns:repeat(auto-fit, minmax(240px, 300px));
    justify-content:start;
  }
}

/* ===== END ARCS PAGE ===== */


/* ===== FIND-THIS-BOOK -- Stage 5.3 Stage 4 =====
   The C5 commercial line: one restrained Bookshop affiliate link per
   member book inside an arc, plus the same line on the book-detail
   header. The hardest constraint here is what's NOT in this block --
   no shopping-cart icon, no price, no badge, no Bookshop branding, no
   "BUY NOW" register. The line is a typographic statement of honest
   availability that happens to be clickable, sized and weighted to
   match the surrounding metadata rather than to compete with the
   page's primary affordances. Mono font choice mirrors .shelf-subtitle
   (the metadata strap pattern) -- this is information, not action. */

.find-this-book {
  display: inline-block;
  margin: 8px 0 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-base) var(--ease);
}

/* On-hover underline + slight color shift. The default state has NO
   underline -- a persistent underline reads as "click me, this is the
   destination"; an on-hover underline reads as "this is here if you
   want it." Color goes to --ink-2 (one step warmer than --ink-3), not
   --gold -- gold is reserved for the active nav state, which is a
   different register. */
.find-this-book:hover {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Arc-detail container per member book. Wraps the shelf-book card
   (which renderShelfBook emits as an <a>) plus the Find-this-book
   link so they read as one unit. The wrap itself is structural only
   -- it gets the bottom margin that previously lived on the bare
   shelf-book card's slot in .arc-detail-member-list. The find link
   inside attaches to the card above via its own 8px top margin (set
   in .find-this-book above); no negative-margin tricks. */
.arc-detail-book-member {
  display: flex;
  flex-direction: column;
  /* Triage FIX C2 (#7): cap a member book to a shelf-cell width. The Batch-2
     cover-area (.shelf-book-cover-area: width:100%; aspect-ratio:2/3) takes
     its width from this parent; in the shelf grid the column constrains it,
     but the single-column .arc-detail-member-list does not, so an arc member
     book filled the whole content column (~1080px) at 1.5x height -- the
     "blown-up book cover" #7. 200px matches the desktop shelf cell and reads
     sanely at mobile too (book cards are smaller than the column either way),
     so no breakpoint is needed. Notebook-entry members stay full-width. */
  max-width: 200px;
}

.arc-detail-book-member .find-this-book {
  /* Inset the link slightly from the card's left edge so it doesn't
     read as part of the card's content padding. The shelf-book card
     has its own internal padding; the find link lives just outside
     that padding, aligned to the card's left edge plus a small
     indent for visual separation. */
  padding-left: 4px;
}

/* Book-detail header: the find link sits at the end of the header
   block, separated from the CTA cluster by a small top margin.
   Mirrors the arc-detail-member treatment so the line reads the same
   way on both surfaces -- honest availability, not a destination. */
.book-detail-header .find-this-book {
  /* S5.2: find-this-book now lives inside .book-detail-content, so it
     needs no grid placement -- just a small top margin to seat it
     under the artifact card. */
  margin-top: 16px;
}

/* ===== END FIND-THIS-BOOK ===== */


/* ===== SHELF LAYOUT + FILTER SIDEBAR + GRID -- Stage 3.10a Stage 2 =====
   Two-column container below the page header. Sidebar 220px on the
   left, grid flex-fills the right. The sidebar is transparent --
   dissolves into the page background, not a card; no fill, no border,
   no radius. Sticky on desktop so the filter list stays visible
   while the grid scrolls. The sidebar's theme + author rows are
   INERT in Stage 2 -- they render but do not filter anything;
   click handlers and selected-state styling are 3.10b.

   The .shelf container gets the max-width + horizontal padding
   here; it had no rule before Stage 2. The Stage 1 header lives
   inside .shelf so it inherits the container width -- this is
   intentional, matches the locked spec (page header sits over the
   same 1280px container as the two-column layout below).

   Card interiors are NOT styled here (Stage 3). Mobile chrome
   (hamburger, stacked header, sidebar -> Filter panel collapse) is
   Stage 4; only the grid's column-count breakpoints land here. */

.shelf {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  /* Stage 5.2 1f-A: .shelf is a stacking context (isolation:isolate);
     the field pseudo mounts inside it at z:-1, paints at step 2,
     and .shelf's in-flow children (.shelf-header, .shelf-layout)
     paint at step 3 over the field WITHOUT needing a z-index lift.
     Cards mask the field where they sit; wheat shows through the
     gutters. The 1c content-lift on .shelf-header / .shelf-layout
     has been removed -- the "visible ground" model makes the lift
     unnecessary and incorrect (cards-on-soil, not cards-floating-
     above-field).

     The Yumi panel/toggle (z=9998/9999) are direct children of body,
     NOT descendants of .shelf, so they continue to resolve in the
     ROOT stacking context and paint above .shelf as a whole.
     Mobile sidebar/backdrop (z=100/99) ARE descendants of .shelf
     via .shelf-layout, so their z-index resolves inside this
     context -- the stacking context still encapsulates them, just
     as in 1c. */
  position: relative;
  isolation: isolate;
}

/* ===== WHEAT FIELD -- Stage 5.2 (1f-A "visible ground") =====
   Shelf-only background layer. The .shelf selector is exclusive to
   the #books route (every other route renders a different root
   class verified at Stage 0), so this pseudo NEVER appears on
   Notebook, book-detail, artifact, or arc surfaces.

   Visible-ground model (1f-A): the field is the ground the shelf
   rests on, NOT a backdrop hidden behind content. With .shelf as a
   stacking context (isolation:isolate above), the pseudo at z:-1
   paints at step 2 of .shelf's context, below the in-flow children
   in step 3. Cards have an opaque --surface-2 background and
   naturally mask the field where they sit; wheat shows through the
   margins and the gutters around cards. The 1c content-lift was
   removed -- cards-on-soil is the design, not cards-floating-above.

   Sizing: background-size:cover scales the SVG to fill .shelf's
   bounding box, aspect-preserved; background-position:top left
   anchors the SVG's upper-left dense cluster to .shelf's lit corner.
   The SVG's own xMinYMin slice preserveAspectRatio is a defensive
   duplicate -- the CSS cover handles aspect when the shelf is
   taller or shorter than 16:9.

   Opacity is wired to --field-presence (theme.css) for one-value
   tuning. Default 0.18 (visible baseline); ceiling ~0.32. */

.shelf::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Stage 5.2 1f-A: field is the GROUND the shelf rests on. Inside
     .shelf's stacking context (isolation:isolate above), the pseudo
     at z:-1 paints at step 2, BELOW .shelf's in-flow content (step 3)
     so the title, buttons, sidebar, and book cards all paint OVER
     the field. Cards have an opaque --surface-2 background and
     naturally mask the field where they sit; wheat shows in margins
     and in the gutters between/around cards. */
  z-index: -1;
  /* UMBER: wheat-field backdrop dropped on the now-DARK shelf; the --ground
     radial (body::before) is the ground here. Asset kept for future bright use. */
  background-image: none;
}

/* ===== END WHEAT FIELD ===== */

/* Stage 4d: in-page shelf search (mockup .shelf-search/.big) -- a
   live grid filter between the header and the rail+grid body. The
   well is the mockup's recessed translucent ink wash; radius is the
   10px content radius (mockup --r), NOT the nav pill. */
/* Stage 2 (mockup-fidelity): the search is now an inline pill in the header
   actions row (mockup .search at design/praxis-desktop-mockup.html:59); the
   former below-header .shelf-search wrapper is removed. */
.shelf-search-well {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--border);
}

.shelf-search-glyph {
  font-size: 15px;
  color: var(--ink-3);
}

.shelf-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}

.shelf-search-input::placeholder {
  color: var(--ink-3);
}

/* Stage 2 (mockup-fidelity): the theme+author rail is folded behind the Filter
   button. Default = single column, rail hidden. Desktop reveals it inline via
   .shelf-rail-open (the min-width:760 block below); mobile reveals it as the
   existing fixed overlay panel (.shelf-sidebar-mobile-open). */
.shelf-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

.shelf-sidebar {
  display: none;
  background: transparent;
  border: none;
  position: sticky;
  top: 88px;
  align-self: start;
}

/* Desktop inline rail reveal. shelfRailOpen drives .shelf-rail-open on
   .shelf-layout; restore the 2-col rail+grid. Gated to >=760 so a desktop-set
   open state never forces 2-col onto the mobile overlay path. */
@media (min-width: 760px) {
  .shelf-layout.shelf-rail-open {
    grid-template-columns: 180px 1fr;
    gap: 34px;
  }

  .shelf-layout.shelf-rail-open .shelf-sidebar {
    display: block;
  }
}

/* Batch 2: filter rail is BARE (mockup .fil -- no panel bg/border/blur,
   just the .fh headers, ul/li rows, and the gold li.on::before spine).
   The 3.1 glass-rail treatment is removed; the base .shelf-sidebar stays
   transparent. (Glass+blur is reserved for nav + spotlight only.) */

/* Phase 3.1: per-value book-match count, right-aligned in each filter
   row (margin-left:auto pushes it to the row's right edge in the flex
   layout). Mono metadata register. Display only -- no filter logic. */
.shelf-filter-count {
  margin-left: auto;
  padding-left: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-4);
}

.shelf-filter-section + .shelf-filter-section {
  margin-top: 48px;
}

.shelf-filter-label {
  margin: 0 0 16px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.shelf-filter-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shelf-filter-row {
  display: flex;
  align-items: center;
  /* Stage 4d: padding-driven natural height (mockup .fil li) -- long
     wrapped names grow the row instead of overflowing it; constant
     12px left gutter hosts the selected gold bar without text shift. */
  padding: 7px 0 7px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
  /* 3.10b Stage 3: cursor flipped from default to pointer because the
     row is now a real interactive control (role="button" + tabindex
     wired in renderShelf). Only permitted edit to a 3.10a rule in
     this stage; cursor honesty, not a restyle. */
  cursor: pointer;
}

.shelf-filter-row:hover {
  color: var(--ink);
}

/* Stage 4a: selected-row state per spec B.5 -- ink text at weight 500
   plus a 2px --gold left bar (::before), replacing the gold-light
   fill. The :hover override keeps the selected color stable under
   the .shelf-filter-row:hover --ink shift. */
.shelf-filter-row-selected {
  position: relative;
  font-weight: 500;
  color: var(--ink);
}

.shelf-filter-row-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--gold);
}

.shelf-filter-row-selected:hover {
  color: var(--ink);
}

/* Stage 4d: author-rail expand/collapse row. Quiet text affordance --
   ink-3, smaller scale, no count, no gold bar; pointer cursor and the
   warm hover come from the shared .shelf-filter-row rules. */
.shelf-filter-row-toggle {
  color: var(--ink-3);
  font-size: 12px;
}

/* Lenses (S3): hand-made lenses sit in the same rail as the baseline
   (genre) lenses and read the same; a small teal dot (the canon's
   marginalia accent) quietly marks their user-made provenance. The dot
   yields to the gold selected-bar when the row is active. */
.shelf-filter-row-manual {
  position: relative;
}

.shelf-filter-row-manual:not(.shelf-filter-row-selected)::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--marginalia-color);
  opacity: 0.7;
}

/* Lenses (S3): quiet "Ask Yumi for more lenses" affordance under the rail
   -- mono, recessed gold; opens the lens panel (S4). */
.shelf-lens-ask {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  padding: 7px 0 7px 12px;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--gold-text);
  cursor: pointer;
}

.shelf-lens-ask:hover {
  color: var(--gold);
}

.shelf-main {
  /* min-width: 0 lets the grid track shrink below its intrinsic
     content size on narrow viewports -- without it, long card titles
     can push the main column wider than its 1fr allotment and
     squeeze the sidebar. */
  min-width: 0;
}

/* ===== END SHELF LAYOUT + FILTER SIDEBAR + GRID ===== */


/* ===== BOOK CARD -- Stage 3.10a Stage 3 =====
   The .shelf-book card is an <a> anchor (whole-card link to
   #book/<id>). text-decoration: none on the card plus explicit
   color rules on every text descendant kill the default
   blue/purple link styling that bled through Stages 1 and 2. The
   card body is a vertical flex column so the cover area, title,
   author, and meta stack with their own margins.

   Card surface is --surface-2 (the lighter wheat); the page below
   sits on --color-surface (the darker wheat) so cards visually
   lift off the page. The cover-area uses --color-surface so a
   contained image that does not fill its 200px box visually sits
   over the page color, with the card itself framing it in the
   lighter wheat.

   Note on spec naming: the Stage 3 brief referred to
   var(--color-surface-2) for the card. The palette defines
   --surface-2 directly (no -color- prefix alias exists for it) and
   --color-surface as an alias of --surface. This block uses
   --surface-2 for the card and --color-surface for the cover area,
   which matches the design-intent unambiguously per
   docs/praxis-design-system.md (where --surface-2 is named "Card
   surface" and --color-surface is documented as the spec-naming
   alias of --surface). No new variable added.

   Reconciliation: this block fully supersedes the Stage 2 fix 2
   interim .shelf-book-cover rule (max-width 100% / height auto /
   display block). The image now lives inside a fixed-height cover
   area and uses object-fit; the interim rule is deleted, not
   stacked under.

   Pill alpha: approach (A) -- color-mix(in srgb, var(--token) 15%,
   transparent) for the reading and finished backgrounds. No new
   theme.css variables; derivation lives at the consumer per
   2026-05-16 decision D1. */

.shelf-book {
  /* Phase 3.1: position context for the absolute left-edge register
     tick (.shelf-book-tick). */
  position: relative;
  display: flex;
  flex-direction: column;
  /* Stage 4a: bare card per spec B.5 -- the cover carries the frame
     (radius/hairline/shadow); the card itself has no panel chrome. */
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  /* Stage 5.1 A4.3 card hover: 3px lift, shadow deepens one tier,
     350ms slow ease-out. Replaces the Stage 3.10a 180ms hover
     (transform + hardcoded rgba(0,0,0) shadow) wholesale -- the
     prior shadow was the only A3.1 black-rgba violation in this
     file outside the redefined --shadow-1 token. */
  transition: transform var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}

.shelf-book:hover {
  transform: translateY(-3px);
}

.shelf-book-cover-area {
  /* Stage 5.6 sub-step 4: position context for absolute-positioned
     register-glyph-wrap. The wrapper is inset 8px from top + right
     of the cover-area; without position: relative, it would anchor
     to the next positioned ancestor (usually body) and float in
     the wrong place. overflow: hidden stays in place — the glyph
     wrapper is sized to fit inside the inset, never clips. */
  position: relative;
  width: 100%;
  /* Batch 2: book-cover aspect ratio (mockup .bk .cov{aspect-ratio:2/3})
     -- responsive height, replacing the fixed 200px. */
  aspect-ratio: 2 / 3;
  margin-bottom: 16px;
  background: var(--color-surface);
  /* Phase 3.1: unified cover frame -- every cover (image or pending
     placeholder) sits in the same hairline-framed, rounded box so the
     grid reads as one consistent set. */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px -16px rgba(58,40,16,.5);
  overflow: hidden;
}

/* Stage 5.6 sub-step 4: register glyph wrapper + SVG sizing.
   The wrapper is the absolute-positioned anchor; the inner SVG
   from renderRegisterGlyph fills it. pointer-events: none so the
   glyph never intercepts clicks on the underlying cover anchor. */
.register-glyph-wrap {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.register-glyph-wrap svg.register-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

.shelf-book-cover,
.shelf-book-cover-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.shelf-book-cover {
  /* object-fit + object-position center bottom: preserve aspect
     ratio, never crop, anchor the image to the bottom edge of the
     cover area per spec ("justify-center, align-flex-end"). */
  object-fit: contain;
  object-position: center bottom;
}

/* Phase 3.1: graceful missing-cover frame. The placeholder becomes a
   centered recessed (--sunk) well carrying a real "COVER PENDING" label
   (rendered as a <span> in renderShelfBook), replacing the prior empty
   blank. Overrides the display:block from the combined rule above. */
.shelf-book-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  /* Stage 1: token-only recessed well -- matches the mockup
     .cover-pending gradient. */
  background: linear-gradient(160deg, var(--surface), var(--sunk));
}

.shelf-book-cover-pending-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink-2);
}

.shelf-book-cover-pending {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-3);
}

/* Phase 3.1: register tick -- a left-edge accent bar whose color is set
   per-card via the --tick custom property (= var(--register-<tradition>),
   assigned in renderShelfBook). 'unassigned' books get no tick element,
   so none renders. Read-only consumption of the register palette. */
.shelf-book-tick {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tick);
}

.shelf-book-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  /* 2-line clamp via the standard -webkit-box idiom. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.shelf-book-author {
  margin: 6px 0 0 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-3);
  /* 1-line clamp. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.shelf-book-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.shelf-book-status {
  /* Stage 4a: spec B.5 status = 5x5 --gold square + mono 9px
     uppercase label, replacing the pill treatment. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.shelf-book-status::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--gold);
}

.shelf-book-genre {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-3);
}

/* ===== END BOOK CARD ===== */


/* ===== EMPTY STATE -- Stage 3.10a Stage 4 =====
   Rendered in renderShelf's books.length === 0 branch. Replaces
   the prior single <p class="shelf-empty-body"> (which had no CSS
   rule to consume it). Structure supports both copy variants
   (zero-books and zero-filter-results) so 3.10b can switch on
   filter state without restructuring. 3.10a wires zero-books only.
   Action button is auth-conditional and reuses the existing
   page-header button classes -- no new button styling. */

.shelf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 240px;
}

.shelf-empty-headline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-2);
}

.shelf-empty-subtitle {
  margin: 16px 0 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-3);
}

/* The auth-conditional button inherits its visual treatment from
   .shelf-new-book (signed-in) or .shelf-signin-prompt (signed-out)
   defined in the Stage 1 SHELF PAGE HEADER block. Empty state
   only adds the spacing above it. */
.shelf-empty .shelf-new-book,
.shelf-empty .shelf-signin-prompt {
  margin-top: 24px;
}

/* ===== END EMPTY STATE ===== */


/* ===== BOOK DETAIL + ARTIFACT VIEW -- Stage 3.10c =====
   Two adjacent routes, styled together. Book detail = the working
   surface for a book; artifact view = the finished room (per 3.7's
   workshop-floor vs finished-room framing). The (status, hasArtifact)
   six-branch affordance cluster respects the 3.7 intentional <a> /
   <button> split: book-detail-open-artifact (the <a>) and the
   creation CTAs (mark-finished, create-artifact, signin-prompt)
   share the dark-fill primary affordance treatment from
   .shelf-new-book -- the user reads them as the same primary
   weight regardless of semantic. .book-detail-new-entry (Add
   Marginalia) is workshop-floor secondary, lighter weight.
   Status radios are styled here AND grouped in Stage 3 with
   .shelf-editor-status (they render the same data shape). */

.book-detail {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 32px;
  font-family: var(--font-body);
}

.book-detail-not-found {
  padding: 96px 32px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-3);
}

.book-detail-not-found a {
  display: inline-block;
  margin-top: 16px;
  color: var(--ink-2);
  text-decoration: none;
}

.book-detail-not-found a:hover {
  color: var(--ink);
}

.book-detail-header {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  /* S5.2: two cells only -- cover-col (1) + content cell (2). align-items
     start tops the content cell against the tall cover; the content's
     own margins (a single normal-flow column) own the vertical rhythm,
     so the cover height can't inflate per-element rows anymore. */
  align-items: start;
  margin-bottom: 32px;
}

.book-detail-content {
  grid-column: 2;
}

/* Stage 4: left column = cover + the action buttons stacked under it. */
.book-detail-cover-col {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.book-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Canon §4-I: Add-to-an-arc is the standalone primary (its own line in
   .book-detail-actions). The secondary PAIR [Send-to-sub | Add-marginalia]
   lives here -- stacked full-width on desktop (the mockup action stack),
   a side-by-side pair on mobile (the ≤759 block re-rows it). */
.book-detail-actions-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book-detail-cover,
.book-detail-cover-placeholder {
  width: 100%;
  max-width: 100%;
  /* S5.1: fixed 2/3 frame so the cover fills the 300px column (300 ->
     450) at a uniform shape regardless of each image's intrinsic
     ratio -- the mockup's media-frame proportion. object-fit:cover on
     the image fills + crops to the frame. Border/radius/shadow are the
     S5-conformed chrome, untouched. */
  aspect-ratio: 2 / 3;
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-cover);
}

.book-detail-cover {
  object-fit: cover;
  background: var(--color-surface);
}

.book-detail-cover-placeholder {
  /* Stage 1: typographic "cover pending" well (was an empty tinted box) so a
     null/broken cover never shows a blank card. Mirrors .cover-pending. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14%;
  text-align: center;
  background: linear-gradient(160deg, var(--surface), var(--sunk));
}
.book-detail-cover-pending-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink-2);
}
.book-detail-cover-pending-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-3);
}

.book-detail-title {
  /* S5.2: title is the top element of the content cell -- flush top, 4px
     to the subtitle. Position comes from the content cell, not grid-column. */
  margin: 0 0 4px 0;
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.02;
  color: var(--ink);
}

.book-detail-author {
  margin: 0 0 18px 0;
  /* Batch 3: italic-serif byline (mockup author line). */
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-2);
}

/* ===== Batch 3: book-detail reading-view chrome (content column) ===== */
.book-detail-meta {
  margin: 0 0 18px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* "Your Book Artifact" -- OPAQUE --surface card. */
.book-detail-artifact-card {
  margin-top: 0;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,250,230,.5) inset,
    0 16px 36px -24px rgba(58,40,16,.5);
}

/* S5: pull-quote (mockup B.6 .q-pull) -- render-when-exists against
   book.quote, which no live record carries today (renders nothing).
   grid-column:2 seats it in the content column like the other right-
   column blocks. */
.book-detail-quote {
  margin: 18px 0 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-2);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}

.book-detail-artifact-body {
  margin: 8px 0 0 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Stage 5 (mockup-fidelity): folded "Write your artifact →" affordance inside
   the artifact card (mockup line 233) -- a gold inline button-reset link that
   opens the artifact editor for the no-artifact state. */
.book-detail-write-artifact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.book-detail-write-artifact:hover {
  color: var(--gold-text);
}

/* "Add to arc" -- gradient primary (mockup bottom CTA). */
.book-detail-add-to-arc {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--grad);
  color: var(--text-on-dark);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.book-detail-add-to-arc:hover {
  filter: brightness(1.06);
}

/* Edit-details section -- relocated status/ISBN/tradition, opaque. */
.book-detail-edit-section {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
}

/* Stage 4: the Edit-panel collapse toggle (panel default-collapsed). */
.book-detail-edit-toggle {
  /* S5.1: quiet text link (mirrors .find-this-book) -- the pill fill,
     border, and 999px radius dropped so it stops competing as a
     primary affordance. Label + wiring unchanged. */
  margin-top: 32px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
}

.book-detail-edit-toggle:hover {
  color: var(--ink);
}

/* When expanded, the panel follows the toggle -- tighten so the toggle's
   own margin-top doesn't double with the panel's. */
.book-detail-edit-toggle + .book-detail-edit-section {
  margin-top: 12px;
}
/* ===== END Batch 3 book-detail chrome ===== */

/* Stage 5 (mockup-fidelity): only "Add to an arc" stays gradient; every other
   book-detail affordance (Mark finished / Open Artifact / Sign in, and Send-to-
   sub-theory below) is GHOST -- glass-2 fill, ink text, line-2 border, weight
   400 (mirrors .book-detail-new-entry). The former dark-fill treatment is
   dropped. (.book-detail-create-artifact is retained here, but its button is
   now folded into the artifact card as "Write your artifact →".) */
.book-detail-mark-finished,
.book-detail-create-artifact,
.book-detail-signin-prompt,
.book-detail-open-artifact {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}

.book-detail-mark-finished:hover,
.book-detail-create-artifact:hover,
.book-detail-signin-prompt:hover,
.book-detail-open-artifact:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* Stage 6: Remove-from-shelf -- a quiet danger ghost (mockup .btn-danger), the
   last action under the cover. Confirm-gated: clicking swaps in the inline
   confirm row below (the app avoids native confirm()). */
.book-detail-remove {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger-line);
  border-radius: 10px;
  cursor: pointer;
}
.book-detail-remove:hover {
  border-color: var(--danger);
}
.book-detail-remove-confirm {
  padding: 12px 14px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  border: 1px solid var(--danger-line);
  border-radius: 10px;
}
.book-detail-remove-msg {
  margin: 0 0 10px 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.book-detail-remove-actions {
  display: flex;
  gap: 8px;
}
.book-detail-remove-cancel,
.book-detail-remove-confirm-btn {
  flex: 1 1 0;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
.book-detail-remove-cancel {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.book-detail-remove-cancel:hover { border-color: var(--ink-3); color: var(--ink); }
.book-detail-remove-confirm-btn {
  background: var(--danger);
  color: var(--text-on-dark);
  border: 1px solid var(--danger);
}
.book-detail-remove-confirm-btn:hover { filter: brightness(1.06); }

/* Secondary affordance — Add Marginalia is the workshop-floor
   entry point, lighter weight than the closure CTAs. Mirrors
   .shelf-new-book-bulk transparent + border treatment. */
.book-detail-new-entry {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
}

.book-detail-new-entry:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* Status selector — rules grouped in Stage 3 with
   .shelf-editor-status / .shelf-editor-status-option (same data
   shape). See the EDITOR MODALS block below for the active rule. */

/* ISBN edit row */
.book-detail-isbn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 32px 0;
}

.book-detail-isbn-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.book-detail-isbn-input {
  flex: 1;
  max-width: 280px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.book-detail-isbn-input:hover {
  border-color: var(--ink-3);
}

/* :focus (not :focus-visible) on inputs because typing focus IS
   keyboard focus -- the ring should appear whether the user clicked
   or tabbed in. Matches the --river idiom from 3.10b. */
.book-detail-isbn-input:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

/* Marginalia-for-this-book empty state */
.book-detail-empty-body {
  margin: 48px 0;
  padding: 32px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-3);
  text-align: center;
}

/* ----- Umber layout port (surface 2): mock bd-* frame -----
   Lifted from design/praxis-umber-mockup.html #s-book. Book detail is a BRIGHT
   surface (data-ground=bright), so the page tokens read directly. These append
   after the live book-detail block and win for the renamed elements; the live
   .book-detail-* rules for the mapped classes are now dead (flagged), the
   live-only sections (edit/themes/remove/status/biblio/isbn/cover-pending)
   keep their existing classes + rules. .bd-rate-stars/.bd-star (live, clickable)
   are preserved; the mock .bd-rate only styles the row. */
.book-detail { max-width: 1000px; margin: 0 auto; padding: 0 var(--sp-5); }
.bd-grid { display:grid; grid-template-columns:260px 1fr; gap:var(--sp-6); align-items:start; }
.bd-cover-col { display:flex; flex-direction:column; gap:var(--sp-4); }
.bd-cover { width:100%; aspect-ratio:2/3; border-radius:var(--radius-md); box-shadow:var(--shadow-cover); object-fit:cover; display:block; }
.bd-actions { display:flex; flex-direction:column; gap:10px; }
.bd-actions .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bd-actions .btn { width:100%; }
.bd-title { font-family:var(--font-serif); font-size:clamp(30px,4.5vw,46px); color:var(--ink); line-height:1.06; margin:0; }
.bd-author { font-family:var(--font-serif); font-style:italic; font-size:20px; color:var(--ink-2); margin:6px 0 0; }
.bd-meta { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--meta); margin:14px 0; display:flex; gap:16px; flex-wrap:wrap; }
.bd-desc { font-family:var(--font-serif); font-size:17px; line-height:1.65; color:var(--ink); }
.bd-lenses { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0; }
.bd-rate { display:flex; gap:4px; color:var(--gold-ink); font-size:20px; margin:14px 0; align-items:center; }
.bd-artifact { margin-top:var(--sp-5); background:var(--page-2); border:1px solid var(--line-page); border-radius:var(--radius-lg); padding:var(--sp-5); box-shadow:var(--shadow-page); }
.bd-artifact .body { font-family:var(--font-serif); font-size:17px; line-height:1.6; color:var(--ink); font-style:italic; }
.bd-artifact .bd-write { margin-top:14px; }

/* ===== END BOOK DETAIL ===== */


/* ===== ARTIFACT VIEW -- Stage 3.10c =====
   The 3.7 finished-room surface. Restful long-form serif body,
   generous line-height, reader-mode page width. Lives at
   #artifact/<bookId>. */

.artifact-view {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 32px;
  font-family: var(--font-serif);
}

.artifact-title {
  margin: 0 0 32px 0;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.artifact-body {
  margin: 0 0 64px 0;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
}

.artifact-substrate-link,
.artifact-back-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-3);
  text-decoration: none;
}

.artifact-substrate-link:hover,
.artifact-back-link:hover {
  color: var(--ink);
}

.artifact-not-found,
.artifact-empty {
  margin: 96px 0 24px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-3);
  text-align: center;
}

/* W10 Lane B: mobile reflow (<760). #artifact now sits on the dark Amber ground
   (route keyed in umberGroundDark); the [data-ground=dark] token remap repaints
   --ink/--ink-3 light-on-dark, so this block only tightens the read column for
   phones -- no color work, no IA change (re-skin only). */
@media (max-width: 759px) {
  .artifact-view { padding: 56px 20px; }
  .artifact-title { font-size: 30px; margin: 0 0 24px 0; }
  .artifact-body { font-size: 17px; }
  .artifact-not-found,
  .artifact-empty { margin: 64px 0 24px 0; }
}

/* =====================================================================
   DW-4 · ARTIFACT -- DESKTOP COMPOSITION (>=1200 tier). ADDITIVE.

   Baseline (measured, reproduce-first): a fixed 720px centered column at
   EVERY width >=760 -- there was no min-width rule of any kind on this
   surface, so the base rules above were also the desktop layout. At 1920
   that read 37.5% occupancy (the worst D1 in the wave, under DW-3's
   book-detail at 42.9%) with the essay running 83.9ch -- 12ch past the D2
   cap. Two failures, one cause: the column never had a measure, only a width.

   The composition: the finished room becomes an editorial spread -- the
   display title + its substrate pointer form a left orientation margin, the
   essay holds a book measure in the right column. Both regions are EXISTING
   elements re-placed; no new data, no copy change. It mirrors the sub-theory
   Page's own main+margin reading room (.st-grid, :11118) rather than
   inventing a form, and the full-amber ground (umberGroundDark artifact:1,
   views.js:397; CLAUDE.md 7) is untouched -- measure is width, not color.

   SCOPED TO .artifact-read, NOT .artifact-view: the root class is set before
   the !book guard (views.js:11316), so it also roots not-found / signed-out /
   empty. The signed-out artifact IS reachable (a seed __praxis_seed__ artifact
   bypasses the auth gate at :11346 and lands on this same full render), so an
   unscoped grid here would re-ship the DW-2 / DW-STP2 leak on a signed-out
   page. The modifier is set only where title+body+link are built (:11374). */
@media (min-width:1200px){
  .artifact-view.artifact-read{
    max-width:1168px;
    display:grid;
    grid-template-columns:470px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:80px;
  }
  /* left region -- orientation: the display title, then the way back out.
     overflow-wrap: this composition NARROWS the title's column 720 -> 470, which
     opens a window (~26-38 chars in this face) where an unbroken token fits the
     old column but not this one — and `.artifact-title` declares no wrap, so the
     ink would paint straight over the essay. It is invisible to D3 (the box stays
     470, so scrollWidth never moves and `overflowers` reads 0) and to the seed
     data. Own the window this stage opened; the ≤1199 base keeps its behaviour
     untouched (the un-composed 720px column's long-token h-scroll is a separate,
     pre-existing gap — DW-ARTIFACT-WRAP). */
  .artifact-view.artifact-read .artifact-title{ grid-column:1; grid-row:1; margin:0; overflow-wrap:anywhere; }
  .artifact-view.artifact-read .artifact-substrate-link{ grid-column:1; grid-row:2; align-self:start; margin-top:30px; }
  /* right region -- the essay. 72ch is the D2 cap read against .artifact-body's
     OWN font (18px serif), not the container's: the cap belongs on the text
     element (the DW-2 field-lead gotcha), so it survives a type change. */
  .artifact-view.artifact-read .artifact-body{ grid-column:2; grid-row:1 / span 2; max-width:72ch; margin:0; }
}

/* ===== END ARTIFACT VIEW ===== */


/* ===== NOTEBOOK SETTINGS + TRANSPARENCY -- Stage 3.10c =====
   Two surfaces that mount inside the Notebook flow and read as
   secondary to the writing itself.

   SETTINGS: a quiet preference UI. The toggle is intentionally an
   <a href="#"> (not a checkbox / switch / button), so its visual
   treatment is link-shaped: slate text, --river focus ring, no
   button chrome.

   TRANSPARENCY: a diagnostic / monitored surface. Visually
   distinguished from primary writing by a thin --ink-3 border
   around .transparency-panel (option (a) per Stage 0 — chosen
   over a tint or a label-marker because it is structurally
   honest: this panel is a discrete read-only surface, and the
   border says so). One declaration; no background change; the
   panel still sits on the wheat field. transparency-section-label
   uses the mono-uppercase letter-spacing idiom from
   .shelf-filter-label / .shelf-subtitle so the data areas read as
   instrumented telemetry, not body prose.

   The two Notebook header buttons (.notebook-settings-toggle and
   .notebook-transparency-toggle) share the .shelf-new-book-bulk
   secondary-button treatment so they sit consistently in the
   header without competing with primary CTAs. */

.notebook-settings-toggle,
.notebook-transparency-toggle {
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

/* Spec B.3 quiet teal variant -- "What does Yumi see?". */
.notebook-transparency-toggle {
  color: var(--marginalia-color);
}

.notebook-settings-toggle:hover,
.notebook-transparency-toggle:hover {
  color: var(--ink);
}

/* Settings panel */
.notebook-settings-panel {
  /* S7b: cap to the mockup's settings proportion (~620), left-aligned in
     the notebook column (margin 24px 0 keeps the existing alignment). */
  max-width: 620px;
  margin: 24px 0;
  padding: 24px;
  /* Stage 3.2 Batch 2: OPAQUE --surface content panel (3.2b's
     translucent --glass + blur removed -- glass is nav/spotlight only).
     --line-2 hairline, content radius, Tier-1 shadow + highlight. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,250,230,.5) inset,
    0 16px 36px -24px rgba(58,40,16,.5);
  font-family: var(--font-body);
}

.notebook-settings-section {
  padding: 12px 0;
}

.notebook-settings-section + .notebook-settings-section {
  border-top: 1px solid var(--line-2);
  margin-top: 12px;
}

.notebook-settings-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

/* The Done link is intentionally an <a>, not a button. Style it
   as a clear actionable link — slate text, underline, --ink on hover,
   --river focus ring (from the :focus-visible group below).
   (S7b: dropped the dead underline-link-toggle + current-value rules,
   orphaned when the pill toggle replaced the underline-link toggle.) */
.notebook-settings-done {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 3px;
  cursor: pointer;
}

.notebook-settings-done:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-2);
}

.notebook-settings-done {
  margin-top: 16px;
}

.notebook-settings-explanation {
  margin: 8px 0 0 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* Stage 3.2 Batch 2: segmented teal pill toggle (mockup .tog) -- the
   register-default Visible|Private control, replacing the prior
   underline-link toggle. .on = teal FILL (var(--marginalia-color)) with
   var(--on-teal) dark text. Wiring (setRegisterDefault) unchanged. */
.notebook-settings-tog {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.notebook-settings-tog-opt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  color: var(--ink-3);
  cursor: pointer;
}

.notebook-settings-tog-opt-on {
  background: var(--marginalia-color);
  color: var(--on-teal);
}

.notebook-settings-tog-opt:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}

/* ===== END NOTEBOOK SETTINGS ===== */


/* ===== TRANSPARENCY VIEW -- Stage 3.10c =====
   Diagnostic / monitored surface treatment per option (a): a thin
   --ink-3 border around .transparency-panel marks it as a discrete
   read-only surface, structurally distinct from the writing flow. */

.transparency-panel {
  margin: 24px 0;
  padding: 24px 24px 32px 24px;
  /* Stage 3.2 Batch 2: OPAQUE What-Yumi-Sees panel -- --panel-yumi
     (honey with a faint teal cast); 3.2b's translucent --glass + blur
     removed (glass is nav/spotlight only). The teal left-edge spine
     (inset 3px var(--marginalia-color)) marks this as Yumi's lens --
     an accent, never a fill; scoped here so it never bleeds onto the
     Settings panel. */
  background: var(--panel-yumi);
  /* S7c: teal-cast hairline (mockup .yumipanel border); rgba teal
     literal follows the S7a marginalia-border precedent. */
  border: 1px solid rgba(29,143,104,.35);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 3px 0 0 var(--marginalia-color),
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-1);
  font-family: var(--font-body);
}

/* Stage 3.2 Batch 2: teal heading-dot before the "What Yumi sees"
   title (mockup .yumipanel heading dot), reinforcing teal=Yumi. */
.transparency-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: var(--radius-pill);
  background: var(--marginalia-color);
  /* S7c: teal glow on the heading dot (mockup .yumipanel dot). */
  box-shadow: 0 0 9px var(--marginalia-color);
  vertical-align: middle;
}

.transparency-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}

.transparency-title {
  margin: 0;
  font-family: var(--font-mono);
  /* S7c: teal eyebrow at the mockup's 10.5/.16em (was ink-3 11/.08em). */
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marginalia-color);
}

.transparency-close {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}

.transparency-close:hover {
  color: var(--ink);
}

.transparency-framing {
  margin: 0 0 24px 0;
  /* S7c: serif italic 17px ink-2 (mockup framing). Both paragraphs stay;
     style only. */
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.5;
}

.transparency-section {
  margin-bottom: 0;
}

/* S7c: per-section top hairline for the mockup .yfield rhythm. The
   adjacent-sibling selector skips the first section so it sits flush
   under the framing copy; spacing now rides the divider, not a
   per-section margin. */
.transparency-section + .transparency-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.transparency-section-label {
  font-family: var(--font-mono);
  /* S7c: match the S7b .notebook-settings-label sibling + mockup .fl
     (was 11/.08em). */
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.transparency-section-body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* S7c: empty-state values read as quiet placeholders -- serif italic
   ink-4 (mockup .fv.em). Applied to every "nothing here yet" line. */
.transparency-section-body.transparency-empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-4);
}

/* Individual entry / artifact / turn cards inside a section body.
   Quiet boxed treatment — wheat-tone surface-2 fill so each card
   reads as a discrete item without competing with the panel's
   own border. */
.transparency-entry,
.transparency-artifact {
  padding: 12px 16px;
  margin-bottom: 8px;
  /* S7c: calmer rows toward the mockup -- drop the Tier-1 card shadow +
     lit edge and soften the hairline (--line-2 -> --border) so these
     read as quiet rows, not lifted cards. The title + body excerpt +
     meta content is unchanged. */
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.transparency-entry:last-child,
.transparency-artifact:last-child {
  margin-bottom: 0;
}

.transparency-entry-body,
.transparency-artifact-body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

.transparency-entry-meta,
.transparency-artifact-meta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.transparency-artifact-title {
  margin: 0 0 6px 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

/* Conversation-turn lines stack tightly; the role glyph sits next
   to the body on a single line for compact telemetry rendering. */
.transparency-turn {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}

.transparency-turn + .transparency-turn {
  border-top: 1px dotted var(--line-2);
}

.transparency-turn-role {
  flex-shrink: 0;
  width: 56px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.transparency-turn-body {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

/* 6.2c: 'What Yumi sees' routed page. Page shell mirrors .home-page
   width/centering; the .transparency-panel chrome inside is kept
   intentionally (visual identity with the Notebook panel). */
.yumi-sees-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px;
}

/* Page-only quiet closing line (does not appear in the Notebook panel). */
.yumi-sees-closing {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

/* W10 Lane B -- #yumi-sees on the dark Amber ground (Option A).
   The route is keyed in umberGroundDark, so the page ground flips dark. Everything
   here is ADDITIVE and SCOPED to .yumi-sees-page: the shared .transparency-* base
   rules and the in-Notebook openTransparencyView overlay are NOT touched and render
   byte-identical.
   Panel: KEPT bright. --panel-yumi is declared at :root and never re-pointed under
   [data-ground=dark], so the honey fill inherits its bright computed value here. But
   [data-ground=dark] does remap the ink tokens light, which would wash out text on the
   honey panel -- so a LOCAL stable-token re-pin restores dark-on-honey inside the panel
   (the Lane-A .about .orientation precedent; --br-deep/--meta/--page-2/--line-page are
   stable, ground-agnostic). Teal accents (--marginalia-color) are the Yumi seam and stay.
   Closing line: sits on the dark ground outside the panel -> re-pointed to the on-dark
   muted tone. */
.yumi-sees-page .transparency-panel {
  --ink:       var(--br-deep);
  --ink-2:     var(--br-deep);
  --ink-3:     var(--meta);
  --ink-4:     var(--meta);
  --surface-2: var(--page-2);
  --border:    var(--line-page);
  --line-2:    var(--line-page-2);
}
.yumi-sees-page .yumi-sees-closing { color: var(--muted); }

@media (max-width: 759px) {
  .yumi-sees-page { padding: 28px 18px 60px; }
}

/* =====================================================================
   DW-4 · WHAT YUMI SEES -- DESKTOP COMPOSITION (>=1200 tier). ADDITIVE.

   Baseline (measured, reproduce-first): a fixed 1080px centered column with
   NO min-width rule of any kind, and -- the real defect -- not one ch cap on
   any of its six prose selectors. .transparency-panel (:3136) declares no
   max-width at all, so every measure it has is inherited. At 1920 that read
   56.7% occupancy with the framing prose at 138.3ch: the WORST measure in the
   wave, past D0's own reference violation (Arcs, 137ch).

   The composition: the ledger and its explanation stop being one stack. The 7
   sections -- what Yumi actually holds -- become the main column at a real
   measure; the framing (what this page IS, and the privacy promise) becomes a
   right margin apparatus that stays beside the ledger instead of being scrolled
   past. Both are EXISTING elements re-placed; the builder's DOM is untouched.
   It mirrors the sub-theory Page's own main+margin room (.st-grid, :11118) --
   a sibling reading surface, not an invented form.

   SCOPED TO .yumi-sees-page THROUGHOUT -- load-bearing, not a style choice.
   ONE builder (buildTransparencyContent, views.js:14562) feeds THREE mounts:
   this page, the Notebook inline panel (#notebook-transparency-host,
   views.js:14535), and the Yumi slide-over overlay (.yumi-panel-sight-view,
   yumi-ui.js:1128). Only this page wraps in .yumi-sees-page. A bare
   .transparency-* rule here would restructure both overlays -- so every
   selector below carries the page scope, exactly as the W10 Lane B block above
   (:3397) already requires of this surface.

   Column math (derived, not picked): 720 main + 60 gap + 380 rail + 48 panel
   padding = 1208. The main column lands ~720 so the 72ch body (689px at 14px
   DM Sans) nearly fills it; the 380px rail puts the framing at ~51ch. */
@media (min-width:1200px){
  .yumi-sees-page{ max-width:1208px; }
  .yumi-sees-page .transparency-panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    column-gap:60px;
    align-items:start;
  }
  /* the title spans both regions -- it names the whole page, not the ledger. */
  .yumi-sees-page .transparency-header{ grid-column:1 / -1; }
  /* right region -- the framing: what this page is, and the privacy promise.
     SPANS ALL SEVEN SECTION ROWS -- load-bearing, not decoration. `grid-row:2`
     alone pins the rail into the SAME implicit track auto-placement gives the
     FIRST section; the track then sizes to max(section-1, rail) and
     `align-items:start` leaves the difference as a HOLE before section 2.
     Measured live at the first cut: section gaps [270,16,16,16,16,16] at 1920 —
     a 270px void the narrow layout does not have, in the page's ONLY state
     (the router nulls the pointers, so section 1 is permanently the ~52px
     "no book is open" box). That is D5 verbatim: "a composed layout must not
     read sparser than the narrow one." Spanning the rail across the section
     rows lets each row size to its own section again.
     `span 7` and NOT `2 / -1`: with no `grid-template-rows` there is no
     explicit row line -1 to resolve against, and the span would invert. 7 is
     the builder's fixed section count (buildTransparencyContent emits exactly
     seven, in fixed order, views.js:14612-14721) — not a data-dependent guess.
     If a future round adds an eighth, the rail simply stops spanning it and
     the section sits below: it degrades, it cannot re-open the hole. */
  .yumi-sees-page .transparency-framing{ grid-column:2; grid-row:2 / span 7; margin:0; }
  /* main region -- the ledger. Explicit column keeps auto-flow off the rail. */
  .yumi-sees-page .transparency-section{ grid-column:1; }
  /* D2 -- caps on the TEXT elements, so each reads against its OWN font
     (17px serif framing vs 14px body ledger), not the container's. */
  .yumi-sees-page .transparency-framing p{ max-width:72ch; }
  .yumi-sees-page .transparency-section-body{ max-width:72ch; }
  .yumi-sees-page .transparency-entry-body,
  .yumi-sees-page .transparency-artifact-body,
  .yumi-sees-page .transparency-turn-body{ max-width:72ch; }
}

/* ===== END TRANSPARENCY VIEW ===== */


/* ===== EDITOR MODALS -- Stage 3.10c =====
   Three editor families styled together with the A6 consolidations
   approved in Stage 0:
   - A6.1 grouped: actions-row + Save/Submit + Cancel across all
     three families (3 grouped rules);
   - A6.3 grouped: large-body textareas, one grouped rule across
     .shelf-bulk-editor-textarea and .notebook-editor-body;
   - Status radios grouped across .shelf-editor-status and
     .book-detail-status (Stage 1 reserved this; Stage 3 implements);
   - A6.2 single-line inputs: PER-CLASS rules, not grouped. Each
     input class has its own rule body even where declarations match
     today — a future divergence (e.g. ISBN field) is a local edit,
     not a rule split. Decision rationale per Stage 0; the per-class
     path also keeps the "no restructure of openEditor /
     openShelfEditor / openBulkAddEditor" non-goal intact (no JS
     touch for a className base prefix).

   Container chrome (.shelf-editor / .shelf-bulk-editor /
   .notebook-editor) uses the same --surface-2 fill + --border
   outline as the Stage 2 notebook-settings-panel so editors sit
   consistently across both Notebook and shelf surfaces. */

/* Container chrome — shared across all three editor families.
   Stage 5.1: floating Tier 2 panel material set (editors are
   inline-mounted floating panels that appear in flow on demand). */
.shelf-editor,
.shelf-bulk-editor,
.notebook-editor {
  margin: 24px 0;
  padding: 24px;
  background: var(--surface-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-md);
  /* Stage 5.1 surface-set: hairline + lit-edge highlight + Tier 2
     panel shadow. */
  box-shadow:
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-2);
  font-family: var(--font-body);
}

/* A6.2 single-line inputs — per-class rules. Identical declarations
   today; deliberate non-grouping so divergence (likely on ISBN) is
   a local edit. */

.shelf-editor-title-input {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.shelf-editor-title-input:hover {
  border-color: var(--ink-3);
}

.shelf-editor-title-input:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

.shelf-editor-author-input {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.shelf-editor-author-input:hover {
  border-color: var(--ink-3);
}

.shelf-editor-author-input:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

/* Genre input. Stage 4 swaps this element from <input> to <select>;
   the declarations here are element-agnostic (no input/select
   element-selector prefix) and work for both. */
.shelf-editor-genre-input {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.shelf-editor-genre-input:hover {
  border-color: var(--ink-3);
}

.shelf-editor-genre-input:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

.shelf-editor-isbn-input {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.shelf-editor-isbn-input:hover {
  border-color: var(--ink-3);
}

.shelf-editor-isbn-input:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

.notebook-editor-title-input {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.notebook-editor-title-input:hover {
  border-color: var(--ink-3);
}

.notebook-editor-title-input:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

/* Status selector — grouped across shelf-editor + book-detail.
   Same data shape; Stage 1 deferred this group to Stage 3. The
   rule body matches what Stage 1's standalone book-detail-status
   rule already used; the grouped rule REPLACES that standalone
   rule (the standalone one is removed below to avoid duplicate
   declarations). */
.shelf-editor-status,
.book-detail-status {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 12px 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
}

.shelf-editor-status-option,
.book-detail-status-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Stage 5.6 sub-step 5a: tradition dropdown row on book detail page.
   Lives next to status radios; matches their visual rhythm. */
.book-detail-tradition-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.book-detail-tradition-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.book-detail-tradition-select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: var(--sp-2);
  background: var(--color-surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.book-detail-tradition-select:focus {
  outline: none;
  border-color: var(--gold);
}

/* A6.3 grouped — large-body textareas across bulk-add and the
   shared notebook-editor (journal / marginalia / artifact). */
.shelf-bulk-editor-textarea,
.notebook-editor-body {
  display: block;
  width: 100%;
  min-height: 160px;
  padding: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  resize: vertical;
}

.shelf-bulk-editor-textarea:hover,
.notebook-editor-body:hover {
  border-color: var(--ink-3);
}

.shelf-bulk-editor-textarea:focus,
.notebook-editor-body:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

/* A6.1 grouped — actions row (the wrapper) across all three
   editor families. */
.shelf-editor-actions,
.shelf-bulk-editor-actions,
.notebook-editor-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* A6.1 grouped — primary CTA (Save / Submit / Save). Dark-fill
   treatment matching .shelf-new-book and the Stage 1 book-detail
   primary affordances. */
.shelf-editor-save,
.shelf-bulk-editor-submit,
.notebook-editor-save {
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--ink);
  color: var(--text-on-dark);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.shelf-editor-save:hover,
.shelf-bulk-editor-submit:hover,
.notebook-editor-save:hover {
  background: var(--br-deep);
}

.shelf-editor-save:disabled,
.notebook-editor-save:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* A6.1 grouped — Cancel across all three editor families.
   Secondary treatment matching .shelf-new-book-bulk. */
.shelf-editor-cancel,
.shelf-bulk-editor-cancel,
.notebook-editor-cancel {
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
}

.shelf-editor-cancel:hover,
.shelf-bulk-editor-cancel:hover,
.notebook-editor-cancel:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* 6.2a: scan review editor. Container chrome + the actions/submit/cancel
   buttons reuse the .shelf-bulk-editor family above; only the per-title
   rows, the remove control, the add control, and the quiet heading carry
   their own rules. Calm by design -- a review moment, not a form. */
.shelf-scan-review-heading {
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}

.shelf-scan-review-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.shelf-scan-review-input {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.shelf-scan-review-input:hover {
  border-color: var(--ink-3);
}

.shelf-scan-review-input:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

.shelf-scan-review-remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  cursor: pointer;
}

.shelf-scan-review-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.shelf-scan-review-add {
  margin-top: 4px;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
}

.shelf-scan-review-add:hover {
  color: var(--ink);
}

/* ===== END EDITOR MODALS ===== */


/* ===== NOTEBOOK SIGN-IN PROMPT -- Stage 3.10c =====
   Stage 0 inventory gap. The signed-out Notebook header carries a
   .notebook-signin-prompt button; without a rule it would ship bare
   alongside the now-styled .notebook-settings-toggle /
   .notebook-transparency-toggle siblings. Mirrors the existing
   signin-prompt precedent (.shelf-signin-prompt /
   .book-detail-signin-prompt) — dark-fill primary affordance. */

.notebook-signin-prompt {
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  background: var(--ink);
  color: var(--text-on-dark);
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.notebook-signin-prompt:hover {
  background: var(--br-deep);
}

/* ===== END NOTEBOOK SIGN-IN PROMPT ===== */


/* ===== MOBILE NAV HAMBURGER + FILTER BUTTON (DEFAULTS) -- Stage 3.10a Stage 4 =====
   Both elements live in the DOM at all viewport widths but are
   hidden on desktop via display: none here; the mobile media
   query block below reveals them. Keeping them DOM-present means
   the toggle bindings (in views.js initNavMobileToggle and
   renderShelf) stay valid; CSS controls visibility. */

.app-nav-hamburger {
  display: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.shelf-filter-button {
  /* Stage 2 (mockup-fidelity): the rail is folded behind this button at all
     widths, so it is visible everywhere (was desktop display:none). It reuses
     the .shelf-new-book-bulk chip look; the former header grid placement is
     inert now that it lives in .shelf-main. */
  display: inline-block;
  margin-bottom: 24px;
}

/* ===== END MOBILE NAV HAMBURGER + FILTER BUTTON (DEFAULTS) ===== */


/* ===== MOBILE FILTER PANEL CHROME (DEFAULTS) -- Stage 3.10b-i =====
   The backdrop and the close-× button are mobile-only panel chrome:
   they exist in the DOM at every viewport width (renderShelf creates
   them unconditionally) but display: none here on desktop. The
   mobile media query block at the bottom of this file reveals them
   and supplies the active-state styling. Pattern mirrors the
   MOBILE NAV HAMBURGER + FILTER BUTTON (DEFAULTS) block above. */

.shelf-sidebar-backdrop {
  display: none;
}

.shelf-sidebar-close {
  display: none;
}

/* ===== END MOBILE FILTER PANEL CHROME (DEFAULTS) ===== */


/* ===== INTERACTIVE STATES -- Stage 3.10b Stage 1 =====
   Focus / active / disabled states for every clickable element on
   the shelf surface and top nav. Additive over 3.10a's default +
   hover treatment -- no 3.10a hover rule is modified.

   Focus rings use --river, the single cool accent reserved for
   "where it does work." :focus-visible (not :focus) so mouse-click
   does not leave a stuck ring; keyboard-tab does. outline (not
   box-shadow) so the ring does not interact with element fills or
   borders. outline-offset: 2px keeps the ring clear of the
   element's own border on the bordered buttons.

   Active-press is a subtle translateY(1px) -- depressed motion,
   no color change. Transitions are NOT extended to include
   transform: :active should snap and release, not animate. That
   preserves 3.10a's 120ms color/border transition declarations
   unmodified.

   Disabled adds cursor: not-allowed. .shelf-resolve-covers-btn
   :disabled already exists in the Stage 1 SHELF PAGE HEADER block
   with opacity 0.6 + cursor: default; the matching selector below
   overrides the cursor only via cascade order, leaving the 3.10a
   opacity untouched. .shelf-new-book has no 3.10a disabled rule;
   this block establishes the visual treatment for the field's
   future disabled use. */

.app-nav-link:focus-visible,
.app-nav-hamburger:focus-visible,
.shelf-new-book:focus-visible,
.shelf-new-book-bulk:focus-visible,
.shelf-resolve-covers-btn:focus-visible,
.shelf-scan-btn:focus-visible,
.shelf-signin-prompt:focus-visible,
.shelf-filter-button:focus-visible,
.shelf-filter-row:focus-visible,
.book-detail-mark-finished:focus-visible,
.book-detail-create-artifact:focus-visible,
.book-detail-open-artifact:focus-visible,
.book-detail-signin-prompt:focus-visible,
.book-detail-new-entry:focus-visible,
.artifact-back-link:focus-visible,
.artifact-substrate-link:focus-visible,
.notebook-settings-toggle:focus-visible,
.notebook-transparency-toggle:focus-visible,
.notebook-settings-done:focus-visible,
.transparency-close:focus-visible,
.shelf-editor-save:focus-visible,
.shelf-editor-cancel:focus-visible,
.shelf-bulk-editor-submit:focus-visible,
.shelf-bulk-editor-cancel:focus-visible,
.notebook-editor-save:focus-visible,
.notebook-editor-cancel:focus-visible,
.notebook-signin-prompt:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}

.app-nav-hamburger:active,
.shelf-new-book:active,
.shelf-new-book-bulk:active,
.shelf-resolve-covers-btn:active,
.shelf-scan-btn:active,
.shelf-signin-prompt:active,
.shelf-filter-button:active,
.shelf-filter-row:active,
.book-detail-mark-finished:active,
.book-detail-create-artifact:active,
.book-detail-open-artifact:active,
.book-detail-signin-prompt:active,
.book-detail-new-entry:active,
.notebook-settings-toggle:active,
.notebook-transparency-toggle:active,
.transparency-close:active,
.shelf-editor-save:active,
.shelf-editor-cancel:active,
.shelf-bulk-editor-submit:active,
.shelf-bulk-editor-cancel:active,
.notebook-editor-save:active,
.notebook-editor-cancel:active,
.notebook-signin-prompt:active {
  transform: translateY(1px);
}

.shelf-new-book:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.shelf-resolve-covers-btn:disabled {
  cursor: not-allowed;
}

/* ===== END INTERACTIVE STATES ===== */


/* ===== NOTEBOOK + ARC TRACK SURFACES -- Stage 5.1 =====
   Base chrome AND the v2 material set for surfaces that rendered
   bare prior to 5.1 (zero rules in components.css). Mirrors the
   Checkpoint 2 styled set exactly so the app reads as one material
   world; no new visual language.

   Tier split (confirmed at C2 go-ahead):
   - Tier 1 CARDS (--surface-2 ground + --ink-4 hairline + inset
     --highlight-edge + --shadow-1 + --radius-md + 3px hover lift):
     .notebook-entry, .notebook-artifact-card, .notebook-arc-row.
     Identical to .shelf-book. Hover lift is applied even when the
     card itself is not a click target (.notebook-entry has inline
     action links rather than a card-level click handler); the lift
     reads as "this is one tactile surface," matching the v2
     direction-consistency rule, not as "click me."
   - Tier 2 PANELS (--surface-2 ground + --ink-4 hairline + inset
     --highlight-edge + --shadow-2 + --radius-md): .arc-detail,
     .arc-picker-panel, .arc-confirm-panel. Mirrors the editor
     panel set from C2.

   No className additions required in views.js -- every surface in
   this block already emits its own targetable className via the
   render functions verified at Stage 0. */

/* ----- Notebook entry card (Tier 1) ----- */

/* Stage 3.2 Batch 2: notebook entries reshaped from separate cards into
   .row entries inside one OPAQUE --surface panel. Opaque only -- no
   glass/blur (content-surface fidelity rule). Each row carries a left
   register spine (::before reads --reg, set per-entry in JS:
   marginalia=--marginalia-color, journal=--ink-4). */
/* Stage 7 (mockup-fidelity): the entries container is a single-column stack
   with gap -- the per-entry cards carry the chrome, so the panel itself is a
   transparent flow (no opaque fill / divider rows). NOT a 2-col grid. */
.notebook-entries-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Stage 7 (mockup-fidelity): each entry is its own card on --surface-2 (mockup
   .card.entry: 1px border, 18px radius, 22px padding), replacing the hairline-
   divided rows in one panel. Single-column + all controls/metadata kept. */
.notebook-entry {
  position: relative;
  padding: 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  font-family: var(--font-body);
  color: var(--ink);
}

.notebook-entry::before {
  content: "";
  position: absolute;
  left: 0;
  /* Stage 7: inset vertically + rounded so the register spine sits cleanly
     inside the card's 18px corners (was full-height for the flat rows). */
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 1px;
  background: var(--reg);
  opacity: 0.8;
}

.notebook-entry-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 6px;
}

.notebook-entry-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
}

.notebook-entry-tag-m {
  /* S7a: softer .45 teal border (mockup .tagk.m); text stays full teal. */
  color: var(--marginalia-color);
  border-color: rgba(29,143,104,.45);
}

.notebook-entry-tag-q {
  /* N-epic: question register -> blue (mockup .et-ques). */
  color: var(--question-color);
  border-color: rgba(39,86,106,.45);
}

.notebook-entry-ts {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
}

.notebook-entry-vis {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notebook-entry-vis-dot {
  width: 6px;
  height: 6px;
}

.notebook-entry-vis-on {
  color: var(--marginalia-color);
}
.notebook-entry-vis-on .notebook-entry-vis-dot {
  background: var(--marginalia-color);
}

.notebook-entry-vis-off {
  color: var(--ink-4);
}
.notebook-entry-vis-off .notebook-entry-vis-dot {
  background: var(--line-2);
}

/* Stage 7 (mockup-fidelity): source label -> DM-Mono uppercase (mockup .src). */
.notebook-entry-src {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

/* Stage 7 (mockup-fidelity): note text -> Cormorant italic (mockup .entry .n). */
.notebook-entry-body {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.32;
  white-space: pre-wrap;
}

.notebook-entry-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 11px;
}

.notebook-entry-add-to-arc,
.notebook-entry-delete,
.notebook-entry-delete-confirm,
.notebook-entry-delete-cancel {
  font-family: var(--font-body);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.notebook-entry-add-to-arc {
  color: var(--wordmark);
}
.notebook-entry-add-to-arc:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notebook-entry-delete {
  color: var(--ink-3);
}
.notebook-entry-delete:hover {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notebook-entry-delete-confirm {
  color: var(--gold);
}
.notebook-entry-delete-cancel {
  color: var(--ink-3);
}

.notebook-entry-arc-picker-host {
  margin-top: 12px;
}

/* FF-8 (S4-3): the note action row collapses to one primary (Gather) + a quiet overflow.
   The ⋯ toggle reveals Add-to-arc / File-to-book / Send-to-sub-theory + a separated Delete;
   destructive never rides the primary row. The live notebook is lum-amber-deep (light-skin
   block further down owns the look); these base rules keep the toggle sane in any ground and
   guarantee the overflow is hidden until opened. */
.notebook-entry-more {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.notebook-entry-overflow { display: none; }
.notebook-entry-overflow.is-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}
.notebook-entry-overflow .nb-of-sep {
  align-self: stretch;
  height: 1px;
  background: var(--border);
  margin: 1px 0;
}

/* ===== N1: the spread (Alt 1) -- structural layout. Full style pass is N5;
   these rules use existing tokens only and establish the two-leaf grid, the
   tab row, and the display-only master switch. ===== */
.notebook-hright {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.notebook-mtog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer; /* N2: interactive */
}
.notebook-mtog .notebook-sw {
  position: relative;
  flex: none;
  width: 30px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--sunk);
  border: 1px solid var(--line-2);
}
.notebook-mtog .notebook-sw::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
}
.notebook-mtog-on .notebook-sw {
  background: var(--marginalia-color);
  border-color: var(--marginalia-color);
}
.notebook-mtog-on .notebook-sw::after {
  left: 15px;
}
.notebook-hright-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wordmark);
}
.notebook-hright-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notebook-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
  border-bottom: 1px solid var(--border);
}
.notebook-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.notebook-tab:hover { color: var(--ink-2); }
.notebook-tab-on {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.notebook-tab-count {
  margin-left: 4px;
  color: var(--ink-4);
}
.notebook-tab-on .notebook-tab-count { color: var(--gold-text); }

/* Hybrid: the two leaves abut inside an open bound notebook -- a single
   surface-filled, rounded, shadowed spread (symmetric --radius-lg per the
   locked decision A; fills the .notebook 1080 column, no 880 constraint). */
.notebook-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.notebook-secthead-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
}
.notebook-secthead-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 2px;
}
/* Book-tab header (Gap 2): cover thumb + serif title + "AUTHOR · STATUS",
   anchoring the left page to its book. Wired read-only from state.books. */
.notebook-bookhead {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}
.notebook-bookhead-cover {
  width: 34px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 3px;
  object-fit: cover;
  background: var(--br-deep);
  box-shadow: var(--shadow-1);
}
.notebook-bookhead-cover-ph {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3px;
  overflow: hidden;
  color: var(--surface-2);
  line-height: 1.05;
}
.notebook-bookhead-cover-ph-title {
  font-family: var(--font-serif);
  font-size: 7.5px;
}
.notebook-bookhead-cover-ph-label {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.notebook-bookhead-text { min-width: 0; }
.notebook-bookhead-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.04;
  color: var(--ink);
}
.notebook-bookhead-sub {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.notebook-working-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* N2: inline capture (writeline) + register chips. */
/* N2 upgrade: the writeline becomes a comfortable composer -- chips above, a
   wide DM-Sans writing measure below (the capture bar mounts under it in N2b).
   Comfort metrics track design/writing-surface-mockup.html (.editor/.flow). */
/* Hybrid: the composer is integrated INTO the dot-grid page -- no card fill,
   border, or radius (the leaf gutter supplies the inset). The chips above, the
   dashed capturebar rule below, and the writing measure are unchanged (v3.121). */
.notebook-writeline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.notebook-writeline-input {
  width: 100%;
  max-width: 66ch;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink);
  caret-color: var(--ink);
  outline: none;
  resize: none;
  overflow: hidden;
  min-height: 128px;
  padding: 2px 0;
}
/* The resting invitation: a serif italic prompt, larger than the prose it
   becomes (the textarea's own font stays DM Sans for typed text). */
.notebook-writeline-input::placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink-4);
  opacity: 1;
}
.notebook-writeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.notebook-writeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--gold-text);
  background: transparent;
  cursor: pointer;
  transition: all var(--motion-base) var(--ease);
}
.notebook-writeline-chip:hover { border-color: var(--line-2); }
.notebook-writeline-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.notebook-writeline-chip-on {
  color: var(--text-on-dark);
  font-weight: 500;
}
.notebook-writeline-chip-on .notebook-writeline-chip-dot {
  opacity: 1;
  background: var(--text-on-dark);
}
.notebook-writeline-chip-on[data-reg="marginalia"] {
  background: var(--marginalia-color);
  border-color: var(--marginalia-color);
}
.notebook-writeline-chip-on[data-reg="journal"] {
  background: var(--journal-color);
  border-color: var(--journal-color);
}
.notebook-writeline-chip-on[data-reg="question"] {
  background: var(--question-color);
  border-color: var(--question-color);
}

/* N2 upgrade: resting -> composing focus treatment. A .notebook-composing class
   on the section.notebook wrap (setNotebookComposing, views.js:2580) recedes the
   in-view chrome so the writing surface comes forward. R4 repair: the original
   selectors (.notebook-header/.notebook-tabs/.notebook-secthead + a grid-collapse
   on .notebook-spread) never matched the live markup (.notebook-head / .nb-tabs;
   the spread is display:block, not grid) so the recede was visually inert -- these
   are repointed to the live classes: head + tabs + right leaf dim, left-leaf seam
   dissolves, the composer comes forward via its own :focus-within ring. SCOPED to
   the notebook view -- the global app nav is untouched (design-canon A: solid). */
.notebook .notebook-head,
.notebook .nb-tabs,
.notebook .leaf-right {
  transition: opacity var(--motion-base) var(--ease);
}
.notebook.notebook-composing .notebook-head,
.notebook.notebook-composing .nb-tabs {
  opacity: 0.4;
}
.notebook.notebook-composing .leaf-right {
  opacity: 0.32;
}
.notebook.notebook-composing .leaf-left {
  border-right-color: transparent;
}

/* N2b photo capture: the quiet capture bar under the composer, staged previews,
   and inline shots at rest. All selectors namespaced notebook-* to avoid the
   global-stylesheet bleed the Live Forensic Smoke Test warns about. */
.notebook-capturebar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.notebook-capbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease);
}
.notebook-capbtn:hover {
  border-color: var(--gold);
  color: var(--gold-text);
  background: var(--wash);
}
.notebook-caphint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-left: auto;
  opacity: 0.8;
}
.notebook-capture-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.notebook-writeline-shots {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.notebook-shot {
  margin: 0;
  max-width: 56ch;
}
.notebook-shot-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.notebook-shot-img {
  display: block;
  width: 100%;
  height: auto;
}
.notebook-shot-media-ph {
  display: grid;
  place-items: center;
  min-height: 120px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 80%, var(--bg)) 0%, var(--surface) 70%);
}
.notebook-shot-ph-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  opacity: 0.85;
}
.notebook-shot-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--glass-2);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.notebook-shot-remove:hover { color: var(--danger); }
.notebook-shot-cap {
  margin-top: 7px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-3);
}
.notebook-shot-cap-input {
  margin-top: 7px;
  width: 100%;
  max-width: 56ch;
  border: none;
  background: transparent;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-3);
  outline: none;
  caret-color: var(--ink);
}
.notebook-shot-cap-input::placeholder { color: var(--ink-4); opacity: 0.85; }

/* MW-2 P7 (Notebook input discipline): the inline-editor title/body and the photo
   caption were 14/14/14.5px — under Safari's 16px focus-zoom threshold. Bump to
   16px at <=759 only (desktop keeps its compact sizing). The writeline .nb-ce is
   already 16-17px; these three shared classes also back the arcs create flow. Sizing
   only — no tokens/hex; source order beats the base rules above. */
@media (max-width:759px){
  .notebook-editor-title-input,
  .notebook-editor-body,
  .notebook-shot-cap-input{ font-size:16px; }
}
.notebook-entry-shots {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
}
.notebook-entry-shots .notebook-shot { max-width: 46ch; }

/* N3: gather selection + the working-page sub-theory builder. */
.notebook-entry-gathered {
  outline: 2px solid var(--marginalia-color);
  outline-offset: 2px;
}
.notebook-nameblock {
  margin-bottom: 16px;
}
.notebook-yname-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marginalia-color);
  margin-bottom: 5px;
}
.notebook-working-name {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--marginalia-color) 55%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 4px 0 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  caret-color: var(--ink);
  outline: none;
}
.notebook-working-name::placeholder {
  color: var(--ink-4);
  opacity: 0.8;
}
.notebook-wnote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  margin-bottom: 9px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.notebook-wnote-tag {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.notebook-wnote-tag-marg { color: var(--marginalia-color); }
.notebook-wnote-tag-ques { color: var(--question-color); }
.notebook-wnote-tag-jour { color: var(--journal-color); }
.notebook-working-arc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.notebook-working-arc-change {
  color: var(--wordmark);
  cursor: pointer;
}
.notebook-gather {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 12px 15px;
  background: var(--panel-yumi);
  border: 1px solid color-mix(in srgb, var(--marginalia-color) 30%, transparent);
  border-radius: var(--radius-lg);
}
.notebook-ybubble {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--text-on-dark);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.notebook-ybubble-sm {
  width: 22px;
  height: 22px;
  font-size: 12px;
}
.notebook-working-gather-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
.notebook-working-acts {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.notebook-working-create {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--grad);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.notebook-working-create:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}
.notebook-working-clear {
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
}
.notebook-complicate {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.notebook-ctag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--question-color);
  margin-bottom: 4px;
}
.notebook-ctext {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 759px) {
  /* The bound book becomes a single column: the two leaves stack inside the
     one rounded/shadowed spread. Drop the vertical seam + margin rule; the
     right leaf carries a top hairline instead. Tighter gutter for narrow
     screens, and no tall min-height so short leaves don't leave dead space. */
  .notebook-spread { grid-template-columns: 1fr; gap: 0; }
}

/* ----- Notebook artifact card (Tier 1) -----
   The artifact card is click-the-card-anywhere (handler in views.js
   navigates to #artifact/<bookId>); cursor + hover lift here mirror
   the .shelf-book affordance contract. */

.notebook-artifact-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,250,230,.5) inset,
    0 16px 36px -24px rgba(58,40,16,.5);
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}

.notebook-artifact-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-2);
}

.notebook-artifact-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.notebook-artifact-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.notebook-artifact-meta time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.notebook-artifact-book-meta {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
}

.notebook-artifact-title {
  margin: 0 0 6px 0;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.notebook-artifact-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ----- Arc row (Tier 1, clickable <a>) ----- */

.notebook-arc-row {
  display: flex;
  flex-direction: column;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-md);
  box-shadow:
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-1);
  font-family: var(--font-body);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}

.notebook-arc-row:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-2);
}

.notebook-arc-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.notebook-arc-description {
  margin: 6px 0 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
}

/* ----- Arc detail (Tier 2 panel) -----
   Per C2-confirmed tier split, .arc-detail is the Tier 2 panel.
   Spacing mirrors .book-detail (max-width 1280, padding 32-ish,
   centered) but the surface-set chrome differs by design: arc
   detail is a contained panel; book detail is a transparent route
   wrapper. The user accepted this divergence at C2 go-ahead. */

.arc-detail {
  max-width: 1080px;
  margin: 32px auto;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,250,230,.5) inset,
    0 16px 36px -24px rgba(58,40,16,.5);
  font-family: var(--font-body);
}

.arc-detail-not-found {
  padding: 96px 32px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-3);
}

.arc-detail-not-found a {
  display: inline-block;
  margin-top: 16px;
  color: var(--ink-2);
  text-decoration: none;
}

.arc-detail-not-found a:hover {
  color: var(--ink);
}

.arc-detail-header {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.arc-detail-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.arc-detail-description {
  grid-column: 1;
  grid-row: 2;
  margin: 6px 0 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-3);
}

/* Destructive secondary button -- transparent + --ink-4 border,
   --br-deep on hover. Quieter than the dark-fill primary affordances;
   destructive actions get less weight, not more. */
.arc-detail-delete {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 2px;
  cursor: pointer;
}

.arc-detail-delete:hover {
  border-color: var(--br-deep);
  color: var(--br-deep);
}

.arc-detail-member-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.arc-detail-empty-body {
  margin: 48px 0;
  padding: 32px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-3);
  text-align: center;
}

/* Quiet, dashed placeholder -- this is information about a missing
   member, not an action surface. Dashed --ink-4 (vs solid on real
   surfaces) signals "absence" without ringing alarms. */
.arc-detail-missing-member {
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
  border: 1px dashed var(--ink-4);
  border-radius: var(--radius-md);
}

/* ----- Arc picker panel (Tier 2) ----- */

.arc-picker-panel {
  margin: 16px 0;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-md);
  box-shadow:
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-2);
  font-family: var(--font-body);
}

.arc-picker-label {
  margin: 0 0 12px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.arc-picker-status {
  margin: 0 0 12px 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
}

.arc-picker-empty {
  margin: 0 0 12px 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-3);
}

/* Row hover reuses the --gold-light / --gold-text "selected" idiom
   from the shelf filter rows. Picker rows are pickable items, not
   navigation; the hover treatment communicates "this is the one if
   you click now," matching the filter-row selected pattern. */
.arc-picker-row {
  display: block;
  padding: 8px 12px;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
}

.arc-picker-row:hover {
  background: var(--gold-light);
  color: var(--gold-text);
}

.arc-picker-done {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 3px;
}

.arc-picker-done:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-2);
}

/* WS-C (S4-5, the BOUND FINDING): the picker reads generic --surface-2/--ink*/--gold-* tokens;
   body[data-ground="dark"] (theme.css:362) repoints them DARK — a dark box on the light working page.
   Every .arc-picker-panel mounts inside a .lum-amber-deep light surface. NARROW fix: re-point the
   picker's tokens to the surface's light --lum-* set + a legible row-hover (base hover collapses to
   --gold-soft on --gold-soft). Scoped to the picker; it never mounts on genuinely-dark chrome. */
.lum-amber-deep .arc-picker-panel{ --surface-2:var(--page-2); --ink:var(--lum-ink); --ink-2:var(--lum-ink-2); --ink-3:var(--lum-ink-3); --ink-4:var(--lum-glass-bd-2); --border:var(--lum-glass-bd-2); }
.lum-amber-deep .arc-picker-row:hover{ background:color-mix(in srgb, var(--lum-gold-l) 20%, transparent); color:var(--lum-ink); }

/* ----- Send-to-sub-theory picker (10.1 polish) -----
   The panel also carries .arc-picker-panel, so it inherits the arc
   picker chrome; these rules add what the grouped, multi-attach
   sub-theory picker needs over that base: a scroll cap, a mono section
   eyebrow for the arc-name headers, indented rows with a right-aligned
   checkmark, and a subtle tint on attached rows. var() tokens only. */
.subtheory-picker-panel {
  max-height: 340px;
  overflow-y: auto;
}

.subtheory-picker-arc {
  margin: 14px 0 2px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.subtheory-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  margin-bottom: 0;
  padding-left: 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.subtheory-picker-row-label {
  flex: 1 1 auto;
}

.subtheory-picker-row:hover {
  background: var(--gold-light);
  color: var(--gold-text);
}

.subtheory-picker-row-attached {
  background: var(--surface-2);
}

.subtheory-picker-check {
  flex: 0 0 auto;
  color: var(--marginalia-color);
  font-weight: 600;
}

/* Stage 5 (mockup-fidelity): Send-to-sub-theory shares .book-detail-add-to-arc's
   button base but is GHOST, not gradient (only "Add to an arc" is gradient).
   Override the gradient fill with the ghost treatment; keep label on one line. */
.book-detail-send-to-subtheory {
  white-space: nowrap;
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  font-weight: 400;
}

.book-detail-send-to-subtheory:hover {
  filter: none;
  border-color: var(--ink-3);
  color: var(--ink);
}

/* ----- Arc delete-confirm panel (Tier 2) ----- */

.arc-confirm-panel {
  margin: 16px 0;
  padding: 24px;
  background: var(--surface-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-md);
  box-shadow:
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-2);
  font-family: var(--font-body);
}

.arc-confirm-copy {
  margin: 0 0 16px 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.arc-confirm-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Destructive primary -- --br-deep fill (the deepest warm-dark)
   rather than --ink, so "delete arc" reads as the most committed
   action available without a separate red palette. */
.arc-confirm-confirm {
  display: inline-block;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  background: var(--br-deep);
  color: var(--text-on-dark);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
}

.arc-confirm-confirm:hover {
  background: var(--ink);
}

.arc-confirm-cancel,
.arc-confirm-stale-back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 3px;
}

.arc-confirm-cancel:hover,
.arc-confirm-stale-back:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-2);
}

.arc-confirm-stale-note {
  margin: 0 0 12px 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-3);
}

/* ----- Focus + active states for the new clickables -----
   Self-contained mini-block so the centralized INTERACTIVE STATES
   block above stays unmodified. Same outline / translateY idioms
   as the rest of the file -- --river ring on focus-visible, 1px
   press on :active for buttons only (links don't get the press). */

.notebook-entry-add-to-arc:focus-visible,
.notebook-artifact-card:focus-visible,
.notebook-arc-row:focus-visible,
.arc-detail-not-found a:focus-visible,
.arc-detail-delete:focus-visible,
.arc-picker-row:focus-visible,
.arc-picker-done:focus-visible,
.arc-confirm-confirm:focus-visible,
.arc-confirm-cancel:focus-visible,
.arc-confirm-stale-back:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}

.arc-detail-delete:active,
.arc-confirm-confirm:active {
  transform: translateY(1px);
}

/* ===== END NOTEBOOK + ARC TRACK SURFACES ===== */


/* ===== MOBILE BREAKPOINT (< 760px) -- Stage 3.10a Stage 4 =====
   All Stage 4 visual changes that affect the desktop surfaces live
   inside this media query so Stages 1-3 desktop rendering is
   byte-for-byte unchanged outside it. Two existing media queries
   (Stage 2 grid column-count at 759px and 499px) sit alongside;
   they target only .shelf-list and do not collide.

   z-index: the slide-down nav panel and the slide-down filter
   panel sit at z-index 100 -- above page content, well below the
   Yumi panel (9998) and toggle (9999) per the existing yumi-panel
   block at the top of this file. */

@media (max-width: 759px) {
  /* Nav: 56px height, 16px padding, hamburger visible, link list
     collapsed to a slide-down panel anchored below the nav. */
  .app-nav {
    /* Stage 4: clear the iOS status bar. The bar extends up under the notch
       (env top inset) with its content seated below it; min-height keeps the
       56px bar. env() is 0 where there is no inset, so this is a no-op on
       Android / desktop-narrow. height:auto + min-height is box-sizing-agnostic. */
    height: auto;
    min-height: 56px;
    padding: env(safe-area-inset-top) 16px 0 16px;
    position: relative;
    /* iOS WebKit mis-composites the open nav panel (its abs-positioned
       child overflowing this 56px bar) when the bar carries backdrop-filter
       -- the panel paints see-through + scattered. The relative, top-of-flow
       mobile bar has nothing behind it to blur, so drop the filter; a solid
       surface matches the panel and keeps the bar opaque. Desktop (>=760px)
       keeps the glass pill. */
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .app-nav-hamburger {
    display: block;
  }

  /* Stage 4: the Yumi bloom is a fixed FAB, so a bottom scroll-gutter lets the
     last content clear the orb (and the home indicator).
     B1/L5: the `.yumi-bloom-line{display:none}` that used to hide the sprawling
     hint line here is retired -- there is no caption at any width now, which is
     what makes AMB-1's "ONE ruled size" true rather than width-conditional. */
  #app { padding-bottom: calc(var(--floating-stack-h) + env(safe-area-inset-bottom)); }

  /* Phase 3.1: the glass search is desktop chrome; hide it on the
     56px mobile bar so the hamburger layout is unchanged from before. */
  .app-nav-search {
    display: none;
  }

  .app-nav-list {
    display: none;
  }

  /* S4: when the mobile menu is open, lift the whole nav stacking context above the
     z:9999 corner FABs (the "+" create door + the Yumi bloom) so neither paints over
     the full-screen menu. .app-nav is z:30, so its children (the z:100 list) can never
     out-stack a body-level z:9999 FAB — the lift must be on .app-nav itself. Scoped to
     the OPEN state; the closed nav returns to z:30. Not a transform (canon §2 safe). */
  .app-nav.app-nav-mobile-open { z-index: 10010; }

  .app-nav.app-nav-mobile-open .app-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    /* ON-1: cover the full viewport below the 56px bar. Was a content-
       height dropdown (position:absolute, no height) so the shelf showed
       + scrolled beneath the open menu. Fill to the viewport foot and let
       a long menu scroll internally; the body scroll-lock rides in the JS
       toggle (initNavMobileToggle). */
    height: calc(100vh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
    background: var(--color-surface);
    z-index: 100;
  }

  /* Canon §4-A/B: refined mobile menu -- ~50px serif rows, gold active
     left-bar, profile row (avatar + name + "Account") below a divider. */
  .app-nav.app-nav-mobile-open .app-nav-list li {
    padding: 0;
  }
  .app-nav.app-nav-mobile-open .app-nav-list .app-nav-link {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 6px;
    border-radius: 0;
    border-bottom: none;
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
    color: var(--ink-2);
  }
  .app-nav.app-nav-mobile-open .app-nav-list .app-nav-link.app-nav-link-active:not(.app-nav-profile) {
    color: var(--ink);
    font-weight: 600;
  }
  .app-nav.app-nav-mobile-open .app-nav-list .app-nav-link.app-nav-link-active:not(.app-nav-profile)::before {
    content: "";
    width: 3px;
    height: 22px;
    margin-left: -6px;
    margin-right: 15px;
    border-radius: 2px;
    background: var(--gold);
  }
  .app-nav.app-nav-mobile-open .app-nav-list .app-nav-profile {
    width: auto;
    height: auto;
    min-height: 58px;
    margin-top: 8px;
    padding: 0 6px;
    border-radius: 0;
    border-top: 1px solid var(--border);
    background: none;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .app-nav.app-nav-mobile-open .app-nav-list .app-nav-profile .app-nav-profile-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--grad);
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 17px;
  }
  .app-nav.app-nav-mobile-open .app-nav-list .app-nav-profile-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .app-nav.app-nav-mobile-open .app-nav-list .app-nav-profile-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .app-nav.app-nav-mobile-open .app-nav-list .app-nav-profile-account {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* Canon §4-I: single-column reorder via display:contents + order. The
     header becomes a flex column; .book-detail-cover-col and
     .book-detail-content dissolve (display:contents) so their children
     flatten into the header flex and order into the §4-I sequence:
     cover → title → author → meta → actions → artifact → find-this-book.
     Desktop (≥760) keeps the untouched 300px/1fr grid. */
  .book-detail-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .book-detail-cover-col,
  .book-detail-content {
    display: contents;
  }
  /* Cover cap re-homed onto the cover element -- the column box is gone
     under display:contents, so its max-width no longer applies. */
  .book-detail-cover,
  .book-detail-cover-placeholder {
    align-self: center;
    max-width: 200px;
    order: 1;
  }
  .book-detail-title { order: 2; }
  .book-detail-author { order: 3; }
  .book-detail-meta { order: 4; }
  .book-detail-actions { order: 5; }
  .book-detail-artifact-card { order: 6; }
  .book-detail-quote { order: 7; }
  .find-this-book { order: 8; }
  /* The secondary pair sits side-by-side on mobile (desktop stacks it). */
  .book-detail-actions-row {
    flex-direction: row;
  }
  .book-detail-actions-row .book-detail-send-to-subtheory,
  .book-detail-actions-row .book-detail-new-entry {
    flex: 1 1 0;
    width: auto;
  }

  /* Notebook (Stage 3 polish): 16px horizontal padding on mobile (matches
     the shelf); the 48px header top tightens to 32px. Single-column feed,
     card surfaces, and the composition fields are all untouched (#5 stays
     deferred). */
  .notebook {
    padding: 0 16px;
  }
  .notebook-header {
    padding-top: 32px;
  }

  /* Shelf container: 16px horizontal padding (was 32px on desktop). */
  .shelf {
    padding: 0 16px;
  }

  /* Page header: top padding 32px, title 32px, layout stacks --
     title row 1, subtitle row 2, buttons rows 3+ on a single
     column. The Stage 1 desktop grid (1fr auto auto) is replaced
     by a single 1fr column on mobile; explicit grid-column / row
     assignments override the Stage 1 placements that send buttons
     to columns 2 and 3. */
  .shelf-header {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }

  .shelf-title {
    font-size: 32px;
    grid-column: 1;
    grid-row: 1;
  }

  .shelf-subtitle {
    grid-column: 1;
    grid-row: 2;
  }

  .shelf-new-book {
    grid-column: 1;
    grid-row: 3;
  }

  .shelf-new-book-bulk {
    grid-column: 1;
    grid-row: 4;
  }

  .shelf-resolve-covers-btn {
    grid-column: 1;
    grid-row: 5;
  }

  .shelf-signin-prompt {
    grid-column: 1;
    grid-row: 3;
  }

  /* Layout: collapse to single column; sidebar hidden by default,
     revealed as a fixed overlay panel when .shelf-sidebar-mobile-
     open is toggled by the Filter button. */
  .shelf-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .shelf-sidebar {
    display: none;
  }

  .shelf-sidebar.shelf-sidebar-mobile-open {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    padding: 24px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--border);
    z-index: 100;
  }

  /* Filter button: visible on mobile, sits at the top of the main
     column above the editor host and grid. inline-block + auto
     margins keep it left-aligned with the grid below. The Stage 1
     grid-column / grid-row rules on .shelf-new-book-bulk do not
     apply here because .shelf-filter-button lives inside .shelf-
     main, not .shelf-header. */
  .shelf-filter-button {
    display: inline-block;
    margin-bottom: 24px;
  }

  /* 3.10b-i: mobile filter panel chrome.
     - Backdrop: full-viewport semi-transparent fill, sits at z-index
       99 — just below the panel (100), well below Yumi (9998/9999).
       The dim is a color-mix on --ink (the cherry-oak ramp) at 40%
       opacity, mirroring the gold-family color-mix idiom already
       used by the reading-status pill (.shelf-book-status-reading).
     - Close button: quiet × in --ink-3, positioned absolute to the
       top-right of the panel (the panel is position: fixed at this
       breakpoint, so absolute resolves against it). :hover lifts to
       --ink; :focus-visible reuses --river (consistent with Stage
       3.10b Stage 1 focus rings); :active uses the translateY(1px)
       press idiom. No new tokens; no hardcoded hex. */
  .shelf-sidebar-backdrop.shelf-sidebar-backdrop-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--scrim);
    z-index: 99;
  }

  .shelf-sidebar-close {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    }

  .shelf-sidebar-close:hover {
    color: var(--ink);
  }

  .shelf-sidebar-close:focus-visible {
    outline: 2px solid var(--river);
    outline-offset: 2px;
  }

  .shelf-sidebar-close:active {
    transform: translateY(1px);
  }

  /* ===== Stage 2 (full-app redesign) mobile splits ===== */
  /* F: Arcs grids collapse to 1-up (desktop base is 3-up). */
  .arcs-yours,
  .arcs-examples {
    grid-template-columns: 1fr;
  }

  /* Account stats: 2x2 on phones (desktop base is 4-up). A 2-col grid,
     scoped `.account .account-stats` (0,2,0) to outrank the later base
     flex rule, guarantees exactly two columns with no flex-basis rounding
     (the base `gap:12px` carries over to the grid). */
  .account .account-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

}

/* ===== END MOBILE BREAKPOINT ===== */


/* ===== MOTION -- Stage 5.1 (A4.3) =====
   The ONLY four motions permitted by A4.3:

   1. Route cross-fade -- #app > * fades in on every render. The OLD
      route is destroyed via host.innerHTML = '' before the NEW route
      mounts, so true cross-fade overlap is not achievable in CSS
      alone; the fade-in is the pragmatic minimum-viable interpretation.
   2. Card hover lift -- per-card transition rules on .shelf-book,
      .notebook-entry, .notebook-artifact-card, .notebook-arc-row
      (defined inline at each card rule above, on transform +
      box-shadow at --motion-base / --ease).
   3. Nav underline slide -- re-timed transition on .app-nav-link's
      color + border-color (above). A literal sliding element between
      tabs is out of 5.1 scope.
   4. Picker/panel fade-and-rise -- every floating panel runs the
      fade-and-rise animation on mount via the selector group below.
      The Yumi panel runs on .yumi-panel-open class addition.

   Every other transition (button hover, link hover, input border on
   focus, etc.) was removed at Stage 5.1. Those interactions snap
   rather than animate, per the A4.3 strict "only these four motions"
   rule. Focus rings + :active translateY are instant by design (no
   transition declared) and remain so. */

@keyframes route-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-and-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#app > * {
  animation: route-fade-in var(--motion-base) var(--ease) both;
}

.shelf-editor,
.shelf-bulk-editor,
.notebook-editor,
.notebook-settings-panel,
.transparency-panel,
.arc-picker-panel,
.arc-confirm-panel,
.yumi-panel.yumi-panel-open {
  animation: fade-and-rise var(--motion-base) var(--ease) both;
}

/* ===== END MOTION ===== */


/* ===== STAGE 5.4 STAGE 1c -- ARC-DETAIL TOOLBAR (LIST/WEB TOGGLE) =====
   View-control row mounted below .arc-detail-header. Two pill buttons
   (List + Web) switch the arc-detail render between the chronological
   list (Stage 5.3 baseline) and the chronological web (Stage 5.4
   spine). Stage 1c ships the toolbar shape + active state only; the
   list/web rendering split lands in Stage 1d.

   Inactive button shape mirrors .shelf-new-book-bulk -- the codebase's
   canonical secondary-button form: transparent fill, --ink-2 text,
   --border 1px frame, 10px 20px padding, 2px radius. Hover follows
   the same precedent (border-color --ink-3, color --ink).

   Active state is a STRICT mirror of .shelf-filter-row-selected: the
   locked "selected" gold-family idiom (--gold-light fill, --gold-text
   color), with the matching :hover override so the selected color is
   preserved on cursor hover. The inactive border is intentionally NOT
   overridden when active -- the precedent does not include that
   property and Stage 1c holds strict. If the rendered result reads as
   broken (gold fill ringed by stale gray border), revisit at Stage 1c
   live-URL verification rather than diverging from the precedent here.
   ===================================================================== */

/* Canon §4-H chrome polish: the List|Web toggle reads as the app's
   segmented control (track + options, active = surface), matching
   .shelf-seg / the mockup .seg. Visual only -- the buttons keep their
   classes + click handlers; the render/graph logic is untouched. */
.arc-detail-toolbar {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--wash);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}
.arc-detail-toolbar .arc-detail-toggle-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--ink-3);
}
.arc-detail-toolbar .arc-detail-toggle-btn:hover {
  color: var(--ink);
  border-color: transparent;
}
.arc-detail-toolbar .arc-detail-toggle-btn.is-active,
.arc-detail-toolbar .arc-detail-toggle-btn.is-active:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: transparent;
}

.arc-detail-toggle-btn {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
}

/* Batch 3: "+ Sub-theory" is the control bar's primary -- gradient pill
   (mockup .cbar .c.k). Overrides the quiet toggle/new-arc base via the
   compound selector + source order. */
.arc-detail-addsub {
  font-weight: 600;
  background: var(--grad);
  color: var(--text-on-dark);
  border: 1px solid transparent;
}
.arc-detail-addsub:hover {
  background: var(--grad);
  filter: brightness(1.06);
}

.arc-detail-toggle-btn:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.arc-detail-toggle-btn.is-active {
  background: var(--gold-light);
  color: var(--gold-text);
}

.arc-detail-toggle-btn.is-active:hover {
  color: var(--gold-text);
}

/* Stage 9.6c.1: constellation control bar -- one chrome row above the
   SVG holding the workspace controls (+ Sub-theory / Connect / Reset)
   plus the folded marginalia toggle. Mirrors .arc-detail-toolbar
   (flex + gap + margin) and reuses .arc-detail-toggle-btn for the
   buttons, so no new palette enters here. flex-wrap keeps the row from
   overflowing the container at narrow widths. */
.st-control-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* Stage 4 (mockup-fidelity): the Connect/Reset/Layers bar sits BELOW the
   constellation, bottom-right (mockup line 202). It keeps the .st-control-bar
   class (same quiet chip styling); only the margins + alignment flip. */
.st-control-bar-bottom {
  margin-top: var(--sp-4);
  margin-bottom: 0;
  justify-content: flex-end;
}

/* Canon §4-H chrome polish: the constellation control buttons (Connect /
   Reset / Layers) read as quiet chips so the gradient "+ Sub-theory" is the
   single primary. Excludes .arc-detail-addsub (keeps its gradient) and
   .is-connecting (preserves Connect's armed --thread-color state). Visual
   only -- handlers/layer logic untouched. */
.st-control-bar .arc-detail-toggle-btn:not(.arc-detail-addsub):not(.is-connecting) {
  padding: 9px 14px;
  font-size: 13px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.st-control-bar .arc-detail-toggle-btn:not(.arc-detail-addsub):not(.is-connecting):hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* Hybrid Stage C: the Layers popover -- one button opening a small panel of
   independent layer switches (Books / Marginalia / Faint links). OPAQUE
   --surface (a content surface, not glass -- no blur); tokens only. */
.st-layers {
  position: relative;
  display: inline-flex;
}

.st-layers-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.st-layers-popover--open {
  display: flex;
}

.st-layers-switch {
  white-space: nowrap;
  text-align: left;
}


/* ===== STAGE 5.4 STAGE 1e -- ARC-DETAIL WEB-VIEW WHEAT-FIELD MOUNT =====
   Surface-scoped wheat-field mirroring .shelf / .shelf::before
   (components.css:828-896). Path B from Stage 0 recon: NO
   background-color on the container -- the wheat field IS the ground,
   shows through by design. One deliberate divergence from the
   precedent: background-position is `center` (vs `top left` on .shelf)
   because the Stage 2 spine will sit on-center.
   ===================================================================== */

.arc-detail-web-view {
  position: relative;
  isolation: isolate;
  min-height: 400px;
  /* 9b-i: framed stage -- hairline + lg radius (mockup .cstage). */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.arc-detail-web-view::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* UMBER: wheat-field backdrop dropped on the now-DARK arc field; the --ground
     radial (body::before) is the ground here. Asset kept for future bright use. */
  background-image: none;
}

/* Stage 7.1B: inner constellation SVG fills the container width and
   scales by intrinsic 600x500 viewBox aspect ratio. display:block
   removes the default inline baseline gap. */
.arc-detail-web-view svg {
  width: 100%;
  height: auto;
  display: block;
}

/* 9b-iii (R56): Layers fades. Each layer group transitions opacity; the root
   data-attribute on the live <svg> drives it, so a switch toggle fades in
   place with no re-render (node identity preserved). GUARD 45: these groups
   are filter-free -- the CSS-blurred halo lives in the per-mark body
   sub-group, never here -- so no opacity is ever transitioned on a filtered
   element. pointer-events:none when off so a hidden layer can't catch a
   click (resolved immediately -- stricter than transition-end). */
.arc-detail-web-view .st-layer-books,
.arc-detail-web-view .st-layer-dots,
.arc-detail-web-view .st-layer-faint {
  transition: opacity var(--motion-base) var(--ease);
}
.arc-detail-web-view svg[data-st-books="off"] .st-layer-books,
.arc-detail-web-view svg[data-st-marginalia="off"] .st-layer-dots,
.arc-detail-web-view svg[data-st-faint="off"] .st-layer-faint {
  opacity: 0;
  pointer-events: none;
}

/* 9b-iii: channel affordance -- evidence dots + book squares read as tappable
   (cursor only; the existing tooltip is the hover treatment -- no new visuals). */
.arc-detail-web-view [data-st-mark],
.arc-detail-web-view [data-st-book-id] {
  cursor: pointer;
}

/* 9b-iv: celestial drift (verbatim from praxis-arcs-9b-motion-demo-v3). Pure
   translate, GPU-friendly, center-origin, ease-in-out, infinite -- four
   hash-stable wander paths, each returning to (0,0) at 0%/100%. NO opacity or
   filter animation anywhere (twinkle is cancelled). Translate px = viewBox
   user units; the amplitudes are small bounded wanders. ALL drift rules are
   scoped under .arc-detail-web-view so the home embed wrapper stays inert. */
@keyframes wanderA { 0% { transform: translate(0, 0); } 25% { transform: translate(12px, -8px); } 50% { transform: translate(5px, -17px); } 75% { transform: translate(-9px, -6px); } 100% { transform: translate(0, 0); } }
@keyframes wanderB { 0% { transform: translate(0, 0); } 25% { transform: translate(-10px, 10px); } 50% { transform: translate(-16px, -4px); } 75% { transform: translate(-4px, 12px); } 100% { transform: translate(0, 0); } }
@keyframes wanderC { 0% { transform: translate(0, 0); } 25% { transform: translate(9px, 12px); } 50% { transform: translate(16px, 2px); } 75% { transform: translate(6px, -10px); } 100% { transform: translate(0, 0); } }
@keyframes wanderD { 0% { transform: translate(0, 0); } 25% { transform: translate(-7px, -12px); } 50% { transform: translate(4px, -16px); } 75% { transform: translate(13px, -5px); } 100% { transform: translate(0, 0); } }
.arc-detail-web-view .st-drift {
  /* R63: belt-and-suspenders center origin (inert for pure translate, demo
     parity + future-proofing). */
  transform-box: fill-box;
  transform-origin: center;
}
.arc-detail-web-view .st-drift[data-st-drift="A"] { animation: wanderA 11.5s ease-in-out infinite; }
.arc-detail-web-view .st-drift[data-st-drift="B"] { animation: wanderB 14s ease-in-out infinite; animation-delay: -5s; }
.arc-detail-web-view .st-drift[data-st-drift="C"] { animation: wanderC 12.5s ease-in-out infinite; animation-delay: -9s; }
.arc-detail-web-view .st-drift[data-st-drift="D"] { animation: wanderD 15s ease-in-out infinite; animation-delay: -3s; }

@media (prefers-reduced-motion: reduce) {
  .arc-detail-web-view .st-layer-books,
  .arc-detail-web-view .st-layer-dots,
  .arc-detail-web-view .st-layer-faint {
    transition: none;
  }
  /* 9b-iv: drift off under reduced-motion -- marks sit still. */
  .arc-detail-web-view .st-drift {
    animation: none;
  }
}

/* Stage 5.4 Stage 1f: transitional placeholder line shown inside the
   empty web container until Stage 2 draws the spine. Mirrors the
   .arc-detail-empty-body precedent (components.css:2580-2588): same
   margin / padding / italic / --ink-3 / centered text. font-family +
   font-size from the precedent are inheritable defaults and dropped. */
.arc-detail-web-placeholder {
  margin: 48px 0;
  padding: var(--sp-6) var(--sp-4);
  color: var(--ink-3);
  font-style: italic;
  text-align: center;
}


/* ===== STAGE 8.1B -- CONSTELLATION INTERACTION TOOLTIP =====
   Read-only hover tooltip for the arc constellation (desktop only;
   _arcConstellationAttachInteractions suppresses it on touch). The
   container .arc-detail-web-view is already position:relative (Stage
   5.4 1e, above), which is the positioning context the JS relies on --
   no re-declaration needed. Background uses --surface-2 (the warm
   off-white; brief's --parchment-2 does not exist -- Stage 0 item 7).
   Fonts use the --font-* tokens per house convention, not the brief's
   hardcoded family names. The --reduced-motion modifier kills the fade
   (set by JS from matchMedia; no @media block).
   ============================================================ */

.arc-tooltip {
  position: absolute;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  padding: 8px 12px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
  max-width: 240px;
  z-index: 50;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-2);
}

.arc-tooltip--visible { opacity: 1; }

.arc-tooltip--reduced-motion { transition: none; }

.arc-tooltip-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}

.arc-tooltip-meta {
  font-size: 12px;
  color: var(--ink-3);
}

.arc-tooltip-affordance {
  font-size: 12px;
  color: var(--gold);
  margin-top: 4px;
}

.arc-detail-web-view [data-book-id],
.arc-detail-web-view [data-marginalia-book-id] {
  cursor: pointer;
}

/* ARC STANDARD F3 (2026-07-23): the sub-theory hover card + all its rules are
   REMOVED — the ghost was killed in S-FELT (no JS ever creates .st-hover-card
   now). Its jobs re-seat with touch parity (tap = approach; composer; workshop
   connections / foot). Dead .st-hover-card / -title / -meta / -affordance /
   -foot / -link / -link-danger rules excised (reviewer residual). */

/* Stage 9.6c.4: Connect mode. The armed Connect button reads in resonance
   tan (--thread-color) to distinguish it from the gold marginalia toggle;
   the canvas shows a crosshair "pick two" affordance; a selected shape glows
   tan. All token-only, no new palette -- edges + selection share the same
   --thread-color the resonance edges use. */
.arc-detail-toggle-btn.is-connecting {
  background: var(--thread-color);
  color: var(--surface-2);
  border-color: var(--thread-color);
}

.st-canvas--connecting { cursor: crosshair; }

.st-shape--connect-selected {
  filter: drop-shadow(0 0 6px var(--thread-color));
}


/* ===== STAGE 8.1C -- CONSTELLATION KEYBOARD FOCUS RING =====
   Matches the house focus convention (components.css:2239-2268):
   :focus-visible (not :focus, so mouse-click leaves no stuck ring),
   outline (not box-shadow), 2px solid --river, outline-offset 2px.
   The brief specified :focus + --gold + 3px; overridden to the house
   standard on purpose -- the Yumi-toggle --gold exception is for
   floating-element contrast, not the page norm. The non-:focus-visible
   rule clears the UA default ring on these now-focusable SVG elements.
   ============================================================ */

.arc-detail-web-view [data-book-id],
.arc-detail-web-view [data-thread-a],
.arc-detail-web-view [data-marginalia-book-id],
.arc-detail-web-view [data-yumi-cluster],
.arc-detail-web-view [data-question] {
  outline: none;
}

.arc-detail-web-view [data-book-id]:focus-visible,
.arc-detail-web-view [data-thread-a]:focus-visible,
.arc-detail-web-view [data-marginalia-book-id]:focus-visible,
.arc-detail-web-view [data-yumi-cluster]:focus-visible,
.arc-detail-web-view [data-question]:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}


/* ===== STAGE 5.4 STAGE 2a -- ARC-WEB BOOK NODE PRIMITIVE =====
   Mirrors .shelf-book-cover-area pattern (components.css:1089-1110)
   at smaller scale. Surface-isolated from .shelf-book-* by class --
   no cascade overrides. Stage 2b positions; Stage 2a only styles.
   ============================================================ */

.arc-web-book-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* No width set here -- Stage 2b will constrain via positioning context. */
}

.arc-web-book-node-cover-area {
  width: 80px;
  height: var(--arc-web-node-cover-height);
  margin-bottom: var(--sp-2);
  background: var(--color-surface);
  overflow: hidden;
}

.arc-web-book-node-cover,
.arc-web-book-node-cover-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.arc-web-book-node-cover {
  object-fit: contain;
  object-position: center bottom;
}

.arc-web-book-node-title {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  text-align: center;
  max-width: 100px;
  line-height: 1.3;
}

/* ===== SUB-THEORY WRITING SURFACE -- Stage 9.2 =====
   Two-column writing surface: the prose column (.subtheory-main) on the
   left, the evidence rail (.subtheory-rail, populated in 9.2 Checkpoint
   C) on the right. Collapses to a single column at the 720px breakpoint
   used elsewhere in this file. The header input borrows Cormorant
   Garamond (--font-serif) to read as a page title; the body fields reuse
   .notebook-editor-body and the section labels reuse
   .book-detail-tradition-label. */
.subtheory-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

.subtheory-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  align-items: start;
}

.subtheory-main {
  min-width: 0;
}

.subtheory-rail {
  align-self: start;
}

.subtheory-header-input {
  display: block;
  width: 100%;
  margin-bottom: 24px;
  padding: 8px 0;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
  background: transparent;
  border: none;
  /* S6.2: plain serif title at rest (mockup) -- the 1px reserves the
     row so focus/hover doesn't shift layout, but stays transparent
     until the field is engaged. */
  border-bottom: 1px solid transparent;
}

.subtheory-header-input:hover {
  border-bottom-color: var(--border);
}

.subtheory-header-input:focus {
  outline: none;
  border-bottom-color: var(--ink-3);
}

.subtheory-intellectual {
  margin-top: 24px;
}

/* Batch 3B: segmented PUBLIC | INTELLECTUAL register toggle -- a pill of
   two mono-uppercase tabs; the active tab gets the --wash ground. */
.subtheory-register-toggle {
  display: inline-flex;
  margin-top: 8px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.subtheory-register-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
}

.subtheory-register-tab-active {
  background: var(--wash);
  color: var(--ink);
}

/* 10.5.6: the register pill, the Write|Preview pill, and the Published toggle
   share one row; the Write|Preview pill sits to the register pill's right. The
   row wraps gracefully on narrow widths. */
.subtheory-toggles-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 20px;
}
.subtheory-toggles-row .subtheory-register-toggle,
.subtheory-toggles-row .subtheory-preview-toggle {
  margin-top: 0;
  margin-bottom: 0;
}
/* The Published toggle drops the bottom-margin it carried as a block element. */
.subtheory-wp-toggle {
  margin: 0;
}

/* Register textareas read like prose -- serif, larger, generous leading
   over the inherited quiet --border -- so the surface feels like writing,
   not a form field. */
.subtheory-register-body {
  /* S6.2: override the base .notebook-editor-body form chrome so this
     reads as a borderless writing surface (mockup .read) -- no box, no
     fill, no resize grip; prose aligns flush to the column's left edge. */
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  width: 100%;
  min-height: 40vh;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  resize: none;
}

/* ----- 10.2 citation preview + marks (var() tokens only) -----
   A read-only echo of the active register: same serif prose metrics as the
   textarea but muted, set off by a quiet left rule. white-space:pre-wrap
   preserves the author's line breaks. An empty pane is 0-height so the rule
   does not show. */
.subtheory-cite-preview {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-3);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 10.5.4 coach line: a quiet teaching prompt shown in a preview pane while it
   holds no resolved citation; removed by renderCitationPreview once one exists. */
.subtheory-cite-coach {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}

/* A resolved citation: italic (authored in *asterisks*) plus the underline-dot
   indicator the spec calls for. */
.subtheory-cite {
  font-style: italic;
  border-bottom: 1px dotted var(--gold);
  cursor: default;
}

/* Ambiguous (>1 candidate): a quieter dotted rule + a context-menu cursor
   hinting the right-click / long-press chooser. */
.subtheory-cite-ambiguous {
  border-bottom-color: var(--ink-4);
  cursor: context-menu;
}

/* The disambiguation chooser is the arc-picker panel floated as a popover
   (position/z-index set inline by openCiteChooser); just cap its width. */
.subtheory-cite-chooser {
  max-width: 260px;
}

/* ----- 10.4 read-only render + preview toggle (var() tokens only) ----- */
.subtheory-preview-toggle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  margin-bottom: 16px;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.subtheory-preview-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-4);
}

.subtheory-readonly-header {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 20px 0;
}
/* R-ARC S3B-POLISH (FF-5): a basin's provisional identity on the Page -- the quoted
   origin phrase drops the display-serif header treatment (italic, normal, smaller,
   muted), so an unnamed basin never reads as a named/finished title. */
.subtheory-readonly-header.subtheory-readonly-header-basin {
  font-size: 19px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-2);
}
.subtheory-readonly-body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.subtheory-cite-num {
  font-size: 0.7em;
  color: var(--gold);
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}
.subtheory-readonly-evidence {
  margin: 28px 0 0 0;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
}
.subtheory-readonly-evidence-item {
  margin-bottom: 14px;
}
.subtheory-readonly-cite-line {
  color: var(--ink);
}
.subtheory-readonly-quote {
  margin: 4px 0 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  font-style: italic;
  color: var(--ink-3);
}
.subtheory-readonly-annotation {
  margin-top: 4px;
  color: var(--ink-3);
}
.subtheory-readonly-seealso {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.subtheory-readonly-seealso-item {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

/* Editing-rail tag marking a private/missing-entry evidence row that the
   published render drops. Muted, small. */
.subtheory-attached-private-tag {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Evidence rail (Checkpoint C). Transparent on desktop -- dissolves
   into the page like .shelf-sidebar; becomes a surface-filled bottom
   sheet on mobile (the @media block below). */
.subtheory-rail-title {
  /* S6.1: mono-caps section label (mirrors .eyebrow / shelf rail headers),
     dropping the serif so the rail header reads as a quiet label, not a title. */
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.subtheory-rail-section + .subtheory-rail-section {
  margin-top: 28px;
}

.subtheory-source-list {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 12px;
  /* S6.1: quiet the native scrollbar -- a thin --ink-4 thumb on a
     transparent track instead of the chunky OS bar. */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}

.subtheory-source-list::-webkit-scrollbar {
  width: 6px;
}

.subtheory-source-list::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 3px;
}

.subtheory-source-list::-webkit-scrollbar-track {
  background: transparent;
}

.subtheory-source-row {
  padding: 10px 0;
}

.subtheory-source-row + .subtheory-source-row {
  border-top: 1px solid var(--border);
}

.subtheory-source-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.subtheory-source-label {
  /* S6.4: picker rows are available-to-attach, NOT gathered -- the
     hollow teal ring (a vestigial Batch-3 .rail-it treatment) is removed
     so the gathered ring means ATTACHED evidence only. The label is now
     a plain serif title; min-width:0 keeps it shrinkable in the flex head. */
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
}

.subtheory-source-attach {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--river);
  white-space: nowrap;
  cursor: pointer;
}

.subtheory-source-attach:hover {
  color: var(--ink);
}

/* S6.2: quiet the "Add external source" affordance from a bordered
   secondary button to a link matching .subtheory-source-attach. Scoped
   to .subtheory-external-toggle so the shared .notebook-editor-cancel
   (notebook + attach-editor Cancel buttons) is untouched; this rule
   sits after .notebook-editor-cancel so it wins on source order. */
.subtheory-external-toggle {
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--river);
  cursor: pointer;
}

.subtheory-external-toggle:hover {
  color: var(--ink);
}

/* S6.2: rail section labels -> .eyebrow scale (DM Mono 10.5 / .16em).
   Scoped to .subtheory-rail so the book-detail .book-detail-tradition-label
   (a different surface) keeps its own size. */
.subtheory-rail .book-detail-tradition-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
}

.subtheory-attach-editor,
.subtheory-external-form {
  margin-top: 12px;
}

.subtheory-source-empty,
.subtheory-attached-empty {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}

.subtheory-attached-list {
  margin-top: 12px;
}

.subtheory-attached-row {
  /* S6: flex head so the gathered ring seats inline before a body that
     still stacks label + optional quote/annotation (mockup .rail-it). */
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  /* S6.3: per-row bottom hairline (mockup .rail-it), last row none. */
  border-bottom: 1px solid var(--border);
}

.subtheory-attached-row:last-child {
  border-bottom: 0;
}

/* S6.3: "+ Attach a book" -- the S2-conformed secondary button (.gl),
   full-width + centered, gating the picker below it (mockup rail). */
.subtheory-attach-book {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--glass-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
}

/* S6.3: the from-this-arc + external-source picker, collapsed by default;
   the attach button flips .open via a local classList toggle (no
   re-render -- preserves un-blurred prose). */
.subtheory-picker-wrap {
  display: none;
  margin-top: 14px;
}

.subtheory-picker-wrap.open {
  display: block;
}

/* S6: gathered ring -- hollow 2px teal circle (constellation gathered
   token). No filled "incorporated" variant (no data until Stage 10). */
.subtheory-attached-ring {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 2px solid var(--marginalia-color);
  border-radius: 50%;
  background: transparent;
}

.subtheory-attached-body {
  flex: 1;
  min-width: 0;
}

.subtheory-attached-label {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
}

.subtheory-attached-quote {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
}

.subtheory-attached-annotation {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}

/* 10.5.9: the rail's Cite action is an <a> -- without a rule it would render
   as a default blue underlined link. Quiet it to match .subtheory-source-attach
   (the rail's other action affordance): muted --river, no underline, hover -> ink. */
.subtheory-attached-cite {
  display: inline-block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--river);
  text-decoration: none;
  cursor: pointer;
}
.subtheory-attached-cite:hover {
  color: var(--ink);
  text-decoration: none;
}

/* Mobile bottom-sheet chrome -- hidden on desktop, revealed in the
   720px block below. */
.subtheory-rail-toggle,
.subtheory-rail-close,
.subtheory-rail-backdrop {
  display: none;
}

@media (max-width: 720px) {
  .subtheory-layout {
    grid-template-columns: 1fr;
  }

  /* Evidence button: top of the prose column, opens the bottom sheet. */
  .subtheory-rail-toggle {
    display: inline-block;
    margin-bottom: 24px;
  }

  /* Rail hidden by default; reopens as a fixed bottom sheet. Mirrors
     the shelf mobile filter panel (.shelf-sidebar-mobile-open) but
     anchored to the bottom edge. */
  .subtheory-rail {
    display: none;
  }

  .subtheory-rail.subtheory-rail-mobile-open {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 70vh;
    margin: 0;
    /* B-M-SA: the sheet is fixed to bottom:0, so its bottom padding must clear the
       home-indicator band on a standalone PWA (viewport-fit=cover). env() is 0 in a
       tab / on non-notched devices, so this is a no-op there. */
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    background: var(--color-surface);
    border-top: 1px solid var(--border);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    z-index: 100;
  }

  .subtheory-rail-backdrop.subtheory-rail-backdrop-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--scrim);
    z-index: 99;
  }

  .subtheory-rail-close {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
  }

  .subtheory-rail-close:hover {
    color: var(--ink);
  }
}
/* ===== END SUB-THEORY WRITING SURFACE ===== */


/* ===== ACCOUNT PAGE -- Stage 14.3.4.1 =====
   Styling pass for the #account surface (account renderer DELETED in the S-B
   sweep 2026-08-08 — these .account-* rules are now ORPHANED dead CSS, ledgered
   for a dedicated CSS-dead-sweep; see docs/checkpoints/sb-sweep-debt-table.md). Inputs
   mirror the .shelf-editor-*-input field pattern; the delete affordance
   reuses the --br-deep danger fill of .arc-confirm-confirm. CSS variables
   only for color; layout dims in px/rem. The h1 stays Cormorant
   (--font-serif), body copy DM Sans (--font-body). The delete-confirm
   panel reuses the existing .arc-confirm-* rules (the extra
   .account-confirm-panel class is a styling hook, no rule needed). */

.account {
  /* S7d capped at 620; #8 Stage 3 widens to 800 for the constellation. */
  max-width: 800px;
  margin: 0 auto;
  /* #8 v3.105: airier outer padding (was 48 0 64 0). */
  padding: 56px 0 72px 0;
}

.account-header {
  padding: 0 0 24px 0;
}

.account-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 40px;
  /* S7d: match the mockup .h-pg (500 / lh 1). */
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.account-signin-copy {
  margin: 0 0 16px 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* S7d: scoped override for the "Signed in as <email>" line only (mockup
   mono signed-in line). The shared .account-signin-copy base above still
   governs the sign-in prompt copy, which keeps the body treatment. */
.account-email-line {
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Stacked content blocks with vertical rhythm between them. */
.account-block {
  /* #8 v3.105: airier inter-section rhythm (was 32px). */
  margin: 0 0 40px 0;
}

/* Each label sits on its own line above its input -- no side-by-side
   collision between the Display name and Pen name fields. */
.account-field-label {
  display: block;
  margin: 0 0 6px 0;
  /* Batch 3: mono-uppercase field label (mockup .field label). */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Muted helper text under the Pen name label ("Publish as ..."). */
.account-field-hint {
  margin: 0 0 8px 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
}

/* Single-line text input -- mirrors .shelf-editor-*-input, width capped
   so the field does not run the full page measure. */
.account-field-input {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: 0 0 20px 0;
  /* S7d: conform to the mockup .field input -- recessed .06 fill, 15px,
     11x14 padding, --radius-md (no hardcoded radius). */
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: rgba(58,40,16,.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.account-field-input:hover {
  border-color: var(--ink-3);
}

.account-field-input:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-color: var(--ink-3);
}

/* Inline "Saved" confirmation beside the Save profile button. */
.account-save-note {
  margin-left: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
}

/* Account buttons share the dark-fill primary treatment of the editor
   Save CTAs. Scoped under .account so the bare .notebook-new-entry
   elsewhere (intentionally unstyled, separate ticket) stays untouched. */
.account .notebook-new-entry {
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--ink);
  color: var(--text-on-dark);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.account .notebook-new-entry:hover {
  background: var(--br-deep);
}

/* Export + Sign out as a secondary row with horizontal rhythm. */
.account-actions {
  display: flex;
  gap: 12px;
}

/* Batch 3: Save = gradient primary; Export/Sign out = secondary
   (transparent + --line-2 -- buttons stay opaque, glass is nav-only). */
.account .account-save-btn {
  font-weight: 600;
  background: var(--grad);
  color: var(--text-on-dark);
  border: 1px solid transparent;
}
.account .account-save-btn:hover {
  background: var(--grad);
  filter: brightness(1.06);
}

.account .account-secondary-btn {
  background: var(--glass-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.account .account-secondary-btn:hover {
  background: var(--glass-2);
  color: var(--ink);
  border-color: var(--ink-3);
}

/* Batch 3: danger zone -- .dz dashed danger frame + faint danger wash. */
.account-danger {
  margin-top: 8px;
}
/* #8 Stage 4c: solid card with a red accent (the .account-card frame +
   danger border + faint danger tint) -- replaces the old dashed box. */
.account-card.account-danger {
  border-color: var(--danger-line);
  background: color-mix(in srgb, var(--danger) 6%, var(--surface-2));
}

/* S7d: "Danger zone" label (mockup .dz .dl) above the Delete button. */
.account-danger-label {
  margin: 0 0 10px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--danger);
}

/* Batch 3 / G4: delete button = clay danger -- transparent + danger outline +
   danger text. (Re-scoped from the stale `.notebook-new-entry.account-delete-btn`
   that never matched the live `btn btn-ghost account-delete-btn`, so the danger
   styling now actually applies -- aligns to the v6 mockup's clay delete link.) */
.account .account-delete-btn {
  background: transparent;
  border: 1px solid var(--danger-line);
  color: var(--danger);
}
.account .account-delete-btn:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* ===== #8 STAGE 1 -- ACCOUNT HUB FRAME =====
   Hub shell deepening the S7d form: hero, an empty constellation slot
   (Stage 3), four stat cards, an empty expand-panel host (Stage 2). The
   cards + slot are token-built surfaces (no .card class exists):
   --surface-2 fill + --radius-md + --shadow-1 + --border. CSS variables
   only -- zero hardcoded hex. */

.account-hero {
  padding: 0 0 24px 0;
}

/* Display name as the hero heading -- Cormorant, replacing the static
   "Account" h1 of the S7d form. */
.account-hero-name {
  margin: 0 0 4px 0;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
}

/* Four stat cards in a row (mockup COUNTS = grid repeat(4,1fr); the <760 block
   below steps it down to 2-up). Desktop-first base per canon §3. */
.account-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin: 0 0 40px 0;
}

/* One stat card -- token-built surface; clickable affordance (cursor +
   hover lift) but INERT this stage (no handler until Stage 2). */
.account-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: box-shadow var(--motion-base) var(--ease),
              transform var(--motion-base) var(--ease);
}

.account-stat:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* The count -- Cormorant numeral, large. Stage 6: 34 -> 38px (mockup .stat .n). */
.account-stat-value {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

/* Stage 6 (mockup-fidelity): label + caret on one row, justified apart
   (mockup .stat .l); the row carries the top margin. */
.account-stat-labelrow {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The label -- mono uppercase. Stage 6: color --ink-3 -> --gold (mockup .eyebrow). */
.account-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Empty expand-panel host -- no visible chrome until Stage 2 mounts a
   panel into it; only holds flow position + bottom rhythm. */
.account-expand-host {
  margin: 0 0 40px 0;
}

/* ===== #8 STAGE 2 -- ACCOUNT HUB EXPAND-IN-PLACE =====
   The one inline panel under the stat cards. Rows REUSE the app's own
   renderers (.shelf-book-row / .notebook-arc-row / .notebook-entry) plus the
   composed .account-sub-row (mark glyph + label). var() tokens only, zero
   hardcoded hex. */

/* Active stat card -- the open category reads as pressed. */
.account-stat-active {
  /* #8 v3.105: teal active ring (was --gold). */
  border-color: var(--marginalia-color);
  box-shadow: var(--shadow-2);
}

/* The opened panel: a token surface stacking the reused rows. */
/* #8 v3.105: panel entrance. The host swaps innerHTML on open, so the panel
   element is created fresh on each open -- a CSS animation (not a transition,
   which would need a pre-existing element to change state) runs on insertion. */
@keyframes account-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.account-expand-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  animation: account-panel-in 0.24s var(--ease) both;
}

/* #8 v3.105: unified account-panel rows. The account-only renderers
   (_accountSubTheoryRow / _accountArcRow / _accountMarginaliaRow) emit
   .account-row; the SHARED .shelf-book-row (renderShelfBookRow, untouched at
   source) is restyled here ACCOUNT-SCOPED only. Top-border dividers, italic-
   serif titles, mono/faint subtitles, a teal "open ->" -- tokens only. */
.account-expand-panel .account-row,
.account-expand-panel .shelf-book-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  border-bottom: none;
  text-decoration: none;
  color: var(--ink);
}
.account-expand-panel a.account-row:hover,
.account-expand-panel .shelf-book-row:hover {
  background: var(--wash);
}
.account-row-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: block;
}
.account-row-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-expand-panel .account-row-title,
.account-expand-panel .shelf-book-row-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-row-sub,
.account-expand-panel .shelf-book-row-author {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-row-open {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--marginalia-color);
}

/* Quiet tail link ("+N more ->" / "See all in Notebook ->"). */
.account-expand-more {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  /* #8 v3.105: teal interactive (was --gold-text). */
  color: var(--marginalia-color);
  text-decoration: none;
}
.account-expand-more:hover {
  text-decoration: underline;
}

/* Empty state -- muted italic. */
.account-expand-empty {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-3);
}

/* #8 v3.105: read-only marginalia rows now use the unified .account-row* rules
   above (snippet as the italic-serif title, "from <book>" as the subtitle). */

/* ===== #8 STAGE 4a -- ACCOUNT HUB PRESENTATION PASS =====
   Hero + "your data" reframed as cards (the shared token recipe from
   .account-stat / .account-expand-panel), a hero gradient avatar, section
   eyebrows, covenant + danger copy. var() tokens only, zero new hex. */

/* Shared card frame -- same recipe as .account-stat / .account-expand-panel. */
.account-card {
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* #8 v3.105: frosted -- translucent wheat (color-mix on the existing
     --surface-2 token, NO new hex) over the global page ground + a soft blur.
     The page background stays GLOBAL (body::before); this only lets it show
     through the card. */
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  /* UMBER / canon §4-A: account card is SOLID -- blur removed. */
  box-shadow: var(--shadow-1);
}

/* Portrait body cards -> mockup .card radius (17px). Nearest token is
   --radius-lg (16px); the 1px gap is sub-perceptual and deliberately NOT a new
   token. Additive, .account-scoped, anti-bleed (portrait-/values- prefixed). */
.account .account-values-card,
.account .portrait-field-wrap,
.account .portrait-galaxy-wrap,
.account .portrait-returns,
.account .portrait-threads,
.account .portrait-journey,
.account .portrait-capstone {
  border-radius: var(--radius-lg);
}

/* Signed-in hero card: gradient avatar left, text column right. Scoped to the
   card variant so the signed-out .account-hero keeps its plain stacked layout. */
.account-hero.account-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 40px 0;
}
.account-hero-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hero avatar -- the nav gradient-circle recipe (.app-nav-profile) at hero size. */
.account-hero-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: var(--grad);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
}

/* Section eyebrows above the constellation slot + stat cards (direct children
   of .account). The hero/data eyebrows are nested, so they are unaffected. */
.account > .eyebrow {
  margin: 0 0 10px 0;
}

/* =====================================================================
   PORTRAIT -- VALUES "stones" (Stage 1). Ported from
   praxis-portrait-mockup-v6-instrument.html (VALUES section), var-remapped to
   canonical Praxis Umber DARK tokens (Option A) and SCOPED under .account so the
   generic mockup class names (.stones / .stone / .stone-add / .stone-input)
   never bleed onto other surfaces. Geometry/spacing ported 1:1 as px literals.
   The card reuses .account-card; the eyebrow reuses .eyebrow with gold restored
   (base .eyebrow is --ink-3) to match the mockup's gold section eyebrows. The
   inset stone highlight is token-derived (--text-on-dark) rather than a white
   literal, per the no-new-hex rule. */
.account .account-values {
  margin-top: 30px;
}
.account .account-values-eyebrow {
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 11px 0;
}
.account .account-values-eyebrow .hint {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  color: var(--ink-4);
  font-weight: 400;
  margin-left: 8px;
}
.account .stones {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  padding: 20px 22px;
}
.account .stone {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--gold) 16%, transparent),
    color-mix(in srgb, var(--gold) 5%, transparent));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-on-dark) 6%, transparent);
  transition: transform .14s;
}
.account .stone:hover {
  transform: translateY(-1px);
}
.account .stone .rm {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-4);
  margin-left: 9px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s;
}
.account .stone:hover .rm {
  opacity: .8;
}
.account .stone-add {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--gold);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--gold);
  background: transparent;
  cursor: pointer;
}
.account .stone-add:hover {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.account .stone-input {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  outline: none;
  width: 200px;
}
.account .account-values-note {
  padding: 0 22px 18px;
  font-size: 12.5px;
  color: var(--ink-4);
  font-style: italic;
  font-family: var(--font-serif);
}

/* =====================================================================
   PORTRAIT -- Revealed self (Stage 2): shared toggle + FIELD + GALAXY.
   Ported from the v6 mockup, var-remapped to Umber dark tokens (Option A),
   every rule SCOPED under .account (anti-bleed). The mockup's generic
   .field / .seg / .bloom names collide globally, so all portrait elements are
   portrait- prefixed. Geometry/spacing ported 1:1 as px literals; JS-built
   inline star/bloom colors use var() + color-mix (no hardcoded hex). */

/* movement divider + shared toggle */
.account .account-revealed {
  margin-top: 42px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.account .account-portrait-sec {
  margin-top: 30px;
}
.account .portrait-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.account .portrait-by {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.account .portrait-seg {
  display: inline-flex;
  background: color-mix(in srgb, var(--sunk-d) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.account .portrait-seg button {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 17px;
  border-radius: var(--radius-pill);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .18s, background .18s;
}
.account .portrait-seg button.on {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--gold) 24%, transparent),
    color-mix(in srgb, var(--gold) 8%, transparent));
  color: var(--ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-on-dark) 6%, transparent);
}

/* FIELD */
.account .portrait-field-wrap {
  padding: 8px;
  position: relative;
}
.account .portrait-field-help {
  font-size: 12.5px;
  color: var(--ink-4);
  padding: 2px 14px 12px;
}
.account .portrait-field {
  position: relative;
  width: 100%;
  height: 330px;
}
.account .portrait-field-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.account .portrait-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .32;
  pointer-events: none;
}
.account .portrait-pole {
  position: absolute;
  transform: translate(-50%,-50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 6px var(--scrim);
}
.account .portrait-pole.dim {
  color: var(--ink-2);
  font-size: 15px;
}
.account .portrait-tlabel {
  position: absolute;
  transform: translate(-50%,-50%);
  cursor: pointer;
  z-index: 3;
  width: 22px;
  height: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  background: color-mix(in srgb, var(--sunk-d) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 50%;
}
.account .portrait-tlabel:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.account .portrait-treadout {
  margin: 6px 12px 14px;
}
.account .portrait-tension-card {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.42;
  color: var(--ink);
  padding: 16px 18px;
  border-left: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  border-radius: 0 12px 12px 0;
}
.account .portrait-tension-card .q {
  font-style: italic;
}
.account .portrait-tension-card .sub {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 8px;
}

/* GALAXY */
.account .portrait-galaxy-wrap {
  padding: 18px 20px;
}
.account .portrait-galaxy-help {
  font-size: 12.5px;
  color: var(--ink-4);
  margin-bottom: 14px;
}
.account .portrait-galaxy-help b {
  color: var(--gold);
  font-weight: 500;
}
.account .portrait-galaxy {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Deep-space well: deepened toward near-black via --br-deep (mockup center
     #1b1207 ≈ --br-deep #1c1209), replacing the lighter --surface-d-tinted
     center so the panel reads as space, not brown. Token-only. */
  background: radial-gradient(ellipse 92% 82% at 50% 44%,
    color-mix(in srgb, var(--br-deep) 70%, var(--sunk-d)) 0%,
    var(--br-deep) 62%,
    var(--scrim) 100%);
  box-shadow: inset 0 0 60px var(--scrim);
}
.account .portrait-bonds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.account .portrait-bonds path {
  opacity: 0;
  transition: opacity .3s;
}
.account .portrait-bonds path.show {
  opacity: .75;
}
.account .portrait-galaxy .speck {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.account .portrait-star {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  /* G5: richer one-time settle (drift 1.4s->1.9s, scale-in .9s->1.2s, deeper
     start scale 0.25->0.12 in JS) -- settles to REST, no perpetual motion;
     reduced-motion still seeds final positions instantly (media query below). */
  transition: left 1.9s cubic-bezier(.22,.61,.36,1), top 1.9s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1), opacity .6s, box-shadow .25s, filter .25s;
}
.account .portrait-star .nm {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-2);
  text-shadow: 0 1px 5px var(--scrim);
  pointer-events: none;
}
.account .portrait-star .ct {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .06em;
  color: var(--gold);
  opacity: 0;
  transition: opacity .2s;
  text-align: center;
  margin-top: 2px;
}
.account .portrait-galaxy.dim .portrait-star {
  opacity: .22;
  filter: saturate(.5);
}
.account .portrait-star.hi {
  opacity: 1 !important;
  filter: none !important;
  z-index: 5;
}
.account .portrait-star.hi .ct {
  opacity: .85;
}
.account .portrait-galaxy-readout {
  min-height: 22px;
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  font-style: italic;
}
.account .portrait-galaxy-readout .where {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11.5px;
  color: var(--gold);
  letter-spacing: .04em;
  margin-left: 8px;
}

/* G5: no-bond invitation -- a faint italic line inside the galaxy well, shown
   only when there are stars but zero bonds (stars stand on their own). */
.account .portrait-galaxy-invite {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 86%;
  max-width: 420px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-4);
  text-shadow: 0 1px 6px var(--scrim);
  pointer-events: none;
}

/* empty states (sparse / no data) */
.account .portrait-empty {
  padding: 28px 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-4);
  text-align: center;
}

/* reduced motion: stars settle to final positions, no drift (scoped). */
@media (prefers-reduced-motion: reduce) {
  .account .portrait-star { transition: none !important; }
}

/* =====================================================================
   PORTRAIT -- Categorize-as-dialogue + returns + threads (Stage 3).
   Ported from the v6 mockup (dialogue/returns/threads CSS), var-remapped to
   Umber dark tokens (Option A), all rules .account-scoped + portrait-prefixed.
   Offers reuse .account-card for the frame; geometry ported 1:1. */

/* dialogue */
.account .portrait-offer {
  padding: 18px 22px;
  margin-top: 13px;
}
.account .portrait-offer .body {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-2);
}
.account .portrait-offer .body em {
  font-style: italic;
  color: var(--ink);
}
.account .portrait-yumi-says {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.account .portrait-yumi-says .pre {
  font-size: 12.5px;
  color: var(--ink-4);
}
.account .portrait-proposed {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--gold);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
}
.account .portrait-acts {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.account .portrait-chip {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text-on-dark) 4%, transparent);
  color: var(--ink-2);
}
.account .portrait-chip:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.account .portrait-chip.yes {
  border-color: color-mix(in srgb, var(--teal) 50%, transparent);
  color: var(--teal);
}
.account .portrait-chip.no {
  color: var(--ink-4);
}
.account .portrait-offer.confirmed {
  border-color: color-mix(in srgb, var(--teal) 32%, transparent);
}
.account .portrait-yours {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
}
.account .portrait-yours b {
  color: var(--teal);
  font-weight: 600;
}
.account .portrait-offer-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-left: 8px;
}
.account .portrait-rename-in {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  outline: none;
  width: 240px;
}
.account .portrait-holding {
  font-size: 12.5px;
  color: var(--ink-4);
  padding: 14px 4px 2px;
  font-style: italic;
  font-family: var(--font-serif);
}
.account .portrait-suggest {
  font-style: normal;
  color: var(--gold);
  cursor: pointer;
}
.account .portrait-suggest:hover {
  text-decoration: underline;
}

/* returns */
.account .portrait-returns {
  padding: 18px 22px;
}
.account .portrait-ret-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--wash);
}
.account .portrait-ret-row:first-of-type {
  border-top: 0;
}
.account .portrait-ret-row .ph {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  flex: 1;
}
.account .portrait-ret-row .ph em {
  font-style: italic;
}
.account .portrait-ret-row .ct {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gold);
  white-space: nowrap;
}
.account .portrait-ret-help {
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 14px;
  font-style: italic;
  font-family: var(--font-serif);
}

/* threads */
.account .portrait-threads {
  padding: 20px 22px;
  margin-top: 13px;
  border-color: color-mix(in srgb, var(--journal-color) 28%, transparent);
}
.account .portrait-threads-ti {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.account .portrait-threads-ti .sig {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--journal-color);
  font-size: 24px;
}
.account .portrait-threads-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 10px;
  max-width: 62ch;
}
.account .portrait-toggle {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  cursor: pointer;
  user-select: none;
}
.account .portrait-switch {
  width: 42px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-on-dark) 8%, transparent);
  border: 1px solid var(--border);
  position: relative;
  transition: background .2s, border-color .2s;
}
.account .portrait-switch .portrait-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: left .2s, background .2s;
}
.account .portrait-toggle.on .portrait-switch {
  background: color-mix(in srgb, var(--journal-color) 30%, transparent);
  border-color: var(--journal-color);
}
.account .portrait-toggle.on .portrait-switch .portrait-knob {
  left: 20px;
  background: var(--journal-color);
}
.account .portrait-toggle-lbl {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--gold);
}
.account .portrait-toggle.on .portrait-toggle-lbl {
  color: var(--journal-color);
}
.account .portrait-named {
  margin-top: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
}
.account .portrait-named.show {
  max-height: 420px;
  opacity: 1;
}
.account .portrait-thread-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--wash);
}
.account .portrait-thread-row .body {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.3;
}
.account .portrait-thread-row .body .s {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 3px;
}

/* reduced motion: the threads reveal settles instant (scoped). */
@media (prefers-reduced-motion: reduce) {
  .account .portrait-named { transition: none !important; }
}

/* =====================================================================
   PORTRAIT -- Reading JOURNEY (Stage 4). Ported from the v6 mockup (.journey /
   .season), var-remapped to Umber dark tokens, .account-scoped + portrait-
   prefixed. The timeline-node ::before ring uses --ground (the dark page behind
   the translucent card) in place of the mockup's --bg-mid. No streaks. */
.account .portrait-journey {
  padding: 24px 26px;
}
.account .portrait-journey-help {
  font-size: 12.5px;
  color: var(--ink-4);
  font-style: italic;
  font-family: var(--font-serif);
  margin-bottom: 18px;
}
.account .portrait-season {
  position: relative;
  padding: 0 0 26px 28px;
  border-left: 1px solid var(--border);
}
.account .portrait-season:last-child {
  border-left-color: transparent;
  padding-bottom: 6px;
}
.account .portrait-season::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--ground);
}
.account .portrait-season .when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.account .portrait-season .said {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-2);
  margin-top: 7px;
}
.account .portrait-season .said em {
  font-style: italic;
  color: var(--ink);
}
.account .portrait-season.open-end::before {
  background: transparent;
  border: 1px dashed var(--gold);
}
.account .portrait-season.open-end .said {
  color: var(--gold);
  font-style: italic;
}

/* =====================================================================
   PORTRAIT -- EMBLEM capstone (Stage 5). Ported from the v6 mockup (.capstone /
   .emblem / e-chips / ask / made), var-remapped to Umber dark tokens,
   .account-scoped + portrait-/pe- prefixed. The @keyframes is global by nature
   (at-rules cannot be scoped) but NAMESPACED (portrait-breathe) to avoid any
   collision; the animation that applies it is scoped. */
.account .portrait-capstone {
  padding: 46px 26px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.account .portrait-cap-eyebrow {
  text-align: center;
}
.account .portrait-emblem {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  transform-origin: center;
}
.account .portrait-emblem.breathe {
  animation: portrait-breathe 7s ease-in-out infinite;
}
@keyframes portrait-breathe {
  0%, 100% { transform: scale(1); opacity: .94; }
  50% { transform: scale(1.018); opacity: 1; }
}
.account .portrait-emblem .pe-grp {
  transition: opacity .35s;
}
.account .portrait-emblem[data-focus] .pe-grp {
  opacity: .1;
}
.account .portrait-emblem[data-focus="values"] .pe-values,
.account .portrait-emblem[data-focus="lenses"] .pe-lenses,
.account .portrait-emblem[data-focus="categories"] .pe-categories,
.account .portrait-emblem[data-focus="marginalia"] .pe-marginalia {
  opacity: 1;
}
.account .portrait-e-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.account .portrait-e-chip {
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text-on-dark) 4%, transparent);
  color: var(--ink-2);
}
.account .portrait-e-chip:hover {
  color: var(--ink);
  border-color: var(--gold);
}
.account .portrait-e-chip.on {
  color: var(--ink);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.account .portrait-e-explain {
  min-height: 24px;
  margin-top: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
}
.account .portrait-ask {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 34px;
  color: var(--ink);
  margin: 26px 0 0;
  line-height: 1.15;
}
.account .portrait-ask-sub {
  font-size: 13px;
  color: var(--ink-4);
  margin: 14px auto 0;
  max-width: 54ch;
  line-height: 1.6;
}
.account .portrait-ask-acts {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}
.account .portrait-cap-btn {
  font-family: var(--font-body);
  font-size: 13.5px;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text-on-dark) 5%, transparent);
  color: var(--ink-2);
}
.account .portrait-cap-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.account .portrait-made {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease;
  text-align: left;
  max-width: 540px;
  margin: 0 auto;
}
.account .portrait-made.show {
  max-height: 360px;
  opacity: 1;
  margin-top: 24px;
}
.account .portrait-mrow {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--wash);
  align-items: baseline;
}
.account .portrait-mrow:first-child {
  border-top: 0;
}
.account .portrait-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: center;
}
.account .portrait-part {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  width: 128px;
  flex-shrink: 0;
}
.account .portrait-from {
  font-size: 13px;
  color: var(--ink-2);
}
.account .portrait-ack {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--teal);
  margin-top: 18px;
}

/* reduced motion: the emblem holds still; made/grp settle instant (scoped). */
@media (prefers-reduced-motion: reduce) {
  .account .portrait-emblem.breathe { animation: none !important; }
  .account .portrait-emblem .pe-grp { transition: none !important; }
  .account .portrait-made { transition: none !important; }
}

/* Covenant line in the "your data" card. */
.account-covenant {
  margin: 8px 0 0 0;
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-d);
}

/* One-line danger-zone description under the "Danger zone" label. */
.account-danger-desc {
  margin: 0 0 12px 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* #8 Stage 4a revision: the DISPLAY NAME / PEN NAME form is hidden by default
   (clean identity hero); the "Edit profile" action reveals it (pure-DOM class
   toggle). Active state marks the toggled button. var() tokens only. */
.account-edit-form {
  display: none;
}
.account-edit-form.account-edit-form-open {
  display: block;
}
.account .account-secondary-btn.account-edit-active {
  border-color: var(--gold);
  color: var(--gold-text);
}

/* ===== #8 STAGE 4b/4c -- TAGLINE / TAP AFFORDANCES / MARK PANEL =====
   Token-only, zero new hex. */

/* Hero tagline -- one-line self-description, italic serif under the name. */
.account-hero-tagline {
  margin: 0 0 4px 0;
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-2);
}

/* Stat-card tap caret. */
/* Stage 6: caret is now a flex item in .account-stat-labelrow (was a stacked
   block); keep its size + tone, drop the block/margin placement. */
.account-stat-caret {
  font-size: 11px;
  line-height: 1;
  color: var(--gold);
  opacity: .5;
}

/* Standing-place panel (a tapped mark's detail; sits in .account-expand-panel). */
/* #8 v3.105: shared panel header (category + mark panels). Eyebrow over a serif
   title in a text column; close (x) on the right. Replaces .account-mark-head /
   .account-mark-title (the mark panel now reuses .account-panel-*). */
.account-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px 0;
}
.account-panel-head-text {
  min-width: 0;
}
.account-panel-eyebrow {
  margin: 0 0 4px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.account-panel-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.account-mark-close {
  flex: 0 0 auto;
  padding: 2px 6px;
  background: transparent;
  border: none;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}
.account-mark-close:hover {
  color: var(--ink);
}
/* G6 a11y: scoped :focus-visible ring (teal) for the portrait's interactive
   controls -- the deferred port of the mockup's global :focus-visible, SCOPED
   under .account .portrait-* (an app-global rule would bleed -- the reason it
   was deferred). Stars / tension-labels / toggle / pencils / seg-buttons are
   keyboard-focusable today; the dialogue + emblem chips are delegated-click
   spans (no tabindex, as in the mockup) so their ring stays dormant until they
   are made focusable -- a separate, pre-existing a11y item. */
.account .portrait-star:focus-visible,
.account .portrait-tlabel:focus-visible,
.account .portrait-toggle:focus-visible,
.account .portrait-pencil:focus-visible,
.account .portrait-seg button:focus-visible,
.account .portrait-chip:focus-visible,
.account .portrait-e-chip:focus-visible,
.account .portrait-cap-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ===== END ACCOUNT PAGE ===== */


/* ===== 9b-iii SYMBOL PICKER + ENTRY POINTS =====
   Modal mark picker (views.js openSymbolPicker), the writing-page Mark chip,
   and the constellation hover-card footer. Tokens only. */
.st-picker-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 10010;
}
.st-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: calc(100vw - var(--sp-5) - var(--sp-5));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 24px 26px 20px;
  z-index: 10011;
  font-family: var(--font-body);
  color: var(--ink);
}
.st-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.st-picker-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.st-picker-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
}
.st-picker-close {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.st-picker-close:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.st-picker-preview {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 4px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.st-picker-preview-mark { width: 116px; height: 116px; flex: none; }
.st-picker-preview-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.st-picker-preview-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 3px;
}
.st-picker-badge {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px dashed var(--ink-4);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.st-picker-row-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 14px 0 9px;
}
.st-picker-hint {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-4);
}
.st-picker-grid { display: grid; gap: 7px; }
.st-picker-grid-shapes { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.st-picker-grid-colors { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.st-picker-cell {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.st-picker-cell:hover { background: var(--surface-2); border-color: var(--ink-4); }
.st-picker-cell:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }
.st-picker-cell.is-sel {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 1.5px var(--gold-light) inset;
  background: var(--surface-2);
}
.st-picker-cell-shape { height: 52px; }
.st-picker-cell-shape svg { width: 40px; height: 40px; display: block; }
.st-picker-cell-color { height: 40px; }
.st-picker-swatch { width: 22px; height: 22px; border-radius: var(--radius-pill); }
.st-picker-cell-auto {
  border-style: dashed;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.st-picker-cell-auto.is-sel { border-style: solid; }
.st-picker-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 14px;
}
.st-picker-foot-right { display: flex; gap: 10px; }
.st-picker-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
}
.st-picker-btn:hover { background: var(--surface); border-color: var(--ink-4); }
.st-picker-btn:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }
.st-picker-btn-primary {
  background: var(--gold-light);
  border-color: var(--gold-deep, var(--gold-light));
  color: var(--text-on-dark);
}
.st-picker-btn-text {
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding: 8px 4px;
}
.st-picker-btn-text:hover { color: var(--ink); background: none; }

/* Writing-page Mark chip (entry A). */
.st-mark-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  padding: 5px 13px;
  cursor: pointer;
}
.st-mark-chip:hover { border-color: var(--ink-4); color: var(--ink); }
.st-mark-chip-mark { width: 16px; height: 16px; display: inline-block; }
.st-mark-chip-mark svg { width: 16px; height: 16px; display: block; }

/* Hover-card footer rules REMOVED at ARC STANDARD F3 (see the excision note
   above) — the ghost is dead; -foot / -link / -link:hover excised. */
/* ===== END SYMBOL PICKER ===== */


/* ===== v3.81 SUB-THEORY DELETE -- confirm modal + danger affordances ===== */
.st-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 10020;
}
.st-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: calc(100vw - var(--sp-5) - var(--sp-5));
  background: var(--surface-2);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 22px 24px 18px;
  z-index: 10021;
  font-family: var(--font-body);
  color: var(--ink);
}
.st-confirm-copy {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px 0;
}
.st-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.st-confirm-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
}
.st-confirm-btn:hover { background: var(--surface); border-color: var(--ink-4); }
.st-confirm-btn:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }
.st-confirm-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-on-dark);
}
.st-confirm-btn-danger:hover {
  background: var(--danger);
  filter: brightness(1.08);
  border-color: var(--danger);
}
/* R-ARC S5 (REVERSE GEAR): dissolve modal action — neutral GOLD primary (not danger-red). */
.st-confirm-btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--br-deep);
}
.st-confirm-btn-primary:hover {
  filter: brightness(1.06);
  border-color: var(--gold);
}
/* Stage R #4: per-connection unlink list inside the .st-confirm modal. */
.st-confirm-unlink-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0 0 18px 0;
}
.st-confirm-unlink-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.st-confirm-unlink-name {
  font-size: 14px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Stage 7 (manual themes): book-detail theme assign chips + create field. */
.book-detail-themes {
  margin-top: var(--sp-4);
}
.book-detail-themes-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}
.book-detail-theme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.book-detail-theme-chip {
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
}
.book-detail-theme-chip-on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text-on-dark);
}
.book-detail-theme-new {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.book-detail-theme-input {
  flex: 1;
}

/* Writing-page Delete chip -- subordinate danger variant of the Mark chip. */
.subtheory-delete-chip {
  color: var(--danger);
  border-color: var(--danger-line);
}
.subtheory-delete-chip:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* Hover-card Delete link REMOVED at ARC STANDARD F3 (the ghost is dead). */
/* ===== END SUB-THEORY DELETE ===== */


/* =====================================================================
   SHARED PRIMITIVES (canon §4-D) -- added June 2026, full-app redesign
   Stage 1. ADDITIVE shared classes for LATER stages to adopt where a
   stage's markup is already being touched -- NOT applied per-screen now.
   Do NOT retrofit the existing per-surface classes (shelf-new-book,
   book-detail-*) onto these. The mono eyebrow (.eyebrow)
   and the Yumi FAB (.yumi-bloom) already exist and are NOT redefined.
   Tokens only -- no raw hex. No width-specific rules: the comfortable
   48px touch target and token sizing hold at both breakpoints, so each
   primitive renders identically at 390 and ~1280 (cross-width safe).
   ===================================================================== */

/* Button family: shared geometry + three weights. */
.px-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--motion-base) var(--ease),
              border-color var(--motion-base) var(--ease),
              color var(--motion-base) var(--ease);
}

/* Primary: the signature gold->river gradient. One per screen. */
.px-btn-primary {
  background: var(--grad);
  color: var(--text-on-dark);
  border-color: transparent;
}
.px-btn-primary:hover { filter: brightness(1.06); }

/* Ghost: glass secondary with a hairline. */
.px-btn-ghost {
  background: var(--glass-2);
  color: var(--ink);
  border-color: var(--line-2);
  font-weight: 500;
}
.px-btn-ghost:hover { border-color: var(--ink-3); }

/* Quiet: transparent, minimal -- for recessed/tertiary actions. */
.px-btn-quiet {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-2);
  font-weight: 500;
}
.px-btn-quiet:hover { color: var(--ink); border-color: var(--ink-3); }

/* Card surface: opaque lighter wheat over the honey ground. */
.px-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}

/* Field: text input / textarea. Recessed ink-tint well, river focus. */
.px-field {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
}
.px-field:focus { border-color: var(--river-l); }
.px-field::placeholder { color: var(--ink-3); }

/* Segmented control: pill track + mono options; active swaps to surface. */
.px-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--wash);
  border-radius: var(--radius-md);
}
.px-seg-option {
  padding: 7px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.px-seg-option.is-active {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* Status dot: small gold square marker (mockup .dot). */
.px-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
}
/* ===== END SHARED PRIMITIVES ===== */

/* ===== 10.5.8 WRITING SURFACES — composition fields as writing lines =====
   Additive: in-scope composition fields shed their box chrome and become
   underlined writing lines (dashed idle -> teal solid focus, serif-italic
   placeholder). These grouped rules + the sub-theory pair below override the
   per-screen field rules above purely by source order (this block is last);
   no existing rule is rewritten, so revert = delete this block.

   CARVE-OUT: .subtheory-register-body carries .notebook-editor-body but is a
   deliberate borderless serif prose canvas -- excluded via :not() so the sans +
   dashed-baseline grammar never leaks onto it. The excluded utility/search
   inputs (nav search, spotlight, Yumi composer, shelf filter) are not listed
   here and stay as-is. Selects keep their native caret (no appearance:none --
   a custom caret would need new hex or a third file).
   SUPERSEDED IN PART (AES-4, R-POLISH B3): both blockers named above are gone —
   praxis-kit.css IS the third file (promoted in B1), and the caret is drawn with
   gradients taking `currentColor`, so it costs NO new hex. `.k-select` now
   carries that dress and `.stb-pull-book-sel` adopts it. The composition fields
   listed in THIS block are unchanged; only the blanket "selects keep their
   native caret" claim no longer holds app-wide. */

.notebook-editor-title-input,
.notebook-editor-body:not(.subtheory-register-body),
.shelf-editor-title-input,
.shelf-editor-author-input,
.shelf-editor-genre-input,
.shelf-editor-isbn-input,
.shelf-bulk-editor-textarea,
.account-field-input,
.book-detail-isbn-input,
.book-detail-tradition-select,
.shelf-scan-review-input {
  border: none;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px dashed var(--line-2);
  color: var(--ink);
  font-family: var(--font-body);
}

.notebook-editor-title-input:focus,
.notebook-editor-title-input:focus-visible,
.notebook-editor-body:not(.subtheory-register-body):focus,
.notebook-editor-body:not(.subtheory-register-body):focus-visible,
.shelf-editor-title-input:focus,
.shelf-editor-title-input:focus-visible,
.shelf-editor-author-input:focus,
.shelf-editor-author-input:focus-visible,
.shelf-editor-genre-input:focus,
.shelf-editor-genre-input:focus-visible,
.shelf-editor-isbn-input:focus,
.shelf-editor-isbn-input:focus-visible,
.shelf-bulk-editor-textarea:focus,
.shelf-bulk-editor-textarea:focus-visible,
.account-field-input:focus,
.account-field-input:focus-visible,
.book-detail-isbn-input:focus,
.book-detail-isbn-input:focus-visible,
.book-detail-tradition-select:focus,
.book-detail-tradition-select:focus-visible,
.shelf-scan-review-input:focus,
.shelf-scan-review-input:focus-visible {
  outline: none;
  border-bottom: 1.5px solid var(--marginalia-color);
}

.notebook-editor-title-input::placeholder,
.notebook-editor-body:not(.subtheory-register-body)::placeholder,
.shelf-editor-title-input::placeholder,
.shelf-editor-author-input::placeholder,
.shelf-editor-isbn-input::placeholder,
.shelf-bulk-editor-textarea::placeholder,
.account-field-input::placeholder,
.book-detail-isbn-input::placeholder,
.shelf-scan-review-input::placeholder {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--ink-4);
}

/* Sub-theory NAME: already a borderless serif title -- take only the underline
   grammar (dashed idle -> teal focus), keep the serif font untouched. */
.subtheory-header-input {
  border-bottom: 1px dashed var(--line-2);
}
.subtheory-header-input:focus,
.subtheory-header-input:focus-visible {
  outline: none;
  border-bottom: 1.5px solid var(--marginalia-color);
}

/* Sub-theory register BODY: excluded from the treatment (stays serif prose, no
   baseline) -- recolor only its inherited focus ring to the app teal. */
.subtheory-register-body:focus,
.subtheory-register-body:focus-visible {
  outline-color: var(--marginalia-color);
}

/* ===== LENS PANEL (S4) =====
   The "Ask Yumi for more lenses" modal. SOLID chrome per canon (no
   backdrop-filter / blur anywhere); parchment surface, tokens only. */
.lens-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.lens-panel-overlay.lens-panel-open {
  display: flex;
}

.lens-panel-backdrop {
  position: absolute;
  inset: 0;
  /* solid scrim, NO blur (canon overlay rule) */
  background: color-mix(in srgb, var(--br-deep) 52%, transparent);
}

.lens-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--sp-6) - var(--sp-6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 1px 1px 0 var(--highlight-edge),
    var(--shadow-spotlight);
  animation: lens-panel-in 0.24s var(--ease) both;
}

.lens-panel-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.lens-panel-glyph {
  flex: 0 0 auto;
  display: block;
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--gold) 32%, transparent));
}

.lens-panel-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lens-panel-headtext {
  flex: 1 1 auto;
  min-width: 0;
}

.lens-panel-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  color: var(--ink);
}

.lens-panel-sub {
  margin: 2px 0 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-3);
}

.lens-panel-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: var(--fs-display);
  line-height: 1;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
}

.lens-panel-close:hover {
  color: var(--ink);
}

.lens-panel-body {
  padding: var(--sp-4);
  overflow-y: auto;
}

.lens-panel-section {
  margin-bottom: var(--sp-5);
}

.lens-panel-section-label {
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lens-panel-stub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.lens-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.lens-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lens-card-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
}

.lens-card-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
}

.lens-card-actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--sp-2);
}

.lens-card-action {
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
}

.lens-card-action:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}

.lens-card-action-drop:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.lens-card-rename-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

.lens-panel-make {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.lens-panel-make-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lens-panel-make-row {
  display: flex;
  gap: var(--sp-2);
}

.lens-panel-make-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.lens-panel-make-input:focus {
  outline: none;
  border-color: var(--gold);
}

.lens-panel-make-btn {
  flex: 0 0 auto;
  background: var(--grad);
  color: var(--text-on-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.lens-panel-covenant {
  margin: var(--sp-4) 0 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.lens-glyph-petals {
  transform-box: fill-box;
  transform-origin: center;
  animation: yumi-bloom-spin 26s linear infinite;
}

@keyframes lens-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lens-panel { animation: none; }
  .lens-glyph-petals { animation: none; }
}

/* Lens-gen (S3): proposed-lens cards stack name -> why -> books over an
   actions row; the adopt ("Name it") action carries the primary gradient. */
.lens-card-proposed {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
}

.lens-card-why {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.lens-card-books {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-4);
}

.lens-card-actions-proposed {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.lens-card-action-adopt {
  background: var(--grad);
  color: var(--text-on-dark);
  border: none;
}

.lens-card-action-adopt:hover {
  color: var(--text-on-dark);
  opacity: 0.92;
}

.lens-suggest-loading {
  animation: lens-suggest-pulse 1.4s ease-in-out infinite;
}

.lens-suggest-covenant {
  margin-top: var(--sp-3);
  font-size: 12px;
}

.lens-suggest-retry {
  margin-top: var(--sp-2);
}

@keyframes lens-suggest-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lens-suggest-loading { animation: none; }
}

/* =====================================================================
   Phase 3 -- barcode scanner + manual lookup (mockup C). Tokens only.
   ===================================================================== */
.barcode-scanner { max-width: 360px; margin: 0 auto; padding: 8px 0 4px; }
.barcode-scanner-heading { font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--ink); }
.barcode-scanner-sub { font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.4; }

.scan-frame { width: 100%; margin-top: 16px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--ink-4); box-shadow: var(--shadow-2); background: var(--br-deep); }
.scan-view { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 25%, color-mix(in srgb, var(--br-deep) 70%, var(--ink)), var(--ink) 90%); }
.scan-cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reticle { position: relative; width: 74%; height: 30%; border-radius: 10px;
  box-shadow: 0 0 0 2000px color-mix(in srgb, var(--br-deep) 38%, transparent); }
.reticle .corner { position: absolute; width: 26px; height: 26px; border: 3px solid var(--gold-light); }
.reticle .corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.reticle .corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.reticle .corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.reticle .corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }
.scanline { position: absolute; left: 6%; right: 6%; height: 2px; top: 50%; background: var(--gold-light);
  box-shadow: 0 0 9px 2px color-mix(in srgb, var(--gold-light) 70%, transparent);
  animation: scanmove 2.4s var(--ease) infinite alternate; }
@keyframes scanmove { from { transform: translateY(-44px); } to { transform: translateY(44px); } }
.scan-hint { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-on-dark); opacity: 0.92; }

.isbn-fallback { padding: 15px; background: var(--surface); }
.isbn-fallback .if-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.isbn-fallback .if-row { display: flex; gap: 8px; }
.isbn-fallback input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 14px;
  letter-spacing: 0.04em; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 9px 11px; outline: none; }
.isbn-fallback input:focus { border-color: var(--gold); }
.barcode-find-btn { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 9px 18px;
  border-radius: var(--radius-md); background: var(--grad); color: var(--text-on-dark); border: 1px solid transparent; cursor: pointer; }
.barcode-find-btn:hover { filter: brightness(1.06); }
.barcode-scanner-status { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  min-height: 16px; margin-top: 10px; text-align: center; }
.barcode-scanner-status:empty { display: none; }
.barcode-scanner-cancel { display: block; margin: 12px auto 0; font-family: var(--font-body); font-size: 13px;
  color: var(--ink-2); background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius-md);
  padding: 8px 18px; cursor: pointer; }
.barcode-scanner-cancel:hover { border-color: var(--ink-3); color: var(--ink); }

.manual-lookup { max-width: 420px; margin: 0 auto; padding: 8px 0; }
.manual-lookup-heading { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 14px; }
.manual-lookup-field { display: block; margin-bottom: 12px; }
.manual-lookup-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.manual-lookup-input { width: 100%; font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 11px; outline: none; }
.manual-lookup-input:focus { border-color: var(--gold); }
.manual-lookup-status { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); min-height: 16px; margin: 4px 0; }
.manual-lookup-status:empty { display: none; }
.manual-lookup-actions { display: flex; gap: 10px; margin-top: 8px; }
.manual-lookup-submit { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 10px 20px;
  border-radius: var(--radius-md); background: var(--grad); color: var(--text-on-dark); border: 1px solid transparent; cursor: pointer; }
.manual-lookup-submit:hover { filter: brightness(1.06); }
.manual-lookup-cancel { font-family: var(--font-body); font-size: 13.5px; padding: 10px 20px;
  border-radius: var(--radius-md); background: var(--glass-2); color: var(--ink); border: 1px solid var(--line-2); cursor: pointer; }
.manual-lookup-cancel:hover { border-color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .scanline { animation: none; }
}

/* =====================================================================
   Phase 4 -- Review & Confirm (mockup A + B). Tokens only.
   ===================================================================== */
.book-review { padding: 8px 0 16px; }
.book-review-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.book-review-title { font-family: var(--font-serif); font-size: 32px; font-weight: 500; line-height: 1.08; color: var(--ink); }
.book-review-sub { font-size: 14px; color: var(--ink-2); margin-top: 7px; line-height: 1.5; }
.book-review-cancel { margin-top: 16px; font-family: var(--font-body); font-size: 13px; color: var(--ink-2); background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius-md); padding: 9px 18px; cursor: pointer; }
.book-review-cancel:hover { border-color: var(--ink-3); color: var(--ink); }

.review-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 20px 0 16px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.review-bar .rb-left { display: flex; align-items: center; gap: 12px; }
.review-bar .rb-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.review-bar .rb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-mark-all { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); cursor: pointer; }
.review-mark-all:hover { border-color: var(--ink-3); color: var(--ink); }
.review-confirm { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: var(--radius-md); background: var(--grad); color: var(--text-on-dark); border: 1px solid transparent; cursor: pointer; }
.review-confirm:hover { filter: brightness(1.06); }

.review-rows { display: flex; flex-direction: column; gap: 12px; }
.rrow { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); position: relative; }
.rrow.flagged { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); box-shadow: var(--shadow-1), inset 3px 0 0 var(--gold-light); }
.rrow.nomatch { border-style: dashed; border-color: var(--line-2); background: color-mix(in srgb, var(--surface) 86%, var(--danger) 5%); align-items: start; }
.rrow > .cover { width: 54px; }
.rrow-main { min-width: 0; }
.rrow-ti { font-family: var(--font-serif); font-size: 19px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.rrow-au { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-2); margin-top: 1px; }
.rrow-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.rrow-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.rrow-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.conf { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.conf-high { color: var(--marginalia-color); background: color-mix(in srgb, var(--marginalia-color) 12%, transparent); border-color: color-mix(in srgb, var(--marginalia-color) 30%, transparent); }
.conf-low { color: var(--gold-text); background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.conf-none { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger-line); }
.notthis { font-family: var(--font-body); font-size: 12px; color: var(--river); background: transparent; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.notthis:hover { color: var(--ink); }
.flagnote { font-family: var(--font-body); font-size: 12px; color: var(--gold-text); font-style: italic; }

.manual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.manual .fld { display: flex; flex-direction: column; gap: 3px; }
.manual .fld-wide { grid-column: 1 / -1; }
.manual label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.manual input { font-family: var(--font-body); font-size: 13.5px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 9px; outline: none; }
.manual input:focus { border-color: var(--gold); }
.scanned-as { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 8px; }
.scanned-as b { color: var(--danger); font-weight: 500; letter-spacing: 0; }

.edition-picker { grid-column: 1 / -1; margin-top: 14px; padding: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ep-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ep-head .ep-t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.edition-card { display: flex; gap: 11px; padding: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); }
.edition-card:hover { border-color: var(--ink-3); }
.edition-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-1); }
.edition-card .cover { width: 46px; }
.ec-main { min-width: 0; }
.ec-pub { font-family: var(--font-serif); font-size: 15px; color: var(--ink); line-height: 1.15; }
.ec-au { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-2); }
.ec-meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }
.ec-pick { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marginalia-color); margin-top: 7px; visibility: hidden; }
.edition-card.selected .ec-pick { visibility: visible; }

/* shared cover primitives (review + edition picker + cleanup) */
.cover { aspect-ratio: 2 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--ink-4); box-shadow: var(--shadow-1); position: relative; flex: 0 0 auto; background: var(--surface); }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-pending { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8%; text-align: center; background: linear-gradient(160deg, var(--surface), var(--sunk)); }
.cover-pending .cp-ti { font-family: var(--font-serif); font-style: italic; font-size: 0.8em; line-height: 1.2; color: var(--ink-2); }
.cover-pending .cp-lab { font-family: var(--font-mono); font-size: 0.55em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cover-unknown { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: repeating-linear-gradient(45deg, var(--sunk), var(--sunk) 9px, var(--surface) 9px, var(--surface) 18px); }
.cover-unknown .cu-q { font-family: var(--font-serif); font-size: 1.4em; color: var(--ink-3); background: var(--surface-2); width: 1.6em; height: 1.6em; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.cover-unknown .cu-lab { font-family: var(--font-mono); font-size: 0.5em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* read-status control (review + book-detail) */
.rstatus { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; background: var(--glass-2); }
.rstatus .rs-opt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); background: transparent; border: none; border-left: 1px solid var(--border); padding: 8px 13px; cursor: pointer; white-space: nowrap; }
.rstatus .rs-opt:first-child { border-left: none; }
.rstatus .rs-opt.on { background: var(--gold); color: var(--text-on-dark); }

@media (max-width: 759px) {
  .rrow { grid-template-columns: 48px 1fr; }
  .rrow-right { grid-column: 1 / -1; align-items: stretch; }
  .rrow-right .rstatus { display: flex; width: 100%; }
  .rrow-right .rs-opt { flex: 1 1 0; text-align: center; }
  .ep-grid { grid-template-columns: 1fr; }
  .manual { grid-template-columns: 1fr; }
}

/* =====================================================================
   Phase 5 -- book-detail mockup-D additions. Tokens only.
   ===================================================================== */
.book-detail-biblio { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.book-detail-status-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.book-detail-status-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.book-detail-description { font-size: 15px; line-height: 1.62; color: var(--ink-2); margin: 0 0 16px; max-width: 60ch; }
.book-detail-lens-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.lenschip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); background: var(--wash); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 11px; display: inline-flex; align-items: center; }
.book-detail-rate { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 18px; }
.bd-rate-stars { display: inline-flex; gap: 2px; }
.bd-star { font-size: 19px; line-height: 1; color: var(--ink-4); background: transparent; border: none; cursor: pointer; padding: 0; opacity: 0.45; }
.bd-star.on { color: var(--gold); opacity: 1; }
.bd-star:hover { color: var(--gold-light); opacity: 1; }
.bd-rate-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.bd-rate-sep { width: 1px; height: 20px; background: var(--border); }
.bd-fix { font-family: var(--font-body); font-size: 13px; color: var(--river); background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.bd-fix:hover { color: var(--ink); }
.bd-fix:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }

@media (max-width: 759px) {
  .book-detail-status-row { flex-direction: column; align-items: flex-start; }
  .book-detail-status-row .rstatus { display: flex; width: 100%; }
  .book-detail-status-row .rs-opt { flex: 1 1 0; text-align: center; }
}

/* =====================================================================
   Phase 6 -- library cleanup (mockup E). Tokens only.
   ===================================================================== */
.library-cleanup { padding: 8px 0 16px; }
.cl-summary { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 16px; }
.cl-stat { flex: 1 1 180px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.cl-stat .n { font-family: var(--font-serif); font-size: 34px; font-weight: 500; color: var(--ink); line-height: 1; }
.cl-stat .l { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }
.cl-stat.warn { border-color: var(--danger-line); }
.cl-stat.warn .n { color: var(--danger); }
.cl-resolve-all { margin-bottom: 18px; }
.cl-list { display: flex; flex-direction: column; gap: 12px; }
.cl-item { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.cl-kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill); color: var(--ink-2); background: var(--wash); border: 1px solid var(--border); white-space: nowrap; align-self: start; }
.cl-kind.dup { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: var(--danger-line); }
.cl-kind.miss { color: var(--gold-text); background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 38%, transparent); }
.cl-mid { min-width: 0; }
.cl-mid .cl-ti { font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.cl-mid .cl-au { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-2); }
.cl-mid .cl-note { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.4; }
.cl-actions { display: flex; gap: 8px; align-items: center; }
.cl-actions .review-mark-all, .cl-actions .review-confirm { font-size: 12.5px; padding: 8px 14px; }
/* MERGE ROUND — the per-group SURVIVOR / TITLE pickers and the near-miss heading.
   No new component and no new token: both reuse .cl-note's type and inks, adding
   only the layout a radio row needs (a label must sit on one line beside its input
   and be comfortably tappable). The near-miss heading reuses the same ink at the
   mono/eyebrow weight the cleanup surface already uses for .cl-kind. */
.cl-mid .cl-note.cl-pickrow { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; min-height: 24px; }
.cl-mid .cl-note.cl-pickrow input { margin: 2px 0 0; flex: none; }

/* ===== M3 — THE CLEANUP PANEL JOINS THE SHELF'S CREAM REGISTER =====
   This is D10's defect on the surface D10 did not reach. The panel inherits the
   legacy dark slab (`.cl-item{background:var(--surface)}` = rgb(35,40,56)) and was
   mounted into the cream shelf, so it shipped navy cards on a rgb(253,249,238)
   page with LIGHT-GROUND inks on them. Measured before this block, on the live
   panel: the Cormorant group title was rgb(36,23,16) on rgb(35,40,56) = **1.19:1**,
   the worst contrast this program has recorded; author, notes, pick rows and the
   stat label all 1.93:1; the stat number 3.51:1. Five text elements below 4.5:1.
   Everything here is scoped under `.shelf.lum-amber-deep` so the panel takes the
   shelf's own card register (--card-2 / --line-page-2) exactly as the bulk-add
   editor does, and NOTHING outside the shelf route is touched. */
.shelf.lum-amber-deep .library-cleanup .cl-item,
.shelf.lum-amber-deep .library-cleanup .cl-stat{
  background: var(--card-2); border: 1px solid var(--line-page-2);
  box-shadow: 0 1px 2px rgba(36,23,16,.14), 0 10px 30px -18px rgba(36,23,16,.30);
}
.shelf.lum-amber-deep .library-cleanup .cl-stat .n{ color: var(--ink); }
.shelf.lum-amber-deep .library-cleanup .cl-stat .l{ color: var(--ink-2); }
.shelf.lum-amber-deep .library-cleanup .cl-stat.warn{ border-color: var(--gold-deep); }
.shelf.lum-amber-deep .library-cleanup .cl-stat.warn .n{ color: var(--gold-deep); }
.shelf.lum-amber-deep .library-cleanup .cl-mid .cl-ti{ color: var(--ink); }
.shelf.lum-amber-deep .library-cleanup .cl-mid .cl-au{ color: var(--ink-2); }
.shelf.lum-amber-deep .library-cleanup .cl-mid .cl-note{ color: var(--ink-2); }
.shelf.lum-amber-deep .library-cleanup .cl-kind{
  color: var(--ink-2); background: var(--wash-page); border-color: var(--line-page-2);
}
.shelf.lum-amber-deep .library-cleanup .cl-kind.dup{
  color: var(--gold-deep); background: var(--wash-page); border-color: var(--gold-deep);
}
.shelf.lum-amber-deep .library-cleanup .cl-kind.miss{
  color: var(--ink-2); background: var(--wash-page); border-color: var(--line-page-2);
}
/* The buttons. `.review-confirm` fills with `--grad`, the app's gold-to-teal
   primary gradient, which is why a teal button appeared on a cream shelf panel and
   nowhere near it. Preston's ruling for this surface is explicit: NO gradients. So
   a FLAT gold fill with the gold-on-gold ink the shelf already defines. (Note this
   is deliberately flatter than `.shelf-editor-save` beside it, which is a gold
   GRADIENT -- the instruction was taken literally; see the appearance list.) */
.shelf.lum-amber-deep .library-cleanup .review-confirm{
  background: var(--gold); background-image: none;
  color: var(--gold-ink-on-gold); border: 1px solid var(--gold-deep);
}
.shelf.lum-amber-deep .library-cleanup .review-confirm:hover{ background: var(--gold-hi); }
.shelf.lum-amber-deep .library-cleanup .review-mark-all{
  background: transparent; color: var(--ink-2); border: 1px solid var(--line-page-2);
}
/* The choice controls. Native radios paint iOS system blue, which is the one
   colour in the app that belongs to no surface. accent-color puts them in the
   shelf's gold without replacing the control -- it stays a real radio, keyboard
   and screen-reader intact. */
.shelf.lum-amber-deep .library-cleanup .cl-pickrow input[type="radio"]{
  accent-color: var(--gold-deep); width: 17px; height: 17px;
}
/* M4 — the discriminator row: thumbnail + name + meta, on one tappable line. */
.shelf.lum-amber-deep .library-cleanup .cl-pickrow{ align-items: center; gap: 10px; padding: 5px 0; min-height: 44px; }
.cl-pickthumb{ flex: none; width: 30px; height: 44px; border-radius: 2px; overflow: hidden;
  background: var(--wash-page); display: flex; align-items: center; justify-content: center; }
.cl-pickthumb-img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-pickthumb-ph{ font-size: 15px; line-height: 1; color: var(--ink-3); }
.cl-picktxt{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-pickname{ font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.cl-pickmeta{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; color: var(--ink-2); line-height: 1.35; }
/* M3, second pass — the eight elements the first pass left below 4.5:1, each
   measured on the live panel. Nothing on this surface ships under the floor, and
   that includes chips, glyphs and button labels: "small" and "decorative" are not
   exemptions, they are just text a reader still has to read. */
/* the coverless placeholder was still the dark slab (its own gradient), so its
   title and label sat at 1.93:1 inside an otherwise cream card */
/* OPAQUE, not --wash-page: that token is rgba(36,23,16,.05), so it composites to
   whatever sits behind it -- and behind it is the dark `.cover` slot, which left
   this text at 1.95:1 even after the rule "won". Alpha over a dark parent is still
   dark. The enclosing slot is dressed too, so nothing here inherits the slab. */
.shelf.lum-amber-deep .library-cleanup .cover{ background: var(--card-2); }
.shelf.lum-amber-deep .library-cleanup .cover-pending{
  background: var(--card-2); background-image: none; border: 1px solid var(--line-page-2);
}
.shelf.lum-amber-deep .library-cleanup .cover-pending .cp-ti,
.shelf.lum-amber-deep .library-cleanup .cover-pending .cp-lab{ color: var(--ink-2); }
/* chips: --gold-deep and --ink-3 on a 5%-ink wash are 2.72 and 2.30. The chips keep
   their DISTINCTION in the border, and take a legible ink. */
.shelf.lum-amber-deep .library-cleanup .cl-kind.dup{ color: var(--ink); }
.shelf.lum-amber-deep .library-cleanup .cl-kind.miss{ color: var(--ink-2); }
.shelf.lum-amber-deep .library-cleanup .cl-pickthumb-ph{ color: var(--ink-2); }
/* THE PRIMARY (Preston's ruling, 2026-09-02). My first cut measured
   --gold-ink-on-gold (#3d2807) on flat --gold at 3.50:1 and concluded a gold fill
   could not carry a label, so it went dark. That was the wrong read of "no
   gradients": the failing pair was gold under a LIGHT-ish label, not gold as such.
   Gold under --ink is a different measurement, and it is the treatment
   .shelf-add-primary wears on this same page. Flat, so still no gradient.
   MEASURED, and the ruling's premise needed one correction: --ink on the token
   literally named --gold is 4.37:1 -- better than 3.50, still under the floor. The
   reason is visible in the reference button itself: .shelf-add-primary is a
   GRADIENT whose visible fill is dominated by --gold-hi (the 40% stop), not --gold
   (the 100% stop) -- and its own label measures 6.20:1 against that lighter gold.
   So the flat equivalent of "matching .shelf-add-primary" is --gold-hi, which is
   the gold a reader actually sees on that button. --ink on --gold-hi = 7.75:1.
   Flat gold with an ink label, as ruled; the token corrected to the one the ruling
   was describing. */
.shelf.lum-amber-deep .library-cleanup .review-confirm{
  background: var(--gold-hi); background-image: none;
  color: var(--ink); border: 1px solid var(--gold-deep);
}
.shelf.lum-amber-deep .library-cleanup .review-confirm:hover{ background: var(--field-1); }
.cl-note.cl-nm-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 2px; }

/* Stage 3 (mockup E): before -> after hero + per-item cover before/after. */
.cl-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 20px 24px; margin-bottom: 20px; }
.cl-hero .ba-big .cover { width: 90px; }
.cl-hero-tx { flex: 1 1 240px; min-width: 0; }
.cl-hero-tx h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.cl-hero-tx p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.before-after { display: flex; align-items: center; gap: 12px; }
.before-after .ba-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.before-after .ba-lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.before-after .cover { width: 48px; }
.before-after .ba-arrow { font-size: 20px; color: var(--ink-3); }
.cl-mid-cover { display: flex; align-items: center; gap: 16px; }
.cl-mid-text { min-width: 0; }

@media (max-width: 759px) {
  .cl-item { grid-template-columns: auto 1fr; }
  .cl-actions { grid-column: 1 / -1; }
  .cl-mid-cover { flex-wrap: wrap; }
}

/* =====================================================================
   ABOUT PAGE (#about) -- W10 Lane A: dark Amber ground + five interactive
   models (design/praxis-about-amber.html). EVERY rule scoped under .about
   (additive; no restyle of any other surface). Colour via theme.css /
   lumen-amber.css tokens; a few documented rgba-of-token washes on the Lumen
   ground are flagged inline. #about now sits on data-ground="dark"
   (views.js umberGroundDark), so page chrome uses the ground-sensitive
   tokens (they resolve light on dark); the five model cards + the Orientation
   card are BRIGHT cream and either use stable tokens directly (--br-deep /
   --text-on-dark / --teal / --page) or re-point the ground tokens locally
   (.orientation) so their reused .about-section / .about-accordion / .intro-*
   rules read dark-on-cream. --font-script is a local CJK/Greek fallback so
   由美 never tofus.
   ===================================================================== */
.about {
  --font-script: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', 'Noto Sans CJK JP', 'Songti SC', 'MS PMincho', serif;
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px 90px 24px;
}

/* ----- reveal (hero only; reduced-motion resets below) ----- */
.about .about-reveal { opacity:0; transform:translateY(14px); animation:about-up .7s cubic-bezier(.22,.8,.28,1) forwards; }
.about .about-reveal-1 { animation-delay:.05s; }
.about .about-reveal-2 { animation-delay:.16s; }
.about .about-reveal-3 { animation-delay:.28s; }
@keyframes about-up { to { opacity:1; transform:none; } }

/* ----- hero ----- */
.about .hero { text-align:center; padding-bottom:52px; }
.about .appmark { width:96px; height:96px; margin:0 auto 28px; border-radius:22px; background:var(--lum-glass); border:1px solid var(--border-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 50px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
.about .markpulse { animation:about-breathe 5.5s ease-in-out infinite; transform-origin:center; filter:drop-shadow(0 0 8px rgba(255,206,74,.55)); } /* rgba = --lum-gold @.55 glow */
@keyframes about-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }
.about .hero h1 { font-family:var(--font-serif); font-weight:600; font-size:clamp(38px,8vw,52px); letter-spacing:-.015em; line-height:1.04; color:var(--ink); }
.about .hero h1 em { font-style:italic; font-weight:500; color:var(--gold-soft); }
.about .hero .lede { max-width:420px; margin:16px auto 0; font-size:16.5px; line-height:1.6; color:var(--ink-2); }

/* ----- sections + prose ----- */
.about .sect { padding:44px 0; border-top:1px solid rgba(255,206,74,.12); } /* rgba = --lum-gold @.12 hairline */
.about .sk { font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.about .sect h2 { font-family:var(--font-serif); font-weight:600; font-size:clamp(26px,5vw,32px); letter-spacing:-.012em; line-height:1.12; color:var(--ink); margin-bottom:14px; }
.about .sect h2 em { font-style:italic; font-weight:500; color:var(--gold-soft); }
.about .sect p { font-size:15px; line-height:1.75; color:var(--ink-2); max-width:56ch; }
.about .sect p + p { margin-top:14px; }
.about .sect p b { color:var(--ink); font-weight:600; }
.about .pull { margin:26px 0 4px; padding-left:18px; border-left:2px solid rgba(255,206,74,.5); font-family:var(--font-serif); font-style:italic; font-size:20px; line-height:1.5; color:var(--gold-soft); } /* rgba = --lum-gold @.5 rule */
.about .pull .who { display:block; margin-top:8px; font-family:var(--font-mono); font-style:normal; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }

/* ----- covenant feature-rows ----- */
.about .featrows { margin-top:26px; display:flex; flex-direction:column; gap:24px; }
.about .featrow { display:flex; gap:16px; align-items:flex-start; }
.about .fico { flex:none; width:44px; height:44px; border-radius:12px; background:var(--lum-glass); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.about .fico svg { width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.about .featrow .ft { font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.about .featrow .fd { font-size:13.5px; line-height:1.6; color:var(--ink-3); margin-top:3px; }
.about .featrow .fd i { font-family:var(--font-serif); color:var(--gold-soft); font-size:14px; } /* mockup cyan -> gold-soft (cyan = Yumi's voice only) */

/* ----- refusals ----- */
.about .refuse { margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.about .ref { display:flex; gap:13px; align-items:baseline; background:var(--lum-glass); border:1px solid var(--glass-border); border-radius:14px; padding:13px 17px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.about .ref .no { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); flex:none; }
.about .ref .rt { font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.about .ref .rt b { color:var(--ink); font-weight:600; }

/* ----- lexicon grid ----- */
.about .lex { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.about .lexi { background:var(--lum-glass); border:1px solid var(--glass-border); border-radius:14px; padding:14px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.about .lexi dt { font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:17px; color:var(--gold-soft); }
.about .lexi dd { margin-top:5px; font-size:12.5px; line-height:1.55; color:var(--ink-3); }
.about .lexi.yu dt { color:var(--lum-cyan); } /* the one Yumi entry -- cyan is Yumi's */
.about .lexi.yu { border-color:rgba(127,208,240,.3); } /* rgba = --lum-cyan @.3 (Yumi) */

/* ----- concept models (bright cream cards; SVGs use stable tokens) ----- */
.about .model { background:linear-gradient(170deg,var(--page-2),var(--page)); border:1px solid rgba(154,126,78,.35); border-radius:20px; padding:24px 18px; margin-top:24px; box-shadow:0 16px 45px rgba(0,0,0,.3); } /* border rgba = --meta @.35 on cream */
.about .model svg { display:block; width:100%; height:auto; }
.about .model-cap { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-3); text-align:center; margin-top:12px; line-height:1.65; max-width:56ch; margin-left:auto; margin-right:auto; }
.about .model-cap b { color:var(--gold-soft); font-weight:500; }
.about .mtoggle { display:flex; justify-content:center; margin-top:26px; }
.about .mtoggle .pillbox { display:flex; gap:4px; background:var(--lum-glass); border:1px solid var(--glass-border); border-radius:var(--radius-pill); padding:4px; }
.about .mtog { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:8px 18px; border-radius:var(--radius-pill); border:none; background:none; color:var(--ink-3); cursor:pointer; transition:all .25s; }
.about .mtog.on { background:var(--page); color:var(--br-deep); }
.about .mtog:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } /* DW-1 D6: tokenized focus ring (rect-invisible until keyboard focus) */
.about .pipe .stn, .about .evo .stn { cursor:pointer; }
.about .pipe .stn circle { fill:var(--text-on-dark); stroke:var(--br-deep); stroke-opacity:.45; stroke-width:1.2; transition:fill .25s, stroke .25s; }
.about .pipe .stn.on circle { fill:var(--gold); stroke:var(--gold); stroke-opacity:1; }
.about .model text { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; fill:var(--br-deep); fill-opacity:.62; text-anchor:middle; }
.about .pipe .stn.on text { fill:var(--br-deep); fill-opacity:1; }
.about .model .serifc { font-family:var(--font-serif); font-style:italic; font-size:16px; letter-spacing:0; }
.about .evo .stn { transition:opacity .3s; }
.about .evo.sel .stn { opacity:.4; }
.about .evo.sel .stn.on { opacity:1; }
.about .evo.sel .stn.on text { fill:var(--br-deep); fill-opacity:1; }
/* STN-A11Y (R-POLISH B4) · THE FOCUS RING THE STATIONS NEVER NEEDED BEFORE.
   These groups only had cursor:pointer, which was honest while they were
   mouse-only. Giving them tabindex made them keyboard-reachable, and a reachable
   control with no visible focus indicator is worse than an unreachable one — the
   caret goes somewhere the eye cannot follow. Gold ring, the same one
   `.about-spine-link` uses (:9788), so About has one focus language.
   THE SECOND RULE IS THE LOAD-BEARING ONE: inside `.evo.sel` every unselected
   station drops to opacity:.4, so a keyboard user tabbing through would be
   chasing a ghost at 40%. Focus restores it to full — the station you are ON is
   always legible, whichever way you arrived at it. */
.about .evo .stn:focus-visible,
.about .pipe .stn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.about .evo.sel .stn:focus-visible { opacity:1; }

/* ----- colophon ----- */
.about .colo { padding-top:40px; text-align:center; }
.about .colo .line { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.about .colo .vow { margin-top:10px; font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--gold-soft); }

/* ----- Orientation card (EXISTING buildAboutOrientation output; bright frame).
   The frame re-points the ground-sensitive tokens back to the light page
   (all STABLE tokens / var refs -- no raw hex) so the reused .about-section /
   .about-accordion / .ac-body / .intro-* rules render dark-on-cream. ----- */
.about .orientation {
  margin-top:26px;
  background:linear-gradient(170deg,var(--page-2),var(--page));
  border:1px solid rgba(154,126,78,.35); /* --meta @.35 on cream */
  border-radius:22px;
  padding:30px 30px 24px;
  box-shadow:0 20px 55px rgba(0,0,0,.35);
  --ink:var(--br-deep);
  --ink-2:var(--br-deep);
  --ink-3:var(--meta);
  --ink-4:var(--meta);
  --surface:var(--page-2);
  --surface-2:var(--page);
  --border:var(--line-page);
  --line-2:var(--line-page-2);
  --gold:var(--gold-ink);
  --gold-light:var(--gold-ink);
  --gold-text:var(--gold-ink);
}

/* KEEP: buildAboutOrientation reuses these -- render dark-on-cream inside
   .orientation via the re-point above. Do not retire. */
.about .about-section { padding:36px 0; border-top:1px solid var(--border); }
.about .about-section:first-child { border-top:none; padding-top:8px; }
.about .about-section-no { font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin:0 0 14px 0; }
.about .about-h2 { font-family:var(--font-serif); font-weight:600; line-height:1.08; font-size:clamp(1.8rem,3.6vw,2.5rem); color:var(--ink); margin:0 0 8px 0; }
.about .about-h2 em { font-style:italic; color:var(--gold-text); }
.about .about-rule { width:46px; height:2px; background:var(--gold); border:none; margin:0 0 22px 0; }
.about .about-body { font-family:var(--font-body); font-size:1rem; line-height:1.72; color:var(--ink-2); margin:0 0 14px 0; }
.about .about-body b { color:var(--ink); font-weight:600; }
.about .about-accordion { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; margin:0 0 12px 0; background:var(--surface); }
.about .about-accordion summary { list-style:none; cursor:pointer; padding:16px 18px; font-family:var(--font-serif); font-size:18px; color:var(--ink); }
.about .about-accordion summary::-webkit-details-marker { display:none; }
.about .about-accordion[open] summary { border-bottom:1px solid var(--border); }
.about .ac-body { padding:16px 18px; font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--ink-2); }

/* ----- reduced-motion: reveal + hero pulse off ----- */
@media (prefers-reduced-motion: reduce) {
  .about .about-reveal { animation:none; opacity:1; transform:none; }
  .about .markpulse { animation:none; }
}

/* ----- mobile reflow (<760) ----- */
@media (max-width: 759px) {
  .about { padding:44px 18px 70px 18px; }
  .about .lex { grid-template-columns:1fr; }
  .about .orientation { padding:24px 18px 18px; }
}

/* =====================================================================
   DW-1 (Fork A) -- ABOUT desktop composition tier (>=1200 only; ADDITIVE).
   Below 1200 About is byte-unchanged (the single 640px reading column). At
   the composition tier the page becomes a sticky section spine in the left
   margin + a centered reading column whose prose keeps its 56ch measure,
   while the FIGURES (models, lexicon, covenant rows, refusals) break out to
   use the width. D1 occupancy >=60% at 1920 comes from the composed frame
   (~1160 + 48 padding = ~1208) plus the wide figure grids; D2 keeps every
   prose block <=72ch. Tokens only -- no hardcoded hex, no --lum-* additions.
   ===================================================================== */
.about-spine { display:none; } /* base: hidden below the composition tier */

@media (min-width: 1200px) {
  .about {
    max-width:1160px;
    display:grid;
    grid-template-columns:184px minmax(0, 1fr);
    column-gap:48px;
    align-items:start;
  }
  /* spine spans all content rows (span 50 = implicit-row-safe) so its sticky
     area is the full column height; content lives in column 2. */
  .about > .about-spine {
    display:flex;
    flex-direction:column;
    gap:1px;
    grid-column:1;
    grid-row:1 / span 50;
    position:sticky;
    top:96px;
    align-self:start;
  }
  .about > *:not(.about-spine) { grid-column:2; min-width:0; }

  .about-spine-eyebrow {
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--gold);
    margin:0 0 12px 12px;
  }
  .about-spine-link {
    display:block;
    width:100%;
    text-align:left;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-3);
    background:none;
    border:none;
    border-left:2px solid transparent;
    padding:8px 12px;
    cursor:pointer;
    transition:color .2s, border-color .2s;
  }
  .about-spine-link:hover { color:var(--ink-2); }
  .about-spine-link.is-on { color:var(--gold); border-left-color:var(--gold); }
  /* DW-RING-RADIUS: no border-radius here -- the ring must never dictate the
     element's shape; outline already follows the element's own radius. */
  .about-spine-link:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

  .about .sect[id] { scroll-margin-top:96px; }

  /* THE MEASURE, WIDENED FOR THE WHOLE ≥1200 BAND (R-POLISH B4-FIX).
     This comment used to read "prose keeps its 56ch measure", and that WAS the
     DW-1 design — but it left the ≥1200 band a second-class reader. Preston's
     real viewport is 1360 CSS px, where `min-width:1600` never matches, so the
     XL tier's ≤72ch measure was unreachable on the owner's own machine while
     every verification ran at 1920/2560. The floors were never the problem here
     (measured at 1360: About 89.8%, Arcs 96.4% — HIGHER than at 1920, because
     the caps nearly fill the screen); the MEASURE was.

     72ch, the same value XL delivers, and the same two selectors it targets —
     so the reading treatment no longer depends on owning a wide monitor.
     Measured at 1360: 1ch = 8.09px, so 72ch = 583px inside a 928px content
     column. It fits across the whole band; the narrow edge (1200) is the
     binding case and was verified, not assumed.

     MEASURE-ONLY, deliberately: no cap change, no new breakpoint, no column
     restructure. It rides the EXISTING ≥1200 query rather than inventing a
     band, which is also why it cannot leak below 1200 — the base
     `.about .sect p{max-width:56ch}` (:9683) is untouched, so ≤1199 and mobile
     keep exactly what they had. Same specificity as that base rule (0,2,1);
     source order is what carries it, as it already does for the centring below.

     `.model-cap` and `.pull` are left alone — XL does not touch them either, and
     a centred mono caption is not prose.

     ⚠ `.about .lede` IS CURRENTLY INERT HERE — and it is inert in the XL block
     too, which is how it was found. `.about .hero .lede{max-width:420px}` is a
     BASE rule at (0,3,0); both this selector and XL's identical one are (0,2,0),
     so the base wins on specificity no matter the media query or source order.
     Measured: the lede is 420px at 1360 AND at 1920, i.e. XL never widened it
     either. It is kept here rather than dropped so the two tiers stay
     byte-equivalent in intent — if that base rule is ever re-scoped, both bands
     widen together instead of silently diverging. Naming it because an
     inert-looking-live declaration is exactly what this round keeps catching.
     The prose measure below is the part that actually moves, and it does. */
  .about .sect > p,
  .about .lede { max-width:72ch; }
  .about .sect > p { margin-left:auto; margin-right:auto; }
  .about .pull { max-width:62ch; }

  /* figures use the width: lexicon 3-up, covenant 2x2, refusals 2-col + capstone */
  .about .lex { grid-template-columns:1fr 1fr 1fr; }
  /* ME-1 (R-POLISH B4) added a FOURTH covenant row ("We count, we never watch").
     At repeat(3,1fr) that leaves one orphan alone on a second line; 2x2 is the
     honest shape for four. Changed WITH the content that changed the count —
     adding the row and leaving this at 3 would have shipped the orphan. */
  .about .featrows { display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; }
  .about .refuse { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  /* ...and a FIFTH refusal (no·5, the retention philosophy) in a 2-column grid
     would sit half-width in a row of its own. It spans instead, which reads as
     the closing statement it is rather than as a leftover. */
  .about .refuse .ref:last-child { grid-column:1 / -1; }
}

/* =====================================================================
   XL-1 · ABOUT AT THE WIDE DESK (R-POLISH B4)

   Measured at HEAD, not assumed: the DW-1 tier caps `.about` at 1160px, which
   was sized when 1200 was the wide tier. Against XL-1's >=60% occupancy floor:

     1920 -> 1208/1905 = 63.4%  PASS (barely, and unauthored — the cap simply
                                 happened to land there)
     2560 -> 1208/2545 = 47.5%  FAIL

   Re-tuned to 1560 — the same cap the arc Field (:12810), Book Detail (:11503)
   and Home (:15372) already use, so the app composes on ONE wide-desk width
   rather than a per-page guess.

   TWO NUMBERS, AND THEY ARE BOTH REAL — say which you mean.
   `.about` is content-box with 24px padding each side, so a 1560 CAP renders as
   a 1608 BORDER BOX. Occupancy is what the page actually occupies, i.e. the
   rendered box, which is also how this page's BEFORE figure was stated (DW-1's
   own "~1160 + 48 padding = ~1208", and the pre-B4 measurement 1208/1905 =
   63.4%). Measured, at the rendered box:

     1920 -> 1608/1905 = 84.4%   ·   2560 -> 1608/2545 = 63.2%   (both clear)

   (Dividing the CAP instead gives 81.9% / 61.3% — the figures the Arcs index
   reports, because its governed child has ZERO padding so there its cap and its
   rendered box are the same 1560. Same width, two paddings, two honest numbers.)

   WHAT THE WIDTH BUYS, per DW-1's own intent, which this tier extends rather
   than overrides: the PROSE does not get longer. It was measured at 56ch here,
   so it is allowed to grow to XL-1's 72ch ceiling and no further — "a wider
   <=72ch measure", exactly the detail archetype. The extra width goes to the
   FIGURES, which are diagrams rather than text and are the one thing on this
   page that genuinely reads better large. The spine widens a little with it.
   ===================================================================== */
@media (min-width: 1600px) {
  .about { max-width:1560px; grid-template-columns:220px minmax(0, 1fr); column-gap:56px; }
  /* the measure grows toward the ceiling, then stops. Without this the prose
     would run to ~77ch in the widened column — longer, not better. */
  .about .sect > p,
  .about .lede { max-width:72ch; }
}

/* =====================================================================
   yumi-intelligence Stage I -- reader-model section (Account page).
   Ported from the approved mockup (claude/serene-bassi-8e5dd6 @ e416a57),
   every selector namespaced rm-* UNDER .account-readermodel so nothing
   bleeds onto another surface. Tokens only -- no hardcoded hex. ADD-only;
   rewrites no existing rule. The frame is the shared .account-card.
   ===================================================================== */
.account-readermodel .rm-title { font-family:var(--font-serif); font-weight:600; font-size:1.5rem; line-height:1.15; color:var(--ink); margin:6px 0 8px; }
.account-readermodel .rm-lede { font-family:var(--font-serif); font-style:italic; font-size:1.08rem; line-height:1.45; color:var(--ink-2); margin:0 0 18px; }

.account-readermodel .rm-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); }
.account-readermodel .rm-toggle-copy { min-width:0; }
.account-readermodel .rm-toggle-label { font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--ink); }
.account-readermodel .rm-toggle-sub { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.03em; color:var(--ink-3); margin-top:4px; }
.account-readermodel .rm-toggle { flex:0 0 auto; position:relative; width:52px; height:30px; border-radius:var(--radius-pill); background:var(--sunk); border:1px solid var(--line-2); cursor:pointer; padding:0; transition:background var(--motion-base) var(--ease); }
.account-readermodel .rm-knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:var(--radius-pill); background:var(--text-on-dark); box-shadow:var(--shadow-1); transition:left var(--motion-base) var(--ease); }
/* R9b Lane G S7: reader-model toggle teal -> GOLD system (the DNA toggle joins the profile's gold). */
.account-readermodel .rm-toggle.rm-toggle-on { background:linear-gradient(135deg,var(--gold-hi),var(--gold)); border-color:var(--gold); }
.account-readermodel .rm-toggle.rm-toggle-on .rm-knob { left:27px; }

.account-readermodel .rm-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:18px 0 6px; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.account-readermodel .rm-col { padding:14px 16px 16px; }
.account-readermodel .rm-col + .rm-col { border-left:1px solid var(--border); }
.account-readermodel .rm-col-h { font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:11px; }
.account-readermodel .rm-col-will .rm-col-h { color:var(--gold-deep); } /* P9: interactive accent -> gold (was teal); AA 6.31 on light */
.account-readermodel .rm-col-wont .rm-col-h { color:var(--ink-3); }
.account-readermodel .rm-li { font-family:var(--font-body); font-size:13.5px; line-height:1.4; color:var(--ink-2); padding-left:18px; position:relative; margin-bottom:8px; }
.account-readermodel .rm-li:last-child { margin-bottom:0; }
.account-readermodel .rm-li::before { position:absolute; left:0; top:0; font-size:13px; }
.account-readermodel .rm-li-will::before { content:"\2713"; color:var(--gold-deep); } /* P9: checkmark -> gold */
.account-readermodel .rm-li-wont::before { content:"\2014"; color:var(--ink-4); }
.account-readermodel .rm-req-note { font-family:var(--font-mono); font-size:10px; letter-spacing:0.02em; color:var(--ink-3); line-height:1.5; margin:12px 0 0; }

.account-readermodel .rm-panel { margin-top:22px; padding-top:20px; border-top:1px solid var(--line-2); }
.account-readermodel .rm-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.account-readermodel .rm-panel-title { margin:0; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--marginalia-color); }
.account-readermodel .rm-status { font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em; color:var(--ink-3); }
.account-readermodel .rm-framing { margin:0 0 18px; font-family:var(--font-serif); font-size:15px; font-style:italic; color:var(--ink-2); line-height:1.5; }
.account-readermodel .rm-section + .rm-section { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.account-readermodel .rm-label { font-family:var(--font-mono); font-size:9.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.account-readermodel .rm-item { display:flex; align-items:flex-start; gap:12px; padding:11px 14px; margin-bottom:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg); }
.account-readermodel .rm-item:last-child { margin-bottom:0; }
.account-readermodel .rm-item-text { flex:1 1 auto; font-family:var(--font-body); font-size:14px; color:var(--ink); line-height:1.5; }
.account-readermodel .rm-item-actions { flex:0 0 auto; display:flex; gap:4px; }
.account-readermodel .rm-iconbtn { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); color:var(--ink-4); cursor:pointer; font-size:13px; line-height:1; transition:color var(--motion-base) var(--ease), background var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
.account-readermodel .rm-iconbtn:hover { color:var(--ink); background:var(--wash); border-color:var(--border); }
.account-readermodel .rm-del:hover { color:var(--danger); border-color:var(--danger); }
.account-readermodel .rm-empty { font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--ink-4); line-height:1.5; margin:0; }
.account-readermodel .rm-edit-wrap { flex:1 1 auto; display:flex; flex-direction:column; gap:8px; }
.account-readermodel .rm-edit-input, .account-readermodel .rm-arc-input { font-family:var(--font-body); font-size:14px; color:var(--ink); line-height:1.5; background:var(--surface); border:1px solid var(--river-l); border-radius:var(--radius-sm); padding:8px 10px; resize:vertical; min-height:54px; outline:none; width:100%; box-sizing:border-box; }
.account-readermodel .rm-edit-actions, .account-readermodel .rm-arc-actions { display:flex; gap:8px; align-items:center; margin-top:8px; }
.account-readermodel .rm-save { font-family:var(--font-body); font-size:12.5px; font-weight:700; color:var(--br-deep); background:linear-gradient(135deg,var(--gold-hi),var(--gold)); border:1px solid var(--gold); border-radius:var(--radius-pill); padding:6px 16px; cursor:pointer; } /* P9: gold system (was teal) */
.account-readermodel .rm-save:hover { filter:brightness(1.05); }
.account-readermodel .rm-cancel { font-family:var(--font-body); font-size:12.5px; color:var(--ink-3); background:none; border:none; cursor:pointer; padding:6px 6px; }
.account-readermodel .rm-cancel:hover { color:var(--ink); }
.account-readermodel .rm-add-row { display:flex; gap:8px; align-items:center; margin-top:10px; }
.account-readermodel .rm-add-input { flex:1 1 auto; font-family:var(--font-body); font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; outline:none; box-sizing:border-box; }
.account-readermodel .rm-add-input:focus { border-color:var(--river-l); }
.account-readermodel .rm-add-btn { flex:0 0 auto; font-family:var(--font-body); font-size:12.5px; font-weight:700; color:var(--br-deep); background:linear-gradient(135deg,var(--gold-hi),var(--gold)); border:1px solid var(--gold); border-radius:var(--radius-pill); padding:8px 16px; cursor:pointer; } /* P9: gold system (was teal) */
.account-readermodel .rm-add-btn:hover { filter:brightness(1.05); }
.account-readermodel .rm-arc-text { font-family:var(--font-body); font-size:14px; color:var(--ink); line-height:1.55; margin:0; }
.account-readermodel .rm-prov-note { font-family:var(--font-mono); font-size:10px; letter-spacing:0.03em; color:var(--ink-3); margin:8px 0 0; }
.account-readermodel .rm-foot { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.account-readermodel .rm-foot-note { font-family:var(--font-mono); font-size:10px; letter-spacing:0.03em; color:var(--ink-3); }
.account-readermodel .rm-forget { font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--danger); background:none; border:none; cursor:pointer; padding:0; text-decoration:none; }
.account-readermodel .rm-forget:hover { text-decoration:underline; }

@media (max-width:639px) {
  .account-readermodel .rm-grid { grid-template-columns:1fr; }
  .account-readermodel .rm-col + .rm-col { border-left:none; border-top:1px solid var(--border); }
}

/* =====================================================================
   UMBER shared primitives (canon §4-D) -- additive button / chip / row
   primitives the layout port adopts across surfaces (mockup .btn / .chip /
   .row2). Lifted from design/praxis-umber-mockup.html. NOTE: these rely on
   the dual-ground token flip already in theme.css -- --ink / --ink-2 / --wash /
   --border / --line-2 / --gold all resolve to the page set on bright surfaces
   and the study set under [data-ground="dark"], so a single rule reads
   correctly on BOTH grounds with no per-ground override. (.card is deferred:
   it collides with the existing `card cl-hero` element, views.js:5386.)
   ===================================================================== */
.btn {
  font-family:var(--font-body); font-size:14px; font-weight:500;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 18px; border-radius:var(--radius-pill); border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease), background var(--motion-base) var(--ease);
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--grad); color:var(--br-deep); border:none; box-shadow:0 2px 10px rgba(0,0,0,.28); font-weight:700; }
.btn-primary:hover { box-shadow:0 6px 20px rgba(0,0,0,.34); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn-quiet { background:var(--wash); color:var(--ink-2); border:1px solid var(--border); font-size:13px; padding:8px 14px; }
.btn-quiet:hover { color:var(--ink); border-color:var(--line-2); }
/* pointer-events:none is load-bearing, not belt-and-braces. The Notebook re-asserts
   cursor:pointer at (0,3,0) -- .notebook.lum-amber-deep .btn-primary/.createbtn --
   which outranks .btn[disabled] (0,2,0), so cursor:default below loses on the very
   surface the only disabled .btn lives on. What actually works is removing the
   element from hit-testing: the cursor then resolves from the PARENT. Deleting
   pointer-events:none restores the dead-button-looks-alive bug.
   cursor:default is family idiom (.otp-follow/.itx-send/.op-pub-confirm); given
   pointer-events:none it decides nothing. */
.btn[disabled] { opacity:.55; cursor:default; pointer-events:none; }
.chip {
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--wash); color:var(--ink-2); border:1px solid var(--border);
  transition:color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease);
}
.chip:hover { color:var(--ink); border-color:var(--line-2); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ============================================================================
   Umber port — Surface 6 (Notebook): mock #s-notebook frame over live data +
   features. EVERYTHING scoped under .notebook so the generic mock classes
   (.seg/.empty-state/.spacer/.bc/.bt/.ba/.lab/.crow + the .nb-* set) never bleed
   to other surfaces (.btn/.chip are the global foundation). Tokens are live
   theme.css vars (auto-flip per body[data-ground]); the notebook is bright.
   The old .notebook-header/-tabs/-bookhead/-leaf/-writeline/-gather/-working*
   rules above go dead with this port (selectors no longer match) — drift,
   flagged for a later cleanup pass, not reverted (Tier A precedent).
   ============================================================================ */
.notebook { max-width:1180px; margin:0 auto; padding:0 var(--sp-5); }
.notebook .spacer { flex:1; }

/* head: eyebrow + title, the consent (privacy) switch, the transparency chip */
.notebook-head { display:flex; align-items:flex-end; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.notebook .notebook-title { font-family:var(--font-serif); font-size:clamp(28px,4vw,40px); color:var(--ink); margin:0; line-height:1.05; }
.notebook .nb-switch { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-2); }
.notebook .nb-toggle { width:42px; height:24px; border-radius:var(--radius-pill); background:var(--teal); position:relative; border:none; cursor:pointer; flex:none; transition:background var(--motion-base) var(--ease); }
.notebook .nb-toggle::after { content:""; position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:var(--text-d); transition:right var(--motion-base) var(--ease), left var(--motion-base) var(--ease); }
.notebook .nb-toggle[aria-pressed="false"] { background:var(--line-page-2); }
.notebook .nb-toggle[aria-pressed="false"]::after { right:auto; left:3px; }
.notebook .nb-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* the bound-leaf spread */
.notebook .notebook-spread { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line-page-2); border:1px solid var(--line-page-2); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-page); }
.notebook .leaf { background:var(--page-2); background-image:radial-gradient(circle, color-mix(in srgb, var(--meta) 22%, transparent) 1.2px, transparent 1.4px); background-size:22px 22px; padding:var(--sp-5); min-height:520px; }
.notebook .leaf-left { border-right:1px solid var(--line-page); position:relative; }
/* R-POLISH B4 · THE SPINE LINE STOPS CUTTING THE CAPTURE CARD.
   Reported as a residual, unconfirmable by static reading (both candidates are
   properly contained), CONFIRMED by measuring the rendered geometry: the leaf's
   content starts at its padding, `--sp-5` = 34px, but this ruled margin was
   hardcoded at left:46px — 12px PAST the content edge. So the rule ran THROUGH
   every element on the left leaf, `.nb-composer` (the capture card) included;
   they are all transparent, which is why nothing covered it and why it read as a
   line slicing the card rather than as a margin.
   A margin rule belongs in the gutter, with content to its right.
   THE LEAF HAS THREE DIFFERENT LEFT PADDINGS depending on scope — 24px base
   (`--sp-5`, theme.css:232), 26px in the amber skin (:12342), 34px at the amber
   XL tier (:15608) — and the old 46px exceeded ALL THREE, which is why the rule
   crossed content on every desktop width rather than only one. So the fix cannot
   track "the" padding; it has to clear the SMALLEST. `calc(var(--sp-5) - 12px)`
   = 12px does, leaving the content edge 12 / 14 / 22px to its right in the three
   scopes. The line is 1px and decorative: no layout moves anywhere, and <=759
   already hides it (:10134), so mobile is untouched. */
.notebook .leaf-left::before { content:""; position:absolute; top:0; bottom:0; left:calc(var(--sp-5) - 12px); width:1px; background:color-mix(in srgb, var(--danger) 30%, transparent); }

/* left leaf: book/section head */
.notebook .nb-bookhead { display:flex; gap:12px; align-items:center; margin-bottom:var(--sp-4); padding-left:8px; }
.notebook .nb-bookhead .bc { width:40px; height:58px; border-radius:3px; box-shadow:var(--shadow-cover); flex:none; display:grid; place-items:center; color:var(--text-d); font-family:var(--font-serif); font-size:9px; line-height:1.1; text-align:center; padding:3px; overflow:hidden; background:linear-gradient(155deg, var(--gold-light), var(--surface-d)); }
.notebook .nb-bookhead .bt { font-family:var(--font-serif); font-size:18px; color:var(--ink); line-height:1.15; }
.notebook .nb-bookhead .ba { font-size:12px; color:var(--meta); margin-top:2px; }

/* left leaf: tabs (Inbox / Journal / per-book) */
.notebook .nb-tabs { display:flex; gap:6px; margin-bottom:var(--sp-4); padding-left:8px; flex-wrap:wrap; }
.notebook .nb-tab { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; padding:6px 12px; border-radius:var(--radius-pill); background:transparent; border:1px solid var(--line-page); color:var(--ink-2); cursor:pointer; }
.notebook .nb-tab.is-on { background:var(--ink); color:var(--page); border-color:var(--ink); }
.notebook .nb-tab .c { opacity:.6; margin-left:2px; }

/* left leaf: the note bank — mock .nb-entry look applied to the SHARED
   .notebook-entry markup (renderNotebookEntry is untouched; book-detail +
   sub-theory keep their styling). Register spine via the kept ::before/--reg. */
.notebook .leaf-left .notebook-entry { padding:12px 14px; background:var(--page); border:1px solid var(--line-page); border-radius:var(--radius-sm); margin:0 0 12px 8px; box-shadow:none; }
.notebook .leaf-left .notebook-entry:hover { border-color:var(--line-2); }
.notebook .leaf-left .notebook-entry::before { top:10px; bottom:10px; width:3px; border-radius:0; left:-1px; }
.notebook .leaf-left .notebook-entry-head { gap:8px; margin-bottom:7px; }
.notebook .leaf-left .notebook-entry-tag { font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:var(--radius-pill); border:none; }
.notebook .leaf-left .notebook-entry-tag-m { color:var(--register-marginalia); background:color-mix(in srgb,var(--register-marginalia) 14%,transparent); }
.notebook .leaf-left .notebook-entry-tag-q { color:var(--register-question); background:color-mix(in srgb,var(--register-question) 16%,transparent); }
.notebook .leaf-left .notebook-entry-tag-j { color:var(--register-journal); background:color-mix(in srgb,var(--register-journal) 16%,transparent); }
.notebook .leaf-left .notebook-entry-ts { font-family:var(--font-mono); font-size:9.5px; color:var(--meta); }
.notebook .leaf-left .notebook-entry-src { font-family:var(--font-mono); font-size:9.5px; color:var(--meta); margin-top:7px; }
.notebook .leaf-left .notebook-entry-body { font-family:var(--font-serif); font-size:15px; line-height:1.5; color:var(--ink); }
.notebook .leaf-left .notebook-entry-shots { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.notebook .leaf-left .notebook-entry.notebook-entry-gathered { box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }
/* actions kept (gather / add-to-arc / file / send / delete) — quiet, revealed on hover/focus */
.notebook .leaf-left .notebook-entry-acts { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; opacity:0; transition:opacity var(--motion-base) var(--ease); font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.notebook .leaf-left .notebook-entry:hover .notebook-entry-acts,
.notebook .leaf-left .notebook-entry:focus-within .notebook-entry-acts { opacity:1; }
.notebook .leaf-left .notebook-entry-acts a { color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent; cursor:pointer; }
.notebook .leaf-left .notebook-entry-acts a:hover { color:var(--gold); border-bottom-color:var(--gold); }
.notebook .leaf-left .notebook-empty-body { font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--ink-2); margin:8px 0 0 8px; }

/* right leaf: working page */
.notebook .leaf-right .nb-leaftag { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 var(--sp-4); }
.notebook .notebook-working-hint { font-family:var(--font-serif); font-style:italic; font-size:16px; line-height:1.6; color:var(--ink-2); margin:var(--sp-4) 0 0; }

/* composer (mock .nb-composer) */
.notebook .nb-composer { background:var(--page); border:1px solid var(--line-page); border-radius:var(--radius-md); padding:14px; }
.notebook .nb-composer .nb-ce { width:100%; box-sizing:border-box; min-height:64px; resize:none; color:var(--br-deep); font-family:var(--font-serif); font-size:16px; line-height:1.5; outline:none; border:none; background:transparent; display:block; }
.notebook .nb-composer .nb-ce::placeholder { color:var(--gold-ink); }
.notebook .nb-composer .nb-shots { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.notebook .nb-composer .crow { display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }

/* register segmented control in the composer (mock .seg) */
.notebook .seg { display:inline-flex; padding:3px; gap:2px; background:var(--sunk); border:1px solid var(--border); border-radius:var(--radius-pill); }
.notebook .seg-opt { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--ink-3); cursor:pointer; transition:color var(--motion-base) var(--ease); }
.notebook .seg-opt:hover { color:var(--ink); }
.notebook .seg-opt.is-on { background:var(--grad); color:var(--text-on-dark); font-weight:700; }

/* gather → sub-theory (mock .nb-gather) */
.notebook .nb-gather { margin-top:var(--sp-4); display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 14px; border:1px dashed var(--line-page-2); border-radius:var(--radius-md); }
.notebook .nb-gather .lab { font-family:var(--font-mono); font-size:11px; color:var(--ink-2); }

/* gathered-notes working block (live; richer than the mock demo) */
.notebook .nb-nameblock { margin-top:var(--sp-4); }
.notebook .nb-yname-tag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--meta); margin-bottom:5px; }
.notebook .nb-working-name { width:100%; box-sizing:border-box; font-family:var(--font-serif); font-size:18px; color:var(--ink); background:var(--page); border:1px solid var(--line-page); border-radius:var(--radius-sm); padding:8px 10px; }
.notebook .nb-wnote { background:var(--page); border:1px solid var(--line-page); border-radius:var(--radius-sm); padding:8px 10px; margin-top:8px; font-family:var(--font-serif); font-size:14px; line-height:1.45; color:var(--ink); }
.notebook .nb-wnote-tag { display:inline-block; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; margin-right:6px; vertical-align:1px; }
.notebook .nb-wnote-tag-marg { color:var(--register-marginalia); }
.notebook .nb-wnote-tag-ques { color:var(--register-question); }
.notebook .nb-wnote-tag-jour { color:var(--register-journal); }

/* resting Yumi complicate slot + clear (live; honest placeholder) */
.notebook .nb-complicate { margin-top:var(--sp-4); display:flex; gap:10px; align-items:flex-start; padding:12px 14px; background:color-mix(in srgb, var(--teal) 7%, var(--page)); border:1px solid var(--line-page); border-radius:var(--radius-md); }
.notebook .nb-ybubble { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:var(--text-on-dark); font-family:var(--font-mono); font-size:11px; }
.notebook .nb-ybubble-sm { width:20px; height:20px; font-size:9px; }
.notebook .nb-ctag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:3px; }
.notebook .nb-ctext { font-family:var(--font-serif); font-style:italic; font-size:14px; line-height:1.5; color:var(--ink-2); }
.notebook .nb-working-acts { margin-top:12px; }
.notebook .nb-working-clear { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); text-decoration:none; }
.notebook .nb-working-clear:hover { color:var(--danger); }

/* signed-out empty-state (mock #notebook-signedout) */
.notebook .empty-state { max-width:520px; margin:8vh auto; text-align:center; padding:0 var(--sp-5); }
.notebook .empty-state .em-mark { display:flex; justify-content:center; margin-bottom:20px; opacity:.9; }
.notebook .empty-state .em-mark svg { width:56px; height:56px; }
.notebook .empty-state h2 { font-family:var(--font-serif); font-size:30px; margin:0 0 12px; color:var(--ink); }
.notebook .empty-state p { font-family:var(--font-serif); font-style:italic; font-size:17px; line-height:1.6; margin:0 0 24px; color:var(--ink-2); }

/* mobile: single column (mock @media .notebook-spread{1fr}) */
@media (max-width:759px){
  .notebook .notebook-spread { grid-template-columns:1fr; }
  .notebook .leaf-left::before { display:none; }
}

/* ============================================================================
   Umber port — Surface 7 (Shelf): mock #s-books frame over live data + features.
   Scoped under .shelf so generic mock classes (.shelf-head/.shelf-toolbar/
   .shelf-side/.shelf-filter/.shelf-grid/.nav-search/.empty-state/.seg) don't
   bleed (.btn/.chip are the global foundation). Dark ground. The shared
   renderShelfBook/.shelf-book card markup is UNTOUCHED (also used by sub-theory
   + the account/book panel); the grid only lays the cards out. The old
   .shelf-header/-actions/-headline/-seg/-search-well/-chips/-sidebar/
   -filter-section/-filter-row/-list/-empty rules above go dead — drift, flagged.
   ============================================================================ */
.shelf { max-width:1180px; margin:0 auto; padding:0 var(--sp-5); }

/* head */
.shelf-head { display:flex; align-items:flex-end; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.shelf .shelf-title { font-family:var(--font-serif); font-size:clamp(28px,4vw,40px); color:var(--text-d); margin:0; line-height:1.05; }
.shelf .shelf-count { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--muted); }

/* toolbar (decluttered §4-E) */
.shelf-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--sp-5); }
.shelf-toolbar .spacer { flex:1; }
.shelf .seg { display:inline-flex; padding:3px; gap:2px; background:var(--sunk-d); border:1px solid var(--border); border-radius:var(--radius-pill); }
.shelf .seg-opt { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--muted); cursor:pointer; transition:color var(--motion-base) var(--ease); }
.shelf .seg-opt:hover { color:var(--text-d); }
.shelf .seg-opt.is-on { background:var(--grad); color:var(--br-deep); font-weight:700; }
.shelf .nav-search { flex:0 1 220px; display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--radius-pill); background:rgba(20,12,5,.4); border:1px solid var(--border); color:var(--muted); font-size:13px; }
.shelf .nav-search:hover { border-color:var(--border-2); }
.shelf .nav-search input { flex:1; background:transparent; border:none; color:var(--text-d); font-family:var(--font-body); font-size:13px; outline:none; }
.shelf .nav-search input::placeholder { color:var(--muted); }

/* scan status (live) */
.shelf .shelf-scan-status:empty { display:none; }
.shelf .shelf-scan-status { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted); margin:-12px 0 var(--sp-4); }

/* layout: 2-col grid; sidebar always visible on desktop */
.shelf .shelf-layout { display:grid; grid-template-columns:212px 1fr; gap:var(--sp-6); align-items:start; }
.shelf .shelf-side { position:sticky; top:74px; }
.shelf .shelf-side h3 { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.shelf .shelf-filter-group { margin-bottom:var(--sp-5); }
.shelf .shelf-filter-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.shelf .shelf-filter { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-radius:var(--radius-sm); color:var(--muted); font-size:13px; cursor:pointer; border:1px solid transparent; }
.shelf .shelf-filter:hover { background:var(--wash); color:var(--text-d); }
.shelf .shelf-filter.is-on { background:var(--wash); color:var(--text-d); border-color:var(--border); }
.shelf .shelf-filter .n { font-family:var(--font-mono); font-size:11px; opacity:.7; }
.shelf .shelf-filter.is-toggle { justify-content:flex-start; color:var(--gold); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; }
.shelf .shelf-filter.is-toggle:hover { background:transparent; color:var(--text-d); }
.shelf .shelf-lens-ask { display:block; width:100%; margin-top:8px; text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--gold); background:transparent; border:1px dashed var(--border-2); border-radius:var(--radius-sm); padding:8px 12px; cursor:pointer; transition:color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
.shelf .shelf-lens-ask:hover { color:var(--text-d); border-color:var(--gold); }

/* main column + grids */
.shelf .shelf-main { min-width:0; }
.shelf .shelf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-5); }
.shelf .shelf-rows { display:flex; flex-direction:column; }

/* empty-state (dark) */
.shelf .empty-state { max-width:520px; margin:8vh auto; text-align:center; padding:0 var(--sp-5); }
.shelf .empty-state .em-mark { display:flex; justify-content:center; margin-bottom:20px; opacity:.9; }
.shelf .empty-state .em-mark svg { width:56px; height:56px; }
.shelf .empty-state h2 { font-family:var(--font-serif); font-size:30px; margin:0 0 12px; color:var(--text-d); }
.shelf .empty-state p { font-family:var(--font-serif); font-style:italic; font-size:17px; line-height:1.6; margin:0 0 24px; color:var(--muted); }

/* desktop: Filters toggle hidden (sidebar always shown) */
@media (min-width:760px){
  .shelf .shelf-filters-btn { display:none; }
}

/* mobile (≤759): single column; sidebar becomes a drawer (live JS toggles
   .shelf-sidebar-mobile-open / .shelf-sidebar-backdrop-open) */
.shelf .shelf-sidebar-close { display:none; }
.shelf .shelf-sidebar-backdrop { display:none; position:fixed; inset:0; z-index:130; background:rgba(15,9,4,.6); }
.shelf .shelf-sidebar-backdrop.shelf-sidebar-backdrop-open { display:block; }
@media (max-width:759px){
  .shelf .shelf-layout { grid-template-columns:1fr; }
  .shelf .shelf-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .shelf .shelf-side {
    position:fixed; top:0; bottom:0; left:0; width:264px; z-index:131;
    background:var(--dark-2); padding:var(--sp-5); overflow-y:auto;
    -webkit-overflow-scrolling:touch;   /* B-M: momentum scroll — iOS < 13 / WebViews */
    transform:translateX(-110%); transition:transform var(--motion-base) var(--ease);
    box-shadow:var(--shadow-page);
  }
  .shelf .shelf-side.shelf-sidebar-mobile-open { transform:none; }
  .shelf .shelf-sidebar-close { display:block; position:absolute; top:12px; right:14px; background:transparent; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
}

/* ============================================================================
   Umber port — Surface 8 (Sub-theory writing): mock #s-subtheory frame over the
   live manuscript editor + cite-weave + evidence rail. Scoped under .st-page;
   BRIGHT ground. The cite-weave (preview/tip/chooser/autocomplete/pins), autosave
   (blur->updateSubTheory), register switch, source/attached/external rail, and
   mobile rail KEEP their behavior + live classes (restyled here) — only the outer
   frame adopts the mock vocabulary. Old .subtheory-page/-layout/-main/-rail (incl.
   the legacy 720 mobile block) + .subtheory-register-tab(-active)/-header-input/
   -delete-chip rules go dead — drift, flagged.
   ============================================================================ */
.st-page { max-width:1100px; margin:0 auto; padding:0 var(--sp-5); display:grid; grid-template-columns:1fr 300px; gap:var(--sp-6); align-items:start; }
.st-page .st-main { min-width:0; }

/* head: mark chip + title + delete */
.st-page .st-head { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.st-page .st-head .st-mark-chip { width:48px; height:48px; flex:none; border-radius:var(--radius-md); border:1px solid var(--line-page); background:var(--page-2); display:grid; place-items:center; cursor:pointer; padding:0; }
/* Fidelity: the glyph svg fills its span (inline width:100%), so the span must
   be sized -- the stale .st-mark-chip-mark{16px} rule made the mark tiny in the
   48px chip. Size the span to ~32px so the mark reads at the mock's scale. */
.st-page .st-head .st-mark-chip .st-mark-chip-mark { width:32px; height:32px; display:grid; place-items:center; }
.st-page .st-head .st-mark-chip svg { display:block; }
.st-page .st-title-input { flex:1; min-width:0; font-family:var(--font-serif); font-size:clamp(26px,3.4vw,38px); color:var(--ink); background:transparent; border:none; border-bottom:1px solid transparent; outline:none; padding:4px 0; }
.st-page .st-title-input:focus-visible { border-bottom-color:var(--gold-ink); }
.st-page .st-delete { background:transparent; border:none; color:var(--meta); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.st-page .st-delete:hover { color:var(--danger); }

/* maturity (computed) */
.st-page .st-maturity { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--meta); margin:0 0 22px 62px; display:flex; align-items:center; gap:8px; }
.st-page .st-maturity .glow { width:11px; height:11px; border-radius:50%; background:var(--teal); color:var(--teal); box-shadow:0 0 10px 2px currentColor; }

/* toggles row: register seg + write/preview seg + Published button */
.st-page .subtheory-toggles-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.st-page .st-register-toggle { margin-bottom:0; }
.st-page .seg { display:inline-flex; padding:3px; gap:2px; background:var(--wash-page); border:1px solid var(--line-page); border-radius:var(--radius-pill); }
.st-page .seg-opt { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--ink-3); cursor:pointer; transition:color var(--motion-base) var(--ease); }
.st-page .seg-opt:hover { color:var(--ink); }
.st-page .seg-opt.is-on { background:var(--grad); color:var(--text-on-dark); font-weight:700; }
.st-page .subtheory-preview-toggle { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--line-page); background:transparent; color:var(--ink-2); cursor:pointer; }
.st-page .subtheory-preview-toggle:hover { color:var(--ink); border-color:var(--gold-ink); }

/* manuscript: a paper card holding the textareas (Write) + cite-preview (Preview) */
.st-page .manuscript { background:var(--page-2); border:1px solid var(--line-page); border-radius:var(--radius-lg); box-shadow:var(--shadow-page); padding:clamp(22px,4vw,48px); position:relative; }
.st-page .manuscript .subtheory-register-body { width:100%; box-sizing:border-box; min-height:300px; resize:vertical; font-family:var(--font-serif); font-size:19px; line-height:1.72; color:var(--ink); background:transparent; border:none; outline:none; display:block; }
.st-page .manuscript .subtheory-register-body::placeholder { color:var(--meta); }
.st-page .manuscript .subtheory-cite-preview { font-family:var(--font-serif); font-size:19px; line-height:1.72; color:var(--ink); }
.st-page .manuscript .subtheory-cite-preview em { font-style:italic; }
.st-page .manuscript .subtheory-cite-coach { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--meta); margin-top:14px; }


/* mobile (≤759): single column; the rail becomes a bottom sheet (live JS toggles
   .subtheory-rail-mobile-open / .subtheory-rail-backdrop-open on the rail) */
.st-page .subtheory-rail-toggle,
.st-page .subtheory-rail-close,
.st-page .subtheory-rail-backdrop { display:none; }
@media (max-width:759px){
  .st-page { grid-template-columns:1fr; }
  .st-page .st-maturity { margin-left:0; }
  .st-page .subtheory-rail-toggle { display:inline-block; margin-bottom:20px; }
  .st-page .subtheory-rail-backdrop.subtheory-rail-backdrop-open {
    display:block; position:fixed; inset:0; background:rgba(15,9,4,.5); z-index:99;
  }
  .st-page .subtheory-rail-close { display:block; position:absolute; top:12px; right:12px; padding:4px 10px; background:transparent; border:none; font-size:22px; line-height:1; color:var(--ink-3); cursor:pointer; }
}

/* ============================================================================
   Umber port — Surface 9 (Arc field): mock #s-arc frame over the live two-view
   arc detail. Scoped under .arcfield; DARK ground. The constellation is KEPT as
   .arc-detail-web-view (all its layer-fade/drift/svg CSS + the invariant
   renderers stay byte-identical — Δ=0); only its host is also tagged .cstl-host
   and placed in the mock .arcfield-stage beside the new .arcfield-rail. The
   constellation control chrome (Connect/Reset/Layers + the .st-control-bar /
   .st-layers rules) is LEFT as-is (already Umber-recolored; canon §4-H = visual-
   only, don't rebuild). Old .arc-detail/-header/-title/-description/-toolbar(-btn)
   rules go dead — drift, flagged.
   ============================================================================ */
.arcfield { max-width:1180px; margin:0 auto; padding:0 var(--sp-5); }

/* head: question + sub-meta + the List/Web seg */
.arcfield-head { display:flex; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.arcfield-head .t { flex:1; min-width:240px; }
.arcfield .arcfield-q { font-family:var(--font-serif); font-style:italic; font-size:clamp(22px,3vw,30px); color:var(--text-d); line-height:1.25; margin:0; }
.arcfield .arcfield-desc { font-family:var(--font-serif); font-size:15px; line-height:1.5; color:var(--muted); margin:8px 0 0; }
.arcfield .arcfield-sub { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); margin-top:6px; }
/* kept head affordances (mock omits them) — quiet */
.arcfield-head .arc-detail-delete { background:transparent; border:none; color:var(--muted); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; align-self:center; }
.arcfield-head .arc-detail-delete:hover { color:var(--danger); }
.arcfield-head .arc-detail-addsub { background:transparent; border:1px solid var(--border-2); color:var(--gold); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; padding:6px 12px; border-radius:var(--radius-pill); cursor:pointer; align-self:center; }
.arcfield-head .arc-detail-addsub:hover { color:var(--text-d); border-color:var(--gold); }

/* List | Web seg (dark) */
.arcfield .seg { display:inline-flex; padding:3px; gap:2px; background:var(--sunk-d); border:1px solid var(--border); border-radius:var(--radius-pill); align-self:center; }
.arcfield .seg-opt { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--muted); cursor:pointer; transition:color var(--motion-base) var(--ease); }
.arcfield .seg-opt:hover { color:var(--text-d); }
.arcfield .seg-opt.is-on { background:var(--grad); color:var(--br-deep); font-weight:700; }

/* stage: constellation + rail (2-col) */
.arcfield .arcfield-stage { display:grid; grid-template-columns:1fr 232px; gap:var(--sp-5); align-items:start; }
.arcfield .arcfield-stage .arc-detail-web-view { min-width:0; }

/* rail */
.arcfield .arcfield-rail h3 { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; }
.arcfield .arcfield-member { display:flex; gap:10px; align-items:center; padding:8px; border-radius:var(--radius-sm); }
.arcfield .arcfield-member:hover { background:var(--wash); }
.arcfield .arcfield-member .mc { width:34px; height:50px; border-radius:3px; box-shadow:var(--shadow-cover); flex:none; display:grid; place-items:center; font-family:var(--font-serif); font-size:9px; line-height:1.1; text-align:center; color:var(--text-d); padding:3px; overflow:hidden; background:linear-gradient(155deg, var(--gold-light), var(--surface-d)); }
.arcfield .arcfield-member .mt { font-family:var(--font-serif); font-size:14px; color:var(--text-d); line-height:1.2; }
.arcfield .arcfield-member .ma { font-size:11px; color:var(--muted); }
.arcfield .arcfield-add-sub { width:100%; justify-content:center; margin-top:14px; }
.arcfield .arcfield-rail-hint { margin-top:14px; line-height:1.5; }

/* mobile: single column */
@media (max-width:759px){
  .arcfield .arcfield-stage { grid-template-columns:1fr; }
}

/* ============================================================================
   Umber port — Surface 10 (Yumi panel): mock aside#yumi-panel head + input +
   the in-panel "What Yumi sees" fold. Scoped under .yumi-panel. The panel's
   fixed slide-over + the .yumi-panel-open display/animation are KEPT (existing
   CSS above; the JS open-class is unchanged). The renamed-away legacy head /
   sight-link rules were DELETED by the S-B sweep (2026-08-08).
   ============================================================================ */
.yumi-panel .yumi-panel-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.yumi-panel .yumi-panel-head #panel-crest { display:grid; place-items:center; flex:none; }
.yumi-panel .yumi-panel-head #panel-crest svg { width:26px; height:26px; display:block; }
.yumi-panel .yumi-panel-head .yumi-panel-title { font-family:var(--font-serif); font-size:18px; color:var(--text-d); line-height:1.1; }
.yumi-panel .yumi-panel-sub { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.yumi-panel .yumi-panel-sight { margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--gold); border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px 10px; background:transparent; cursor:pointer; transition:color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
.yumi-panel .yumi-panel-sight:hover { color:var(--text-d); border-color:var(--gold); }

/* in-panel "What Yumi sees" fold: a flex item that takes the body's slot while
   the body is display:none, so the conversation is preserved underneath */
.yumi-panel .yumi-panel-sight-view { flex:1; overflow:auto; padding:16px; }
.yumi-panel .yumi-panel-sight-back { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--gold); background:transparent; border:none; cursor:pointer; margin-bottom:12px; padding:0; }
.yumi-panel .yumi-panel-sight-back:hover { color:var(--text-d); }

/* round icon buttons (mock voice + send); win over the base .yumi-send-btn/
   .yumi-mic-btn via the .yumi-panel scope */
.yumi-panel .yumi-icon-btn { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--wash); color:var(--gold); display:grid; place-items:center; font-size:15px; line-height:1; cursor:pointer; flex:none; padding:0; }
.yumi-panel .yumi-icon-btn:hover { color:var(--text-d); border-color:var(--gold); }
.yumi-panel .yumi-icon-btn.yumi-send { background:var(--grad); color:var(--br-deep); border:none; }
.yumi-panel .yumi-icon-btn.yumi-send:hover { color:var(--br-deep); }

/* Wave 7 · Surface A — Yumi panel reskin to .lum-amber-deep. ADDITIVE override
   (.yumi-panel.lum-amber-deep …); the slide-over base + open class (~L193) stay
   untouched — material/colour only. Overlay stays SOLID (no backdrop-filter, iOS
   rule); washes via color-mix off --lum-* (no raw hex). Ref: yumi-amber.html. */
.yumi-panel.lum-amber-deep {
  background: var(--lum-bg);
  border: 1px solid var(--lum-glass-bd);
  box-shadow: inset 0 1px 0 var(--lum-glass-bd-2), 0 30px 70px -44px rgba(0,0,0,.7);
  color: var(--lum-ink);
  font-family: var(--lum-sans);
}
.yumi-panel.lum-amber-deep .yumi-panel-head {
  border-bottom: 1px solid var(--lum-glass-bd-2);
  background: radial-gradient(130% 130% at 12% 0%, color-mix(in srgb, var(--lum-cyan) 12%, transparent) 0%, transparent 70%);
}
.yumi-panel.lum-amber-deep .yumi-panel-head .yumi-panel-title { font-family: var(--lum-serif); color: var(--lum-ink); }
.yumi-panel.lum-amber-deep .yumi-panel-sub {
  font-family: var(--lum-serif); font-style: italic; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--lum-ink-2);
}
.yumi-panel.lum-amber-deep .yumi-panel-sight {
  font-family: var(--lum-sans); font-size: 11px; letter-spacing: .02em;
  color: var(--lum-cyan); background: color-mix(in srgb, var(--lum-cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--lum-cyan) 40%, transparent);
}
.yumi-panel.lum-amber-deep .yumi-panel-sight:hover { color: var(--lum-cyan); border-color: color-mix(in srgb, var(--lum-cyan) 75%, transparent); }
.yumi-panel.lum-amber-deep .yumi-panel-close { color: var(--lum-ink-3); }
.yumi-panel.lum-amber-deep .yumi-panel-close:hover { color: var(--lum-ink); }
.yumi-panel.lum-amber-deep .yumi-panel-body { color: var(--lum-ink); }
.yumi-panel.lum-amber-deep .yumi-greeting { font-family: var(--lum-serif); color: var(--lum-ink-2); }
.yumi-panel.lum-amber-deep .yumi-msg-user {
  background: color-mix(in srgb, var(--lum-gold-l) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--lum-gold-l) 18%, transparent);
  border-radius: 15px 15px 4px 15px; font-family: var(--lum-sans); color: var(--lum-ink);
}
.yumi-panel.lum-amber-deep .yumi-msg-yumi {
  position: relative; padding-left: 20px;
  font-family: var(--lum-serif); font-style: italic; font-size: 18px; line-height: 1.46; color: var(--lum-ink);
}
.yumi-panel.lum-amber-deep .yumi-msg-yumi::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--lum-ink) 0%, var(--lum-cyan) 42%, color-mix(in srgb, var(--lum-cyan), var(--lum-base) 42%) 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lum-cyan) 70%, transparent);
}
.yumi-panel.lum-amber-deep .yumi-msg-typing { font-family: var(--lum-serif); font-style: italic; color: var(--lum-cyan); }
.yumi-panel.lum-amber-deep .yumi-msg-error { color: var(--lum-ink-3); }
.yumi-panel.lum-amber-deep .yumi-panel-input { border-top: 1px solid var(--lum-glass-bd-2); background: transparent; }
.yumi-panel.lum-amber-deep .yumi-input {
  background: color-mix(in srgb, var(--lum-base) 70%, transparent);
  border: 1px solid var(--lum-glass-bd); color: var(--lum-ink); font-family: var(--lum-serif);
}
.yumi-panel.lum-amber-deep .yumi-input:focus { border-color: var(--lum-cyan); }
.yumi-panel.lum-amber-deep .yumi-icon-btn { border: 1px solid var(--lum-glass-bd); background: var(--lum-glass); color: var(--lum-cyan); }
.yumi-panel.lum-amber-deep .yumi-icon-btn:hover { color: var(--lum-cyan); border-color: color-mix(in srgb, var(--lum-cyan) 60%, transparent); }
.yumi-panel.lum-amber-deep .yumi-icon-btn.yumi-send {
  background: linear-gradient(180deg, var(--lum-cyan), color-mix(in srgb, var(--lum-cyan), var(--lum-base) 40%));
  color: var(--lum-ink); border: none;
}
.yumi-panel.lum-amber-deep .yumi-icon-btn.yumi-send:hover { color: var(--lum-ink); }
.yumi-panel.lum-amber-deep .yumi-panel-sight-view { color: var(--lum-ink); }
.yumi-panel.lum-amber-deep .yumi-panel-sight-back { color: var(--lum-cyan); }
.yumi-panel.lum-amber-deep .yumi-panel-sight-back:hover { color: var(--lum-ink); }
.yumi-panel.lum-amber-deep .ground-chip { color: var(--lum-cyan); border-color: color-mix(in srgb, var(--lum-cyan) 30%, transparent); background: color-mix(in srgb, var(--lum-cyan) 10%, transparent); }
.yumi-panel.lum-amber-deep .ground-chip .gdot { background: var(--lum-cyan); }
/* Wave 7 mockup-truth fixes (A5/A7/A8/A10) */
.yumi-panel.lum-amber-deep .yumi-msg-userwrap { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 4px; }
.yumi-panel.lum-amber-deep .yumi-msg-who { font-family: var(--lum-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--lum-ink-4); margin: 0 4px 5px 0; }
.yumi-panel.lum-amber-deep .yumi-msg-userwrap .yumi-msg-user { margin-bottom: 0; }
.yumi-panel.lum-amber-deep .yumi-msg-typing { display: flex; align-items: center; gap: 10px; }
.yumi-panel.lum-amber-deep .yumi-typing-dots { display: inline-flex; gap: 4px; }
.yumi-panel.lum-amber-deep .yumi-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--lum-cyan); opacity: .5; animation: yumi-reach-pulse 1.2s ease-in-out infinite; }
.yumi-panel.lum-amber-deep .yumi-typing-dots i:nth-child(2) { animation-delay: .2s; }
.yumi-panel.lum-amber-deep .yumi-typing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes yumi-reach-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion:reduce) { .yumi-panel.lum-amber-deep .yumi-typing-dots i { animation: none; } }
.yumi-panel.lum-amber-deep .yumi-note { font-family: var(--lum-serif); font-style: italic; font-size: 13px; color: var(--lum-ink-4); text-align: center; padding: 4px 20px 12px; }
.yumi-panel.lum-amber-deep .yumi-icon-btn.yumi-send { border-radius: 50%; }

/* ============================================================================
   Umber port — FIDELITY: Account hero → mock .account-hero. The hero avatar is
   now the user's own constellation in a round .account-slot (their thinking-
   shape as their avatar) + the identity block; replaces the gradient initial.
   Wins over the live .account-hero (padding-only) / .account-hero.account-card
   (no longer matches — account-card dropped). The interactive "tap a mark"
   constellation stays its own section below (logged divergence). Dark ground.
   ============================================================================ */
.account-hero { display:flex; gap:var(--sp-5); align-items:center; padding:var(--sp-5); margin:0 auto var(--sp-5); background:var(--surface-d); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-d); }
.account-hero .account-slot { width:96px; height:96px; border-radius:50%; overflow:hidden; flex:none; background:var(--ground-grad),var(--ground); border:1px solid var(--border); --ink:var(--text-d); --ink-2:var(--text-d); --ink-3:var(--muted); --ink-4:var(--muted); }
.account-hero .account-slot svg { width:100%; height:100%; display:block; }
.account-hero .account-hero-text { flex:1 1 auto; min-width:0; }
.account-hero .account-hero-name { font-family:var(--font-serif); font-size:35px; font-weight:500; line-height:1.04; color:var(--text-d); margin:0 0 2px; }
.account-hero .account-hero-tagline { font-family:var(--font-serif); font-style:italic; font-size:18px; color:var(--text-d); margin-top:4px; }
/* Broadened from .account-hero so the relocated email reads the same quiet mono
   wherever it lives (now the "your data" card -- G2). */
.account .account-email-line { font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:8px; letter-spacing:.04em; }

/* ===== Portrait Fidelity G2 -- hero reconciliation (v6 mockup) ===== */
/* Hero avatar -> the reader's initial as a monogram on the primary gradient
   (var(--grad)) + a thin gold ring -- the nav avatar's mark, enlarged. Overrides
   the constellation .account-slot recipe (keeps its 96px round + overflow). */
.account .account-hero .account-hero-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  border: none;
  box-shadow: 0 0 0 1.5px var(--gold-light);
  color: var(--text-on-dark);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
}
/* "Publishing as <pen>" de-emphasized to quiet meta (was the italic --ink-3
   field-hint); the serif tagline above is now the prominent subtitle. */
.account .account-hero-pubas {
  margin: 3px 0 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}
/* Inline edit pencil after the name + descriptor (v6 mockup ✎). */
.account .portrait-pencil {
  margin-left: 8px;
  font-size: 13px;
  color: var(--gold);
  opacity: .7;
  cursor: pointer;
}
.account .portrait-pencil:hover,
.account .portrait-pencil:focus-visible {
  opacity: 1;
}
/* Stance line between the hero and VALUES (v6 mockup .stance): a bare covenant
   line with a small gold dot, outside any card. */
.account .portrait-stance {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 4px 0 4px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-4);
}
.account .portrait-stance-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .6;
}
@media (max-width:759px){
  .account-hero { flex-direction:column; text-align:center; }
}

/* ============================================================================
   Umber port — FIDELITY: Notebook cues. (1) The .bc spine chip now carries a
   SHORT label (surname/first-word) so it reads at a slightly larger size. (2)
   Per-entry privacy folded toward the mock — in the spread's left leaf, the
   "Visible to Yumi" affirmation is hidden (visible = unmarked default, like the
   mock) and "Private" is a quiet compact marker. SCOPED to .notebook .leaf-left
   so the SHARED renderNotebookEntry markup is untouched and book-detail /
   sub-theory keep the full vis indicator. (Composer placement is already the
   mock's right-leaf position — unchanged.)
   ============================================================================ */
.notebook .nb-bookhead .bc { font-size:10.5px; }
.notebook .leaf-left .notebook-entry-vis-on { display:none; }
.notebook .leaf-left .notebook-entry-vis-off { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--meta); }
.notebook .leaf-left .notebook-entry-vis-off .notebook-entry-vis-dot { display:none; }

/* ============================================================================
   Umber port — FIDELITY: Yumi panel voice-button order. Mock input row is
   voice → input → send; the live builds input → mic → send. The row is flex,
   so order:-1 moves the voice (mic) button to the left without a DOM/JS change.
   ============================================================================ */
.yumi-panel .yumi-panel-input .yumi-mic-btn { order:-1; }

/* ===================================================================
   WRITING CANVAS (Writing-Core build, Stage 2a) -- additive.
   The shared WritingCanvas substrate: a bright-page Cormorant serif prose
   canvas per design/writing-core-mockup.html + the S10.5.8 writing-surface
   grammar. Tokens only; resolves to the active ground (book detail is the
   bright page, so --ink/--page read bright). 2a.3 appends the cue,
   contextual-control, and focus-mode rules below this base block.
   =================================================================== */
.wc-wrap { position:relative; max-width:680px; }
.wc-input {
  display:block; width:100%; box-sizing:border-box;
  min-height:220px;
  border:0; outline:none; background:transparent;
  font-family:var(--font-serif); font-size:19px; line-height:1.66;
  color:var(--ink); caret-color:var(--marginalia-color);
  padding:6px 0 10px;
  white-space:pre-wrap; word-wrap:break-word; overflow-wrap:break-word;
}
/* contenteditable placeholder (the editor is truly empty until focus seeds a block) */
.wc-input:empty::before { content:attr(data-ph); color:color-mix(in srgb, var(--meta) 78%, transparent); font-style:italic; pointer-events:none; }
.wc-input::selection, .wc-input ::selection { background:color-mix(in srgb, var(--marginalia-color) 20%, transparent); color:var(--ink); }
/* 2b: live-rendered block elements inside the contenteditable canvas (tokens only) */
.wc-input h2 { font-family:var(--font-serif); font-weight:600; font-size:1.34em; color:var(--ink); margin:1.1em 0 .3em; letter-spacing:.004em; }
.wc-input h3 { font-family:var(--font-serif); font-weight:600; font-size:1.12em; color:var(--ink); margin:.9em 0 .26em; }
.wc-input h2:first-child, .wc-input h3:first-child, .wc-input p:first-child, .wc-input blockquote:first-child { margin-top:0; }
.wc-input p { margin:0 0 .7em; }
.wc-input strong { font-weight:700; color:var(--ink); }
.wc-input em { font-style:italic; }
.wc-input blockquote { margin:.7em 0; padding:2px 0 2px 18px; border-left:2px solid var(--gold-soft); font-style:italic; color:var(--ink-2); }
.wc-input ul.wc-bul, .wc-input ol.wc-num, .wc-input ul.wc-chk { list-style:none; margin:.3em 0 .7em; padding:0; }
.wc-input ul.wc-bul li { position:relative; padding-left:22px; margin:.12em 0; }
.wc-input ul.wc-bul li::before { content:""; position:absolute; left:4px; top:.62em; width:6px; height:6px; border-radius:50%; background:color-mix(in srgb, var(--meta) 85%, var(--ink-2)); }
.wc-input ol.wc-num { counter-reset:wcn; }
.wc-input ol.wc-num li { position:relative; padding-left:30px; margin:.12em 0; counter-increment:wcn; }
.wc-input ol.wc-num li::before { content:counter(wcn) "."; position:absolute; left:2px; top:0; font-family:var(--font-serif); font-weight:600; color:var(--gold-ink); }
.wc-input ul.wc-chk li { position:relative; padding-left:30px; margin:.18em 0; cursor:pointer; }
.wc-input ul.wc-chk li::before { content:""; position:absolute; left:0; top:.16em; width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line-2); background:var(--page-2); transition:background 160ms var(--ease), border-color 160ms var(--ease); }
.wc-input ul.wc-chk li::after { content:"✓"; position:absolute; left:0; top:.16em; width:19px; height:19px; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:12px; font-weight:700; color:var(--text-on-dark); opacity:0; transform:scale(.4); transition:opacity 160ms var(--ease), transform 160ms var(--ease); }
.wc-input ul.wc-chk li.wc-on::before { background:var(--marginalia-color); border-color:var(--marginalia-color); }
.wc-input ul.wc-chk li.wc-on::after { opacity:1; transform:scale(1); }
.wc-input ul.wc-chk li.wc-on .wc-lbl { color:var(--meta); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--meta) 55%, transparent); }
@media (prefers-reduced-motion:reduce) { .wc-input ul.wc-chk li::after { transition:none; } }
/* Quiet "Done" affordance for the inline marginalia adoption (replaces openEditor's
   Save/Cancel; the writing is already autosaved). A recessed pill, not a primary button. */
.wc-done {
  margin-top:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--meta); background:transparent;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:7px 16px; cursor:pointer;
  transition:background var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease);
}
.wc-done:hover { background:var(--wash); border-color:var(--line-2); color:var(--ink-2); }

/* 2a.3: the thin top bar (contextual control on the left, the "Saved" cue on the
   right) + focus mode. Tokens only; motion is the one --ease curve. */
.wc-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:26px; margin-bottom:2px; }
.wc-fmt { display:flex; align-items:center; gap:2px; opacity:0; pointer-events:none; transform:translateY(-3px); transition:opacity 150ms var(--ease), transform 150ms var(--ease); }
.wc-fmt.wc-fmt-on { opacity:1; pointer-events:auto; transform:none; }
.wc-fmt-btn { min-width:28px; height:26px; padding:0 7px; border:0; background:transparent; border-radius:var(--radius-sm); color:var(--ink-2); cursor:pointer; font-size:13px; line-height:1; transition:background 140ms var(--ease), color 140ms var(--ease); }
.wc-fmt-btn:hover { background:var(--wash); color:var(--ink); }
.wc-fmt-b { font-family:var(--font-serif); font-weight:700; font-size:15px; }
.wc-fmt-i { font-family:var(--font-serif); font-style:italic; font-size:15px; }
.wc-fmt-g { font-family:var(--font-mono); font-size:12px; letter-spacing:.01em; }
.wc-saved { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); opacity:0; transition:opacity 500ms var(--ease); }
.wc-saved.wc-saving, .wc-saved.wc-shown, .wc-saved.wc-failed { opacity:1; }
.wc-saved.wc-rest { opacity:.5; }
.wc-sdot { width:6px; height:6px; border-radius:50%; background:var(--marginalia-color); transition:background 300ms var(--ease); }
.wc-saved.wc-saving .wc-sdot { animation:wc-pulse 950ms ease-in-out infinite; }
.wc-saved.wc-failed .wc-sdot { background:var(--danger); }
@keyframes wc-pulse { 0%,100% { transform:scale(.7); opacity:.5; } 50% { transform:scale(1.15); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .wc-saved.wc-saving .wc-sdot { animation:none; } }
/* Focus mode: the nav recedes via OPACITY only -- it stays solid (no blur, no
   filter/transform), so the iOS fixed-child composite bug is never triggered. */
/* HD-1 (B2): this rule OWNS the nav's transition list. It sits later in the file
   than the HD-1 block near .app-nav's base rule, at equal specificity, so it was
   silently clobbering the transform transition (measured: computed transition read
   `opacity .35s` only). Both properties are declared here rather than fought over
   with specificity. Durations differ deliberately: opacity keeps --motion-base
   (350ms), the pre-MO-1 token this focus-dim shipped with, so writing-canvas focus
   behaviour is byte-identical; transform takes MO-1's --dur-gentle (300ms), which
   is what HD-1 specifies. */
.app-nav { transition:opacity var(--motion-base) var(--ease),
                      transform var(--dur-gentle) var(--ease-standard); }
body.wc-focus .app-nav { opacity:.26; }

/* 2c: rendered MARGINALIA card body -- the same wcRenderMarkdown output as the
   editor, sized COMPACT for cards and height-bounded (the base .notebook-entry-body
   has no clamp/overflow, so a long/structured note would otherwise blow the card).
   The container's prose style (italic in book-detail, plain in the notebook list)
   is INHERITED so a plain note looks unchanged; only headings go upright. Sizes are
   em-relative so they scale across both card contexts. Marginalia-only (this class
   is added only for isMarg in renderNotebookEntry); journal/question stay plain. */
.notebook-entry-body-md { max-height:15em; overflow:hidden; }
.notebook-entry-body-md > :first-child { margin-top:0; }
.notebook-entry-body-md > :last-child { margin-bottom:0; }
.notebook-entry-body-md p { margin:0 0 .45em; }
.notebook-entry-body-md h2 { font-family:var(--font-serif); font-weight:600; font-style:normal; font-size:1.15em; color:var(--ink); margin:.5em 0 .2em; line-height:1.2; }
.notebook-entry-body-md h3 { font-family:var(--font-serif); font-weight:600; font-style:normal; font-size:1.04em; color:var(--ink); margin:.45em 0 .18em; line-height:1.2; }
.notebook-entry-body-md strong { font-weight:700; }
.notebook-entry-body-md blockquote { margin:.4em 0; padding:1px 0 1px 14px; border-left:2px solid var(--gold-soft); color:var(--ink-2); }
.notebook-entry-body-md ul.wc-bul, .notebook-entry-body-md ol.wc-num, .notebook-entry-body-md ul.wc-chk { list-style:none; margin:.3em 0 .45em; padding:0; }
.notebook-entry-body-md ul.wc-bul li { position:relative; padding-left:18px; margin:.08em 0; }
.notebook-entry-body-md ul.wc-bul li::before { content:""; position:absolute; left:3px; top:.62em; width:5px; height:5px; border-radius:50%; background:color-mix(in srgb, var(--meta) 85%, var(--ink-2)); }
.notebook-entry-body-md ol.wc-num { counter-reset:wccn; }
.notebook-entry-body-md ol.wc-num li { position:relative; padding-left:24px; margin:.08em 0; counter-increment:wccn; }
.notebook-entry-body-md ol.wc-num li::before { content:counter(wccn) "."; position:absolute; left:1px; top:0; font-family:var(--font-serif); font-weight:600; font-style:normal; color:var(--gold-ink); }
.notebook-entry-body-md ul.wc-chk li { position:relative; padding-left:24px; margin:.1em 0; }
.notebook-entry-body-md ul.wc-chk li::before { content:""; position:absolute; left:0; top:.2em; width:15px; height:15px; border-radius:5px; border:1.5px solid var(--line-2); background:var(--page-2); }
.notebook-entry-body-md ul.wc-chk li::after { content:"✓"; position:absolute; left:0; top:.2em; width:15px; height:15px; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-style:normal; font-size:10px; font-weight:700; color:var(--text-on-dark); opacity:0; }
.notebook-entry-body-md ul.wc-chk li.wc-on::before { background:var(--marginalia-color); border-color:var(--marginalia-color); }
.notebook-entry-body-md ul.wc-chk li.wc-on::after { opacity:1; }
.notebook-entry-body-md ul.wc-chk li.wc-on .wc-lbl { color:var(--meta); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--meta) 55%, transparent); }

/* R-ARC S6c: recognition lighting -- quiet marking, deliberately NON-interactive (no cursor, no hover; DWF-1). */
.notebook-entry-body-md .rec-lit { border-bottom:1px dotted var(--gold); }

/* =====================================================================
   WAVE 4 (Phase 5) -- BOOK PAIR (Amber). Shared foundation for Book
   Detail (#book/<id>) and Book View (#book/<id>/marks). Both render in
   the .lum-amber-deep reading-room atmosphere (assets/lumen-amber.css,
   loaded before this file). Tokens are --lum-* only; no new 6-digit
   palette hex (rgba()/color-mix for alpha, matching the lumen
   conventions). Desktop-first (canon §3): base rules are desktop; the
   mobile collapse is the @media (max-width:759px) block at the very end
   of the WAVE 4 section (added per surface in its stage).
   ===================================================================== */

/* full-bleed amber surface root: self-paints the reading-room ground
   (lum-amber-deep sets --lum-bg) edge-to-edge, the body sitting DARK
   behind (book routes are in umberGroundDark) so no bright paper seam
   shows. min-height fills the viewport below the in-flow nav. */
.bk-surface{ width:100%; min-height:100vh; padding:34px 20px 80px; color:var(--lum-ink); font-family:var(--lum-sans); line-height:1.55; -webkit-font-smoothing:antialiased; }
.bk-shell{ max-width:840px; margin:0 auto; }
.bk-empty{ font-family:var(--lum-serif); font-size:19px; color:var(--lum-ink-2); }
.bk-title{ font-family:var(--lum-serif); font-weight:600; font-size:30px; color:var(--lum-ink); line-height:1.06; margin:0; }

/* shared cover: cloth/spine/glow frame holding the REAL cover image
   (.bk-cover-img) or a typeset cloth fallback (.bk-cover-cloth). Sized
   per-surface via --bk-cw/--bk-ch. .bk-cover-alight = the book has rooted
   sub-theories (root-mark dot + glow). */
.bk-cover{ position:relative; flex:none; width:var(--bk-cw,138px); height:var(--bk-ch,208px); border-radius:3px 7px 7px 3px;
  background:var(--lum-cloth);
  background:linear-gradient(135deg, var(--lum-cloth) 0%, color-mix(in srgb, var(--lum-cloth) 74%, #000) 100%);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.72), inset 1px 0 0 rgba(255,255,255,.07); }
.bk-cover-alight{ box-shadow:0 14px 30px -12px rgba(0,0,0,.72), 0 0 26px -3px rgba(255,231,154,.4), inset 1px 0 0 rgba(255,255,255,.07); }
.bk-cover-spine{ position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:3px 0 0 3px; background:linear-gradient(180deg, rgba(255,231,154,.45), rgba(207,156,42,.3)); z-index:2; }
.bk-cover-rmark{ position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 38% 32%, var(--lum-ink) 0%, var(--lum-gold-l) 45%, var(--lum-gold-ink) 100%);
  box-shadow:0 0 13px rgba(255,231,154,.75); }
.bk-cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; z-index:1; }
.bk-cover-cloth{ position:absolute; inset:0; padding:18px 15px 15px 20px; display:flex; flex-direction:column; border-radius:inherit; z-index:1; }
.bk-cover-ct{ font-family:var(--lum-serif); font-weight:600; font-size:20px; line-height:1.1; color:var(--lum-ink); text-shadow:0 1px 3px rgba(0,0,0,.4); }
.bk-cover-ca{ margin-top:auto; font-family:var(--lum-sans); font-size:11px; color:color-mix(in srgb, var(--lum-ink) 72%, transparent); }

/* lens/category tag row (genre + tradition = lens, category = cat). */
.bk-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bk-ltag{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-2); border:1px solid rgba(182,168,136,.28); border-radius:var(--lum-r-pill); padding:4px 11px 4px 9px; display:inline-flex; align-items:center; gap:7px; }
.bk-ltag-dot{ width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 38% 32%, var(--lum-gold-l) 0%, var(--lum-gold) 50%, var(--lum-gold-ink) 100%); box-shadow:0 0 6px rgba(255,231,154,.6); }
.bk-ltag-cat .bk-ltag-dot{ background:rgba(194,168,127,.5); box-shadow:none; border-radius:2px; }

/* sub-theory mark slot (PraxisMarks .lum-mark sizes itself via --cd). */
.bk-mark{ display:inline-flex; align-items:center; justify-content:center; }

/* read-status control (makeReadStatusControl .rstatus) restyled to the
   spec's statusset, SCOPED to the book surfaces so other .rstatus uses
   are untouched. */
.bk-surface .rstatus{ display:inline-flex; border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:3px; background:rgba(20,12,5,.4); }
.bk-surface .rs-opt{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-3); background:none; border:none; border-radius:var(--lum-r-pill); padding:7px 15px; cursor:pointer; }
.bk-surface .rs-opt.on{ color:var(--lum-gold-ink); background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); font-weight:600; }

/* WAVE 4 mobile collapse (shared). Surface-specific collapses append in
   their own stage blocks below this line. */
@media (max-width:759px){
  .bk-surface{ padding:24px 14px 72px; }
  .bk-shell{ max-width:none; }
}
/* ===== end WAVE 4 shared foundation ===== */

/* =====================================================================
   WAVE 4 · STAGE 2 — BOOK DETAIL (#book/<id>). Hero + cols + asides in
   the Amber spec, composed on .lum-glass cards. --lum-* only.
   ===================================================================== */

/* hero */
.bk-hero{ padding:28px 30px; margin:0 0 22px; display:flex; gap:28px; align-items:flex-start; }
.bk-hinfo{ flex:1; min-width:0; padding-top:2px; }
.bk-bt{ font-family:var(--lum-serif); font-weight:600; font-size:31px; color:var(--lum-ink); line-height:1.05; }
.bk-ba{ font-family:var(--lum-serif); font-style:italic; font-size:18px; color:var(--lum-ink-2); margin-top:3px; }
.bk-hinfo .bk-tags{ margin-top:14px; }
.bk-controls{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:18px; }
/* DW-POLISH (the fold): the hero's meta line carries the reader's relationship
   to the book -- status control + rating + finish date + moved-me. `.bk-rate`
   and `.bk-finished` hold the unique payload folded out of the retired
   `.bk-reading` aside card. ADDITIVE: `.bk-controls` above is untouched, and
   the fold is a DOM change so these apply at every width. The >=1200 tier adds
   the separator rule + the moved-me push (see the DW-POLISH block). */
.bk-rate{ display:inline-flex; align-items:center; gap:8px; }
.bk-finished{ display:inline-flex; align-items:baseline; gap:7px; }
.bk-ghostbtn{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-2); background:rgba(28,18,9,.5); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:8px 14px; cursor:pointer; }
.bk-ghostbtn:hover{ color:var(--lum-ink); border-color:rgba(255,231,154,.5); }
.bk-moved{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-3); background:none; border:1px solid rgba(182,168,136,.22); border-radius:var(--lum-r-pill); padding:8px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.bk-moved:hover{ color:var(--lum-ink-2); border-color:rgba(255,142,142,.4); }
.bk-moved.on{ color:var(--lum-rose); border-color:rgba(255,142,142,.45); }

/* "+ Add to a lens" inline panel */
.bk-lens-panel{ margin-top:14px; padding:14px 16px; }
.bk-lens-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bk-lens-none{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-3); }
.bk-lens-chip{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-2); background:rgba(28,18,9,.4); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:5px 12px; cursor:pointer; }
.bk-lens-chip.on{ color:var(--lum-gold-ink); background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border-color:transparent; font-weight:600; }
.bk-lens-new{ display:flex; gap:8px; margin-top:11px; }
.bk-lens-input{ flex:1; min-width:0; font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink); background:rgba(20,12,5,.4); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:7px 13px; }
.bk-lens-input::placeholder{ color:var(--lum-ink-4); }
.bk-lens-add{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-2); background:rgba(28,18,9,.5); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:7px 14px; cursor:pointer; white-space:nowrap; }
.bk-lens-add:hover{ color:var(--lum-ink); border-color:rgba(255,231,154,.5); }

/* front actions */
.bk-actions{ display:flex; gap:11px; flex-wrap:wrap; margin:0 0 22px; }
.bk-actionbtn{ font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink-2); background:rgba(28,18,9,.5); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:9px 16px; cursor:pointer; }
.bk-actionbtn:hover{ color:var(--lum-ink); border-color:rgba(255,231,154,.5); }
.bk-actionbtn-primary{ color:var(--lum-gold-ink); background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border-color:transparent; font-weight:600; }
.bk-actionbtn-primary:hover{ color:var(--lum-gold-ink); box-shadow:0 0 18px -6px rgba(255,206,74,.6); }
.bk-signin{ font-family:var(--lum-sans); font-size:13px; color:var(--lum-gold-ink); background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border:none; border-radius:var(--lum-r-pill); padding:10px 18px; cursor:pointer; font-weight:600; margin:0 0 22px; }

/* cols */
.bk-cols{ display:flex; gap:24px; align-items:flex-start; }
.bk-main{ flex:1; min-width:0; }
.bk-aside{ flex:none; width:250px; }
.bk-block{ padding:20px 22px; margin:0 0 16px; }
.bk-blabel{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-ink-3); margin:0 0 12px; }
.bk-synopsis{ font-family:var(--lum-serif); font-size:18px; line-height:1.55; color:var(--lum-ink-2); margin:0; }

/* in your thinking */
.bk-tcount{ font-family:var(--lum-serif); font-style:italic; font-size:16px; color:var(--lum-ink-2); margin:0 0 14px; }
/* R7: .bk-tcount-empty / .bk-glance / .bk-gitem / .bk-gt / .bk-gin / .bk-marksbtn /
   .bk-thinking removed with buildGlanceItem + the "Open your marks" door. */
.bk-draft{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--lum-ink-4); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:1px 6px; }

/* metadata aside */
.bk-meta dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 16px; }
.bk-meta dt{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--lum-ink-4); white-space:nowrap; }
.bk-meta dd{ margin:0; font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink-2); text-align:right; }

/* your reading aside */
.bk-rrow{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid rgba(182,168,136,.14); font-family:var(--lum-sans); font-size:13px; }
.bk-reading .bk-rrow:first-of-type{ border-top:none; }
.bk-rk{ color:var(--lum-ink-3); }
.bk-rv{ color:var(--lum-ink); font-weight:500; }
.bk-rv-read{ color:var(--lum-cyan); }
.bk-rate-stars{ display:inline-flex; gap:2px; }
.bk-star{ background:none; border:none; padding:0 1px; cursor:pointer; font-size:15px; line-height:1; color:rgba(182,168,136,.4); }
.bk-star.on{ color:var(--lum-gold); }

/* artifact card */
.bk-artifact-body{ font-family:var(--lum-serif); font-style:italic; font-size:16px; line-height:1.5; color:var(--lum-ink-2); margin:0; }
.bk-artifact-open, .bk-artifact-write{ display:inline-block; margin-top:13px; font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-gold-l); background:none; border:none; padding:0; cursor:pointer; text-decoration:none; }
.bk-artifact-open:hover, .bk-artifact-write:hover{ color:var(--lum-gold); }

/* edit / more disclosure */
.bk-edit-toggle{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-ink-3); background:none; border:1px solid rgba(182,168,136,.28); border-radius:var(--lum-r-pill); padding:7px 14px; cursor:pointer; margin:6px 0 0; }
.bk-edit-toggle:hover{ color:var(--lum-ink-2); border-color:rgba(255,231,154,.4); }
.bk-edit-panel{ margin:14px 0 0; padding:18px 20px; }
.bk-edit-row{ display:flex; align-items:center; gap:11px; margin:0 0 12px; }
.bk-edit-label{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--lum-ink-4); min-width:62px; }
.bk-edit-input, .bk-edit-select{ flex:1; min-width:0; font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink); background:rgba(20,12,5,.4); border:1px solid rgba(182,168,136,.3); border-radius:8px; padding:7px 11px; }
.bk-edit-input::placeholder{ color:var(--lum-ink-4); }
.bk-edit-btn{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-2); background:rgba(28,18,9,.5); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:8px 14px; cursor:pointer; }
.bk-edit-btn:hover{ color:var(--lum-ink); border-color:rgba(255,231,154,.5); }
.bk-edit-btn:disabled{ opacity:.6; cursor:default; }
.bk-edit-remove{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-rose); background:none; border:1px solid rgba(255,142,142,.35); border-radius:var(--lum-r-pill); padding:8px 14px; cursor:pointer; margin-top:4px; }
.bk-edit-remove:hover{ border-color:rgba(255,142,142,.6); }
.bk-remove-confirm{ margin-top:4px; }
.bk-remove-msg{ font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink-2); margin:0 0 9px; }
.bk-remove-actions{ display:flex; gap:9px; }
.bk-remove-cancel{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-2); background:rgba(28,18,9,.5); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:7px 14px; cursor:pointer; }
.bk-remove-confirm-btn{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink); background:var(--lum-rose); border:none; border-radius:var(--lum-r-pill); padding:7px 14px; cursor:pointer; font-weight:600; }

/* links */
.bk-find, .bk-backlink{ display:inline-block; margin-top:14px; font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-gold-l); text-decoration:none; }
.bk-find:hover, .bk-backlink:hover{ color:var(--lum-gold); }

/* STAGE 2 mobile collapse */
@media (max-width:759px){
  .bk-hero{ flex-direction:column; align-items:center; text-align:center; padding:22px 18px; }
  .bk-hinfo{ width:100%; }
  .bk-hinfo .bk-tags, .bk-controls{ justify-content:center; }
  .bk-cols{ flex-direction:column; }
  .bk-aside{ width:100%; }
  .bk-bt{ font-size:26px; }
}
/* ===== end WAVE 4 · Stage 2 ===== */

/* =====================================================================
   WAVE 4 · STAGE 3 — BOOK VIEW (#book/<id>/marks). Book header +
   "What you marked" (real notes; no fabricated passage/location) +
   "What it grew into" (rooted sub-theory marks -> their Page).
   ===================================================================== */

/* R7: book-view header rules (.bk-bookhead / .bk-bookmeta / .bk-brow /
   .bk-statuspill + their mobile overrides) removed with the retired marks page;
   book detail uses .bk-hero / .bk-hinfo / .bk-bt / .bk-ba. */

/* sections */
.bk-sec{ margin:0 0 26px; }
.bk-sechead{ font-family:var(--lum-serif); font-weight:500; font-size:23px; color:var(--lum-ink); margin:0 0 4px; }
.bk-secsub{ font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink-3); margin:0 0 16px; }
.bk-empty-note{ font-family:var(--lum-serif); font-style:italic; font-size:16px; color:var(--lum-ink-3); margin:0; }

/* what you marked -- marginalia cards (gold left-accent = the "marked"
   signature; the passage-quote slot is intentionally absent, never faked) */
.bk-marg{ padding:18px 22px; margin:0 0 13px; border-left:2px solid rgba(255,231,154,.45); }
/* DWF-1 dropped the decorative glyph rule; gap is inert at one item and is
   where MARG-EDIT's real pencil returns. */
.bk-annot{ display:flex; gap:10px; align-items:flex-start; }
.bk-atext{ font-family:var(--lum-sans); font-size:14.5px; color:var(--lum-ink-2); line-height:1.5; }
.bk-margmeta{ margin-top:13px; padding-top:11px; border-top:1px solid rgba(182,168,136,.14); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.bk-loc{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.05em; color:var(--lum-ink-4); }
.bk-becamelink{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-cyan); cursor:pointer; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(127,208,240,.3); border-radius:var(--lum-r-pill); padding:5px 12px; background:none; }
.bk-becamelink:hover{ border-color:rgba(127,208,240,.7); }
.bk-gl{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 6px currentColor; flex:none; }

/* what it grew into -- grew rows */
.bk-grew{ padding:15px 20px; margin:0 0 11px; display:flex; align-items:center; gap:16px; cursor:pointer; }
.bk-grew:hover{ border-color:rgba(255,231,154,.3); }
.bk-gli{ flex:none; }
.bk-gbody{ flex:1; min-width:0; }
.bk-grew-t{ font-family:var(--lum-serif); font-weight:600; font-size:19px; color:var(--lum-ink); line-height:1.15; }
.bk-grew-in{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-3); margin-top:2px; }
.bk-grew-in b{ color:var(--lum-ink-2); font-weight:600; }
.bk-gopen{ flex:none; font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-2); border:1px solid rgba(182,168,136,.3); border-radius:var(--lum-r-pill); padding:7px 14px; background:none; cursor:pointer; }
.bk-grew:hover .bk-gopen{ color:var(--lum-ink); border-color:rgba(255,231,154,.5); }
.bk-grewnote{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-3); margin:14px 0 0; display:flex; align-items:center; gap:9px; }
.bk-rmark2{ flex:none; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 38% 32%, var(--lum-ink) 0%, var(--lum-gold-l) 45%, var(--lum-gold-ink) 100%); box-shadow:0 0 10px rgba(255,231,154,.6); }

/* STAGE 3 mobile collapse */
@media (max-width:759px){
  .bk-grew{ gap:12px; }
}
/* ===== end WAVE 4 · Stage 3 ===== */

/* =====================================================================
   R7 (S5) — BOOK DETAIL: the Universal v1.2 LIGHT re-ground. A SCOPED
   override (Shelf R2 / Home R3 precedent): re-points --lum-* WITHIN
   .bk-surface + adds --bk-* depth vars + literal-rescues the dark-ground
   .bk-* rules to light + the new-element rules (arc chips, woven dots,
   subhead, show-all, sign-in row, gilded primary) + the BD2 mobile 4-I
   reorder. Ports docs/studio/mockups/book-detail.html (25c7987) faithfully.
   Edits NO base rule and NO --lum-* DEFINITION; .bk-surface is unique to
   the book pair so nothing bleeds. The Artifact view (#artifact) is a
   different surface (bookAmberSurface is book-pair only) and is untouched.
   ===================================================================== */

/* 1 · scoped token re-point (light Universal) + --bk-* depth vars + the light
   atmospheric ground (recipe 6) replacing .lum-amber-deep's dark radial. */
.bk-surface.lum-amber-deep{
  --lum-ink:#241710; --lum-ink-2:#645940; --lum-ink-3:#645940; --lum-ink-4:#7c7052;
  --lum-base:#fffdf8; --lum-cloth:#e3d8c1; --lum-rose:#b8563f; /* R7: AA-safe rose (was #c2603a ~4.1:1; #b8563f ~4.65:1, matches Home) */
  --lum-gold:#a8761a; --lum-gold-l:#d9a441; --lum-gold-d:#855410; --lum-gold-ink:#3d2807;
  --lum-glass:linear-gradient(180deg,#fffdf8,#fdf8ea);
  --lum-glass-bd:#e3d8c1; --lum-glass-bd-2:#e3d8c1;
  --bk-line:#e3d8c1; --bk-surface-2:#efe7d6; --bk-gold-deep:#855410; --bk-gold-hi:#d9a441;
  --bk-star:#ffce4a; --bk-cyan-text:#256b80;
  --bk-field-1:#f2c25a; --bk-field-2:#e07a52; --bk-field-3:#d98f8a; --bk-field-4:#f5bace; --bk-field-5:#a9b98c;
  --bk-field-6:#98d4b0; --bk-field-7:#8590d8; --bk-field-8:#f8e078; --bk-field-9:#e8b068; --bk-field-10:#b8896c;
  background-color:#f4efe4;
  background-image:
    radial-gradient(72% 56% at 16% 4%,  rgba(248,228,176,.55) 0%, rgba(248,228,176,0) 60%),
    radial-gradient(60% 52% at 88% 14%, rgba(232,200,135,.42) 0%, rgba(232,200,135,0) 62%),
    radial-gradient(82% 62% at 64% 104%,rgba(232,176,104,.30) 0%, rgba(232,176,104,0) 60%),
    linear-gradient(155deg,#f4efe4,#eee4cd);
  background-attachment:fixed;
}

/* 2 · card plane -- lum-glass becomes a solid lit LIGHT sheet (no blur). */
.bk-surface .lum-glass{
  border:1px solid var(--bk-line);
  box-shadow:0 6px 22px -12px rgba(120,75,15,.28), inset 0 1px 0 rgba(255,250,235,.9);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* 3 · cover -- light cloth; luminous presence kept (alight glow + root-mark). */
.bk-surface .bk-cover{ background:linear-gradient(135deg,#e3d8c1 0%,#d3c4a6 100%);
  box-shadow:0 14px 30px -14px rgba(120,75,15,.4), inset 1px 0 0 rgba(255,255,255,.5); }
.bk-surface .bk-cover-alight{ box-shadow:0 14px 30px -14px rgba(120,75,15,.4), 0 0 24px -4px rgba(255,206,74,.55), inset 1px 0 0 rgba(255,255,255,.5); }
.bk-surface .bk-cover-spine{ background:linear-gradient(180deg,var(--bk-gold-hi),var(--lum-gold)); }
.bk-surface .bk-cover-rmark{ background:radial-gradient(circle at 38% 32%, #fff6da 0%, var(--bk-star) 45%, var(--lum-gold) 100%); box-shadow:0 0 13px rgba(255,206,74,.7); }
.bk-surface .bk-cover-ct{ color:#3a2c17; text-shadow:none; }
.bk-surface .bk-cover-ca{ color:#6b5b3c; }

/* 4 · lens/category tags. */
.bk-surface .bk-ltag{ color:var(--lum-ink-2); border-color:var(--bk-line); }
.bk-surface .bk-ltag-dot{ background:radial-gradient(circle at 38% 32%, var(--bk-gold-hi) 0%, var(--lum-gold) 60%, var(--bk-gold-deep) 100%); box-shadow:none; }
.bk-surface .bk-ltag-cat .bk-ltag-dot{ background:rgba(150,120,70,.6); }

/* 5 · Yumi line -- cyan dot kept, text deep-teal (AA). */
.bk-surface .lum-yumi p{ color:var(--bk-cyan-text); }

/* 6 · read-status control. */
.bk-surface .rstatus{ border-color:var(--bk-line); background:var(--bk-surface-2); }
.bk-surface .rs-opt{ color:var(--lum-ink-2); }
.bk-surface .rs-opt.on{ color:var(--lum-gold-ink); background:linear-gradient(180deg,#f2c25a,#e0a838); }

/* 7 · hero lamplight (recipe 4 -- one wash per region). */
.bk-surface .bk-hero{ position:relative; overflow:hidden; }
.bk-surface .bk-hero::before{ content:''; position:absolute; inset:-30% -10% auto -10%; height:150%; pointer-events:none;
  background:radial-gradient(ellipse at 20% 30%, rgba(242,194,90,.20) 0%, rgba(242,194,90,0) 68%); }
.bk-surface .bk-hero > *{ position:relative; }

/* 8 · moved-me. */
.bk-surface .bk-moved{ color:var(--lum-ink-2); border:1px solid var(--bk-line); background:none; }
.bk-surface .bk-moved:hover{ border-color:rgba(194,96,58,.4); }
.bk-surface .bk-moved.on{ color:var(--lum-rose); border-color:rgba(194,96,58,.5); background:rgba(194,96,58,.08); }

/* 9 · EVOLVED F4 -- hero arc chips (field-spectrum hue by id-hash, set inline). */
.bk-surface .bk-arcchips{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.bk-surface .bk-arcchips-label{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-ink-2); margin-right:2px; }
.bk-surface .bk-arcchip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--lum-mono); font-size:11px; letter-spacing:.02em; color:var(--lum-ink-2); background:var(--bk-surface-2); border:1px solid var(--bk-line); border-radius:var(--lum-r-pill); padding:5px 12px; text-decoration:none; cursor:pointer; }
.bk-surface .bk-arcchip::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--arc); flex:none; }
.bk-surface .bk-arcchip:hover{ border-color:var(--arc); color:var(--lum-ink); }

/* 10 · action row -- quiet secondaries + the gilded primary (recipe 5). */
.bk-surface .bk-actionbtn{ color:var(--lum-ink-2); background:var(--bk-surface-2); border:1px solid var(--bk-line); }
.bk-surface .bk-actionbtn:hover{ color:var(--lum-ink); border-color:var(--bk-gold-hi); }
.bk-surface .bk-actionbtn-primary{ color:var(--lum-gold-ink); border:1px solid var(--bk-gold-deep);
  background:linear-gradient(180deg,#f2c25a 0%, var(--bk-gold-hi) 40%, var(--lum-gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 6px 18px -8px rgba(217,164,65,.6); }
.bk-surface .bk-actionbtn-primary:hover{ color:var(--lum-gold-ink); box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 9px 22px -8px rgba(217,164,65,.72); }

/* 11 · EVOLVED F3 -- signed-out sign-in row. */
.bk-surface .bk-signinrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 26px; padding:16px 20px; }
.bk-surface .bk-signinrow p{ font-family:var(--lum-serif); font-style:italic; font-size:16px; color:var(--lum-ink-2); margin:0; flex:1; min-width:200px; }
.bk-surface .bk-signin{ color:var(--lum-gold-ink); border:1px solid var(--bk-gold-deep); background:linear-gradient(180deg,#f2c25a 0%, var(--bk-gold-hi) 40%, var(--lum-gold) 100%); box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 6px 18px -8px rgba(217,164,65,.6); }

/* 12 · eyebrows + section heads. */
.bk-surface .bk-blabel{ color:var(--bk-gold-deep); }
.bk-surface .bk-subhead{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bk-gold-deep); margin:22px 0 12px; }
.bk-surface .bk-secsub{ color:var(--lum-ink-2); }
.bk-surface .bk-tcount{ color:var(--lum-ink-2); }
.bk-surface .bk-empty-note{ color:var(--lum-ink-2); }
.bk-surface .bk-synopsis{ color:var(--lum-ink-2); }

/* 13 · marginalia cards + EVOLVED FIX woven/unwoven dots. */
.bk-surface .bk-marg{ border-left:2px solid var(--bk-gold-hi); }
.bk-surface .bk-atext{ color:var(--lum-ink-2); }
.bk-surface .bk-margmeta{ border-top:1px solid var(--bk-line); }
.bk-surface .bk-margmeta-l{ display:inline-flex; align-items:center; gap:9px; }
.bk-surface .bk-loc{ color:var(--lum-ink-2); }
.bk-surface .bk-marg-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.bk-surface .bk-marg-dot.woven{ background:var(--dot,var(--lum-gold)); box-shadow:0 0 6px -1px var(--dot,var(--lum-gold)); }
.bk-surface .bk-marg-dot.unwoven{ background:transparent; border:1.5px solid #b0a284; }
/* MARG-EDIT (R-POLISH B3) · the wired pencil. Quiet at rest so a column of marks
   does not read as a column of buttons, full-strength on hover AND focus-visible
   (keyboard reach is not a hover). 44x44 hit area via padding at <=759 lands in
   the mobile block; here it is a text-weight affordance sitting in the meta row.
   Glyph is the '✎' this surface already uses on its primary action (:9959) --
   ICON LAW: one dialect per surface, not a second glyph family for one button. */
.bk-surface .bk-margedit{
  background:none; border:none; padding:0 2px; cursor:pointer; line-height:1;
  font-size:12px; color:var(--lum-ink-4); opacity:.55;
  transition:opacity var(--dur-fast,150ms) ease, color var(--dur-fast,150ms) ease;
}
.bk-surface .bk-margedit:hover,
.bk-surface .bk-margedit:focus-visible{ opacity:1; color:var(--lum-gold-d); }
.bk-surface .bk-margedit:focus-visible{ outline:2px solid rgba(255,206,74,.5); outline-offset:2px; }
.bk-surface .bk-unwoven-note{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.04em; color:var(--lum-ink-2); opacity:.8; }
.bk-surface .bk-becamelink{ color:var(--lum-ink-2); border:1px solid var(--bk-line); background:none; }
.bk-surface .bk-becamelink:hover{ border-color:var(--bk-gold-hi); color:var(--lum-ink); }

/* 14 · EVOLVED F2 -- show-all disclosure. */
.bk-surface .bk-marg.is-folded{ display:none; }
.bk-surface .bk-showall{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.05em; color:var(--bk-gold-deep); background:none; border:1px dashed var(--bk-line); border-radius:var(--lum-r-pill); padding:8px 14px; cursor:pointer; margin:2px 0 6px; }
.bk-surface .bk-showall:hover{ color:var(--lum-gold); border-color:var(--bk-gold-hi); }

/* 15 · grew rows. */
.bk-surface .bk-grew:hover{ border-color:var(--bk-gold-hi); }
.bk-surface .bk-grew-t{ color:var(--lum-ink); }
.bk-surface .bk-grew-in{ color:var(--lum-ink-2); }
.bk-surface .bk-grew-in b{ color:var(--lum-ink); }
.bk-surface .bk-draft{ color:var(--lum-ink-2); border-color:var(--bk-line); }
.bk-surface .bk-gopen{ color:var(--lum-ink-2); border:1px solid var(--bk-line); background:none; }
.bk-surface .bk-grew:hover .bk-gopen{ color:var(--lum-ink); border-color:var(--bk-gold-hi); }
.bk-surface .bk-grewnote{ color:var(--lum-ink-2); }
.bk-surface .bk-rmark2{ background:radial-gradient(circle at 38% 32%, #fff6da 0%, var(--bk-star) 45%, var(--lum-gold) 100%); box-shadow:0 0 10px rgba(255,206,74,.55); }

/* 16 · aside metadata + reading. */
.bk-surface .bk-meta dt{ color:var(--lum-ink-2); }
.bk-surface .bk-meta dd{ color:var(--lum-ink); }
.bk-surface .bk-rrow{ border-top:1px solid var(--bk-line); }
.bk-surface .bk-rk{ color:var(--lum-ink-2); }
.bk-surface .bk-rv{ color:var(--lum-ink); }
.bk-surface .bk-rv-read{ color:var(--bk-gold-deep); }
.bk-surface .bk-star{ color:rgba(150,120,70,.45); }
.bk-surface .bk-star.on{ color:var(--lum-gold); }
.bk-surface .bk-artifact-body{ color:var(--lum-ink-2); }
.bk-surface .bk-artifact-open, .bk-surface .bk-artifact-write{ color:var(--bk-gold-deep); }
.bk-surface .bk-artifact-open:hover, .bk-surface .bk-artifact-write:hover{ color:var(--lum-gold); }

/* 17 · edit panel. */
.bk-surface .bk-edit-toggle{ color:var(--lum-ink-2); border:1px solid var(--bk-line); background:none; }
.bk-surface .bk-edit-toggle:hover{ color:var(--lum-ink); border-color:var(--bk-gold-hi); }
.bk-surface .bk-edit-label{ color:var(--lum-ink-2); }
.bk-surface .bk-edit-input, .bk-surface .bk-edit-select{ color:var(--lum-ink); background:var(--lum-base); border:1px solid var(--bk-line); }
.bk-surface .bk-edit-btn{ color:var(--lum-ink-2); background:var(--bk-surface-2); border:1px solid var(--bk-line); }
.bk-surface .bk-edit-btn:hover{ color:var(--lum-ink); border-color:var(--bk-gold-hi); }
.bk-surface .bk-edit-remove{ color:var(--lum-rose); border:1px solid rgba(194,96,58,.4); background:none; }
.bk-surface .bk-edit-remove:hover{ border-color:var(--lum-rose); }
.bk-surface .bk-remove-msg{ color:var(--lum-ink-2); }
.bk-surface .bk-remove-cancel{ color:var(--lum-ink-2); background:var(--bk-surface-2); border:1px solid var(--bk-line); }
.bk-surface .bk-remove-confirm-btn{ color:#fff; background:var(--lum-rose); }

/* 18 · links. */
.bk-surface .bk-find, .bk-surface .bk-backlink{ color:var(--bk-gold-deep); }
.bk-surface .bk-find:hover, .bk-surface .bk-backlink:hover{ color:var(--lum-gold); }

/* 19 · BD2 mobile canon 4-I reorder (real breakpoint 759): action row into thumb
   reach (primary spans, order:-1), cols collapse with `order` holding lineage(main)
   before the aside. BD3 desktop two-column is the base rule, untouched. */
@media (max-width:759px){
  .bk-surface .bk-actions{ flex-direction:column; align-items:stretch; }
  .bk-surface .bk-actionbtn{ text-align:center; }
  .bk-surface .bk-actionbtn-primary{ order:-1; padding:13px 17px; }
  .bk-surface .bk-cols{ flex-direction:column; }
  .bk-surface .bk-main{ order:1; }
  .bk-surface .bk-aside{ order:2; width:100%; }
  .bk-surface .bk-arcchips{ justify-content:center; }
}
/* ===== end R7 · S5 book-detail light re-ground ===== */

/* =============================================================================
   MW-3 · BOOK DETAIL MOBILE PASS (docs/studio/praxis-mobile-canon.md). Light ground
   (.bk-surface). Sizing/reflow only -- no tokens/hex/JS; every rule inside @media
   (max-width:759px), so desktop is byte-unchanged. Verified at live 390.

   P8 (the substantive fix): TWO overflows compounded to a 20px h-scroll (scrollWidth
   410 at 390). (a) .bk-surface omits box-sizing (every sibling surface -- .st-page/
   .st-build/.notebook/.shelf -- sets border-box; there is NO global reset), so
   width:100% + 28px padding = a content-box overflow. Restore border-box at <=759.
   The base rule (~10505), hence DESKTOP, is untouched -- the same content-box overflow
   exists at desktop (scrollWidth 1297 vs 1265) and is a PRE-EXISTING out-of-scope
   residual (a desktop change needs its own felt-gate; see the MW-3 report). (b) the
   read-status control's three white-space:nowrap segments ("Currently reading"/"Have
   read"/"Will read" = ~372px) overflow the row -> wrap to 3 equal shrinkable segments
   (the app's own .rrow-right idiom, 9211-9212). Together: scrollWidth 390, 0 offenders.
   P7: the edit-panel category select + text inputs were 13px -> 16px (Safari zoom).
   P3: the small controls (backlink/find 19, arcchip 28, edit-toggle 29, moved 35,
   edit/remove btns 34, secondary action ~37, show-all/became/grew-open, edit fields)
   -> 44px effective hit area. Covered already (BD2/R7): the action row collapses to a
   column with the gilded primary at order:-1 (P2, 10870-10872). The 5 rating-star
   buttons (.bk-star -- real rating writes, views.js) get a genuine 44x44 hit area (the
   glyph stays 15px; the box is expanded per the canon's hit-area rule, NOT exempted) --
   the row fits the full-width aside (228px, no overflow). P1/P4/P5/P6/P9 n/a. */
@media (max-width:759px){
  .bk-surface{ box-sizing:border-box; }
  .bk-surface .rstatus{ display:flex; width:100%; }
  .bk-surface .rs-opt{ flex:1 1 0; min-width:0; text-align:center; white-space:normal; min-height:44px; }
  .bk-surface .bk-edit-input, .bk-surface .bk-edit-select{ font-size:16px; }
  .bk-surface .bk-moved, .bk-surface .bk-actionbtn, .bk-surface .bk-arcchip,
  .bk-surface .bk-edit-toggle, .bk-surface .bk-edit-btn, .bk-surface .bk-edit-remove,
  .bk-surface .bk-edit-input, .bk-surface .bk-edit-select,
  .bk-surface .bk-remove-cancel, .bk-surface .bk-remove-confirm-btn, .bk-surface .bk-showall,
  .bk-surface .bk-becamelink, .bk-surface .bk-gopen, .bk-surface .bk-backlink,
  .bk-surface .bk-find{ min-height:44px; }
  .bk-surface .bk-backlink, .bk-surface .bk-find{ display:inline-flex; align-items:center; }
  /* the 5-up rating: a genuine 44x44 hit box per star (glyph stays 15px, centered) */
  .bk-surface .bk-star{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* MARG-EDIT's pencil is the same species as .bk-star — a glyph button that
     writes — so it takes the same 44x44 box, glyph size unchanged. */
  .bk-surface .bk-margedit{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}
/* ===== end MW-3 · BOOK DETAIL MOBILE PASS ===== */

/* =====================================================================
   DW-POLISH · BOOK DETAIL — THE DESIGN PASS (>=1200 tier).
   Supersedes DW-3's composition block (this surface's own >=1200 tier).

   WHY DW-3 was not enough — measured, not asserted. DW-3 passed every
   D-gate (D1 63.0% >=60 · D2 70.8ch <=72 · D3 0 · D5 16px) and the page
   still read as three stacks, because every one of those gates is
   HORIZONTAL and the defects were vertical and structural:
     · `.bk-hero` (grid-row:2) and `.vr-card` (grid-column:2; grid-row:2)
       shared a track. The track sized to the hero (266px); align-items:
       start left the 93px value card floating above a 195px VOID.
       `grid-auto-rows:min-content` could never help — min-content of row 2
       IS the hero. The hole is worst in the DEFAULT case: `valueMarks`
       starts empty on every book (empty 93px -> 195px hole; 2 marks 191px
       -> 96px hole). rig.hollow: "HOLE: maxGap 195 vs median 14".
       DW-3's round record claimed the rail "verified — no spread,
       vrOverflow:0"; that measured OVERFLOW, not the GAP (record corrected).
     · `.bk-cols` was a flex row nested INSIDE grid col 1, so `.bk-main` and
       `.bk-aside` never sat on the shell's tracks — three stacks sharing a
       page, not a grid. The thinking (the soul of the page) was capped at
       542px / 28.5% @1920 with the ISBN block beside it as a 250px PEER.

   THE FIX: one grid; the rail becomes ONE object.
     backlink 1/-1 · hero col 1 · THE RAIL col 2 spanning rows 2..7 ·
     on-demand panels rows 3-6 · main col 1 row 7.
   Two independent columns of differing height in one grid re-create the hole
   unless a column is a single grid item (a spanning item distributes its
   height across every auto track it spans, inflating its neighbours' tracks —
   that was DW-3's implicit rows 10-11 at 399.453px each). The rail is now a
   real wrapper with its own flex rhythm, and the 195px hole is gone for every
   realistic shape.

   ⚠ HONEST LIMIT — DWP-RAIL-INVERT (measured; the red-team caught the
   over-claim, do NOT restate "cannot exist at any data shape"): col 1 is NOT
   yet one object (hero + panels + main are separate rows), and the rail spans
   them. A spanning item contributes to the intrinsic sizing of the tracks it
   spans, so the mode INVERTS rather than dying: if the rail out-grows the whole
   col-1 stack its excess inflates rows 2-7 and a void opens under the hero.
   Reproduced: 10 value-marks-with-lineage + no marginalia/roots/description ->
   rail 1033px, col-1 1033px, a 220px hero->main void, idle picker rows blown
   from 0 to 49.5px each. `rig.hollow` CANNOT flag it (one gap => max == median).
   Trigger needs ~9+ value marks on an otherwise-empty book. The cure is col 1
   becoming one object too, which costs the mobile order — Preston's call.

   D2 under a widened column: width buys STRUCTURE, never line length
   (Preston's ruling). Every prose element keeps <=72ch and the marginalia
   card spends its width on meta-beside-text. A 2-up card grid was
   prototyped and REJECTED by measurement (30.9ch, under the 60-72ch band).

   ON-7 (.bk-surface's pre-existing 40px desktop h-scroll — box-sizing fixed
   only <=759) stays RESOLVED at >=1200 here (Preston's DW-3 ruling): the
   box-sizing fix is scoped to THIS block, so the 760-1199 band keeps the
   defect untouched (its own owner) while D3 passes honestly at 1280/1440/1920.
   The whole block is inside the media query; <=1199 layout is untouched.
   ===================================================================== */
@media (min-width:1200px){
  .bk-surface{ box-sizing:border-box; }   /* ON-7 fix, >=1200 ONLY — width:100% + padding no longer overflows the viewport; the 760-1199 band is left untouched */
  .bk-surface .bk-shell{ display:grid; grid-template-columns:minmax(0,1fr) 340px; grid-auto-rows:min-content; column-gap:44px; align-items:start; max-width:1200px; }
  .bk-surface .bk-shell > *{ grid-column:1; }   /* default any child to the content column — a surprise non-empty child never disrupts the rail */
  .bk-surface .bk-shell > .bk-backlink{ grid-column:1 / -1; grid-row:1; }
  .bk-surface .bk-shell > .bk-hero{ grid-column:1; grid-row:2; }
  /* THE RAIL — one object, hero-top to page-bottom, its own uniform rhythm.
     NB (measured, not theorised): `grid-row:2 / -1` is WRONG here. `-1` names
     the last line of the EXPLICIT grid; this grid declares no
     grid-template-rows, so -1 resolves to line 1, the range inverts, and the
     rail renders in ROW 1 — ABOVE the hero. Span to an explicit line. */
  .bk-surface .bk-shell > .bk-rail{ grid-column:2; grid-row:2 / 8; align-self:start; display:flex; flex-direction:column; gap:16px; }
  /* NO `width:100%` here. This surface has NO global border-box reset (the
     MW3-BKBOX/ON-7 quirk: `.bk-surface` is the one surface that omits it), so
     `.vr-card` is content-box and `width:100%` made it 340 + 40 padding + 2
     border = 382 -> an 8.7px document h-scroll AT 1280 ONLY (invisible at 1920,
     where the centred shell still had room; and invisible in the mockup, which
     carries `*{box-sizing:border-box}`). The flex column's default
     align-items:stretch sizes them correctly whatever their box-sizing. */
  .bk-surface .bk-rail > *{ margin:0; }
  .bk-surface .bk-rail > .bk-edit-toggle{ align-self:start; }
  .bk-surface .bk-rail > .bk-find{ align-self:start; margin:0; }
  .bk-surface .bk-rail .bk-actions{ flex-direction:column; align-items:stretch; }
  /* Every on-demand `.bk-shell` panel (marginalia editor · arc picker · send-to-sub
     picker · the Edit/more panel) keeps its OWN row (3–6) so an opened panel
     appears as a prominent band right below the hero — NOT auto-placed to the
     page bottom, and never overlapping another (the editor+picker can co-exist).
     CHANGED from DW-3's `1 / -1`: the rail now occupies col 2 across rows 2-7,
     so a full-width panel would collide with it. They take the CONTENT column.
     Each row collapses to 0 when its panel is idle (hosts :empty-hidden; the edit
     panel is absent when closed), so the closed layout is unchanged. */
  .bk-surface .bk-shell > #book-detail-editor-host{ grid-column:1; grid-row:3; }
  .bk-surface .bk-shell > #book-detail-arc-picker-host{ grid-column:1; grid-row:4; }
  .bk-surface .bk-shell > #book-detail-subtheory-picker-host{ grid-column:1; grid-row:5; }
  .bk-surface .bk-shell > .bk-edit-panel{ grid-column:1; grid-row:6; }
  .bk-surface .bk-shell > .bk-main{ grid-column:1; grid-row:7; }
  .bk-surface .bk-shell > div:empty{ display:none; }

  /* --- the hero's meta line (the fold) --- */
  .bk-surface .bk-meta-line{ padding-top:16px; border-top:1px solid var(--bk-line); }
  .bk-surface .bk-meta-line .bk-moved{ margin-left:auto; }

  /* --- WIDTH BUYS STRUCTURE: the annotation keeps its measure; the meta that
         sat UNDER it moves BESIDE it. --- */
  .bk-surface .bk-marg{ display:grid; grid-template-columns:minmax(0,1fr) 188px; column-gap:28px; align-items:start; }
  /* The meta must SHED the stacked layout it just left: base `.bk-margmeta`
     (:10918) carries margin-top:13px + padding-top:11px + a border-top, and
     :11048 re-pins that border for the light ground. Those draw a rule ABOVE a
     column that now sits BESIDE the text -- residue, not rhythm. Reset them. */
  .bk-surface .bk-margmeta{ flex-direction:column; align-items:flex-start; gap:9px;
                            margin-top:0; padding-top:2px; border-top:none; }

  /* --- D2: every prose element in the widened column keeps <=72ch. The list is
         by MEASUREMENT, not by guess: `.bk-artifact-body` is the one that stays
         at 109.9ch if you cap only the obvious ones, and `.bk-synopsis` only
         renders on books that carry a description (invisible on the seed). --- */
  .bk-surface .bk-tcount,
  .bk-surface .bk-empty-note,
  .bk-surface .bk-artifact-body,
  .bk-surface .bk-synopsis,
  .bk-surface .bk-grewnote{ max-width:72ch; }
  /* The hero/lineage Yumi whisper: a 6th prose element, and the ONLY D2 failure
     the signed-in stub could not see -- `rootedSubTheories` is owner-filtered,
     so the stub renders no whisper at all, while SIGNED-OUT (seed-owned roots
     surface, W12 S10) renders it at 85.1ch. Pre-existing, not introduced here
     (the hero was already 816 wide), but D2 is measured live and must pass on
     every path. SCOPED to `.bk-surface`: `.lum-yumi` is shared chrome across
     surfaces and an unscoped cap would bleed. */
  .bk-surface .lum-yumi p{ max-width:72ch; }

  /* --- HIERARCHY: reference matter demoted to footer-weight — a quiet
         rule-topped row at the foot of the column, no longer a peer CARD
         beside the thinking. --- */
  .bk-surface .bk-meta{ border:none; background:none; box-shadow:none; border-radius:0; padding:14px 0 0; border-top:1px solid var(--bk-line); display:flex; align-items:baseline; gap:0 22px; flex-wrap:wrap; }
  .bk-surface .bk-meta .bk-blabel{ margin:0; }
  .bk-surface .bk-meta dl{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px; grid-template-columns:none; }
  .bk-surface .bk-meta dd{ text-align:left; margin:0 14px 0 0; font-size:12px; }
  /* D6 — desktop-tier focus-visible rings on the primary book-detail
     controls (codebase focus-ring literal, reused verbatim from :11073). */
  .bk-surface .bk-backlink:focus-visible,
  .bk-surface .bk-actionbtn:focus-visible,
  .bk-surface .rs-opt:focus-visible,
  .bk-surface .bk-moved:focus-visible,
  .bk-surface .vr-add:focus-visible,
  .bk-surface .bk-arcchip:focus-visible,
  .bk-surface .bk-edit-toggle:focus-visible,
  .bk-surface .bk-star:focus-visible,
  .bk-surface .bk-find:focus-visible{ outline:2px solid rgba(255,206,74,.5); outline-offset:2px; }
  /* `.bk-star` joins the D6 list because THE FOLD moved the rating out of the
     retired `.bk-reading` aside card and into the hero's meta line -- this pass
     made it prominent, so this pass owns its ring. Verified with the real
     Tab-armed instrument (rig.ringProbe), not a CSSOM match test.
     NO border-radius here: the ring must not deform the element it rings
     (DW-RING-RADIUS). Other UA-default-outline elements on this surface
     (.vr-mark-name/.vr-mark-x/.bk-becamelink/.bk-artifact-open) are visible but
     not tokens-only -- pre-existing, not introduced here: residual DWP-D6-UA. */
}
/* ===== end DW-POLISH · BOOK DETAIL DESKTOP DESIGN PASS (was DW-3's block) ===== */

/* =====================================================================
   XL-1 · BOOK DETAIL AT THE WIDE DESK (R-POLISH B3)

   The >=1200 block above hard-caps `.bk-shell` at 1200px, which was sized when
   1200 WAS the wide tier. Measured against XL-1's >=60% occupancy floor:

     1920 -> 1200/1920 = 62.5%  PASS, barely
     2560 -> 1200/2560 = 46.9%  FAIL

   Re-tuned to the DETAIL archetype, matching the house XL pattern exactly (the
   arc Field's own >=1600 tier, :12722, and Home's, :15108):

     1920 -> 1560/1920 = 81.3%  PASS
     2560 -> 1560/2560 = 60.9%  PASS

   The cap deliberately STOPS at 1560 — XL-1 says pages compose wider, never
   stretch, so 2560 gets the same desk with more room around it, still clear of
   the floor. Same reasoning, same figures, as the Field's ratified block.

   WHAT WIDTH BUYS, per the detail archetype: not a longer line. Every prose
   element on this surface is already capped at 72ch (:11407-11423) and those
   caps are UNTOUCHED here, so the measure cannot run long at any width. What
   widens is the RAIL — 340 -> 380 — which on this surface actually carries
   content (the values card, the arc chips, the action stack), and the hero,
   which gets room for the cover beside the title block.
   ===================================================================== */
@media (min-width:1600px){
  .bk-surface .bk-shell{ max-width:1560px; grid-template-columns:minmax(0,1fr) 380px; }
  /* D2 REGRESSION CAUGHT BY THE RIG, AND ITS FIX. `.bk-atext` — the marginalia
     body inside each `.bk-marg` — is prose, but it is NOT in the >=1200 cap list
     at :11407-11423, and correctly so: that list was built BY MEASUREMENT, and at
     the old 816px content column (1200 - 340 rail - 44 gap) it sat at ~54ch,
     comfortably inside. Widening the column to 1136px above pushed it to a
     measured 83.4ch — over the floor, at 1920 AND 2560. The cap belongs to the
     tier that caused it: below 1600 the column is unchanged and this rule would
     be a no-op anyway. */
  .bk-surface .bk-atext{ max-width:72ch; }
}

/* =====================================================================
   WAVE 3 · THE PAGE  (renderSubTheoryPage on .lum-amber-deep)
   3-column reading room: evidence weave rail · lifted glass sheet +
   connections · Yumi's cyan margin. Tokens only (lum and font vars); the
   deep-amber ground comes from .lum-amber-deep (lumen-amber.css). Every
   selector is scoped under .st-page.lum-amber-deep so the generic class
   names (.sheet-like .st-main, .eyebrow) cannot bleed to other surfaces,
   and the .lum-amber-deep specificity overrides the legacy 2-col .st-page.
   ===================================================================== */
.st-page.lum-amber-deep{ display:block; box-sizing:border-box; width:100%; max-width:none; min-height:100vh; margin:0; padding:26px 0 70px; color:var(--lum-ink); }
/* the deep-amber ground is full-bleed (edge-to-edge, like .bk-surface); the
   CONTENT (topbar + grid) is centered at the reading width. */
.st-page.lum-amber-deep > .st-topbar,
.st-page.lum-amber-deep > .st-grid{ max-width:1180px; margin-left:auto; margin-right:auto; padding-left:30px; padding-right:30px; }

/* --- topbar --- */
.st-page.lum-amber-deep .st-topbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.st-page.lum-amber-deep .st-tb-left{ display:flex; align-items:center; gap:13px; min-width:0; }
.st-page.lum-amber-deep .st-tb-back{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.04em; color:var(--lum-ink-4); text-decoration:none; white-space:nowrap; }
.st-page.lum-amber-deep .st-tb-back:hover{ color:var(--lum-ink-3); }
.st-page.lum-amber-deep .st-hero-mark{ display:inline-flex; flex:0 0 auto; }
.st-page.lum-amber-deep .st-tb-kicker{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.2em; color:var(--lum-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-page.lum-amber-deep .st-tb-right{ display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.st-page.lum-amber-deep .st-tb-saved{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.05em; color:var(--lum-ink-3); display:inline-flex; align-items:center; gap:7px; } /* R6 S6 AF5: ink-4 (~3.4:1) -> ink-3 */
.st-page.lum-amber-deep .st-tb-dot{ width:5px; height:5px; border-radius:50%; background:var(--lum-gold-d); box-shadow:0 0 7px rgba(255,206,74,.5); }
.st-page.lum-amber-deep .st-pill-publish{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.03em; color:var(--lum-gold-l); background:rgba(255,206,74,.07); border:1px solid rgba(255,206,74,.22); border-radius:var(--lum-r-pill,999px); padding:9px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:background .18s, border-color .18s, color .18s; }
.st-page.lum-amber-deep .st-pill-publish:hover{ background:rgba(255,206,74,.12); border-color:rgba(255,206,74,.34); }
.st-page.lum-amber-deep .st-pub-flag{ width:7px; height:7px; border-radius:1.5px; background:var(--lum-gold); box-shadow:0 0 8px rgba(255,206,74,.6); }
.st-page.lum-amber-deep .st-pill-publish.done{ color:var(--lum-ink-2); border-color:var(--lum-glass-bd-2); background:rgba(255,255,255,.05); }
.st-page.lum-amber-deep .st-pill-publish.done .st-pub-flag{ background:var(--lum-cyan); box-shadow:0 0 8px rgba(127,208,240,.5); }
/* R6 S6 debt sweep: the orphaned Page-editor rules (the old build link, the glass
   sheet box, title input, ••• tools panel, canvas host, evidence rail) are purged —
   the read Page has no editor. Only read-view rules remain below. */

/* --- R6 S2: the Page is READ — a 2-col grid (read hero + connections · Yumi
   margin); the evidence-attach rail column is gone with the editor. --- */
/* R-ARC F4: the Yumi-margin right track is removed -> single column, no blank gutter. */
.st-page.lum-amber-deep .st-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:34px; align-items:start; }
.st-page.lum-amber-deep .st-maturity{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--lum-ink-3); display:flex; align-items:center; gap:8px; margin:0 0 18px; }
.st-page.lum-amber-deep .st-maturity .glow{ width:7px; height:7px; border-radius:50%; background:var(--lum-gold); box-shadow:0 0 8px rgba(255,206,74,.55); }
/* sub-line under the title (mock .t-meta): real "STARTED FROM <n> MARKED PASSAGES · <n> BOOKS". */
.st-page.lum-amber-deep .t-meta{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-ink-3); margin:0 0 22px; }
/* ruling 3: the topbar mark is the mark-edit trigger now (cursor + quiet focus ring). */
.st-page.lum-amber-deep .st-hero-mark-edit{ cursor:pointer; border-radius:50%; }
.st-page.lum-amber-deep .st-hero-mark-edit:focus-visible{ outline:2px solid rgba(255,206,74,.5); outline-offset:2px; }
/* ruling 4: the center grid column holds the sheet (.st-main) + the connections
   footer (.st-connections) as SIBLINGS; the footer's own margin-top spaces it below. */
.st-page.lum-amber-deep .st-center{ min-width:0; }


.st-page.lum-amber-deep .subtheory-attached-private-tag{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.03em; color:var(--lum-ink-4); display:block; margin:0 0 8px; }

/* --- connections foot (center, below the sheet) --- */
.st-page.lum-amber-deep .st-connections{ margin-top:26px; background:var(--lum-glass); border:1px solid var(--lum-glass-bd-2); border-radius:18px; padding:18px 22px 16px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.st-page.lum-amber-deep .st-conn-head{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.18em; color:var(--lum-ink-3); margin-bottom:10px; }
.st-page.lum-amber-deep .st-conn-row{ display:flex; align-items:center; gap:12px; padding:7px 0; text-decoration:none; }
.st-page.lum-amber-deep .st-conn-glyph{ display:inline-flex; flex:0 0 auto; }
.st-page.lum-amber-deep .st-conn-title{ font-family:var(--lum-serif); font-size:18px; color:var(--lum-ink); }
.st-page.lum-amber-deep .st-conn-row:hover .st-conn-title{ color:var(--lum-gold-l); }
.st-page.lum-amber-deep .st-conn-empty{ font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink-4); margin:2px 0 0; }
.st-page.lum-amber-deep .st-conn-add{ margin-top:8px; font-family:var(--lum-mono); font-size:11.5px; letter-spacing:.03em; color:var(--lum-ink-3); background:none; border:none; cursor:pointer; padding:6px 0 0; }
.st-page.lum-amber-deep .st-conn-add:hover{ color:var(--lum-ink-2); }

/* --- Yumi's cyan margin (right) --- */
/* R-ARC F4: the .st-yumi Page-margin rules removed with the element (D16). */

/* --- mobile: collapse the 3-col to a single column --- */
@media (max-width:759px){
  .st-page.lum-amber-deep{ padding:18px 16px 60px; }
  .st-page.lum-amber-deep > .st-topbar,
  .st-page.lum-amber-deep > .st-grid{ padding-left:0; padding-right:0; }
  .st-page.lum-amber-deep .st-topbar{ flex-wrap:wrap; gap:12px; }
  .st-page.lum-amber-deep .st-grid{ grid-template-columns:1fr; gap:20px; }
  .st-page.lum-amber-deep .st-pill-publish,
  .st-page.lum-amber-deep .st-conn-add,
  .st-page.lum-amber-deep .st-conn-row{ min-height:44px; display:inline-flex; align-items:center; }
}
/* ===== end WAVE 3 · THE PAGE ===== */

/* =====================================================================
   R6 S2 · THE PAGE BECOMES THE READ — additive rules for the rebuilt
   read-view Page. The editable canvas / citation engine / evidence rail
   are gone; these style the read hero, the single Edit door, the
   finished-room threshold + walk-nav, the shared warm-dim working ground,
   and the AF4 readonly-token fix (decisions #4 / #6 / #8 / #9).
   ===================================================================== */

/* --- the read hero: the read-only render on the lifted glass sheet
   (replaces the old editable .st-main box). --- */
.st-page.lum-amber-deep .st-read-hero{ position:relative; background:var(--lum-glass-raised); border:1px solid var(--lum-glass-bd); border-radius:22px; padding:38px 40px 34px; overflow:hidden; -webkit-backdrop-filter:blur(var(--lum-glass-blur)); backdrop-filter:blur(var(--lum-glass-blur)); box-shadow:inset 0 1px 0 rgba(255,236,200,.2), 0 32px 64px -30px rgba(0,0,0,.7), 0 10px 26px -18px rgba(0,0,0,.55); }
.st-page.lum-amber-deep .st-read-hero::before{ content:''; position:absolute; left:0; right:0; top:0; height:170px; pointer-events:none; background:radial-gradient(130% 170px at 50% -46px, rgba(255,206,74,.15), rgba(255,206,74,0) 72%); }
.st-page.lum-amber-deep .st-read-hero > *{ position:relative; }
.st-page.lum-amber-deep .st-read-hero .t-meta{ margin:0 0 20px; }
.st-page.lum-amber-deep .st-read-hero .st-maturity{ margin:0 0 18px; }

/* --- AF4 fix (decision #9): the read-only body consumed the raw --ink
   family (legible only by ground luck). Re-point to the coherent --lum-*
   set — ONE rule that works in BOTH registers, because --lum-ink itself is
   what .stb-warm-dim re-maps (dark on warm-dim draft, light in the finished
   full-amber room). --- */
.st-page.lum-amber-deep .subtheory-readonly-header,
.st-page.lum-amber-deep .subtheory-readonly-body{ color:var(--lum-ink); }
.st-page.lum-amber-deep .subtheory-readonly-body{ font-size:20px; line-height:1.78; }
.st-page.lum-amber-deep .subtheory-readonly-evidence{ color:var(--lum-ink-2); }
.st-page.lum-amber-deep .subtheory-readonly-cite-line{ color:var(--lum-ink); }
.st-page.lum-amber-deep .subtheory-readonly-quote{ color:var(--lum-ink-3); border-left-color:var(--lum-glass-bd); }
.st-page.lum-amber-deep .subtheory-readonly-annotation{ color:var(--lum-ink-3); }
.st-page.lum-amber-deep .subtheory-cite-num{ color:var(--lum-gold); }
.st-page.lum-amber-deep .subtheory-cite{ border-bottom-color:var(--lum-gold); color:var(--lum-ink); }

/* --- the single Edit door (decision #4): the SOLE way into the workshop.
   R#4 — quiet outlined gold on the draft (invites, doesn't shout); a
   further-recessed quiet variant once finished. --- */
.st-page.lum-amber-deep .st-edit-door{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--lum-gold-ink); text-decoration:none; background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); border:1px solid transparent; border-radius:var(--lum-r-pill,999px); padding:9px 18px; white-space:nowrap; }
.st-page.lum-amber-deep .st-edit-door:hover{ opacity:.9; }
.st-page.lum-amber-deep .st-edit-door-outline{ background:linear-gradient(160deg, rgba(255,253,246,.62) 0%, rgba(255,248,230,.42) 100%); color:var(--lum-gold-d); border-color:rgba(133,84,16,.32); }
.st-page.lum-amber-deep .st-edit-door-outline:hover{ background:linear-gradient(160deg, rgba(255,253,246,.8) 0%, rgba(255,248,230,.55) 100%); border-color:rgba(133,84,16,.5); opacity:1; }
.st-page.lum-amber-deep .st-edit-door-quiet{ background:none; color:var(--lum-ink-2); border-color:var(--lum-glass-bd-2); }
.st-page.lum-amber-deep .st-edit-door-quiet:hover{ color:var(--lum-gold-l); border-color:rgba(255,206,74,.34); opacity:1; }

/* --- decision #6: "Finishing earns the room." The amber-room threshold
   marker (finished only). --- */
.st-page.lum-amber-deep .st-room-threshold{ display:flex; align-items:center; gap:12px; font-family:var(--lum-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-ink-3); max-width:1180px; margin:0 auto 22px; padding-left:30px; padding-right:30px; }
.st-page.lum-amber-deep .st-room-threshold::before{ content:''; width:28px; height:1px; background:linear-gradient(90deg, transparent, var(--lum-gold-d)); flex:none; }
.st-page.lum-amber-deep .st-room-threshold::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--lum-gold-d), rgba(255,236,200,.14) 45%, transparent); }

/* --- R#6: WALK-NAV — prev/next between sibling sub-theories (finished
   room only), the arc's name as the spine (thin gilded thread). --- */
.st-page.lum-amber-deep > .st-walknav{ max-width:1180px; margin-left:auto; margin-right:auto; padding-left:30px; padding-right:30px; }
.st-page.lum-amber-deep .st-walknav{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; padding-top:22px; border-top:1px solid var(--lum-glass-bd-2); }
.st-page.lum-amber-deep .st-walknav-side{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--lum-ink-3); flex:1; min-width:0; }
.st-page.lum-amber-deep .st-walknav-empty{ visibility:hidden; }
.st-page.lum-amber-deep .st-walknav-next{ justify-content:flex-end; text-align:right; }
.st-page.lum-amber-deep .st-walknav-arrow{ font-size:18px; color:var(--lum-ink-3); flex:none; }
.st-page.lum-amber-deep .st-walknav-label{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; line-height:1.6; }
.st-page.lum-amber-deep .st-walknav-label em{ display:block; font-family:var(--lum-serif); font-style:italic; font-size:16px; text-transform:none; letter-spacing:0; color:var(--lum-ink-2); margin-top:2px; }
.st-page.lum-amber-deep .st-walknav-side:hover .st-walknav-label em{ color:var(--lum-gold-l); }
.st-page.lum-amber-deep .st-walknav-spine{ display:flex; align-items:center; gap:10px; flex:none; }
.st-page.lum-amber-deep .st-walknav-thread{ width:36px; height:1px; background:linear-gradient(90deg, transparent, var(--lum-gold-d) 60%, transparent); }
.st-page.lum-amber-deep .st-walknav-arcname{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-ink-3); white-space:nowrap; }

/* --- decision #8 ground correction + R#9 warm-dim depth: the DRAFT Page
   (and the workshop, S3) sit at the WARM-DIM working register — a lit sheet
   on a dimmer warm field, dark ink kept (§7 never inverts). .stb-warm-dim
   re-points --lum-* to the warm-dim recipe (the arcs.html .arcfield-warm
   literals R5 ratified + Universal §2/§3 ink tiers), then two radial warm
   washes + an inset vignette give real atmospheric depth. --- */
.st-page.lum-amber-deep.stb-warm-dim,
.st-build.lum-amber-deep.stb-warm-dim{
  --lum-ink:#241710;        /* --ink primitive (theme.css) — dark ink kept */
  --lum-ink-2:#645940;      /* Universal v1.1 §2 */
  --lum-ink-3:#978b6d;      /* Universal v1.1 §3 */
  --lum-ink-4:#b3a480;      /* BUILD-TIME stand-in — no live 4th light-ink tier */
  --lum-glass:linear-gradient(157deg, rgba(255,255,255,.66) 0%, rgba(255,246,222,.50) 100%);
  --lum-glass-raised:linear-gradient(157deg, rgba(255,255,255,.82) 0%, rgba(255,248,230,.66) 100%);
  --lum-glass-bd:#ddc794;   /* arcs.html .arcfield-warm border, verbatim */
  --lum-glass-bd-2:#e9d9b4; /* arcs.html .arcfield-warm --card-2, verbatim */
  --lum-gold:#c79433;       /* arcs.html .arcfield-warm --gold-hi, verbatim */
  --lum-gold-l:#d9a441;     /* Universal --gold-hi */
  --lum-gold-d:#855410;     /* Universal --gold-deep */
  --lum-gold-ink:#3d2807;
}
.st-page.lum-amber-deep.stb-warm-dim,
.st-build.lum-amber-deep.stb-warm-dim{
  background:
    radial-gradient(62% 48% at 18% 12%, rgba(255,224,150,.30) 0%, transparent 62%),
    radial-gradient(56% 52% at 86% 18%, rgba(199,148,51,.24) 0%, transparent 66%),
    linear-gradient(168deg,#efe1c1 0%,#e2cb98 100%);
  box-shadow:inset 0 0 90px rgba(133,84,16,.18);
  /* R6 S3 — the warm-dim working register is a CONTAINED rounded panel (the
     mockup's felt-passed .stb-warm-dim values), floating on the route's dark
     ground. Finishing OPENS it into the full-bleed amber room (the finished
     .st-page carries no .stb-warm-dim). Shared by the draft Page + the workshop. */
  border:1px solid #ddc794; border-radius:26px; margin:10px auto 40px; max-width:1220px;
}
.st-page.lum-amber-deep.stb-warm-dim .st-read-hero{ box-shadow:0 26px 52px -30px rgba(133,84,16,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.st-page.lum-amber-deep.stb-warm-dim .st-connections{ box-shadow:0 20px 42px -28px rgba(133,84,16,.32); }

/* --- R6 S2 mobile: the read grid collapses to one column; walk-nav stacks --- */
@media (max-width:759px){
  .st-page.lum-amber-deep > .st-room-threshold,
  .st-page.lum-amber-deep > .st-walknav{ padding-left:0; padding-right:0; }
  .st-page.lum-amber-deep .st-read-hero{ padding:26px 20px 24px; }
  .st-page.lum-amber-deep .st-edit-door{ min-height:44px; display:inline-flex; align-items:center; }
  .st-page.lum-amber-deep .st-walknav{ flex-direction:column; align-items:stretch; gap:16px; margin-top:28px; }
  .st-page.lum-amber-deep .st-walknav-next{ text-align:left; justify-content:flex-start; }
  .st-page.lum-amber-deep .st-walknav-side{ min-height:44px; }
  .st-page.lum-amber-deep .st-walknav-spine{ justify-content:center; }
}
/* ===== end R6 S2 · THE PAGE BECOMES THE READ ===== */

/* =====================================================================
   DW-STP2 · SUB-THEORY PAGE — DESKTOP READING MEASURE (D2) + D6 RINGS
   renderSubTheoryReadOnly mounts on TWO paths under `.st-page.lum-amber-deep`:
   the COMPOSED read (→ .st-grid → .st-center → .st-read-hero), whose 2-col grid
   (max-width:1180 + a 240px rail) fixes the prose column at 825px — it flowed at
   86.4ch, past the canon's 60–72ch band; and the SEED / worked-example read
   (signed-out reachable via the __praxis_seed__ sentinel), which has NO .st-grid
   and is full-bleed.
   THE CAP IS .st-grid-SCOPED DELIBERATELY: an unscoped descendant selector also
   caps the seed path, stranding a 687px column at x=0 beneath a still-full-bleed
   header — an undesigned composition nobody measured (red-team BLOCK; same class
   as DW-2's signed-out ≥1200 block, fixed there by scoping to .home-composed).
   No grid = no 825px column = nothing to cap. Cap the prose, not the layout: D1
   composition is untouched, only the measure returns to the band. ch resolves
   against this element's own 20px serif, so the cap tracks the type.
   ADDITIVE, >=1200 ONLY — <=1199 (incl. the 760-1199 band + <=759 mobile) is
   byte-inert.
   ===================================================================== */
@media (min-width:1200px){
  .st-page.lum-amber-deep .st-grid .subtheory-readonly-body{ max-width:72ch; }
  /* DW-4 · DW-STP2-SEED (ruled rider) — the seed / signed-out read gets its own
     MINIMAL reading composition. DW-STP2 left it out for a good reason (capping
     the prose ALONE strands a narrow column at x=0 under a still-full-bleed
     header — the comment above), so this gives it the missing centring machinery
     FIRST and the measure second. Measured before: 132.6ch @1280, 149.3ch @1440,
     ~199.7ch @1920, running x=0 edge to edge.

     WHY THE CHILDREN AND NEVER `.st-page` ITSELF: `.st-page.lum-amber-deep`
     PAINTS THE GROUND (its own radial-gradient, :11185) and is width:100% /
     max-width:none / min-height:100vh. Narrowing it to centre it would shrink the
     deep-warm amber ground to a 747px strip and gut CLAUDE.md §7. So the column
     is given to its direct children; the ground stays full-bleed.

     WHY `>` AND NOT A CLASS: the discriminator is DEPTH, not class. On the seed
     path `.subtheory-readonly` is a DIRECT child of `.st-page`; on the composed
     path it is four levels down (> .st-grid > .st-center > .st-read-hero >) and
     can never be a direct child. The two selectors are mutually exclusive BY
     CONSTRUCTION, not by cascade luck. Class alone cannot tell them apart — the
     seed root (views.js:10418) and the composed-PUBLISHED root (:10457) are both
     exactly 'st-page lum-amber-deep' (.stb-warm-dim marks composed-DRAFT only).
     The signed-out-prompt root (:10406) holds .empty-state, never
     .subtheory-readonly, so it is inert here.

     747 = 687 (72ch of this element's own 20px serif) + 2×30 padding, mirroring
     the :11190 column's own 30px gutters. The back link is inline-block with a
     calc'd margin rather than a block with auto margins, so its CLICK TARGET
     stays its text (54px) instead of becoming a 747px strip that navigates away
     on a stray click — while its text still lands on the column's left edge. */
  .st-page.lum-amber-deep > .subtheory-readonly{
    box-sizing:border-box;
    max-width:747px;
    margin-left:auto;
    margin-right:auto;
    padding-left:30px;
    padding-right:30px;
  }
  .st-page.lum-amber-deep > .st-tb-back{
    display:inline-block;
    margin-left:calc((100% - 747px) / 2 + 30px);
  }
  .st-page.lum-amber-deep > .subtheory-readonly > .subtheory-readonly-body{ max-width:72ch; }
  /* D6 — desktop-tier focus rings on this surface's controls. DW-1/2/3 BUILT
     these for every surface they composed (27 rules across 1e0dc18..f15fb2a;
     book-detail :11072-11079, sub-theory build :11538+). subtheory-page was
     spot-checked in DOCS only and never got them: 1 of 11 controls was covered
     (.st-hero-mark-ed), the PRIMARY .st-pill-publish among the uncovered — so
     the chip could not honestly read `composed` on a weaker standard than its
     siblings (Chip law: ledger evidence, never assertion). Ring literal reused
     verbatim from the DW-3 book-detail block (:11079). NOT .st-grid-scoped, on
     purpose: an outline is additive on any mount path and can strand no layout,
     unlike the cap above — the seed reader gets a ring too. --- */
  .st-page.lum-amber-deep .st-tb-back:focus-visible,
  .st-page.lum-amber-deep .st-pill-publish:focus-visible,
  .st-page.lum-amber-deep .st-edit-door:focus-visible,
  .st-page.lum-amber-deep .st-conn-row:focus-visible,
  .st-page.lum-amber-deep .st-conn-add:focus-visible,
  .st-page.lum-amber-deep .st-walknav-side:focus-visible,
  .st-page.lum-amber-deep .vr-add:focus-visible{ outline:2px solid rgba(255,206,74,.5); outline-offset:2px; }
}
/* ===== end DW-STP2 · SUB-THEORY PAGE READING MEASURE ===== */

/* =====================================================================
   R6 S3 · THE WORKSHOP (sole editor) — warm-dim depth + Focus Mode + the
   re-homed Delete (decisions #7 / #8). The workshop's editor anatomy
   (canvas + evidence rail + weave) is craft-passed, not recast.
   ===================================================================== */
/* RD-4: sheet DE-CARDED (its warm-dim shadow retired); pull-source keeps its shadow. */
.st-build.lum-amber-deep.stb-warm-dim .stb-source{ box-shadow:0 22px 46px -30px rgba(133,84,16,.35); }

/* EVOLVED #7: FOCUS MODE — collapse the rail + Yumi margin + connections to
   pure prose. The two-column anatomy is untouched; this is a modifier only. */
.st-build.lum-amber-deep.is-focus .stb-rail{ display:none; }
.st-build.lum-amber-deep.is-focus .stb-conn{ display:none; }
.st-build.lum-amber-deep.is-focus .stb-build{ justify-content:center; }
.st-build.lum-amber-deep.is-focus .stb-main{ max-width:680px; }
.st-build.lum-amber-deep .stb-focus-toggle{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.03em; color:var(--lum-ink-2); background:none; border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:7px 15px; cursor:pointer; transition:color .18s, border-color .18s, background .18s; }
.st-build.lum-amber-deep .stb-focus-toggle:hover{ color:var(--lum-gold-l); border-color:rgba(255,206,74,.34); }
.st-build.lum-amber-deep .stb-focus-toggle.is-on{ color:var(--lum-gold-ink); background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); border-color:transparent; }

/* R6 S3: the re-homed Delete — a discreet danger link at the foot of the
   workshop (Delete left the Page in S2; feature-preservation). */
/* R-ARC S5 (REVERSE GEAR): .stb-dissolve = .stb-delete's quiet form, NEUTRAL hover (not --danger). */
.st-build.lum-amber-deep .stb-delete,
.st-build.lum-amber-deep .stb-dissolve{ display:block; margin:22px auto 0; font-family:var(--lum-mono); font-size:11px; letter-spacing:.05em; color:var(--lum-ink-4); background:none; border:none; cursor:pointer; padding:6px 10px; }
.st-build.lum-amber-deep .stb-delete:hover{ color:var(--danger); }
.st-build.lum-amber-deep .stb-dissolve:hover{ color:var(--lum-ink); }

@media (max-width:759px){
  .st-build.lum-amber-deep .stb-focus-toggle{ min-height:44px; display:inline-flex; align-items:center; }
}
/* ===== end R6 S3 · THE WORKSHOP ===== */

/* =====================================================================
   R6 S4 · THE PULL SYSTEM — the evidence rail graduates from a passive
   list to a working organ: search/filter across the author's marginalia,
   a visible woven/unwoven dot state, and the "woven into ¶N" caption
   (decision R#5). Deterministic machinery only — no Yumi generation.
   ===================================================================== */
.st-build.lum-amber-deep .stb-pull-filter{ display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid var(--lum-glass-bd-2); }
.st-build.lum-amber-deep .stb-pull-book-sel,
.st-build.lum-amber-deep .stb-pull-search{ font-family:var(--lum-sans); font-size:11.5px; color:var(--lum-ink-2); background:rgba(255,253,246,.55); border:1px solid var(--lum-glass-bd-2); border-radius:8px; padding:6px 9px; min-width:0; }
.st-build.lum-amber-deep .stb-pull-book-sel{ flex:0 0 42%; }
/* AES-4 · THE STYLED-NATIVE SELECT, ALL WIDTHS (R-POLISH B3).
   This select was the one control on the surface still rendering as an OS
   widget — a grey system chrome sitting beside a carved search field.
   The kit's `.k-select` (praxis-kit.css) is the reusable dress for FUTURE
   adopters; this rule is an independent re-statement, NOT an adoption of it —
   no element in the app carries `class="k-select"` today (`grep k-select js/`
   is empty), and this one cannot simply take it: the grouped rule above sets
   the `background` SHORTHAND at (0,3,0), which resets background-image and
   outranks any 0,1,0 kit class. Same two-gradient caret technique, drawn in
   `--lum-ink-3` because this element's own `color` is `--lum-ink-2` and the
   kit's `currentColor` would render the caret too dark here. The remaining
   four native selects (views.js:6712/9436/9467/20459) are NOT converted this
   batch — named residual, and `.k-select` is what they adopt when they are.
   Base rule, no media query — "all widths", as ruled. `appearance:none` removes
   the SKIN only: the native picker (and the iOS wheel) still opens on tap. */
.st-build.lum-amber-deep .stb-pull-book-sel{
  -webkit-appearance:none; appearance:none;
  padding-right:30px;
  background-color:rgba(255,253,246,.55);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lum-ink-3) 50%),
    linear-gradient(135deg, var(--lum-ink-3) 50%, transparent 50%);
  background-position:calc(100% - 16px) calc(50% - 1px), calc(100% - 11px) calc(50% - 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.st-build.lum-amber-deep .stb-pull-search{ flex:1; }
.st-build.lum-amber-deep .stb-pull-empty{ padding:18px 16px; font-family:var(--lum-serif); font-style:italic; font-size:13px; color:var(--lum-ink-2); text-align:center; }
/* the visible woven/unwoven state — a luminous-orb dot (lit=woven, unlit=unwoven);
   the dot + label ride the extant .stb-weave inline-flex layout. */
.st-build.lum-amber-deep .stb-weave-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; flex:none; background:rgba(151,139,109,.4); }
.st-build.lum-amber-deep .stb-weave-dot.is-lit{ background:radial-gradient(circle at 35% 30%, #fff4d6 0%, var(--lum-gold) 55%, var(--lum-gold-d) 100%); box-shadow:0 0 6px 1px rgba(217,164,65,.55); }
.st-build.lum-amber-deep .stb-woven-where{ display:block; margin-top:6px; font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.04em; color:var(--lum-ink-2); }
/* ===== end R6 S4 · THE PULL SYSTEM ===== */

/* =====================================================================
   R6 S5 · THE NOTEBOOK BIRTH-ONLY LEAF — the name hint (decision #1) +
   the "born just now" newborn card (decision #2). Notebook R4 light-skin
   literals (matching the shipped .notebook.lum-amber-deep palette). The
   deep-teal Yumi resting slot (.nb-complicate) is UNTOUCHED (R4 decision).
   ===================================================================== */
.notebook.lum-amber-deep .nb-name-hint{ font-family:var(--lum-sans); font-size:11px; font-style:italic; color:#978b6d; margin-top:7px; }
.notebook.lum-amber-deep .nb-newborn-card{ margin-top:4px; padding:20px 22px; border-radius:16px; background:linear-gradient(180deg,#fffdf6,#fdf3de); border:1px solid #ddc794; box-shadow:0 18px 40px -24px rgba(120,75,15,.4); }
.notebook.lum-amber-deep .nb-newborn-top{ display:flex; align-items:center; gap:12px; }
.notebook.lum-amber-deep .nb-newborn-mark{ flex:none; display:inline-flex; }
.notebook.lum-amber-deep .nb-newborn-title{ font-family:var(--lum-serif); font-weight:600; font-size:22px; color:#241710; }
/* R-ARC S3B-POLISH (FF-5): a basin's provisional identity -- quoted origin phrase,
   NOT title treatment (italic, normal weight, smaller), so it never reads as named. */
.notebook.lum-amber-deep .nb-newborn-title.nb-newborn-basin{ font-weight:400; font-style:italic; font-size:16px; }
.notebook.lum-amber-deep .nb-newborn-eyebrow{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#a8761a; margin-top:2px; }
.notebook.lum-amber-deep .nb-newborn-snippet{ font-family:var(--lum-serif); font-style:italic; font-size:15px; color:#645940; line-height:1.5; margin:14px 0 18px; }
.notebook.lum-amber-deep .nb-newborn-door{ display:inline-flex; align-items:center; gap:8px; font-family:var(--lum-mono); font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:#3d2807; background:linear-gradient(180deg,#f2c25a,#a8761a); border-radius:999px; padding:10px 20px; text-decoration:none; cursor:pointer; border:none; }
.notebook.lum-amber-deep .nb-newborn-door:hover{ filter:brightness(1.04); }
.notebook.lum-amber-deep .nb-newborn-stay{ font-family:var(--lum-sans); font-size:11.5px; font-style:italic; color:#978b6d; margin-top:12px; }
/* ===== end R6 S5 · THE NOTEBOOK BIRTH-ONLY LEAF ===== */

/* =====================================================================
   WAVE 3 · SUB-THEORY BUILD  (renderSubTheoryBuild on .lum-amber-deep)
   The create/compose surface: a two-column shell (MAIN composing sheet +
   RIGHT RAIL "pull from your reading"). Full-bleed deep-amber ground (like
   the Page and .bk-surface); content centered at the reading width. Tokens
   only (lum and font vars); scoped under .st-build.lum-amber-deep.
   ===================================================================== */
.st-build.lum-amber-deep{ display:block; box-sizing:border-box; width:100%; max-width:none; min-height:100vh; margin:0; padding:30px 0 70px; color:var(--lum-ink); }
.st-build.lum-amber-deep > .stb-topbar,
.st-build.lum-amber-deep > .stb-build{ max-width:940px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; }

/* RD-4/RD-4a: top bar -- mono kicker (left) + door-mirror corner Finish + Open-page (right). */
.st-build.lum-amber-deep .stb-topbar{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:22px; }
.st-build.lum-amber-deep .stb-kicker{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--lum-ink-3); margin:0; }
.st-build.lum-amber-deep .stb-corner{ flex:none; display:flex; align-items:center; gap:10px; }

.st-build.lum-amber-deep .stb-build{ display:flex; gap:20px; align-items:flex-start; }
.st-build.lum-amber-deep .stb-main{ flex:1; min-width:0; }
.st-build.lum-amber-deep .stb-rail{ flex:none; width:288px; }

/* head */
.st-build.lum-amber-deep .stb-head{ display:flex; align-items:center; gap:14px; margin:0 0 14px; }
.st-build.lum-amber-deep .stb-hero-mark{ flex:none; display:inline-flex; }
.st-build.lum-amber-deep .stb-hero-mark-edit{ cursor:pointer; border-radius:50%; }
.st-build.lum-amber-deep .stb-hero-mark-edit:focus-visible{ outline:2px solid rgba(255,206,74,.5); outline-offset:2px; }
.st-build.lum-amber-deep .stb-title-wrap{ flex:1; min-width:0; }
.st-build.lum-amber-deep .stb-title-input{ width:100%; font-family:var(--lum-serif); font-weight:600; font-size:30px; line-height:1.06; color:var(--lum-ink); background:none; border:none; border-bottom:1px solid transparent; outline:none; padding-bottom:2px; overflow:hidden; text-overflow:ellipsis; }
.st-build.lum-amber-deep .stb-title-input::placeholder{ color:var(--lum-ink-4); }
.st-build.lum-amber-deep .stb-title-input:focus{ border-bottom-color:rgba(255,206,74,.5); }
/* RD-4: .stb-into court line removed -- kicker carries arc + state. */
/* R-ARC S3B -- the formless MOTE (an unnamed basin's mark): a soft gold glow, no
   shape, brightness = mass (opacity set inline by _stMoteHTML). Generic (used on
   the light newborn card AND the warm workshop hero); --gold reads on both. */
.st-mote{ display:inline-block; border-radius:50%; background:radial-gradient(circle, var(--gold) 0%, transparent 70%); }
/* the basin's identity + naming-threshold prompt in the workshop (warm-dim) */
.st-build.lum-amber-deep .stb-basin-note{ margin-top:8px; }
.st-build.lum-amber-deep .stb-name-invite{ margin:0 0 4px 0; font-family:var(--lum-serif); font-style:italic; font-size:14px; color:var(--lum-gold-l); }
.st-build.lum-amber-deep .stb-origin-phrase{ margin:0; font-family:var(--lum-serif); font-style:italic; font-size:13px; color:var(--lum-ink-3); }
.st-build.lum-amber-deep .stb-acts{ flex:none; display:flex; align-items:center; gap:10px; }
.st-build.lum-amber-deep .stb-saved{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.05em; color:var(--lum-ink-2); display:inline-flex; align-items:center; gap:7px; } /* R6 S6 AF5: bare-on-cream — ink-4 (~1.9:1) -> ink-2 (4.8:1); the PAGE st-tb-saved (dark ground) stays ink-3 */
.st-build.lum-amber-deep .stb-saved::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--lum-gold-d); box-shadow:0 0 7px rgba(255,206,74,.5); }
.st-build.lum-amber-deep .stb-pubpill{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.03em; color:var(--lum-gold-l); background:rgba(255,206,74,.07); border:1px solid rgba(255,206,74,.22); border-radius:var(--lum-r-pill,999px); padding:8px 16px; cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
/* R-ARC F4 (N2): Finish dormant pre-mint -- disabled for a basin (Slice 1 law). */
.st-build.lum-amber-deep .stb-pubpill[disabled]{ opacity:.5; cursor:default; pointer-events:none; }
.st-build.lum-amber-deep .stb-pubpill:hover{ color:var(--lum-gold); border-color:rgba(255,206,74,.34); background:rgba(255,206,74,.12); }
.st-build.lum-amber-deep .stb-pubpill.on{ color:var(--lum-ink-2); background:rgba(255,255,255,.05); border-color:var(--lum-glass-bd-2); }
.st-build.lum-amber-deep .stb-openpage{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.03em; color:var(--lum-ink-2); text-decoration:none; border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:8px 16px; transition:color .18s, border-color .18s; }
.st-build.lum-amber-deep .stb-openpage:hover{ color:var(--lum-gold-l); border-color:rgba(255,206,74,.34); }

/* the composing sheet */
/* RD-4: DE-CARDED -- no card chrome; canvas internals + ::before glow untouched. */
.st-build.lum-amber-deep .stb-sheet{ position:relative; padding:8px 0 0; overflow:hidden; }
.st-build.lum-amber-deep .stb-sheet::before{ content:""; position:absolute; left:0; right:0; top:0; height:150px; pointer-events:none; background:radial-gradient(130% 150px at 50% -44px, rgba(255,206,74,calc(.15 * var(--lit,1))), rgba(255,206,74,0) 72%); }
.st-build.lum-amber-deep .stb-sheet > *{ position:relative; }
.st-build.lum-amber-deep .stb-canvas-host .wc-wrap{ background:none; border:none; padding:0; }
.st-build.lum-amber-deep .stb-canvas-host .wc-input{ font-family:var(--lum-serif); font-size:20px; line-height:1.7; color:var(--lum-ink-2); min-height:200px; outline:none; }
.st-build.lum-amber-deep .stb-canvas-host .wc-input p{ margin:0 0 16px; }
.st-build.lum-amber-deep .stb-canvas-host .wc-input:empty:before{ color:var(--lum-ink-4); }

/* Yumi cyan margin (inside the sheet) */
/* R6 S6 (R#8): Yumi's workshop margin goes CANON — no blue. Gold/amber presence on
   the warm-dim cream ground (dark gold text, AA-safe). */
/* R-ARC F4: the .stb-ymargin workshop-margin rules removed with the element (D16). */

/* connections foot */
/* §5: Connections quieted to match the court (section rule, not a card); internals untouched. */
.st-build.lum-amber-deep .stb-conn{ margin:24px 0 0; padding:16px 0 0; border-top:1px solid var(--lum-glass-bd-2); }
.st-build.lum-amber-deep .stb-conn-head{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-ink-3); margin:0 0 12px; }
.st-build.lum-amber-deep .stb-crow{ display:flex; align-items:center; gap:12px; padding:7px 0; font-family:var(--lum-serif); font-size:18px; color:var(--lum-ink); text-decoration:none; }
.st-build.lum-amber-deep .stb-crow-glyph{ flex:none; display:inline-flex; }
.st-build.lum-amber-deep .stb-crow:hover .stb-crow-title{ color:var(--lum-gold-l); }
.st-build.lum-amber-deep .stb-conn-empty{ font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink-4); margin:0; }
.st-build.lum-amber-deep .stb-conn-add{ margin-top:10px; font-family:var(--lum-mono); font-size:11.5px; color:var(--lum-ink-3); background:none; border:none; cursor:pointer; padding:6px 0 0; }
.st-build.lum-amber-deep .stb-conn-add:hover{ color:var(--lum-ink-2); }

/* right rail: pull from your reading */
.st-build.lum-amber-deep .stb-source{ border:1px solid var(--lum-glass-bd-2); border-radius:16px; background:var(--lum-glass); overflow:hidden; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.st-build.lum-amber-deep .stb-srchead{ padding:15px 18px; border-bottom:1px solid var(--lum-glass-bd-2); }
.st-build.lum-amber-deep .stb-src-title{ font-family:var(--lum-serif); font-weight:600; font-size:18px; color:var(--lum-ink); }
.st-build.lum-amber-deep .stb-src-sub{ font-family:var(--lum-sans); font-size:11px; color:var(--lum-ink-3); margin-top:3px; }
.st-build.lum-amber-deep .stb-src-empty{ padding:16px 18px; font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-4); line-height:1.5; }
.st-build.lum-amber-deep .stb-book{ border-bottom:1px solid rgba(255,236,200,.08); }
.st-build.lum-amber-deep .stb-brow{ display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; transition:background .2s; }
.st-build.lum-amber-deep .stb-brow:hover{ background:rgba(255,236,200,.04); }
.st-build.lum-amber-deep .stb-bcover{ flex:none; width:30px; height:42px; border-radius:2px 4px 4px 2px; overflow:hidden; box-shadow:0 4px 10px -4px rgba(0,0,0,.7), inset 1px 0 0 rgba(255,255,255,.08); }
.st-build.lum-amber-deep .stb-bcover-img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-build.lum-amber-deep .stb-bcover-cloth{ background:linear-gradient(135deg, var(--lum-cloth) 0%, rgba(36,26,2,.92) 100%); }
.st-build.lum-amber-deep .stb-binfo{ flex:1; min-width:0; }
.st-build.lum-amber-deep .stb-bt{ font-family:var(--lum-serif); font-style:italic; font-size:15px; color:var(--lum-ink); line-height:1.2; }
.st-build.lum-amber-deep .stb-bc{ font-family:var(--lum-sans); font-size:10.5px; color:var(--lum-ink-3); margin-top:2px; }
.st-build.lum-amber-deep .stb-bchev{ flex:none; color:var(--lum-ink-4); font-size:11px; transition:transform .25s; }
.st-build.lum-amber-deep .stb-book.open .stb-bchev{ transform:rotate(90deg); }
.st-build.lum-amber-deep .stb-marg-wrap{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.st-build.lum-amber-deep .stb-book.open .stb-marg-wrap{ max-height:1400px; }
/* R-ARC ROOM-2: the NOTE SURFACE — a note as a place (view · durable edit · provenance) */
/* F2 (v3.259): note-detail is a LIGHT working reading-page (sibling of book-detail /
   the notebook leaf), NOT the dark reading room. renderNoteSurface dropped the wrap's
   `lum-amber-deep` skin so the light :root ink lands on the light wheat ground (the
   route resolves data-ground="bright"). Light-canon set only: --page-2 fills ·
   --line-page lines · --gold-deep (#855410, AA on light) for gold-as-text. */
.note-surface{ max-width:720px; margin:0 auto; padding:28px 20px 60px; }
.note-surface .note-back{ display:inline-block; margin-bottom:18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--gold-deep); text-decoration:none; border-bottom:1px solid transparent; }
.note-surface .note-back:hover{ border-bottom-color:var(--gold-deep); }
.note-surface .note-eyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; }
/* full page = full body: override the .notebook-entry-body-md list-preview clamp (max-height:15em) */
.note-surface .note-body{ font-family:var(--font-serif); font-size:17px; line-height:1.6; color:var(--ink); max-height:none; overflow:visible; }
.note-surface .note-body-plain{ white-space:pre-wrap; }
.note-surface .note-not-found{ font-family:var(--font-serif); font-style:italic; color:var(--ink-2); }
.note-surface .note-edit-btn, .note-surface .note-edit-done{ margin:14px 10px 0 0; padding:7px 14px; font-family:var(--font-body); font-size:13px; border-radius:var(--radius-pill); border:1px solid var(--line-page); background:var(--page-2); color:var(--ink-2); cursor:pointer; }
.note-surface .note-edit-done{ background:var(--grad); color:var(--text-on-dark); border-color:transparent; }
.note-surface .note-edit-plain{ width:100%; min-height:180px; box-sizing:border-box; padding:12px; font-family:var(--font-serif); font-size:16px; line-height:1.55; color:var(--ink); background:var(--page-2); border:1px solid var(--line-page); border-radius:var(--radius-md); }
.note-surface .note-prov{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line-page); }
.note-surface .note-prov-head{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3); margin:0 0 10px; }
.note-surface .note-prov-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0; }
.note-surface .note-prov-label{ font-family:var(--font-serif); font-size:14px; color:var(--ink-2); }
.note-surface .note-prov-door{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--gold-deep); text-decoration:none; white-space:nowrap; border-bottom:1px solid transparent; }
.note-surface .note-prov-door:hover{ border-bottom-color:var(--gold-deep); }
/* mobile canon: P3 tap targets on the edit controls; P8 the prov door wraps under a long label (no h-scroll at 390) */
@media (max-width:759px){
  .note-surface .note-edit-btn, .note-surface .note-edit-done{ min-height:44px; }
  .note-surface .note-prov-row{ flex-wrap:wrap; gap:2px 12px; }
}

/* ===================================================================
   R10 S1 (GROUNDS) -- the VALUE PAGE (#value/<id>). Daylight reflective
   surface (data-ground="bright"); mirrors the .note-surface F2 idiom
   (light --ink on --page, --gold-deep links). Header + living statement
   only. Empty-honest: no gathering/veins/evidence-trail this stage.
   =================================================================== */
.value-page{ max-width:680px; margin:0 auto; padding:28px 20px 72px; }
.value-back{ display:inline-block; margin-bottom:26px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--gold-deep); text-decoration:none; border-bottom:1px solid transparent; }
.value-back:hover{ border-bottom-color:var(--gold-deep); }
.value-not-found{ font-family:var(--font-serif); font-style:italic; color:var(--ink-2); }
.value-head{ margin-bottom:36px; }
.value-orb{ display:block; width:30px; height:30px; border-radius:50%; margin-bottom:16px; background:var(--grad); box-shadow:0 1px 6px rgba(0,0,0,.10); }
.value-name{ font-family:var(--font-serif); font-size:38px; line-height:1.1; font-weight:500; color:var(--ink); margin:0 0 10px; }
.value-prov{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0; }
.value-invite{ font-family:var(--font-serif); font-size:20px; font-style:italic; line-height:1.5; color:var(--ink-2); margin:0 0 20px; }
.value-write-btn{ display:inline-flex; align-items:center; min-height:44px; padding:10px 20px; font-family:var(--font-body); font-size:15px; border-radius:var(--radius-pill); border:0; background:var(--grad); color:var(--text-on-dark); cursor:pointer; }
.value-statement{ font-family:var(--font-serif); font-size:23px; line-height:1.55; color:var(--ink); margin:0 0 16px; white-space:pre-wrap; }
.value-statement-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.value-revised{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-3); }
.value-history-btn, .value-edit-btn{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--gold-deep); background:none; border:0; padding:6px 2px; cursor:pointer; border-bottom:1px solid transparent; }
.value-history-btn:hover, .value-edit-btn:hover{ border-bottom-color:var(--gold-deep); }
.value-history{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line-page); }
.value-history-row{ padding:10px 0; border-bottom:1px solid var(--line-page); }
.value-history-row:last-child{ border-bottom:0; }
.value-history-date{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-3); margin-bottom:5px; }
.value-history-text{ font-family:var(--font-serif); font-size:16px; line-height:1.5; color:var(--ink-2); margin:0; white-space:pre-wrap; }
.value-composer-input{ width:100%; box-sizing:border-box; min-height:150px; padding:14px; font-family:var(--font-serif); font-size:17px; line-height:1.55; color:var(--ink); background:var(--page-2); border:1px solid var(--line-page); border-radius:var(--radius-md); resize:vertical; }
.value-composer-input:focus{ outline:none; border-color:var(--gold-deep); }
.value-composer-row{ display:flex; gap:12px; margin-top:14px; }
.value-composer-save{ min-height:44px; padding:10px 22px; font-family:var(--font-body); font-size:15px; border-radius:var(--radius-pill); border:0; background:var(--grad); color:var(--text-on-dark); cursor:pointer; }
.value-composer-cancel{ min-height:44px; padding:10px 20px; font-family:var(--font-body); font-size:14px; border-radius:var(--radius-pill); border:1px solid var(--line-page); background:var(--page-2); color:var(--ink-2); cursor:pointer; }
@media (max-width:759px){
  .value-page{ padding:22px 16px 64px; }
  .value-name{ font-size:30px; }
  .value-statement{ font-size:20px; }
  .value-invite{ font-size:18px; }
  /* P3: 44px tap targets for the quiet inline meta controls (mirrors .note-surface). */
  .value-history-btn, .value-edit-btn{ min-height:44px; display:inline-flex; align-items:center; }
  .value-statement-meta{ gap:8px 16px; }
}
/* R-ARC S7: recognition lighting in the LIVE canvas — quiet, non-interactive (DWF-1), no motion by design */
.st-build.lum-amber-deep .wc-input .rec-lit { border-bottom:1px dotted var(--lum-gold-d); }

/* R-ARC ROOM-3 FIELD: RD-2 lengthening page (bounded width, growing height set
   by room-field.js, NO inner scroll; carved ground). RD-3 clip-law line-clamp. */
.st-build.lum-amber-deep .stb-field-pane{ margin-bottom:14px; }
.st-build.lum-amber-deep .stb-field-pane .stb-srchead{ padding:0 2px 8px; border-bottom:none; }
.st-build.lum-amber-deep .rf-pane{ position:relative; }
.st-build.lum-amber-deep .rf-canvas{ position:relative; width:100%; min-height:180px; border-radius:12px; background:linear-gradient(160deg, rgba(248,224,120,.10) 0%, rgba(242,194,90,.06) 100%); box-shadow:inset 0 2px 10px -5px rgba(133,84,16,.28); }
.st-build.lum-amber-deep .rf-empty{ position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; padding:0 20px; text-align:center; font-family:var(--lum-serif); font-style:italic; font-size:13px; color:var(--lum-ink-3); }
.st-build.lum-amber-deep .rf-card{ position:absolute; box-sizing:border-box; width:150px; max-width:100%; padding:9px 12px 10px; border:1px solid rgba(133,84,16,.22); border-radius:10px; background:linear-gradient(160deg, rgba(248,224,120,.34) 0%, rgba(242,194,90,.24) 100%); cursor:grab; box-shadow:0 10px 22px -16px rgba(133,84,16,.4); }
.st-build.lum-amber-deep .rf-card:focus-visible{ outline:2px solid rgba(255,206,74,.5); outline-offset:2px; }
.st-build.lum-amber-deep .rf-card .rf-kind{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.08em; color:var(--lum-gold-d); margin-bottom:4px; }
.st-build.lum-amber-deep .rf-card .rf-body{ font-family:var(--lum-serif); font-size:13px; font-style:italic; color:var(--lum-ink-2); line-height:1.35; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.st-build.lum-amber-deep .rf-card.rf-lifted{ z-index:3; }
.st-build.lum-amber-deep .rf-card.rf-lifted .rf-body{ display:block; -webkit-line-clamp:none; }
/* ============================================================================
   L4 / DR-1 · THE DRAG LAW — the workshop field.
   Pick-up: scale 1.03 + the shadow deepens + the origin dims (the ghost).
   Settle:  a slight overshoot as it lands (--ease-emphasis passes 1 then returns).
   Reduced-motion: instant swap, no choreography.

   TWO CLAUSES OF THE LAW DO NOT APPLY HERE, by Preston's B2 ruling:
   - "valid targets brighten on approach" is STRUCK — this surface is FREE
     PLACEMENT, there are no targets, and animating one would be decoration
     posing as feedback.
   - the law's third surface (the arc Field's marks) ships lift + dim only; its
     onCommit re-renders the SVG and would destroy an overshoot mid-flight.

   Only TRANSFORM and BOX-SHADOW transition. left/top are set imperatively by
   room-field.js on every pointermove, so transitioning them would make the card
   lag the cursor -- the classic "swimming card" bug. */
.st-build.lum-amber-deep .rf-card{
  transition:transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.st-build.lum-amber-deep .rf-card.rf-dragging{
  z-index:4; cursor:grabbing;
  transform:scale(1.03);
  box-shadow:0 16px 30px -14px rgba(133,84,16,.55);
}
/* the landing: transform eases back through the overshoot curve */
.st-build.lum-amber-deep .rf-card.rf-settle{
  transition:transform var(--dur-gentle) var(--ease-emphasis),
             box-shadow var(--dur-gentle) var(--ease-standard);
}
/* THE ORIGIN GHOST — "the origin slot dims", read honestly onto a slotless
   surface: a faint outline of the card, left where it was picked up from. */
.st-build.lum-amber-deep .rf-origin{
  position:absolute; box-sizing:border-box; pointer-events:none; z-index:1;
  border:1px dashed rgba(133,84,16,.30);
  border-radius:10px;
  background:rgba(133,84,16,.05);
}
@media (prefers-reduced-motion:reduce){
  .st-build.lum-amber-deep .rf-card,
  .st-build.lum-amber-deep .rf-card.rf-settle{ transition:none; }
  .st-build.lum-amber-deep .rf-card.rf-dragging{ transform:none; }
}
.st-build.lum-amber-deep .stb-return-chip{ display:inline-block; margin:0 0 10px; font-family:var(--lum-mono); font-size:11px; letter-spacing:.05em; color:var(--lum-gold-d); text-decoration:none; border-bottom:1px solid transparent; }
.st-build.lum-amber-deep .stb-return-chip:hover{ border-bottom-color:var(--lum-gold-d); }

/* R-ARC RAIL: UNFILED-REACH (F1) pull-source group. (RD-5: FF-12 gathered panel dissolved into the field.) */
.st-build.lum-amber-deep .stb-bt-unfiled{ font-style:italic; color:var(--lum-ink-3); }
/* R6 S6 (R#7): the marginalia block re-palettes off the dark khaki/olive overlay
   (rgba(20,12,5,.3), read against the warm-dim cream card) to a warm amber-family
   wash; ink-tier text AA-safe (gold-d eyebrow, ink-2 passage, gold-d active weave,
   ink-2 done weave). */
.st-build.lum-amber-deep .stb-marg{ padding:11px 16px 12px; border-top:1px dashed rgba(133,84,16,.14); background:linear-gradient(160deg, rgba(248,224,120,.30) 0%, rgba(242,194,90,.20) 100%); }
.st-build.lum-amber-deep .stb-pg{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.08em; color:var(--lum-gold-d); margin-bottom:5px; }
.st-build.lum-amber-deep .stb-passage{ font-family:var(--lum-serif); font-size:15px; color:var(--lum-ink-2); line-height:1.4; font-style:italic; }
.st-build.lum-amber-deep .stb-weave{ margin-top:9px; font-family:var(--lum-mono); font-size:11.5px; color:var(--lum-gold-d); background:rgba(242,194,90,.14); border:1px solid rgba(217,164,65,.4); border-radius:var(--lum-r-pill,999px); padding:5px 12px; cursor:pointer; transition:border-color .2s, box-shadow .2s; display:inline-flex; align-items:center; gap:6px; }
.st-build.lum-amber-deep .stb-weave:hover{ border-color:rgba(217,164,65,.7); box-shadow:0 0 13px -4px rgba(217,164,65,.5); }
.st-build.lum-amber-deep .stb-weave.done{ color:var(--lum-ink-2); border-color:rgba(151,139,109,.3); background:none; cursor:default; box-shadow:none; }

/* mobile: stack the two columns */
@media (max-width:759px){
  .st-build.lum-amber-deep > .stb-topbar,
  .st-build.lum-amber-deep > .stb-build{ padding-left:16px; padding-right:16px; }
  .st-build.lum-amber-deep .stb-topbar{ flex-wrap:wrap; gap:12px; margin-bottom:16px; }
  .st-build.lum-amber-deep .stb-build{ flex-direction:column; }
  .st-build.lum-amber-deep .stb-rail{ width:100%; }
  .st-build.lum-amber-deep .stb-sheet{ padding:24px 20px 20px; }
  .st-build.lum-amber-deep .stb-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .st-build.lum-amber-deep .stb-title-wrap{ width:100%; }
  .st-build.lum-amber-deep .stb-acts{ flex-wrap:wrap; }
  .st-build.lum-amber-deep .stb-title-input{ font-size:26px; }
  .st-build.lum-amber-deep .stb-canvas-host .wc-input{ font-size:18px; }
  .st-build.lum-amber-deep .stb-pubpill,
  .st-build.lum-amber-deep .stb-openpage,
  .st-build.lum-amber-deep .stb-weave,
  .st-build.lum-amber-deep .stb-conn-add,
  .st-build.lum-amber-deep .stb-crow{ min-height:44px; display:inline-flex; align-items:center; }
}
/* ===== end WAVE 3 · SUB-THEORY BUILD ===== */

/* =============================================================================
   MW-3 · SUB-THEORY MOBILE PASS (docs/studio/praxis-mobile-canon.md). Two faces:
   the workshop (.st-build, warm-dim) and the read Page (.st-page: warm-dim draft +
   full-amber finished room). Sizing/reflow only -- no tokens/hex/JS; every rule
   inside @media (max-width:759px), so desktop is byte-unchanged. Verified at live
   390 (getBoundingClientRect + scrollWidth), both faces.

   P8 (the substantive fix): the FINISHED room's author topbar-right stacked
   saved(148) + Finished pill(110) + "Edit in the workshop ->"(208, white-space:
   nowrap) = ~496px in a nowrap group with base flex:0 0 auto -> a 130px h-scroll at
   390. Constrain it to the (already-wrapped) topbar line so its children wrap. (The
   DRAFT topbar is clean already -- R#3/R#2 stripped saved+pill from it.)
   P7: the pull-filter select + search were 11.5px (Safari focus-zoom) -> 16px.
   P3: the pull-filter inputs (~30, both P7+P3), .stb-delete (26), both mark-edit
   glyphs (30/32), the workshop Yumi dismiss x (8x19), and .st-tb-back (16, the read's
   EXIT affordance) were sub-44 -> 44px hit area. Covered already (verified, no change):
   pubpill/openpage/weave/conn-add/crow/
   focus-toggle (Build) + pill-publish/conn-add/conn-row/edit-door/walknav-side (Page);
   Build P7 title 26px + canvas 18px. P1/P2/P4/P5/P6/P9 n/a.
   ============================================================================= */
@media (max-width:759px){
  /* THE PAGE (renderSubTheoryPage) */
  .st-page.lum-amber-deep .st-tb-right{ flex-wrap:wrap; width:100%; }
  .st-page.lum-amber-deep .st-tb-back{ min-height:44px; display:inline-flex; align-items:center; }
  .st-page.lum-amber-deep .st-hero-mark-edit{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* THE WORKSHOP (renderSubTheoryBuild) */
  .st-build.lum-amber-deep .stb-pull-book-sel,
  .st-build.lum-amber-deep .stb-pull-search{ font-size:16px; }
  .st-build.lum-amber-deep .stb-pull-book-sel,
  .st-build.lum-amber-deep .stb-pull-search,
  .st-build.lum-amber-deep .stb-delete,
  .st-build.lum-amber-deep .stb-dissolve{ min-height:44px; }
  .st-build.lum-amber-deep .stb-hero-mark-edit{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}
/* ===== end MW-3 · SUB-THEORY MOBILE PASS ===== */

/* =====================================================================
   DW-3 · SUB-THEORY BUILD — DESKTOP COMPOSITION (>=1200 tier).
   Desktop canon D1: the workshop's fixed 940 content column decays to 49%
   occ at 1920. Compose WITHIN the R6 metaphor (the Notebook-widen precedent,
   NOT a restructure): widen the contained warm-dim panel + content so the
   EXISTING two-region breathes — the writing column (.stb-main) held at a
   reading measure (D2), the R6-S4 pull/evidence rail (.stb-source) inhabits
   the freed width as a genuine second functional region. Mirrors the READ
   Page's own 1180+rail composition. Additive; every rule inside the media
   block, so <=1199 (incl. the 760-1199 band + <=759 mobile) is byte-inert.
   Focus mode (.is-focus, higher specificity) is untouched (its narrow
   centered column is the deliberate reading form — D1 governed-column form).
   ===================================================================== */
@media (min-width:1200px){
  .st-build.lum-amber-deep.stb-warm-dim{ max-width:1400px; }
  .st-build.lum-amber-deep > .stb-topbar,
  .st-build.lum-amber-deep > .stb-build{ max-width:1280px; }
  .st-build.lum-amber-deep .stb-main{ flex:0 0 720px; min-width:0; }
  .st-build.lum-amber-deep .stb-rail{ flex:1 1 0; width:auto; min-width:0; }
  /* D6 — desktop-tier focus-visible rings on the workshop's interactive
     elements (the codebase focus-ring literal, reused verbatim from :11325). */
  .st-build.lum-amber-deep .stb-pubpill:focus-visible,
  .st-build.lum-amber-deep .stb-focus-toggle:focus-visible,
  .st-build.lum-amber-deep .stb-openpage:focus-visible,
  .st-build.lum-amber-deep .stb-weave:focus-visible,
  .st-build.lum-amber-deep .stb-brow:focus-visible,
  .st-build.lum-amber-deep .stb-conn-add:focus-visible,
  .st-build.lum-amber-deep .stb-crow:focus-visible,
  .st-build.lum-amber-deep .stb-delete:focus-visible,
  .st-build.lum-amber-deep .stb-dissolve:focus-visible{ outline:2px solid rgba(255,206,74,.5); outline-offset:2px; }
}
/* ===== end DW-3 · SUB-THEORY BUILD DESKTOP COMPOSITION ===== */

/* =====================================================================
   WAVE 3 · THE NOTEBOOK  (renderNotebook on .lum-amber-deep)
   The book's own pages: tabs, then the lifted spread crowned by the book
   band (cover + reading + covenant), and two leaves (catch left, form
   right). Full-bleed deep-amber ground; content centered at the reading
   width. Tokens only (lum and font vars); scoped under .notebook.lum-amber-deep.
   ===================================================================== */
.notebook.lum-amber-deep{ display:block; box-sizing:border-box; width:100%; max-width:none; min-height:100vh; margin:0; padding:30px 0 70px; color:var(--lum-ink); }
.notebook.lum-amber-deep > *{ box-sizing:border-box; max-width:900px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; }

/* head */
.notebook.lum-amber-deep .notebook-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.notebook.lum-amber-deep .notebook-title-block{ margin-right:auto; }
.notebook.lum-amber-deep .notebook-head .eyebrow{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--lum-ink-3); margin:0 0 6px; }
.notebook.lum-amber-deep .notebook-title{ font-family:var(--lum-serif); font-weight:500; font-size:30px; line-height:1.06; color:var(--lum-ink); margin:0; }
.notebook.lum-amber-deep .notebook-intro{ font-family:var(--lum-sans); font-size:14px; line-height:1.55; color:var(--lum-ink-2); margin:8px 0 0; max-width:680px; }
.notebook.lum-amber-deep .nb-consent-row{ display:flex; justify-content:flex-end; margin:0 auto 14px; }
.notebook.lum-amber-deep .notebook-head .chip{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.03em; color:var(--lum-ink-2); background:rgba(255,255,255,.05); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:7px 14px; cursor:pointer; }
.notebook.lum-amber-deep .notebook-head .chip:hover{ border-color:rgba(255,206,74,.45); color:var(--lum-ink); }

/* tabs */
.notebook.lum-amber-deep .nb-tabs{ display:flex; gap:7px; flex-wrap:wrap; margin:0 auto 14px; }
.notebook.lum-amber-deep .nb-tab{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-2); background:rgba(255,255,255,.05); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:7px 14px; cursor:pointer; transition:border-color .2s, background .2s; display:inline-flex; align-items:center; gap:7px; }
.notebook.lum-amber-deep .nb-tab:hover{ border-color:rgba(255,206,74,.45); }
.notebook.lum-amber-deep .nb-tab.is-on{ color:var(--lum-gold-ink); background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border-color:transparent; font-weight:600; }
.notebook.lum-amber-deep .nb-tab .c{ font-family:var(--lum-mono); font-size:10px; opacity:.8; }

/* the spread + the book band */
.notebook.lum-amber-deep .notebook-spread{ display:block; border-radius:18px; overflow:hidden; border:1px solid var(--lum-glass-bd); background:var(--lum-glass); box-shadow:0 34px 72px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,236,200,.16); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding:0; }
.notebook.lum-amber-deep .nb-bookband{ display:flex; align-items:center; gap:22px; padding:22px 26px; background:linear-gradient(180deg, rgba(255,250,240,.08), rgba(255,250,240,.03)); border-bottom:1px solid rgba(255,236,200,.12); }
.notebook.lum-amber-deep .nb-bb-cover{ position:relative; flex:none; width:92px; height:138px; border-radius:3px 6px 6px 3px; overflow:hidden; box-shadow:0 14px 30px -12px rgba(0,0,0,.7), 0 0 30px -2px rgba(255,206,74,.45), inset 1px 0 0 rgba(255,255,255,.08); display:flex; flex-direction:column; }
.notebook.lum-amber-deep .nb-bb-cover-img{ width:100%; height:100%; object-fit:cover; display:block; }
.notebook.lum-amber-deep .nb-bb-cover-cloth{ padding:14px 12px 12px 15px; background:linear-gradient(135deg, var(--lum-cloth) 0%, rgba(36,26,2,.92) 100%); }
.notebook.lum-amber-deep .nb-bb-cover-title{ font-family:var(--lum-serif); font-weight:600; font-size:15px; line-height:1.08; color:var(--lum-ink); }
.notebook.lum-amber-deep .nb-bb-cover-author{ margin-top:auto; font-family:var(--lum-sans); font-size:9.5px; color:var(--lum-ink-2); }
.notebook.lum-amber-deep .nb-bb-spine{ position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:3px 0 0 3px; background:linear-gradient(180deg, rgba(255,206,74,.5), rgba(207,156,42,.35)); }
.notebook.lum-amber-deep .nb-bb-rmark{ position:absolute; top:7px; right:7px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 38% 32%, var(--lum-gold-l) 0%, var(--lum-gold) 45%, var(--lum-gold-d) 100%); box-shadow:0 0 12px rgba(255,206,74,.7); }
.notebook.lum-amber-deep .nb-bb-meta{ flex:1; min-width:0; }
.notebook.lum-amber-deep .nb-bb-title{ font-family:var(--lum-serif); font-weight:600; font-size:25px; color:var(--lum-ink); line-height:1.04; }
.notebook.lum-amber-deep .nb-bb-author{ font-family:var(--lum-serif); font-style:italic; font-size:17px; color:var(--lum-ink-2); margin-top:2px; }
.notebook.lum-amber-deep .nb-bb-stat{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-3); margin-top:10px; }
.notebook.lum-amber-deep .nb-bb-banklabel{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-gold-d); margin-top:11px; }
.notebook.lum-amber-deep .nb-bb-consent{ flex:none; align-self:flex-start; display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.notebook.lum-amber-deep .nb-bb-consent .nb-switch{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-2); }
.notebook.lum-amber-deep .nb-bb-whatsees{ font-family:var(--lum-sans); font-size:11.5px; color:var(--lum-ink-3); border:none; border-bottom:1px dotted var(--lum-ink-4); background:none; cursor:pointer; padding:0 0 1px; }
.notebook.lum-amber-deep .nb-bb-whatsees:hover{ color:var(--lum-ink-2); }
.notebook.lum-amber-deep .nb-bb-seespanel{ display:none; margin:0 26px; padding:12px 16px 14px; border-radius:11px; background:rgba(127,208,240,.07); border:1px solid rgba(127,208,240,.22); font-family:var(--lum-serif); font-style:italic; font-size:14px; color:var(--lum-cyan); }
.notebook.lum-amber-deep .nb-bb-seespanel.on{ display:block; }
.notebook.lum-amber-deep .nb-bb-seespanel b{ color:var(--lum-ink); font-weight:600; font-style:normal; }

/* leaves */
.notebook.lum-amber-deep .notebook-leaves{ display:flex; }
/* Wave 3 sheet fix: the legacy .notebook .leaf (0,2,0, line ~9827) paints the leaves CREAM +
   a light dotted-grid paper (background:var(--page-2) + background-image:radial-gradient dots).
   This wrapper-scoped override (0,3,0, later in source order) kills BOTH (the shorthand resets
   background-image too) -> the leaves show the dark .notebook-spread glass. */
.notebook.lum-amber-deep .leaf{ flex:1; min-width:0; padding:24px 26px; background:none; }
.notebook.lum-amber-deep .leaf-left{ border-right:1px solid rgba(255,236,200,.12); }
.notebook.lum-amber-deep .nb-bookhead .bt{ font-family:var(--lum-serif); font-weight:600; font-size:19px; color:var(--lum-ink); }
.notebook.lum-amber-deep .nb-bookhead .ba{ font-family:var(--lum-sans); font-size:11.5px; color:var(--lum-ink-3); margin-top:3px; }
.notebook.lum-amber-deep .nb-bookhead .bc{ display:none; }
.notebook.lum-amber-deep .leaf .eyebrow,
.notebook.lum-amber-deep .nb-leaftag{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--lum-ink-3); margin:14px 0 14px; }

/* notes */
.notebook.lum-amber-deep .notebook-entry{ position:relative; background:rgba(255,255,255,.045); border:1px solid var(--lum-glass-bd-2); border-radius:11px; padding:13px 15px; margin-bottom:13px; transition:border-color .2s, box-shadow .2s; }
.notebook.lum-amber-deep .notebook-entry:hover{ border-color:rgba(255,206,74,.4); box-shadow:0 6px 16px -10px rgba(0,0,0,.6); }
.notebook.lum-amber-deep .notebook-entry-gathered{ border-color:rgba(255,206,74,.6); background:rgba(255,206,74,.1); box-shadow:0 0 0 1px rgba(255,206,74,.28); }
.notebook.lum-amber-deep .notebook-entry-tag{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:var(--lum-r-pill,999px); display:inline-block; }
.notebook.lum-amber-deep .notebook-entry-tag-m{ color:var(--lum-gold-l); background:rgba(255,206,74,.16); }
.notebook.lum-amber-deep .notebook-entry-tag-q{ color:var(--lum-cyan); background:rgba(127,208,240,.13); }
.notebook.lum-amber-deep .notebook-entry-tag-j{ color:var(--lum-ink-2); background:rgba(182,168,136,.13); }
.notebook.lum-amber-deep .notebook-entry-ts{ font-family:var(--lum-mono); font-size:9.5px; color:var(--lum-ink-4); margin-left:8px; }
.notebook.lum-amber-deep .notebook-entry-vis{ font-family:var(--lum-mono); font-size:9.5px; color:var(--lum-ink-4); margin-left:8px; }
.notebook.lum-amber-deep .notebook-entry-src{ font-family:var(--lum-sans); font-size:11px; color:var(--lum-ink-3); margin-top:7px; font-style:italic; }
.notebook.lum-amber-deep .notebook-entry-body{ font-family:var(--lum-serif); font-size:17px; line-height:1.4; color:var(--lum-ink); margin-top:8px; }
/* override the LEGACY hover-gate (.notebook .leaf-left .notebook-entry-acts{opacity:0})
   -- the amber notebook keeps the gather/lock affordances ALWAYS visible (no hover
   on touch; the v3.112 lesson was lost-on-mobile affordances). */
.notebook.lum-amber-deep .notebook-entry-acts{ display:flex; gap:14px; margin-top:11px; flex-wrap:wrap; opacity:1; }
.notebook.lum-amber-deep .notebook-entry-acts a{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.04em; color:var(--lum-ink-3); text-decoration:none; cursor:pointer; }
.notebook.lum-amber-deep .notebook-entry-acts a:hover{ color:var(--lum-gold-l); }
.notebook.lum-amber-deep .notebook-entry-gather{ color:var(--lum-gold-l); }
.notebook.lum-amber-deep .notebook-entry-lock{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.04em; color:var(--lum-ink-4); }
/* beat the legacy .notebook .leaf-left .notebook-entry-acts a (0,3,1) with an
   a.class selector so the gather stays gold and the draw-out cue stays Yumi-cyan. */
.notebook.lum-amber-deep .notebook-entry-acts a.notebook-entry-gather{ color:var(--lum-gold-l); }
.notebook.lum-amber-deep .notebook-entry-acts a.notebook-entry-drawout{ color:var(--lum-cyan); }
.notebook.lum-amber-deep .notebook-entry-acts a.notebook-entry-drawout:hover{ color:var(--lum-cyan); opacity:.8; }

/* working page (right leaf) */
.notebook.lum-amber-deep .notebook-working-hint,
.notebook.lum-amber-deep .notebook-empty-body{ font-family:var(--lum-serif); font-style:italic; font-size:14px; color:var(--lum-ink-4); }
.notebook.lum-amber-deep .nb-yname-tag{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--lum-ink-3); margin-bottom:7px; }
.notebook.lum-amber-deep .nb-working-name,
.notebook.lum-amber-deep .nb-capfield,
.notebook.lum-amber-deep .notebook-capture-line input[type=text],
.notebook.lum-amber-deep .notebook-capture-line textarea{ font-family:var(--lum-serif); font-size:17px; color:var(--lum-ink); background:rgba(255,255,255,.05); border:1px solid var(--lum-glass-bd-2); border-radius:11px; padding:11px 14px; outline:none; width:100%; }
.notebook.lum-amber-deep .nb-wnote{ background:rgba(255,255,255,.05); border:1px solid var(--lum-glass-bd-2); border-left:3px solid var(--lum-gold); border-radius:8px; padding:9px 12px; margin-bottom:8px; font-family:var(--lum-serif); font-size:15px; color:var(--lum-ink-2); line-height:1.35; }
.notebook.lum-amber-deep .nb-wnote-tag{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--lum-gold-d); display:block; margin-bottom:4px; }
.notebook.lum-amber-deep .nb-gather{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.notebook.lum-amber-deep .nb-gather .lab{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-3); }
.notebook.lum-amber-deep .btn-primary,
.notebook.lum-amber-deep .createbtn{ font-family:var(--lum-sans); font-size:13px; font-weight:600; color:var(--lum-gold-ink); background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border:none; border-radius:var(--lum-r-pill,999px); padding:10px 20px; cursor:pointer; }
.notebook.lum-amber-deep .nb-complicate{ margin-top:14px; padding-top:12px; border-top:1px solid var(--lum-glass-bd-2); font-family:var(--lum-serif); font-style:italic; font-size:14px; color:var(--lum-cyan); }
.notebook.lum-amber-deep .nb-ctag{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(127,208,240,.6); font-style:normal; margin-bottom:5px; }

/* the forming-name createWritingCanvas: hide the block toolbar (a name is one
   line), keep the serif weight; the host carries the bordered field look. */
.notebook.lum-amber-deep .nb-name-canvas-host .wc-bar{ display:none; }
.notebook.lum-amber-deep .nb-name-canvas-host .wc-wrap{ background:none; border:none; padding:0; }
.notebook.lum-amber-deep .nb-name-canvas-host .wc-input{ font-family:var(--lum-serif); font-weight:600; font-size:20px; color:var(--lum-ink); min-height:1.4em; outline:none; }

/* Wave 3 fidelity: right-leaf gathered list with per-card × remove (mockup
   .glab/.gathered-list/.gnote/.gempty). (R4: the left-leaf .nb-capmodes prose was
   replaced by the composer's unified .nb-modes chip row -- its rules are retired.) */
.notebook.lum-amber-deep .nb-glab{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--lum-ink-3); margin:0 0 12px; }
.notebook.lum-amber-deep .nb-gathered-list{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; min-height:30px; }
.notebook.lum-amber-deep .nb-gnote{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--lum-glass-bd-2); border-left:3px solid var(--lum-gold); border-radius:8px; padding:9px 12px; font-family:var(--lum-serif); font-size:15px; color:var(--lum-ink-2); line-height:1.35; }
.notebook.lum-amber-deep .nb-gx{ flex:none; color:var(--lum-ink-4); background:none; border:none; cursor:pointer; font-size:14px; line-height:1; padding:0; }
.notebook.lum-amber-deep .nb-gx:hover{ color:var(--lum-rose); }
.notebook.lum-amber-deep .nb-gempty{ font-family:var(--lum-serif); font-style:italic; font-size:14px; color:var(--lum-ink-4); padding:8px 0; }

/* mobile: stack the leaves */
@media (max-width:759px){
  .notebook.lum-amber-deep > *{ padding-left:16px; padding-right:16px; }
  .notebook.lum-amber-deep .notebook-leaves{ flex-direction:column; }
  .notebook.lum-amber-deep .leaf-left{ border-right:none; border-bottom:1px solid rgba(255,236,200,.12); }
  .notebook.lum-amber-deep .nb-bookband{ flex-wrap:wrap; gap:16px; }
  .notebook.lum-amber-deep .nb-bb-cover{ width:74px; height:110px; }
  .notebook.lum-amber-deep .nb-bb-consent{ flex-basis:100%; }
  .notebook.lum-amber-deep .nb-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:5px; }
  .notebook.lum-amber-deep .nb-tab{ flex:none; }
  .notebook.lum-amber-deep .nb-tab,
  .notebook.lum-amber-deep .notebook-head .chip,
  .notebook.lum-amber-deep .nb-bb-whatsees,
  .notebook.lum-amber-deep .notebook-entry-gather,
  .notebook.lum-amber-deep .notebook-entry-acts a,
  .notebook.lum-amber-deep .nb-toggle,
  .notebook.lum-amber-deep .nb-mode,
  .notebook.lum-amber-deep .chip,
  .notebook.lum-amber-deep .seg-opt,
  .notebook.lum-amber-deep .notebook-entry-overflow a,
  .notebook.lum-amber-deep .notebook-entry-more,
  .notebook.lum-amber-deep .btn-primary{ min-height:44px; display:inline-flex; align-items:center; }
}
/* ===== end WAVE 3 · THE NOTEBOOK ===== */

/* ============================================================================
   WAVE 1 · THE SHELF  (renderShelf on .lum-amber-deep)
   Convert Surface 7 to the Amber/Lumen system per design/praxis-shelf-amber.html.
   Full-bleed deep-amber "reading room" ground; content centered at the reading
   width; frosted-glass toolbar + sidebar; gold accents; cyan Yumi line; REAL
   covers (buildSelfHealingCover) kept + framed, alight (gold glow + root-mark)
   when a book has grown into the reader's thinking (S-D2). ADDITIVE: layers over
   the .shelf base (theme tokens, 9984-10055) + the shared .shelf-book card rules
   (2355-2543) via the .shelf.lum-amber-deep wrapper -- SAME pattern as the
   Notebook. The base rules stay UNTOUCHED (also used by the arc member list +
   pickers, which keep the theme-token look). Tokens: --lum-* only.
   ============================================================================ */
.shelf.lum-amber-deep{ display:block; box-sizing:border-box; width:100%; max-width:none; min-height:100vh; margin:0; padding:30px 0 90px; color:var(--lum-ink); }
.shelf.lum-amber-deep > *{ box-sizing:border-box; max-width:1080px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; }

/* head */
.shelf.lum-amber-deep .shelf-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:0 auto 6px; }
.shelf.lum-amber-deep .shelf-title{ font-family:var(--lum-serif); font-weight:500; font-size:clamp(30px,4vw,40px); line-height:1; color:var(--lum-ink); margin:0; }
.shelf.lum-amber-deep .shelf-count{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.06em; color:var(--lum-ink-3); padding-bottom:4px; }

/* S-D1: deterministic reading line (Yumi cyan .lum-yumi primitive) */
.shelf.lum-amber-deep .shelf-yumiline{ margin:14px auto 20px; }
.shelf.lum-amber-deep .shelf-yumiline p{ font-size:16px; }

/* toolbar -- frosted glass */
.shelf.lum-amber-deep .shelf-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 auto 22px; }
.shelf.lum-amber-deep .shelf-toolbar .spacer{ flex:1; }
.shelf.lum-amber-deep .btn{ font-family:var(--lum-sans); font-size:13px; font-weight:500; border-radius:var(--lum-r-pill,999px); padding:9px 16px; border:1px solid var(--lum-glass-bd); background:var(--lum-glass); color:var(--lum-ink-2); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.shelf.lum-amber-deep .btn:hover{ color:var(--lum-ink); border-color:var(--lum-glass-bd); }
.shelf.lum-amber-deep .btn-primary{ color:var(--lum-gold-ink); background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); border-color:transparent; font-weight:600; box-shadow:0 8px 20px -10px rgba(255,206,74,.7); }
.shelf.lum-amber-deep .btn-primary:hover{ color:var(--lum-gold-ink); filter:brightness(1.04); }
.shelf.lum-amber-deep .chip{ font-family:var(--lum-sans); font-size:12.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--lum-ink-2); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:7px 13px; background:transparent; }
.shelf.lum-amber-deep .chip:hover{ color:var(--lum-ink); border-color:var(--lum-glass-bd); background:rgba(255,236,200,.06); }
.shelf.lum-amber-deep .seg{ display:inline-flex; padding:3px; border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); background:rgba(255,236,200,.06); }
.shelf.lum-amber-deep .seg-opt{ font-family:var(--lum-sans); font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; color:rgba(255,244,224,.66); background:none; border:none; border-radius:var(--lum-r-pill,999px); padding:6px 15px; cursor:pointer; }
.shelf.lum-amber-deep .seg-opt:hover{ color:var(--lum-ink); }
.shelf.lum-amber-deep .seg-opt.is-on{ color:var(--lum-gold-ink); background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); font-weight:600; }
.shelf.lum-amber-deep .nav-search{ flex:0 1 220px; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:var(--lum-r-pill,999px); background:rgba(255,236,200,.06); border:1px solid var(--lum-glass-bd-2); color:var(--lum-ink-3); font-size:13px; }
.shelf.lum-amber-deep .nav-search:hover{ border-color:var(--lum-glass-bd); }
.shelf.lum-amber-deep .nav-search input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--lum-ink); font-family:var(--lum-sans); font-size:13px; }
.shelf.lum-amber-deep .nav-search input::placeholder{ color:var(--lum-ink-4); }
.shelf.lum-amber-deep .shelf-scan-status{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.04em; color:var(--lum-ink-3); }

/* layout + sidebar rail */
.shelf.lum-amber-deep .shelf-layout{ display:grid; grid-template-columns:204px 1fr; gap:38px; align-items:start; }
.shelf.lum-amber-deep .shelf-side{ position:sticky; top:18px; }
.shelf.lum-amber-deep .shelf-side .seg{ margin:0 0 11px; }
.shelf.lum-amber-deep .shelf-side h3,
.shelf.lum-amber-deep .shelf-filter-label{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-gold); margin:0 0 10px; }
.shelf.lum-amber-deep .shelf-filter-group{ margin-bottom:26px; }
.shelf.lum-amber-deep .shelf-filter-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.shelf.lum-amber-deep .shelf-filter{ display:flex; align-items:center; justify-content:space-between; gap:9px; padding:8px 12px; border-radius:8px; color:var(--lum-ink-3); font-size:13px; cursor:pointer; border:1px solid transparent; }
.shelf.lum-amber-deep .shelf-filter:hover{ background:rgba(255,236,200,.06); color:var(--lum-ink); }
.shelf.lum-amber-deep .shelf-filter.is-on{ background:rgba(255,236,200,.06); color:var(--lum-ink); border-color:var(--lum-glass-bd-2); }
.shelf.lum-amber-deep .shelf-filter .n{ font-family:var(--lum-mono); font-size:11px; opacity:.7; }
.shelf.lum-amber-deep .shelf-filter.is-toggle{ justify-content:flex-start; color:var(--lum-gold); font-family:var(--lum-mono); font-size:11px; letter-spacing:.04em; }
.shelf.lum-amber-deep .shelf-filter.is-toggle:hover{ background:transparent; color:var(--lum-ink); }
.shelf.lum-amber-deep .shelf-lens-ask{ display:block; width:100%; margin-top:8px; text-align:left; font-family:var(--lum-mono); font-size:11px; letter-spacing:.04em; color:var(--lum-gold); background:transparent; border:1px dashed var(--lum-glass-bd-2); border-radius:8px; padding:8px 12px; cursor:pointer; }
.shelf.lum-amber-deep .shelf-lens-ask:hover{ color:var(--lum-ink); border-color:var(--lum-gold); }

/* main + grids */
.shelf.lum-amber-deep .shelf-main{ min-width:0; }
.shelf.lum-amber-deep .shelf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:26px 18px; }
.shelf.lum-amber-deep .shelf-rows{ display:flex; flex-direction:column; }

/* covers -- REAL image kept (S-D3), Amber frame + alight glow + gold root-mark */
.shelf.lum-amber-deep .shelf-book{ color:var(--lum-ink); }
.shelf.lum-amber-deep .shelf-book-cover-area{ background:rgba(24,16,6,.5); border:1px solid var(--lum-glass-bd-2); border-radius:3px 6px 6px 3px; box-shadow:0 12px 24px -12px rgba(0,0,0,.72), inset 1px 0 0 rgba(255,255,255,.07); }
.shelf.lum-amber-deep .shelf-book:hover .shelf-book-cover-area{ box-shadow:0 20px 32px -14px rgba(0,0,0,.78), inset 1px 0 0 rgba(255,255,255,.09); }
.shelf.lum-amber-deep .shelf-book.is-alight .shelf-book-cover-area{ box-shadow:0 12px 26px -10px rgba(0,0,0,.7), 0 0 22px -3px rgba(255,206,74,.42), inset 1px 0 0 rgba(255,255,255,.07); }
.shelf.lum-amber-deep .shelf-book.is-alight:hover .shelf-book-cover-area{ box-shadow:0 20px 34px -12px rgba(0,0,0,.78), 0 0 30px -2px rgba(255,206,74,.55), inset 1px 0 0 rgba(255,255,255,.09); }
.shelf.lum-amber-deep .shelf-book-cover-placeholder{ background:linear-gradient(155deg, var(--lum-cloth), rgba(24,16,6,.94)); }
.shelf.lum-amber-deep .shelf-book-cover-pending-title{ color:var(--lum-ink-2); }
.shelf.lum-amber-deep .shelf-book-cover-pending{ color:var(--lum-ink-3); }
.shelf.lum-amber-deep .shelf-book-rmark{ position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 38% 32%, var(--lum-gold-l) 0%, var(--lum-gold) 45%, var(--lum-gold-d) 100%); box-shadow:0 0 8px var(--lum-gold); }
.shelf.lum-amber-deep .shelf-book-title{ font-family:var(--lum-serif); font-weight:600; font-size:15px; color:var(--lum-ink); }
.shelf.lum-amber-deep .shelf-book-author{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-3); }
.shelf.lum-amber-deep .shelf-book-status{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.08em; color:var(--lum-gold); }
.shelf.lum-amber-deep .shelf-book-status::before{ background:var(--lum-gold); }

/* list rows */
.shelf.lum-amber-deep .shelf-book-row{ display:flex; align-items:center; gap:15px; padding:11px 4px; border-bottom:1px solid var(--lum-glass-bd-2); color:var(--lum-ink); }
.shelf.lum-amber-deep .shelf-book-row:hover{ background:rgba(255,236,200,.06); }
.shelf.lum-amber-deep .shelf-book-row-title{ font-family:var(--lum-serif); font-weight:600; font-size:16px; color:var(--lum-ink); }
.shelf.lum-amber-deep .shelf-book-row-author{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-3); }
.shelf.lum-amber-deep .shelf-book-row .shelf-book-status{ margin-left:auto; }
.shelf.lum-amber-deep .shelf-book-row-rmark{ position:static; flex:none; width:7px; height:7px; box-shadow:0 0 7px var(--lum-gold); }

/* empty state */
.shelf.lum-amber-deep .empty-state h2{ font-family:var(--lum-serif); color:var(--lum-ink); }
.shelf.lum-amber-deep .empty-state p{ font-family:var(--lum-serif); color:var(--lum-ink-2); }

/* S-D2: the alight legend (static explanatory copy, not generative) */
.shelf.lum-amber-deep .shelf-rootednote{ margin:26px 0 0; font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-3); display:flex; align-items:center; gap:9px; }
.shelf.lum-amber-deep .shelf-rootednote-mark{ flex:none; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 38% 32%, var(--lum-gold-l) 0%, var(--lum-gold) 45%, var(--lum-gold-d) 100%); box-shadow:0 0 10px rgba(255,206,74,.6); }
.shelf.lum-amber-deep .shelf-rootednote b{ color:var(--lum-ink-2); font-weight:600; }

/* desktop: Filters toggle hidden (sidebar always shown) */
@media (min-width:760px){
  .shelf.lum-amber-deep .shelf-filters-btn{ display:none; }
}

/* mobile (<=759): the 759 reflow -- single column; sidebar becomes a SOLID glass
   drawer (no blur; live JS toggles .shelf-sidebar-mobile-open /
   .shelf-sidebar-backdrop-open); 44px touch targets. */
.shelf.lum-amber-deep .shelf-sidebar-close{ display:none; }
.shelf.lum-amber-deep .shelf-sidebar-backdrop{ display:none; position:fixed; inset:0; z-index:130; background:rgba(15,9,4,.6); }
.shelf.lum-amber-deep .shelf-sidebar-backdrop.shelf-sidebar-backdrop-open{ display:block; }
@media (max-width:759px){
  .shelf.lum-amber-deep > *{ padding-left:16px; padding-right:16px; }
  .shelf.lum-amber-deep .shelf-layout{ grid-template-columns:1fr; }
  .shelf.lum-amber-deep .shelf-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .shelf.lum-amber-deep .shelf-side{
    position:fixed; top:0; bottom:0; left:0; width:264px; z-index:131;
    background:var(--lum-base); border-right:1px solid var(--lum-glass-bd-2);
    padding:24px 20px; overflow-y:auto; transform:translateX(-110%);
    transition:transform var(--motion-base,.2s) var(--ease,ease);
  }
  .shelf.lum-amber-deep .shelf-side.shelf-sidebar-mobile-open{ transform:none; }
  .shelf.lum-amber-deep .shelf-sidebar-close{ display:block; position:absolute; top:12px; right:14px; background:transparent; border:none; color:var(--lum-ink-3); font-size:22px; line-height:1; cursor:pointer; }
  .shelf.lum-amber-deep .btn,
  .shelf.lum-amber-deep .chip,
  .shelf.lum-amber-deep .seg-opt{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .shelf.lum-amber-deep .shelf-filter{ min-height:44px; }
}
/* ===== end WAVE 1 · THE SHELF ===== */

/* ============================================================================
   R2 · UNIVERSAL v1.2 SKIN — the Shelf ships the Universal light-ground skin.
   Ported byte-faithful from docs/studio/mockups/shelf.html (.skin-universal),
   the design panel's felt-passed output, re-scoped from the mockup's body class
   to the live page-context class .shelf.lum-amber-deep so computed output matches
   the mockup by construction. PURELY ADDITIVE over the base shelf block above:
   it re-points the --lum-* vars the base consumes + a restrained set of §8 recipe
   / gold-role rules. Every property is color / background / gradient / box-shadow /
   border-color ONLY. The amber register tick (.shelf-book-tick / --tick) is NOT
   touched (locked #3). Scoped to the shelf: other .lum-amber-deep surfaces (Book,
   Notebook) keep their dark ground until their own rounds.
   Recipes: 6 atmospheric ground · 4 one lamplight (head) · 3 ink-to-gold (title) ·
   5 gilded button (Add) · 2 luminous marks (alight + reading). Cut as decoration:
   1 hairline · 7 thread · 8 (arc field hues already carry it; per-card glow CUT).
   ============================================================================ */

/* 1 · token re-points — same --lum-* the base consumes, swapped to Universal
   light values (§1-§3), + host-contract/decorative tokens the recipes read */
.shelf.lum-amber-deep{
  --paper:#f4efe4;
  --ink:#241710;
  --gold:#a8761a;        /* GOLD ROLE 1 · interactive / fill            */
  --gold-deep:#855410;   /* GOLD ROLE   · deep gold for small TEXT (AA) */
  --gold-hi:#d9a441;     /* GOLD ROLE 2 · gilding — edge + glow ONLY    */
  --lum-star:#ffce4a;    /* GOLD ROLE 3 · luminous — true glow ONLY     */
  /* the ten-hue field spectrum, defined LOCALLY so the arc thread-tie
     (arcFieldHue -> var(--field-N)) renders even if universal-depth.css fails to
     serve/precache (red-team #3). Same values as universal-depth.css. */
  --field-1:#f2c25a; --field-2:#e07a52; --field-3:#d98f8a; --field-4:#f5bace; --field-5:#a9b98c;
  --field-6:#98d4b0; --field-7:#8590d8; --field-8:#f8e078; --field-9:#e8b068; --field-10:#b8896c;
  --lum-base:#fffdf8;       /* §3 surface — raised panels: sort menu, select bar, mobile drawer */
  --lum-glass:#efe7d6;      /* §2 surface-2 — quiet parchment button/chip fill */
  --lum-glass-bd:#e3d8c1;   /* §3 --line — warm opaque hairline */
  --lum-glass-bd-2:#e3d8c1; /* 2nd hairline tier collapses to the one light --line */
  --lum-cloth:#e3d8c1;      /* cover-placeholder base (bg also overridden below) */
  --lum-ink:#241710;        /* §3 --ink   (~13:1 on card) */
  --lum-ink-2:#645940;      /* §3 --ink-2 (~6:1 on ground) */
  --lum-ink-3:#645940;      /* AA collapse: #978b6d fails <18px, text tier holds at --ink-2 */
  --lum-ink-4:#978b6d;      /* freed #978b6d -> dim placeholder + will-read ring only */
  --lum-gold:#a8761a;       /* every FILL site -> interactive gold; text+glow peeled below */
  --lum-gold-ink:#3d2807;   /* dark ink on gold fills */
  --status-reading:var(--lum-star);  /* reading = active STATE -> stays luminous */
}

/* 2 · RECIPE 6 · atmospheric weathered LIGHT ground, SHELF-SCOPED (not body).
   Keeps the dark-skin wash geometry; pitched UNDER the v3 ceiling for AA.
   background-image (not shorthand) + fixed so it reads like the mockup's body. */
/* AES-2 · ONE WORLD, SHEETS ON IT — the Shelf becomes a lit sheet.
   Recon finding: Shelf and Notebook were still running the PRE-HOME mechanism —
   each painted its own opaque, full-bleed, background-attachment:fixed ground,
   the exact technique B1-FIX retired for Home. They never got the conversion, so
   crossing into them changed apps.
   NOT `background:transparent` (Home's answer): Home flips its ink ramp to cream
   and puts work on .lit-page cards. Shelf/Notebook keep DARK ink on light paper,
   so transparency would put dark text straight onto the twilight world. The sheet
   itself becomes the lit surface instead — the world shows in the MARGINS.
   GROUND + WRAPPER ONLY, per the light-touch exemption: the ground recipe, the
   frame, and the margin. Every internal layout rule, column, and card is
   untouched — Shelf's composition stays R-SHELF's. */
.shelf.lum-amber-deep{
  background-color:var(--card-1);
  background-image:linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
  background-attachment:scroll;   /* a sheet scrolls with the page; only the world is fixed */
  width:auto;
  margin:var(--sheet-gap);
  min-height:calc(100vh - (var(--sheet-gap) * 2));
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
}

/* 3 · RECIPE 4 · the ONE lamplight — a subtle warm wash on the identity head */
.shelf.lum-amber-deep .shelf-head{
  background:radial-gradient(120% 180% at 22% 60%, rgba(242,194,90,.22) 0%, rgba(242,194,90,0) 70%);
}

/* 4 · RECIPE 3 · ink-to-gold on the ONE >=18px display title (display-only) */
.shelf.lum-amber-deep .shelf-title{
  background:linear-gradient(180deg,var(--ink) 42%,var(--gold) 112%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* 5 · RECIPE 5 · gilded button — the SINGLE glowing primary action */
.shelf.lum-amber-deep .btn-primary{
  color:#3d2807; border-color:var(--gold-deep);
  background:linear-gradient(180deg,var(--field-1) 0%,var(--gold-hi) 40%,var(--gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 6px 18px -8px rgba(217,164,65,.6);
}
.shelf.lum-amber-deep .btn-primary:hover{
  color:#3d2807; filter:none;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 9px 22px -8px rgba(217,164,65,.72);
}

/* 6 · RECIPE 2 · keep presence/state marks LUMINOUS after the gold re-point */
.shelf.lum-amber-deep .shelf-book-rmark,
.shelf.lum-amber-deep .shelf-book-row-rmark,
.shelf.lum-amber-deep .shelf-rootednote-mark{
  background:radial-gradient(circle at 38% 32%, #fff4d6 0%, var(--lum-star) 45%, var(--gold) 100%);
}
.shelf.lum-amber-deep .shelf-book-rmark{ box-shadow:0 0 8px var(--lum-star); }
.shelf.lum-amber-deep .shelf-book-row-rmark{ box-shadow:0 0 7px var(--lum-star); }
.shelf.lum-amber-deep .shelf-rootednote-mark{ box-shadow:0 0 10px rgba(255,206,74,.6); }

/* 7 · GOLD ROLE-SPLIT · small gold TEXT -> deep gold for WCAG AA */
.shelf.lum-amber-deep .shelf-book-status,
.shelf.lum-amber-deep .shelf-side h3,
.shelf.lum-amber-deep .shelf-filter-label,
.shelf.lum-amber-deep .shelf-lens-ask,
.shelf.lum-amber-deep .shelf-sort-menu button.is-on,
.shelf.lum-amber-deep .shelf-selectbar .count b{
  color:var(--gold-deep);
}
.shelf.lum-amber-deep .shelf-select-toggle.is-armed{ color:var(--gold-deep); border-color:var(--gold); }

/* 8 · GOLD ROLE-SPLIT · FILLS -> AA-safe warm-gold pills (flat, no glow) */
.shelf.lum-amber-deep .seg-opt.is-on{ background:linear-gradient(180deg,#f2c25a,#e0a838); color:#3d2807; }
.shelf.lum-amber-deep .shelf-selectbar .move{ background:linear-gradient(180deg,#f2c25a,#d9a441); color:#3d2807; }

/* 9 · RESTRAINT · arc thread + chip = SOLID field hue, NO per-card glow (law 1/5) */
.shelf.lum-amber-deep .shelf-book-arcthread{ box-shadow:none; }
.shelf.lum-amber-deep .arc-chip::before{ box-shadow:none; }

/* 10 · LITERAL RESCUES · base rules hardcoding dark/near-white values (color/bg only) */
.shelf.lum-amber-deep .shelf-book-cover-area{ background:#efe7d6; }
.shelf.lum-amber-deep .shelf-book-cover-placeholder{ background:linear-gradient(155deg,#efe7d6,#e3d8c1); }
.shelf.lum-amber-deep .seg-opt{ color:var(--lum-ink-2); }            /* inactive label was near-white */
.shelf.lum-amber-deep .shelf-yumiline p{ color:#256b80; }            /* pale cyan -> AA deep teal; cyan DOT kept */
.shelf.lum-amber-deep .shelf-filter:hover,
.shelf.lum-amber-deep .shelf-filter.is-on{ background:#efe7d6; }
/* B2 residual · .n filter counts: drop the .7 opacity so #645940 counts clear AA */
.shelf.lum-amber-deep .shelf-filter .n{ opacity:1; }
/* ===== end R2 · UNIVERSAL v1.2 SKIN ===== */

/* ============================================================================
   R2 · SHELF FEATURES — the 8 locked decisions, ported from the mockup
   (docs/studio/mockups/shelf.html). Structural CSS, scoped to .shelf.lum-amber-
   deep; colors already handled by the Universal skin block above. Markup +
   behavior in renderShelf / renderShelfBook / renderShelfBookRow.
   ============================================================================ */

/* 3a · ARC THREAD-TIE (decision 1/8) — thin colored bar down the LEFT SPINE,
   colored by the primary arc; tap the bar to reveal ALL arcs (intersectional).
   Sits just inside the register tick (which stays at left:0); a book with no
   tick hugs the edge. No glow (Universal restraint law 1/5). */
.shelf.lum-amber-deep .shelf-book-arcthread{ position:absolute; left:3px; top:0; bottom:0; width:4px; border-radius:0 3px 3px 0; background:var(--arc); cursor:pointer; }
.shelf.lum-amber-deep .shelf-book:not(.has-tick) .shelf-book-arcthread{ left:0; }
.shelf.lum-amber-deep .shelf-book-arcs{ display:none; flex-wrap:wrap; gap:5px; margin-top:9px; }
.shelf.lum-amber-deep .shelf-book.arcs-open .shelf-book-arcs{ display:flex; }
.shelf.lum-amber-deep .arc-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--lum-mono); font-size:10px; letter-spacing:.02em; color:var(--lum-ink-2); background:rgba(255,236,200,.05); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:3px 9px; }
.shelf.lum-amber-deep .arc-chip::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--arc); flex:none; }
.shelf.lum-amber-deep .arc-chip.is-primary{ border-color:var(--arc); color:var(--lum-ink); }
.shelf.lum-amber-deep .shelf-book-row{ position:relative; padding-left:12px; }
.shelf.lum-amber-deep .shelf-book-row .shelf-book-arcthread{ left:0; width:3px; border-radius:0; }
.shelf.lum-amber-deep .shelf-book-row.has-tick .shelf-book-arcthread{ left:3px; }

/* 3b · SELECT mode -> Move to arc (decision 2). The ONLY bulk action; no
   archive, no bulk delete. Per-card checkbox overlay (covers) + a row highlight
   (list) + a fixed action bar that slides up when >=1 book is picked. Colors of
   the .move pill / count b / armed toggle come from the Universal skin block. */
.shelf.lum-amber-deep .shelf-book-check{ display:none; position:absolute; top:7px; left:7px; z-index:3; width:22px; height:22px; border-radius:50%; border:2px solid var(--lum-glass-bd); background:rgba(24,16,6,.7); }
.shelf.lum-amber-deep.is-selecting .shelf-book-check{ display:block; }
.shelf.lum-amber-deep.is-selecting .shelf-book{ cursor:copy; }
.shelf.lum-amber-deep .shelf-book.is-picked .shelf-book-check{ background:var(--lum-gold); border-color:var(--lum-gold); }
.shelf.lum-amber-deep .shelf-book.is-picked .shelf-book-check::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--lum-gold-ink); font-size:13px; font-weight:700; }
.shelf.lum-amber-deep .shelf-book.is-picked .shelf-book-cover-area{ outline:2px solid var(--lum-gold); outline-offset:2px; }
.shelf.lum-amber-deep .shelf-book-row.is-picked{ background:rgba(168,118,26,.12); }
/* B-M · P4: the Shelf Select-mode action bar sits flush at bottom:0 with no
   safe-area inset, so its move/cancel buttons meet the home-indicator band in
   standalone PWA. Add the inset to the bottom PADDING (not `bottom`): the fill
   still reaches the true edge, the CONTROLS pad clear of the indicator. Additive:
   env() adds nothing where there is no inset. (Whether a real Safari TAB reserves
   the band the way standalone does is a WebKit question this headless build cannot
   settle — EXPECTED no tab change, not verified; same caveat as the Bloom orb.)
   FELT DELTA (390, installed PWA): the Select-bar buttons sit clear above the home
   indicator, not flush on it. */
.shelf.lum-amber-deep .shelf-selectbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(110%); transition:transform var(--motion-base,.2s) var(--ease,ease); display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; padding:14px 22px calc(14px + env(safe-area-inset-bottom)); background:var(--lum-base); border-top:1px solid var(--lum-glass-bd); box-shadow:0 -16px 40px -20px rgba(0,0,0,.8); }
.shelf.lum-amber-deep.is-selecting .shelf-selectbar.has-pick{ transform:none; }
.shelf.lum-amber-deep .shelf-selectbar .count{ font-family:var(--lum-mono); font-size:12px; letter-spacing:.04em; color:var(--lum-ink-2); }
.shelf.lum-amber-deep .shelf-selectbar .count b{ font-weight:500; }
.shelf.lum-amber-deep .shelf-selectbar .move{ font-family:var(--lum-sans); font-size:13px; font-weight:600; border:none; border-radius:var(--lum-r-pill,999px); padding:9px 18px; cursor:pointer; }
.shelf.lum-amber-deep .shelf-selectbar .cancel{ font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink-3); background:transparent; border:none; cursor:pointer; }
.shelf.lum-amber-deep .shelf-selectbar .cancel:hover{ color:var(--lum-ink); }

/* 3c · SORT control (decision 4). date-added (default) + reading status. Grouping
   stays on the sidebar Lenses|Categories seg (NOT duplicated here). Quiet toolbar
   dropdown; is-on option colored gold-deep by the skin block. */
.shelf.lum-amber-deep .shelf-sort{ position:relative; }
.shelf.lum-amber-deep .shelf-sort-btn{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.04em; color:var(--lum-ink-3); background:rgba(255,236,200,.06); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:8px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.shelf.lum-amber-deep .shelf-sort-btn:hover{ color:var(--lum-ink); border-color:var(--lum-glass-bd); }
.shelf.lum-amber-deep .shelf-sort-btn .caret{ font-size:9px; opacity:.7; }
.shelf.lum-amber-deep .shelf-sort-menu{ display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:170px; padding:5px; border-radius:12px; background:var(--lum-base); border:1px solid var(--lum-glass-bd); box-shadow:0 18px 40px -18px rgba(0,0,0,.75); }
.shelf.lum-amber-deep .shelf-sort-menu.is-open{ display:block; }
.shelf.lum-amber-deep .shelf-sort-menu button{ display:block; width:100%; text-align:left; font-family:var(--lum-sans); font-size:13px; color:var(--lum-ink-2); background:transparent; border:none; border-radius:8px; padding:9px 12px; cursor:pointer; }
.shelf.lum-amber-deep .shelf-sort-menu button:hover{ background:rgba(255,236,200,.08); color:var(--lum-ink); }

/* 3d · STATUS DOTS (decision 7). A round dot per read-state alongside the mono
   label, overriding the base flat 5px gold SQUARE (components.css:2495 / CX-4 --
   which paints all three states identically). reading = luminous gold, read =
   flat green, want = hollow ring. The mono label is KEPT (skin colors it). */
.shelf.lum-amber-deep{ --status-read:#7bbf7b; --status-will:transparent; }
.shelf.lum-amber-deep .shelf-book-status::before{ width:7px; height:7px; border-radius:50%; background:var(--lum-gold); }
.shelf.lum-amber-deep .shelf-book-status-reading::before{ background:var(--status-reading); box-shadow:0 0 7px rgba(255,206,74,.6); }
.shelf.lum-amber-deep .shelf-book-status-read::before{ background:var(--status-read); box-shadow:none; }
.shelf.lum-amber-deep .shelf-book-status-will-read::before{ background:var(--status-will); border:1.5px solid var(--lum-ink-4); width:8px; height:8px; box-shadow:none; }
/* ===== end R2 · SHELF FEATURES ===== */

/* ============================================================================
   MW-1 · SHELF MOBILE PASS  (praxis-mobile-canon P1-P9). ADDITIVE; new selectors
   only (.shelf-manage*, .shelf-add-primary behaviour). Universal v1.2 tokens
   only -- the Shelf is a LIGHT-ground surface via its R2 re-points, so semantic
   --surface/--border/--color-surface resolve DARK here and are NOT used; the
   sheet chrome wires the non-lum LIGHT primitives instead: fill --page-2, hair-
   line --line-page(-2), backdrop --scrim (theme.css:57, the purpose-built modal
   veil), text --ink/--gold-deep, --font-mono, --radius-lg. NO --lum-* introduced.
   Desktop popover (base rule) + mobile bottom sheet (759 block) share ONE JS code
   path (renderShelf: openManageSheet/closeManageSheet). Solid chrome, no blur
   (rail A). Motion = opacity fade + sheet translate only (P9).
   ============================================================================ */

/* P1 · Manage wrapper anchors the desktop popover */
.shelf.lum-amber-deep .shelf-manage{ position:relative; display:inline-flex; }

/* P1 · both closed-states hidden (shared) */
.shelf.lum-amber-deep .shelf-manage-backdrop{ display:none; }
.shelf.lum-amber-deep .shelf-manage-sheet{ display:none; box-sizing:border-box; }

/* P1 · DESKTOP popover -- scoped to >=760 ONLY, so its higher-specificity
   .is-open rules can never leak into (and outrank) the mobile bottom sheet
   below. (Media queries add no specificity; source order + specificity decide,
   so an un-scoped .is-open .sheet at 0,5,0 would beat the mobile rule at 0,3,0.) */
@media (min-width:760px){
  .shelf.lum-amber-deep .shelf-manage.is-open .shelf-manage-backdrop{
    display:block; position:fixed; inset:0; z-index:10020; background:transparent;
  }
  .shelf.lum-amber-deep .shelf-manage.is-open .shelf-manage-sheet{
    display:block; position:absolute; top:calc(100% + 8px); right:0; z-index:10021;
    width:288px; max-width:calc(100vw - 32px);
    max-height:calc(100vh - 120px); overflow-y:auto;
    background:var(--page-2); border:1px solid var(--line-page-2);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-page);
    padding:14px 14px 16px;
  }
}

/* P1 · sheet interior (shared desktop + mobile) */
.shelf.lum-amber-deep .shelf-manage-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px;
}
.shelf.lum-amber-deep .shelf-manage-title{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep);
}
.shelf.lum-amber-deep .shelf-manage-close{
  flex:none; width:44px; height:44px; margin:-8px -8px -8px 0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--ink);
  font-size:24px; line-height:1; cursor:pointer;
}
.shelf.lum-amber-deep .shelf-manage-close:hover{ color:var(--gold-deep); }
.shelf.lum-amber-deep .shelf-manage-body{ display:flex; flex-direction:column; gap:9px; }
.shelf.lum-amber-deep .shelf-manage-body > .seg{ display:flex; }
.shelf.lum-amber-deep .shelf-manage-body > .seg .seg-opt{ flex:1; }
.shelf.lum-amber-deep .shelf-manage-body > .chip,
.shelf.lum-amber-deep .shelf-manage-body > .btn{ width:100%; justify-content:flex-start; }

@media (max-width:759px){
  /* P1 · Manage becomes a bottom SHEET (slides up over a scrim backdrop) */
  .shelf.lum-amber-deep .shelf-manage-backdrop{
    display:block; position:fixed; inset:0; z-index:10020; background:var(--scrim);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .shelf.lum-amber-deep .shelf-manage.is-open .shelf-manage-backdrop{ opacity:1; pointer-events:auto; }
  .shelf.lum-amber-deep .shelf-manage-sheet{
    display:block; position:fixed; left:0; right:0; bottom:0; top:auto; z-index:10021;
    width:auto; max-width:none; max-height:82vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch;   /* B-M: momentum scroll — iOS < 13 / WebViews */
    background:var(--page-2); border:none; border-top:1px solid var(--line-page-2);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:16px 18px calc(20px + env(safe-area-inset-bottom));   /* P4 safe-area */
    box-shadow:0 -14px 40px -18px var(--scrim);
    transform:translateY(100%); transition:transform .26s ease;
  }
  .shelf.lum-amber-deep .shelf-manage.is-open .shelf-manage-sheet{ transform:none; }
  .shelf.lum-amber-deep .shelf-manage-body{ gap:10px; }
  .shelf.lum-amber-deep .shelf-manage-body > .seg{ width:100%; }

  /* P2 · thumb-zone -- Add a book relocates to a bottom-LEFT FAB (the Yumi orb is
     bottom-right); safe-area padded (P4). Hidden in Select mode (the fixed
     .shelf-selectbar owns the bottom third then). */
  .shelf.lum-amber-deep .shelf-add-primary{
    position:fixed; left:var(--sp-5);
    bottom:calc(var(--sp-5) + env(safe-area-inset-bottom)); z-index:90;
    box-shadow:0 8px 22px -8px var(--scrim);
  }
  .shelf.lum-amber-deep.is-selecting .shelf-add-primary{ display:none; }

  /* P5 · large-title collapse -- the head sticks; a threshold-guarded ES3 scroll
     listener adds .is-stuck to compact the title (font-size + padding steps only,
     no transform). CSS-first: position:sticky is the backbone. */
  /* The head is already a full-width (100%) border-box child (the .shelf > *
     16px padding is INSIDE its box), so background occludes edge-to-edge with
     NO negative margins -- those caused an 8px right overflow (P8). */
  /* Head padding/shadow flip instantly (P5/P9 limit animated props to the
     title's font-size step + opacity + the sheet slide -- nothing else). */
  .shelf.lum-amber-deep .shelf-head{
    position:sticky; top:0; z-index:40; padding:10px 16px 8px; background:var(--paper);
  }
  .shelf.lum-amber-deep .shelf-head .shelf-title{ transition:font-size .2s ease; }
  .shelf.lum-amber-deep .shelf-head.is-stuck{
    padding-top:6px; padding-bottom:6px;
    border-bottom:1px solid var(--line-page); box-shadow:0 6px 16px -12px var(--scrim);
  }
  .shelf.lum-amber-deep .shelf-head.is-stuck .shelf-title{ font-size:22px; }

  /* P7 · input discipline -- the filter field is 16px (kills iOS focus-zoom) */
  .shelf.lum-amber-deep .nav-search input,
  .shelf.lum-amber-deep .shelf-search-input{ font-size:16px; }
}

/* P9 · motion restraint -- reduced-motion zeroes the sheet slide, backdrop fade,
   and the sticky-head/title steps. Open/close still resolve, instantly. */
@media (prefers-reduced-motion: reduce){
  .shelf.lum-amber-deep .shelf-manage-sheet,
  .shelf.lum-amber-deep .shelf-manage-backdrop,
  .shelf.lum-amber-deep .shelf-head,
  .shelf.lum-amber-deep .shelf-head .shelf-title{ transition:none; }
}
/* ===== end MW-1 · SHELF MOBILE PASS ===== */

/* ============================================================================
   R-SHELF (v3.242) · THE BOOKCASE + WHEAT HORIZON
   The Shelf re-composition — brief v4 (THE FELT DIAL) + THE WALL / order-by-life.
   ADDITIVE over the R2 skin + MW-1 block above (design-canon §2: add, don't
   rewrite the load-bearing rules). Source-ordered AFTER them so the new bookcase
   rules win where selectors overlap; the AES-2 sheet (:12729), Manage sheet
   (:12890) and Select bar (:12845) are PRESERVED untouched (NON-GOALs).
   Light-safe palette (L8): --ink / --gold / --field-N are re-pointed light by the
   :12688 block; --ink-2/-3/-4 are re-pointed below (the dark route flips them);
   surfaces wire --card-N / --page-2 / --shelf-cavity / --board-N / --wheat-N (never
   --surface(-2) / --border, which flip dark). No --lum-N in new rules (Law 6).
   Markup: renderShelf + buildCoverNode / renderShelfCase / renderShelfDesk /
   buildShelfWheat / applyShelfIllumination (views.js).
   ============================================================================ */

/* L8 ground re-point: --ink-2/-3/-4 (the two tiers the :12688 block did not cover;
   the shelf's dark route flips them) to the light-page card family, + the sheet
   composition (padding, full-bleed strip, position) + F7 (S5) safe-area-inset-top
   on the sheet top (0 on non-notched; the notch let content render under the iOS
   status bar). SINGLE-LINE (S5 fix: the S1 multi-line form dropped from the CSSOM,
   leaving --ink-3 stuck on the dark-ground --muted; caught by the G2 parity gate). */
.shelf.lum-amber-deep{ --ink-2:var(--card-ink-2); --ink-3:var(--card-ink-2); --ink-4:var(--card-meta); padding:0 0 104px; position:relative; margin-top:calc(var(--sheet-gap) + env(safe-area-inset-top)); }
/* --ink-3 → --card-ink-2 (#5C5340 ~7.2:1 on the sheet), NOT --card-meta (#8A7F5F
   ~3.8:1) which FAILS WCAG AA at the 10.5px author/meta size — the mockup's #978b6d
   failed too; the live R2 skin already collapsed --lum-ink-3 to #645940 for this.
   --ink-4 keeps --card-meta (dots/borders only — the 3:1 non-text floor). */
.shelf.lum-amber-deep > *{ max-width:none; margin:0; padding:0; }
.shelf.lum-amber-deep > .shelf-inner{ max-width:1080px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; }
@media (min-width:760px){ .shelf.lum-amber-deep > .shelf-inner{ max-width:1920px; } }

/* ---- F9/§3.5 · THE HORIZON STRIP — slim, fixed, NEVER sticky (scrolls away) ---- */
.shelf.lum-amber-deep .horizon-strip{
  position:relative; height:104px; overflow:hidden;
  border-radius:var(--card-radius) var(--card-radius) 0 0;
  background:
    radial-gradient(60% 90% at 72% 100%, var(--wheat-glow) 0%, transparent 62%),
    linear-gradient(to bottom, var(--wheat-sky-1) 0%, var(--wheat-sky-2) 58%, var(--wheat-sky-3) 100%);
}
.shelf.lum-amber-deep .horizon-strip::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:12px; background:linear-gradient(to bottom, var(--wheat-soil-1), var(--wheat-soil-2)); }
/* §3.2 BREEZE — two layers, tip-lean only, transform ONLY. Duration/delay set
   inline per stalk by buildShelfWheat (>=8s); the CSS omits duration on purpose. */
.shelf.lum-amber-deep .horizon-strip .stalk{ position:absolute; bottom:0; width:2px; border-radius:2px 2px 0 0; transform-origin:50% 100%; }
.shelf.lum-amber-deep .horizon-strip .stalk::after{ content:''; position:absolute; top:-12px; left:-2px; width:6px; height:14px; border-radius:50% 50% 45% 45%; }
.shelf.lum-amber-deep .horizon-strip .stalk--near{ background:linear-gradient(to top,var(--wheat-near-2),var(--wheat-near-1)); animation-name:shelfSwayNear; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; }
.shelf.lum-amber-deep .horizon-strip .stalk--near::after{ background:radial-gradient(ellipse at 50% 30%, var(--wheat-ear-1), var(--wheat-ear-2)); }
.shelf.lum-amber-deep .horizon-strip .stalk--far{ background:linear-gradient(to top,var(--wheat-far-2),var(--wheat-far-1)); animation-name:shelfSwayFar; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; }
.shelf.lum-amber-deep .horizon-strip .stalk--far::after{ background:radial-gradient(ellipse at 50% 30%, var(--wheat-ear-far-1), var(--wheat-ear-far-2)); }
@keyframes shelfSwayNear{ from{ transform:rotate(-1.7deg); } to{ transform:rotate(1.9deg); } }
@keyframes shelfSwayFar{ from{ transform:rotate(-0.85deg); } to{ transform:rotate(0.95deg); } }

/* ---- F4/§3.8 · THE SLIM HEADER — search + mode toggle; sidebar dissolved.
   NOT sticky at any width (departs with the strip). Manage/Add/Select carried. -- */
.shelf.lum-amber-deep .shelf-slim-header{ padding:18px 0 4px; }
.shelf.lum-amber-deep .shelf-slim-top{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.shelf.lum-amber-deep .shelf-slim-header h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(28px,4vw,38px); line-height:1; margin:0;
  background:linear-gradient(180deg,var(--ink) 42%,var(--gold) 112%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.shelf.lum-amber-deep .shelf-slim-count{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-3); padding-bottom:4px; }
.shelf.lum-amber-deep .shelf-slim-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.shelf.lum-amber-deep .shelf-search{ flex:1 1 200px; min-width:170px; height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 14px; border-radius:var(--radius-pill); background:var(--shelf-cavity); border:1px solid var(--line-page-2); }
.shelf.lum-amber-deep .shelf-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--ink); font-family:var(--font-body); font-size:14px; }
.shelf.lum-amber-deep .shelf-search input::placeholder{ color:var(--ink-3); }
.shelf.lum-amber-deep .shelf-search .s-glyph{ flex:none; opacity:.6; font-size:14px; color:var(--ink-3); }
.shelf.lum-amber-deep .mode-seg{ display:inline-flex; padding:3px; border-radius:var(--radius-pill); background:var(--shelf-cavity); border:1px solid var(--line-page-2); }
.shelf.lum-amber-deep .mode-seg button{ font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-2); background:none; border:none; border-radius:var(--radius-pill); padding:8px 16px; cursor:pointer; min-height:36px; }
.shelf.lum-amber-deep .mode-seg button.is-on{ color:var(--gold-ink-on-gold); background:linear-gradient(180deg,var(--field-1) 0%,var(--gold-hi) 60%,var(--gold) 100%); font-weight:600; }
.shelf.lum-amber-deep .shelf-manage-entry{ margin-left:auto; }
/* F6/Law-1 · value chips (illuminate matches / dim rest; dims COVER OPACITY only) */
.shelf.lum-amber-deep .value-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.shelf.lum-amber-deep .value-chips .vlabel{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-right:2px; }
.shelf.lum-amber-deep .vchip{ font-family:var(--font-body); font-size:12.5px; color:var(--ink-2); background:transparent; border:1px solid var(--line-page-2); border-radius:var(--radius-pill); padding:6px 13px; min-height:32px; cursor:pointer; }
.shelf.lum-amber-deep .vchip.is-on{ border-color:var(--gold); color:var(--gold-deep); background:var(--shelf-cavity); box-shadow:0 0 0 3px rgba(168,118,26,.14); }
.shelf.lum-amber-deep .vcount{ font-family:var(--font-mono); margin-left:5px; }
.shelf.lum-amber-deep .vchip:focus-visible, .shelf.lum-amber-deep .mode-seg button:focus-visible, .shelf.lum-amber-deep .shelf-search input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.shelf.lum-amber-deep .search-empty-line{ font-family:var(--font-mono); font-size:12px; font-style:italic; color:var(--ink-3); margin-top:14px; display:none; }
.shelf.lum-amber-deep .search-empty-line.is-shown{ display:block; }

/* ---- F2/§3.4 · THE DESK (NOW) — no card/border; page-tone ground. ---- */
.shelf.lum-amber-deep .desk{ padding:20px 0 8px; --cap-h:var(--cap-h-now); }
.shelf.lum-amber-deep .desk-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.shelf.lum-amber-deep .desk-head h2{ font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:21px; color:var(--ink); margin:0; }
.shelf.lum-amber-deep .desk-head .count{ font-family:var(--font-mono); font-size:11px; color:var(--gold-deep); }
.shelf.lum-amber-deep .desk-row{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; padding:2px 2px 0; }
.shelf.lum-amber-deep .desk-empty-line{ font-family:var(--font-mono); font-size:13px; font-style:italic; color:var(--ink-3); padding:6px 2px 2px; }
.shelf.lum-amber-deep .qline{ font-family:var(--font-mono); font-style:italic; font-size:10px; color:var(--gold-deep); max-width:130px; margin-top:9px; line-height:1.45; text-align:center; }
/* R1 (S5): the desk's "+N more reading →" door — a quiet pill beside the covers,
   opening the full reading set in the focused view. */
.shelf.lum-amber-deep .desk-more{ align-self:center; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--gold-deep); background:transparent; border:1px dashed var(--line-page-2); border-radius:var(--radius-pill); padding:9px 15px; cursor:pointer; }
.shelf.lum-amber-deep .desk-more:hover{ color:var(--ink); border-color:var(--gold); }

/* ---- F1/F9/§3.1 · THE CASE — carved cavities; the case never moves. ---- */
.shelf.lum-amber-deep{ --cover-w:96px; --cover-h:144px; --cover-w-now:114px; --cover-h-now:170px; --spine-w:28px; --cap-h:72px; --cap-h-lens:94px; --cap-h-now:110px; --row-gap:22px; --col-gap:16px; }
.shelf.lum-amber-deep .case{ padding:8px 0 4px; transition:opacity .2s ease; }
.shelf.lum-amber-deep .case.is-fading{ opacity:0; }
/* R3 (S5): lens captions tighten to the base cap — "also under" left the caption
   (it now renders only in the focused view, which keeps the taller cap). */
.shelf.lum-amber-deep .focused-view{ --cap-h:var(--cap-h-lens); }
/* THE WALL (>=760): side-by-side vertical column stacks; a band never splits. */
.shelf.lum-amber-deep .wall{ display:block; }
@media (min-width:760px){
  .shelf.lum-amber-deep .wall{ display:flex; align-items:flex-start; gap:30px; }
  .shelf.lum-amber-deep .wall-col{ flex:1 1 0; min-width:0; }
  .shelf.lum-amber-deep .wall-col .cavity-band{ margin-bottom:30px; }
  /* R1 (FS-1): a lone column (bandCount 1) is capped + centered, never full-bleed. */
  .shelf.lum-amber-deep .wall.is-single{ justify-content:center; }
  .shelf.lum-amber-deep .wall.is-single .wall-col{ flex:0 1 auto; width:100%; max-width:600px; }
}
.shelf.lum-amber-deep .band-label{ font-family:var(--font-serif); font-weight:600; font-size:21px; color:var(--ink); padding:2px 0; text-align:left; }
.shelf.lum-amber-deep .cavity-band{ margin-bottom:34px; }
.shelf.lum-amber-deep .cavity-band-hd{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.shelf.lum-amber-deep .cavity-band-hd button.label{ font-family:var(--font-serif); font-weight:600; font-size:21px; color:var(--ink); background:none; border:none; cursor:pointer; padding:2px 0; text-align:left; }
.shelf.lum-amber-deep .cavity-band-hd button.label:hover{ color:var(--gold-deep); }
.shelf.lum-amber-deep .cavity-band-hd .count{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }
.shelf.lum-amber-deep .cavity{ position:relative; background:var(--shelf-cavity); border-radius:3px; padding:14px 12px 16px; box-shadow:inset 0 15px 20px -15px rgba(36,23,16,.34); }
.shelf.lum-amber-deep .cavity::after{ content:''; position:absolute; left:-2px; right:-2px; bottom:-9px; height:9px; background:var(--board-face); border-bottom:5px solid var(--board-under); border-radius:0 0 3px 3px; }
/* GRAVITY — rows wrap, top-anchored equal-height columns -> feet on ONE line
   per row; a repeating-gradient paints the drawn shelf line at each cover-foot. */
.shelf.lum-amber-deep .cavity-shelfline{ display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:var(--col-gap); row-gap:var(--row-gap); padding-bottom:2px;
  background:repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--cover-h) - 1px),
    rgba(255,250,238,.55) calc(var(--cover-h) - 1px), rgba(255,250,238,.55) var(--cover-h),
    var(--board-under) var(--cover-h), var(--board-under) calc(var(--cover-h) + 2px),
    rgba(36,23,16,.12) calc(var(--cover-h) + 2px), rgba(36,23,16,.12) calc(var(--cover-h) + 5px),
    transparent calc(var(--cover-h) + 5px), transparent calc(var(--cover-h) + var(--cap-h) + var(--row-gap))); }

/* ---- the standing book (cover node). Container renamed .cavity-cover; the
   sub-cover class names are CARRIED live (values re-expressed). ---- */
.shelf.lum-amber-deep .cavity-cover{ position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; width:var(--cover-w); background:none; border:none; padding:0; cursor:pointer; text-align:center; text-decoration:none; }
/* F4 (S5): the cover is an <a>; kill the browser-default underline that bled onto
   captions. Scoped to the shelf — global anchor styling is untouched. */
.shelf.lum-amber-deep .cavity-cover:hover, .shelf.lum-amber-deep .cavity-cover:focus{ text-decoration:none; }
.shelf.lum-amber-deep .cavity-cover.is-now{ --cover-w:var(--cover-w-now); --cover-h:var(--cover-h-now); }
.shelf.lum-amber-deep .book-slot{ position:relative; width:var(--cover-w); height:var(--cover-h); display:flex; align-items:flex-end; justify-content:center; }
.shelf.lum-amber-deep .cavity-cover .shelf-book-cover-area{ position:relative; margin:0; box-sizing:border-box; overflow:visible; background:var(--card-2); border:none; border-radius:3px 6px 6px 3px; box-shadow:0 3px 5px rgba(36,23,16,.30); transition:transform .18s ease, box-shadow .22s ease; }
/* GRAVITY: the carried .shelf-book-cover-area class inherits margin-bottom:16px
   from the old card CSS; flex-end aligns the MARGIN box, lifting the foot off the
   line. Reset it here so cover feet + spine feet share one baseline. */
.shelf.lum-amber-deep .cavity-cover .shelf-book-cover-area .shelf-book-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.shelf.lum-amber-deep .cavity-cover:hover .shelf-book-cover-area, .shelf.lum-amber-deep .cavity-cover:focus-visible .shelf-book-cover-area{ transform:translateY(-4px); }
.shelf.lum-amber-deep .cavity-cover:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.shelf.lum-amber-deep .cap{ width:var(--cover-w); height:var(--cap-h); overflow:hidden; display:flex; flex-direction:column; align-items:center; padding-top:8px; }
/* F3/§3.3 · under-glow g0-g3; g0 = literal absence (no third shadow layer) */
.shelf.lum-amber-deep .cavity-cover .shelf-book-cover-area[data-glow="1"]{ box-shadow:0 3px 5px rgba(36,23,16,.30), 0 7px 15px -9px rgba(168,118,26,.30); }
.shelf.lum-amber-deep .cavity-cover .shelf-book-cover-area[data-glow="2"]{ box-shadow:0 3px 5px rgba(36,23,16,.30), 0 8px 18px -7px rgba(168,118,26,.42); }
.shelf.lum-amber-deep .cavity-cover .shelf-book-cover-area[data-glow="3"]{ box-shadow:0 3px 5px rgba(36,23,16,.30), 0 10px 22px -5px rgba(217,164,65,.55); }
/* F3/§3.3 · the single coal ember (value marks); one per cover, 2 rest steps */
.shelf.lum-amber-deep .ember{ position:absolute; top:-4px; right:-4px; width:9px; height:9px; border-radius:50%; background:var(--gold); z-index:2; }
.shelf.lum-amber-deep .ember--marked{ opacity:.55; }
.shelf.lum-amber-deep .ember--heavy{ opacity:.78; box-shadow:0 0 4px rgba(168,118,26,.45); }
.shelf.lum-amber-deep .cavity-cover.is-lit .ember{ background:var(--gold-hi); opacity:1; box-shadow:0 0 7px rgba(217,164,65,.65); }
/* register tick + arc thread + select check (carried) */
.shelf.lum-amber-deep .cavity-cover .shelf-book-tick{ position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tick); z-index:1; }
.shelf.lum-amber-deep .cavity-cover .shelf-book-arcthread{ position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:0 3px 3px 0; background:var(--arc); cursor:pointer; z-index:1; }
.shelf.lum-amber-deep .cavity-cover.has-tick .shelf-book-arcthread{ left:3px; }
.shelf.lum-amber-deep .cavity-cover .shelf-book-arcs{ display:none; flex-wrap:wrap; gap:5px; margin-top:8px; max-width:var(--cover-w); }
.shelf.lum-amber-deep .cavity-cover.arcs-open .shelf-book-arcs{ display:flex; }
.shelf.lum-amber-deep .cavity-cover .shelf-book-check{ display:none; position:absolute; top:6px; left:6px; z-index:3; width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.55); background:rgba(36,23,16,.35); }
.shelf.lum-amber-deep.is-selecting .cavity-cover .shelf-book-check{ display:block; }
.shelf.lum-amber-deep.is-selecting .cavity-cover{ cursor:copy; }
.shelf.lum-amber-deep .cavity-cover.is-picked .shelf-book-check{ background:var(--gold); border-color:var(--gold); }
.shelf.lum-amber-deep .cavity-cover.is-picked .shelf-book-check::after{ content:'\2713'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--gold-ink-on-gold); font-size:12px; font-weight:700; }
.shelf.lum-amber-deep .cavity-cover.is-picked .shelf-book-cover-area{ outline:2px solid var(--gold); outline-offset:2px; }
/* caption zone contents */
.shelf.lum-amber-deep .cap .shelf-book-title{ font-family:var(--font-serif); font-weight:600; font-size:13px; color:var(--ink); text-align:center; line-height:1.2; max-width:var(--cover-w); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.shelf.lum-amber-deep .cap .shelf-book-author{ font-family:var(--font-body); font-size:10.5px; color:var(--ink-3); text-align:center; max-width:var(--cover-w); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shelf.lum-amber-deep .cap .shelf-book-meta{ display:flex; align-items:center; gap:5px; margin-top:3px; }
.shelf.lum-amber-deep .cavity-cover .shelf-book-status{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep); }
.shelf.lum-amber-deep .cavity-cover .shelf-book-status::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:none; }
.shelf.lum-amber-deep .cavity-cover .shelf-book-status-read::before{ background:var(--ink-4); box-shadow:none; }
.shelf.lum-amber-deep .cavity-cover .shelf-book-status-will-read::before{ background:transparent; border:1.5px solid var(--ink-4); width:7px; height:7px; box-shadow:none; }
.shelf.lum-amber-deep .also-under{ font-family:var(--font-mono); font-size:8.5px; color:var(--ink-3); margin-top:6px; max-width:var(--cover-w); text-align:center; line-height:1.4; }
/* cover-less -> SPINE (weakness becomes charm) */
.shelf.lum-amber-deep .spine{ width:var(--spine-w); height:var(--cover-h); border-radius:2px 4px 4px 2px; display:flex; align-items:center; justify-content:center; background:var(--spine-cloth); box-shadow:0 3px 5px rgba(36,23,16,.30); }
.shelf.lum-amber-deep .spine span{ writing-mode:vertical-rl; font-family:var(--font-serif); font-weight:600; font-size:11px; color:var(--text-on-dark); letter-spacing:.03em; max-height:120px; overflow:hidden; white-space:nowrap; }
/* arc reveal chips (carried) */
.shelf.lum-amber-deep .cavity-cover .arc-chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; color:var(--ink-2); background:var(--shelf-cavity); border:1px solid var(--line-page-2); border-radius:var(--radius-pill); padding:3px 8px; }
.shelf.lum-amber-deep .cavity-cover .arc-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--arc); flex:none; }
.shelf.lum-amber-deep .cavity-cover .arc-chip.is-primary{ border-color:var(--arc); color:var(--ink); }

/* F6/Law-1 illumination — cover OPACITY only; cavity ground untouched */
.shelf.lum-amber-deep .cavity-cover.is-dim{ opacity:.32; }
.shelf.lum-amber-deep .cavity-cover.is-lit .shelf-book-cover-area{ box-shadow:0 3px 5px rgba(36,23,16,.30), 0 0 0 2px var(--gold-hi), 0 10px 22px -6px rgba(217,164,65,.55); }

/* A1 · mobile See-all tile (after the 2nd stacked shelf line) */
.shelf.lum-amber-deep .seeall-tile{ width:var(--cover-w); height:var(--cover-h); border-radius:6px; border:1.5px dashed var(--line-page-2); background:transparent; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-2); display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; line-height:1.5; cursor:pointer; }
.shelf.lum-amber-deep .seeall-tile:hover{ border-color:var(--gold); color:var(--gold-deep); }

/* the unshelved pile (Uncategorized) — outside the case, "in motion", last */
.shelf.lum-amber-deep .pile-band .cavity-band-hd button.label{ color:var(--ink-2); }
.shelf.lum-amber-deep .pile-row{ display:flex; flex-wrap:wrap; row-gap:22px; align-items:flex-end; padding:12px 6px 0; min-height:calc(var(--cover-h) + var(--cap-h) + 10px); }
.shelf.lum-amber-deep .pile-row .cavity-cover{ margin-right:-38px; }
.shelf.lum-amber-deep .pile-row .cavity-cover:nth-child(1) .shelf-book-cover-area{ transform:rotate(-5deg); }
.shelf.lum-amber-deep .pile-row .cavity-cover:nth-child(2) .shelf-book-cover-area{ transform:rotate(3deg) translateY(4px); }
.shelf.lum-amber-deep .pile-row .cavity-cover:nth-child(3) .shelf-book-cover-area{ transform:rotate(-2deg) translateY(-2px); }
.shelf.lum-amber-deep .pile-row .cavity-cover:nth-child(4) .shelf-book-cover-area{ transform:rotate(4deg) translateY(2px); }
.shelf.lum-amber-deep .pile-row .cavity-cover:nth-child(5) .shelf-book-cover-area{ transform:rotate(-3deg); }
.shelf.lum-amber-deep .pile-note{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); font-style:italic; margin:14px 0 0 8px; }

/* zero-books empty state (pin 11 / Law 4) — one quiet line + the Add primary */
.shelf.lum-amber-deep .shelf-empty-zero{ padding:48px 4px 24px; text-align:center; }
.shelf.lum-amber-deep .shelf-empty-zero-line{ font-family:var(--font-serif); font-style:italic; font-size:18px; color:var(--ink-3); line-height:1.5; max-width:520px; margin:0 auto 20px; }

/* F5 (S5): the add/edit-book editor container uses --surface-2/--border — both flip
   DARK on the shelf's dark route (a legacy dark slab). Dress it to the light sheet +
   kit dialect. Behavior byte-preserved (openShelfEditor JS untouched).
   RENDER ROUND (D10): .shelf-bulk-editor JOINS THIS BLOCK. It sits on the same
   grouped container rule as .shelf-editor (components.css:3703) and therefore had
   the identical legacy-dark-slab bug -- F5 simply never listed it. Measured before
   this fix: background rgb(43,48,66) (--surface-2) carrying rgb(36,23,16) (--ink)
   on a page ground of rgb(253,249,238) -- a dark navy panel in a cream app, and
   near-black text on it at roughly 1.3:1, which is an accessibility failure and not
   a matter of taste. Extending this selector list is the whole fix: no new
   component, no new token, no new register -- the one it needed was four lines away.
   .notebook-editor is the third member of that grouped rule and is NOT touched:
   everything here is scoped under .shelf.lum-amber-deep. */
.shelf.lum-amber-deep .shelf-editor,
.shelf.lum-amber-deep .shelf-bulk-editor{ background:var(--card-2); border:1px solid var(--line-page-2); box-shadow:0 1px 2px rgba(36,23,16,.14), 0 10px 30px -18px rgba(36,23,16,.30); }
.shelf.lum-amber-deep .shelf-bulk-editor-textarea{ color:var(--ink); background:transparent; border:1px solid var(--line-page-2); }
.shelf.lum-amber-deep .shelf-bulk-editor-textarea::placeholder{ color:var(--ink-3); }
.shelf.lum-amber-deep .shelf-editor-title-input,
.shelf.lum-amber-deep .shelf-editor-author-input,
.shelf.lum-amber-deep .shelf-editor-genre-input,
.shelf.lum-amber-deep .shelf-editor-isbn-input{ color:var(--ink); border-bottom-color:var(--line-page-2); }
.shelf.lum-amber-deep .shelf-editor-status,
.shelf.lum-amber-deep .shelf-editor-status-option{ color:var(--ink-2); }
.shelf.lum-amber-deep .shelf-editor-save,
.shelf.lum-amber-deep .shelf-bulk-editor-submit{ background:linear-gradient(180deg,var(--field-1) 0%,var(--gold-hi) 40%,var(--gold) 100%); color:var(--gold-ink-on-gold); border:1px solid var(--gold-deep); }
.shelf.lum-amber-deep .shelf-editor-cancel,
.shelf.lum-amber-deep .shelf-bulk-editor-cancel{ background:transparent; color:var(--ink-3); border:1px solid var(--line-page-2); }

/* F7 · "Ask Yumi for more lenses" row (lens-mode; doubles as lens-empty state) */
.shelf.lum-amber-deep .yumi-lens-row{ display:none; }
.shelf.lum-amber-deep .yumi-lens-row.is-shown{ display:flex; align-items:center; gap:10px; padding:16px 4px; margin-top:6px; border-top:1px dashed var(--line-page-2); flex-wrap:wrap; }
.shelf.lum-amber-deep .yumi-lens-row button{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--gold-deep); background:transparent; border:1px dashed var(--line-page-2); border-radius:var(--radius-sm); padding:9px 14px; cursor:pointer; }
.shelf.lum-amber-deep .yumi-lens-row button:hover{ border-color:var(--gold); color:var(--ink); }
.shelf.lum-amber-deep .yumi-lens-row .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-on-ground); flex:none; }
.shelf.lum-amber-deep .yumi-lens-row p{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }

/* R-FIRSTSHELF (3b) · the one-time lens offer — a quiet card between desk + case. */
.shelf.lum-amber-deep .firstshelf-offer{ position:relative; display:flex; align-items:flex-start; gap:14px; margin:2px 0 20px; padding:18px 46px 18px 18px; background:var(--shelf-cavity); border:1px solid var(--line-page-2); border-radius:var(--radius-lg); }
.shelf.lum-amber-deep .firstshelf-offer-orb{ flex:0 0 auto; margin-top:2px; }
.shelf.lum-amber-deep .firstshelf-offer-body{ display:flex; flex-direction:column; gap:12px; }
.shelf.lum-amber-deep .firstshelf-offer-line{ font-family:var(--font-serif); font-size:16px; line-height:1.42; color:var(--ink); margin:0; max-width:62ch; }
.shelf.lum-amber-deep .firstshelf-offer-go{ align-self:flex-start; }
.shelf.lum-amber-deep .firstshelf-offer-dismiss{ position:absolute; top:9px; right:11px; width:30px; height:30px; border:none; background:transparent; color:var(--ink-3); font-size:20px; line-height:1; cursor:pointer; border-radius:50%; }
.shelf.lum-amber-deep .firstshelf-offer-dismiss:hover{ color:var(--ink); }
@media (max-width:759px){
  .shelf.lum-amber-deep .firstshelf-offer{ padding:16px 42px 16px 16px; }
  .shelf.lum-amber-deep .firstshelf-offer-dismiss{ min-width:44px; min-height:44px; top:4px; right:4px; }
}

/* F5/§3.7 · the focused full view ("the case opens") — mobile-only */
.shelf.lum-amber-deep .focused-view{ display:none; padding:8px 0 4px; }
.shelf.lum-amber-deep .focused-view.is-shown{ display:block; }
.shelf.lum-amber-deep .focused-back{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--gold-deep); background:none; border:none; cursor:pointer; padding:6px 0 16px; }
.shelf.lum-amber-deep .focused-back:hover{ color:var(--ink); }

/* ---- MOBILE (<=759) — real 760 divide; P3 44px targets; P8 no overflow ---- */
@media (max-width:759px){
  .shelf.lum-amber-deep > .shelf-inner{ padding-left:16px; padding-right:16px; }
  .shelf.lum-amber-deep{ --cover-w:76px; --cover-h:114px; --spine-w:24px; --cover-w-now:92px; --cover-h-now:138px; --cap-h:60px; --cap-h-lens:80px; --cap-h-now:104px; --row-gap:18px; }
  .shelf.lum-amber-deep .horizon-strip{ height:64px; }
  .shelf.lum-amber-deep .shelf-slim-header h1{ font-size:32px; }
  .shelf.lum-amber-deep .mode-seg button, .shelf.lum-amber-deep .vchip, .shelf.lum-amber-deep .desk-more,
  .shelf.lum-amber-deep .cavity-band-hd button.label, .shelf.lum-amber-deep .seeall-tile, .shelf.lum-amber-deep .yumi-lens-row button{ min-height:44px; }
  .shelf.lum-amber-deep .shelf-search{ height:44px; }
  .shelf.lum-amber-deep .shelf-search input{ font-size:16px; }
  .shelf.lum-amber-deep .shelf-manage-entry{ width:100%; margin-left:0; }
}

/* reduced-motion — still field, no breath substitute (media query only, pin 4) */
@media (prefers-reduced-motion:reduce){
  .shelf.lum-amber-deep .horizon-strip .stalk{ animation:none !important; }
  .shelf.lum-amber-deep .case{ transition:none; }
  .shelf.lum-amber-deep .cavity-cover .shelf-book-cover-area{ transition:none; }
}
/* ===== end R-SHELF · THE BOOKCASE + WHEAT HORIZON ===== */

/* ============================================================================
   WAVE 1 · THE LIVING FIELD  (renderArcDetail on .lum-amber)
   Convert the arc interior (S1) to Amber/Lumen per design/praxis-field-amber.html.
   Faces = Field / Read / Page (List retired, F-D1). The constellation RENDERER
   (arc-constellation.js) is UNTOUCHED (F-D4) -- this reskins its chrome only +
   adds Tidy, the concentrate whisper (F-D3, deterministic), the Read face (F-D2,
   deterministic) and the Page stub. Full-bleed .lum-amber "your thinking" ground;
   ADDITIVE over the .arcfield base. Tokens: --lum-* only.
   ============================================================================ */
.arcfield.lum-amber{ display:block; box-sizing:border-box; width:100%; max-width:none; min-height:100vh; margin:0; padding:28px 0 70px; color:var(--lum-ink); }
.arcfield.lum-amber > *{ box-sizing:border-box; max-width:1080px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; }

/* head */
.arcfield.lum-amber .arcfield-head{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin:0 auto 6px; }
.arcfield.lum-amber .arcfield-head .t{ flex:1; min-width:0; }
.arcfield.lum-amber .eyebrow{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-gold); margin:0 0 7px; }
.arcfield.lum-amber .arcfield-q{ font-family:var(--lum-serif); font-weight:500; font-size:clamp(28px,4vw,38px); line-height:1.04; color:var(--lum-ink); margin:0; }
.arcfield.lum-amber .arcfield-desc{ font-family:var(--lum-serif); font-style:italic; font-size:18px; color:var(--lum-ink-2); margin:12px 0 0; max-width:620px; line-height:1.35; }
.arcfield.lum-amber .arcfield-sub{ font-family:var(--lum-mono); font-size:11.5px; letter-spacing:.04em; color:var(--lum-ink-3); margin:9px 0 0; }

/* faces seg + header buttons */
.arcfield.lum-amber .seg{ display:inline-flex; padding:3px; border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); background:rgba(255,236,200,.06); }
.arcfield.lum-amber .seg-opt{ font-family:var(--lum-sans); font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; color:rgba(255,244,224,.66); background:none; border:none; border-radius:var(--lum-r-pill,999px); padding:6px 16px; cursor:pointer; }
.arcfield.lum-amber .seg-opt:hover{ color:var(--lum-ink); }
.arcfield.lum-amber .seg-opt.is-on{ color:var(--lum-gold-ink); background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); font-weight:600; }
.arcfield.lum-amber .arc-detail-addsub,
.arcfield.lum-amber .arc-detail-delete{ font-family:var(--lum-sans); font-size:12.5px; border-radius:var(--lum-r-pill,999px); padding:7px 14px; cursor:pointer; border:1px solid var(--lum-glass-bd-2); background:transparent; color:var(--lum-ink-2); }
.arcfield.lum-amber .arc-detail-addsub:hover{ color:var(--lum-ink); border-color:var(--lum-glass-bd); }
.arcfield.lum-amber .arc-detail-delete:hover{ color:var(--lum-rose); border-color:var(--lum-rose); }

/* stage: constellation host + rail */
.arcfield.lum-amber .arcfield-stage{ display:grid; grid-template-columns:1fr 220px; gap:24px; align-items:start; margin-top:14px; }

/* ============================================================================
   RM6 / XL-1 · THE DESK WIDENS — the arc Field spans its working region.

   Recon finding this rule answers: the field's width was never designed. It
   measured 788px (1080 shell - 48 padding - 220 rail - 24 gap) and held that
   value from ~1128px viewport all the way through 2560, because NO
   @media (min-width:...) rule referenced .arcfield anywhere in this file (all 18
   min-width blocks scanned). The 788px was incidental, inherited from the shared
   1080px page shell -- so this authors a net-new tier rather than adjusting a
   designed number.

   At the XL tier the shell opens to 1560 and the rail earns 260 (it carries the
   Layers/legend chrome), leaving the field 1512 - 260 - 24 = 1228px.

   OCCUPANCY, against XL-1's >=60% floor:
     1920 -> 1560/1920 = 81.3%  PASS
     2560 -> 1560/2560 = 60.9%  PASS (the cap deliberately does NOT keep growing:
             XL-1 says pages COMPOSE wider, never stretch, so 2560 gets the same
             desk with more room around it, still just clear of the floor.) */
@media (min-width:1600px){
  .arcfield.lum-amber > *{ max-width:1560px; }
  .arcfield.lum-amber .arcfield-stage{ grid-template-columns:1fr 260px; }
}

/* ============================================================================
   AES-1 · THE GLOWS RETIRE (R-POLISH B3) — Mechanism A, the Field's own halo.

   arc-constellation.js:871/882 emit, per mark, a blurred
   `<circle r="54" fill="var(--subtheory-N)" opacity="lum(maturity)">` behind the
   glyph. The per-hue fill is the SEMANTIC GOLD violation: colour was decorating.

   Retired by CSS on the renderer's OUTPUT — `fill` is a presentation attribute
   and loses to any CSS rule, so the locked renderer stays byte-identical (the R1
   precedent). Selected by `circle[r="54"]`, which is the halo and nothing else:
   the dots layer's circles carry different radii, so this cannot over-reach.

   THE SPLIT, per the ruling: only `fill` is touched. `opacity` still carries
   lum(maturity) straight from the renderer, so ANNOTATION DENSITY still reads —
   the signal is untouched, only its colour becomes lawful. Gold now means one
   thing wherever it glows: this has been thought about.

   Also scoped here: --m1's on-ground variant. These two surfaces are the only
   `--subtheory-N` consumers that render on parchment; re-pointing --m1 for the
   subtree fixes slots 1/6/11/16 through the collapse without touching the
   ratified token or any dark-ground consumer. */
.arcfield .arc-detail-web-view svg circle[r="54"],
.home-arc-ff svg circle[r="54"],
.home-wf svg circle[r="54"]{
  fill:var(--mark-glow);
}
.arcfield .arc-detail-web-view,
.home-arc-ff,
.home-wf{
  --m1:var(--m1-on-ground);
  /* B3 session 2: the edge travels WITH the fill. --m1-edge flows into
     --subtheory-{1,6,11,16}-edge, so re-pointing the fill alone left the edge
     LIGHTER than what it edges — a carve running backwards. */
  --m1-edge:var(--m1-edge-on-ground);
  /* ------------------------------------------------------------------
     B3 SESSION 2 — THE RIDER WAS INERT, AND THIS IS WHY. Measured live: the
     mark glyphs paint `fill="var(--subtheory-6)"` / `var(--subtheory-16)`, and
     inside this very subtree those computed to #D9B24A — the RATIFIED value, at
     1.92:1 — while `--m1` right here correctly read #9D7A20. Re-pointing --m1 in
     a descendant CANNOT reach them: `--subtheory-6: var(--m1)` is DECLARED at
     :root (theme.css:377-392, :706-721), so it substitutes ROOT's --m1 at
     computed-value time and inherits down as an already-resolved colour. A
     custom property resolves where it is DECLARED, not where it is USED.
     Session 1 measured the lever (--m1) and reported 3.07:1; the pixels never
     moved. The collapse twins must therefore be re-declared HERE, at the same
     scope, which is what actually reaches the glyphs. --m1/--m1-edge above stay
     for any direct reader. */
  --subtheory-1:  var(--m1-on-ground);  --subtheory-1-edge:  var(--m1-edge-on-ground);
  --subtheory-6:  var(--m1-on-ground);  --subtheory-6-edge:  var(--m1-edge-on-ground);
  --subtheory-11: var(--m1-on-ground);  --subtheory-11-edge: var(--m1-edge-on-ground);
  --subtheory-16: var(--m1-on-ground);  --subtheory-16-edge: var(--m1-edge-on-ground);
}

/* ============================================================================
   R1 · TY-1's 12px TYPE FLOOR IN THE CONSTELLATION — and a corrected diagnosis.

   The brief carried this as "SVG Yumi label 11px — fix at the source (locked
   renderer)". Measured, that premise is wrong in BOTH directions:

     arc interior   viewBox 600x500 rendered at 1228px -> scale 2.047
                    font-size="11" USER UNITS renders at ~22.5 REAL px  (PASSES)
     Home thumbnail viewBox 600x360 rendered at  248px -> scale 0.413
                    the same attribute renders at ~4.55 REAL px         (FAILS hard)

   `font-size="11"` is a user-unit value inside a scaled viewBox, not pixels. So
   editing 11 -> 12 at the source would have (a) left the real violation at
   ~4.96px, still illegible, and (b) inflated the interior to ~24.5px, breaking
   the one place that was already correct. The floor is about RENDERED pixels.

   The honest fix is contextual, and needs NO renderer edit — which also keeps
   the "styled, never edited" lock intact and the byte-lock untouched: a
   miniature shows the ARRANGEMENT (GR-1's living miniature), and a 4.5px word is
   noise, not information. Labels belong to the interior, where they render at
   22.5px and are read. Presentation attributes lose to any CSS rule, so this
   would have won even if a size override had been the right answer. */
.home-arc-ff [data-st-yumi] text,
.home-wf [data-st-yumi] text,
.home-arc-ff [data-st-legend],
.home-wf [data-st-legend]{ display:none; }

/* ============================================================================
   B2 BUG RIDER · THE ARC-VOICE AFFORDANCE ("Ask Yumi what she sees here").
   Was inline-styled with zero container rule, so it read as an orphaned pill at
   the far left of the page. It now gets a real container: a quiet carved row
   that spans the content column and seats the chip inside it, so the affordance
   belongs to the page instead of floating above it. Renders on all three faces.
   NOTE: the chip's uppercase-on-a-sentence treatment is deliberately UNCHANGED
   here -- that is residual R6 (TY-1's mono-caps sentence sweep), and fixing it
   in a bug-rider would be scope creep into a different law's batch. */
.arcfield .arc-voice-box{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  /* `auto` on the inline axis is LOAD-BEARING: .arcfield.lum-amber > * centres
     every shell child with margin-left/right:auto, and a `margin:10px 0 4px`
     shorthand here silently zeroed that -- measured x=0 against a shell starting
     at 172, i.e. the exact "floating far-left" symptom this rider exists to fix,
     re-created one layer up. Caught by measuring the box, not by reading it. */
  margin:10px auto 4px; padding:10px 14px;
  border:1px solid var(--lum-glass-bd, var(--line-2));
  border-radius:var(--radius-md);
  background:var(--lum-glass, transparent);
}
.arcfield .arc-voice-ask{
  cursor:pointer; flex:none;
  padding:6px 14px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--lum-gold-d, var(--gold-text));
  background:transparent;
  border:1px solid var(--lum-glass-bd, var(--line-2));
  border-radius:var(--radius-pill);
  transition:border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.arcfield .arc-voice-ask:hover{ border-color:var(--lum-gold-d, var(--gold)); }
.arcfield .arc-voice-host{ flex:1 1 100%; margin-top:0; }
.arcfield .arc-voice-host:empty{ display:none; }
@media (prefers-reduced-motion:reduce){
  .arcfield .arc-voice-ask{ transition:none; }
}
/* W8 Lane A-VISUAL: dark luminous stage (mockup praxis-field-amber.html .stage).
   Warm-center glow = --lum-gold at low alpha (rgba matches the token's RGB) over
   the --lum-base dark; a subtle warm inset glow gives the panel depth. The SVG
   stage rect is now transparent (arc-constellation.js), so THIS is the ground. */
.arcfield.lum-amber .arc-detail-web-view{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--lum-glass-bd-2); background-color:var(--lum-base); background-image:radial-gradient(72% 60% at 44% 38%, rgba(255,206,74,.10) 0%, rgba(255,206,74,.03) 45%, rgba(255,206,74,0) 70%); box-shadow:inset 0 0 100px rgba(255,206,74,.05); }
.arcfield.lum-amber .arc-detail-web-view svg{ display:block; width:100%; height:auto; }

/* constellation chrome (reskin only; renderer untouched, F-D4) */
.arcfield.lum-amber .st-control-bar{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 12px; }
.arcfield.lum-amber .st-control-bar-bottom{ border-top:1px solid var(--lum-glass-bd-2); }
.arcfield.lum-amber .arc-detail-toggle-btn{ font-family:var(--lum-sans); font-size:12px; color:var(--lum-ink-2); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:6px 14px; cursor:pointer; background:rgba(255,236,200,.06); }
.arcfield.lum-amber .arc-detail-toggle-btn:hover{ color:var(--lum-ink); border-color:var(--lum-glass-bd); }
.arcfield.lum-amber .arc-detail-toggle-btn.is-active,
.arcfield.lum-amber .st-layers-switch.is-active{ color:var(--lum-gold-ink); background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); border-color:transparent; font-weight:600; }
.arcfield.lum-amber .st-layers{ position:relative; }
.arcfield.lum-amber .st-layers-popover{ background:var(--lum-base); border:1px solid var(--lum-glass-bd-2); border-radius:12px; padding:8px; }
.arcfield.lum-amber .arc-tooltip{ background:var(--lum-base); border:1px solid var(--lum-glass-bd); border-radius:10px; color:var(--lum-ink); font-family:var(--lum-sans); }
.arcfield.lum-amber .arc-tooltip-title{ font-family:var(--lum-serif); color:var(--lum-ink); }
.arcfield.lum-amber .arc-tooltip-meta,
.arcfield.lum-amber .arc-tooltip-affordance{ font-family:var(--lum-mono); color:var(--lum-ink-3); }

/* CONCENTRATE (F-D3): additive classes on the LIVE svg groups (no renderer edit).
   Emphasis by opacity, not transform (the <g> already carries a translate). */
.arcfield.lum-amber .arc-detail-web-view svg [data-st-sub-id]{ transition:opacity .28s; }
.arcfield.lum-amber svg.is-concentrated .st-dim{ opacity:.26; }
.arcfield.lum-amber svg.is-concentrated .st-linked{ opacity:1; }
.arcfield.lum-amber svg.is-concentrated .st-focal{ opacity:1; }
/* Wave 8 (Lane A, item 2): under concentrate, the focal mark's own threads
   light GOLD (solid --lum-gold overrides their resting amber gradient stroke)
   and every other thread dims. Threads carry data-st-edge-a/-b from the
   renderer, so this needs no renderer edit. */
.arcfield.lum-amber .arc-detail-web-view svg line[data-st-edge-a]{ transition:opacity .28s, stroke .28s; }
.arcfield.lum-amber svg.is-concentrated line.st-edge-lit{ stroke:var(--lum-gold); opacity:1; }
.arcfield.lum-amber svg.is-concentrated line.st-edge-dim{ opacity:.14; }

/* whisper card (reuses .lum-yumi) */
.arcfield.lum-amber .arcfield-whisper{ margin:16px auto 0; padding:14px 17px; border-radius:14px; background:rgba(127,208,240,.08); border:1px solid rgba(127,208,240,.24); opacity:0; max-height:0; overflow:hidden; transition:opacity .25s; }
.arcfield.lum-amber .arcfield-whisper.is-on{ opacity:1; max-height:none; }
.arcfield.lum-amber .arcfield-whisper-text{ font-family:var(--lum-serif); font-style:italic; font-size:16px; line-height:1.4; color:var(--lum-cyan); }
.arcfield.lum-amber .arcfield-whisper-text b{ color:var(--lum-ink); font-weight:600; font-style:italic; }
.arcfield.lum-amber .arcfield-whisper-open{ display:inline-block; margin-top:8px; font-family:var(--lum-mono); font-size:11px; letter-spacing:.04em; color:var(--lum-cyan); text-decoration:none; }
.arcfield.lum-amber .arcfield-whisper-open:hover{ color:var(--lum-ink); }

/* rail */
.arcfield.lum-amber .arcfield-rail h3,
.arcfield.lum-amber .arcfield-rail-notes-head{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-gold); margin:0 0 10px; }
.arcfield.lum-amber .arcfield-rail-notes-head{ margin-top:18px; }
.arcfield.lum-amber .arcfield-member{ display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--lum-glass-bd-2); }
.arcfield.lum-amber .arcfield-member .mt{ font-family:var(--lum-serif); font-size:14px; color:var(--lum-ink); }
.arcfield.lum-amber .arcfield-member .ma{ font-family:var(--lum-sans); font-size:11px; color:var(--lum-ink-3); }
.arcfield.lum-amber .arcfield-member .mc{ display:none; }
.arcfield.lum-amber .arcfield-note{ display:flex; gap:8px; align-items:baseline; padding:7px 0; text-decoration:none; border-bottom:1px solid var(--lum-glass-bd-2); }
.arcfield.lum-amber .arcfield-note-tag{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--lum-gold-d); flex:none; }
.arcfield.lum-amber .arcfield-note-text{ font-family:var(--lum-serif); font-size:13px; color:var(--lum-ink-2); line-height:1.35; }
.arcfield.lum-amber .arcfield-note:hover .arcfield-note-text{ color:var(--lum-ink); }
.arcfield.lum-amber .arcfield-add-sub{ margin-top:14px; }
.arcfield.lum-amber .arcfield-rail-hint{ font-family:var(--lum-mono); font-size:9.5px; color:var(--lum-ink-4); margin-top:12px; line-height:1.5; }

/* READ face (F-D2, deterministic) */
.arcfield.lum-amber .arcfield-read{ margin-top:18px; padding:26px 28px; border-radius:18px; background:var(--lum-glass); border:1px solid var(--lum-glass-bd-2); }
.arcfield.lum-amber .arcfield-read-head{ display:flex; align-items:center; gap:9px; font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(127,208,240,.85); margin:0 0 18px; }
.arcfield.lum-amber .arcfield-read-head .dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--lum-cyan); box-shadow:0 0 8px rgba(127,208,240,.7); }
.arcfield.lum-amber .arcfield-read-threads{ margin:0 0 20px; display:flex; flex-direction:column; gap:8px; }
.arcfield.lum-amber .arcfield-thread-row{ font-family:var(--lum-serif); font-size:17px; color:var(--lum-ink-2); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.arcfield.lum-amber .arcfield-thread-row .nm{ color:var(--lum-ink); font-style:italic; }
.arcfield.lum-amber .arcfield-thread-link{ color:var(--lum-gold); }
.arcfield.lum-amber .arcfield-read-empty{ font-family:var(--lum-serif); font-style:italic; font-size:15px; color:var(--lum-ink-3); }
.arcfield.lum-amber .arcfield-read-subs{ display:flex; flex-direction:column; }
.arcfield.lum-amber .arcfield-read-sub{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:10px 0; border-top:1px solid var(--lum-glass-bd-2); text-decoration:none; }
.arcfield.lum-amber .arcfield-read-sub-name{ font-family:var(--lum-serif); font-size:16px; color:var(--lum-ink); }
.arcfield.lum-amber .arcfield-read-sub:hover .arcfield-read-sub-name{ color:var(--lum-gold-l); }
.arcfield.lum-amber .arcfield-read-sub-meta{ font-family:var(--lum-mono); font-size:10.5px; color:var(--lum-ink-3); flex:none; }

/* PAGE face (stub) */
.arcfield.lum-amber .arcfield-page{ margin-top:18px; padding:40px 34px; border-radius:18px; text-align:center; background:var(--lum-glass); border:1px solid var(--lum-glass-bd-2); }
.arcfield.lum-amber .arcfield-page-mark{ width:60px; height:60px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; }
.arcfield.lum-amber .arcfield-page-title{ font-family:var(--lum-serif); font-weight:500; font-size:26px; color:var(--lum-ink); margin:0 0 6px; }
.arcfield.lum-amber .arcfield-page-body{ font-family:var(--lum-sans); font-size:13.5px; color:var(--lum-ink-3); max-width:380px; margin:0 auto 18px; line-height:1.55; }
.arcfield.lum-amber .arcfield-page-open{ display:inline-block; text-decoration:none; }

/* mobile 759 reflow */
@media (max-width:759px){
  .arcfield.lum-amber > *{ padding-left:16px; padding-right:16px; }
  .arcfield.lum-amber .arcfield-stage{ grid-template-columns:1fr; }
  .arcfield.lum-amber .arcfield-head{ flex-direction:column; }
  .arcfield.lum-amber .seg-opt,
  .arcfield.lum-amber .arc-detail-toggle-btn,
  .arcfield.lum-amber .arc-detail-addsub,
  .arcfield.lum-amber .arc-detail-delete,
  .arcfield.lum-amber .arcfield-life-btn{ min-height:44px; display:inline-flex; align-items:center; }
}
/* ===== end WAVE 1 · THE LIVING FIELD ===== */

/* ============================================================================
   R5 S2 · Arc INTERIOR — WARM-DIM room (Option-B; source-order beats .arcfield.lum-amber
   at equal specificity). The interior (scenes a/b/c) is a toasted-parchment room you
   enter from the light app: the chrome (head, faces seg, rail, Read/Page frames)
   re-points --lum-* to warm-parchment surfaces with the ink KEPT DARK — no polarity
   inversion. The FIELD STAGE (.arc-detail-web-view) is the sanctioned DARK exception —
   deep cognac with a SOFTENED feathered vignette (cognac -> warm-brown -> parchment at the
   rim) so the interior deepens toward the stage rather than a dark block cut into a light
   page. The stage, its control bar, and the locked renderer keep the INHERITED dark
   --lum-* (the re-point is scoped to the chrome containers, which the stage is NOT a
   descendant of), so they stay light-on-dark and readable. Umber literals live ONLY in the
   field-stage override (the one sanctioned block). Values mirror the R3 home light set with
   the surface tier shifted to warm parchment.
   ============================================================================ */
/* the room: warm-dim full-bleed ground (paints over the dark body::before) */
.arcfield.arcfield-warm{
  background-color:#e9dcbc;
  background-image:
    radial-gradient(68% 54% at 16% 3%,  rgba(240,214,158,.55) 0%, rgba(240,214,158,0) 60%),
    radial-gradient(60% 50% at 88% 12%, rgba(224,190,128,.42) 0%, rgba(224,190,128,0) 62%),
    radial-gradient(80% 60% at 74% 104%,rgba(214,168,102,.30) 0%, rgba(214,168,102,0) 60%),
    linear-gradient(160deg,#efe1c1,#e7d2a8);
  background-attachment:fixed;
}
/* chrome re-point — warm-parchment surfaces, DARK ink kept. Scoped to the chrome
   containers ONLY; the field stage is a sibling and never inherits these. */
.arcfield.arcfield-warm .arcfield-head,
.arcfield.arcfield-warm .arcfield-rail,
.arcfield.arcfield-warm .arcfield-read,
.arcfield.arcfield-warm .arcfield-page{
  --lum-base:#f6ecd4; --lum-glass:#f6ecd4; --lum-cloth:#e3d8c1;
  --lum-glass-bd:#d9c391; --lum-glass-bd-2:#d9c391;
  --lum-ink:#241710; --lum-ink-2:#645940; --lum-ink-3:#645940; --lum-ink-4:#978b6d;
  --lum-gold:#a8761a; --lum-gold-l:#c79433; --lum-gold-d:#855410; --lum-gold-ink:#3d2807;
}
/* literal rescues — head/faces rules hardcode light-alpha the re-point can't reach */
.arcfield.arcfield-warm .seg{ background:#e9d9b4; border-color:#d9c391; }
.arcfield.arcfield-warm .seg-opt{ color:var(--lum-ink-2); }
.arcfield.arcfield-warm .seg-opt:hover{ color:var(--lum-ink); }
/* FIELD STAGE — deep cognac + softened feathered vignette (verbatim from the felt-passed
   mockup .field-room). The ONLY umber-literal block. NOT re-pointed (dark renderer kept). */
/* RD-1 · THE PARCHMENT FIELD (R-POLISH B2). The field stage was the sanctioned
   DARK exception -- deep cognac (#2f1c0e) with a feathered vignette to parchment
   at the rim. RD-1 retires that exception: the field is ground you OWN, and you
   work on paper. The L3 legibility proof passed in Slice 0 (gold-channel marks at
   4.72:1, 36-mark density), so DUSK CARVE is not needed as a revert.

   CARVED, not raised: the field is recessed INTO the page -- one inset shadow
   plus a hairline -- which is CC-2's carved grammar applied to a surface rather
   than a control. The old outward feather is gone with the dark it existed to
   soften; there is no longer a polarity change at the rim to hide. */
.arcfield.arcfield-warm .arc-detail-web-view{
  background-color:var(--card-1);
  background-image:
    radial-gradient(72% 60% at 44% 38%, rgba(199,154,58,.10) 0%, rgba(199,154,58,.03) 45%, rgba(199,154,58,0) 70%),
    linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
  box-shadow:inset 0 2px 10px rgba(38,32,25,.16), inset 0 0 0 1px rgba(38,32,25,.10);
  border:none;
}
/* D5 field-control legibility (S1 built the DOM; styling lands here). Both sit INSIDE the
   dark stage -> keep the inherited dark --lum-* -> dim-light caption + danger-red Reset. */
.arcfield.arcfield-warm .arcfield-tidy-help{ flex-basis:100%; font-family:var(--lum-mono); font-size:9.5px; color:var(--lum-ink-3); line-height:1.5; margin:2px 0 0; }
.arcfield.arcfield-warm .arc-reset-btn{ color:#ffb08a; border-color:rgba(255,142,142,.4); }
.arcfield.arcfield-warm .arc-reset-btn:hover{ color:#ff8e8e; border-color:#ff8e8e; }
.arcfield.arcfield-warm .arc-reset-btn::before{ content:'⚠ '; }
/* D4 · AF6 — ONE canonical +Sub-theory control living in the head, visible across all
   faces (rides the head warm re-point: gold-deep on parchment, gild on hover). */
.arcfield.arcfield-warm .arcfield-headctl{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.arcfield.arcfield-warm .arcfield-addsub-canon{ background:var(--lum-base); border:1px solid var(--lum-gold-l); color:var(--lum-gold-d); border-radius:var(--lum-r-pill,999px); padding:7px 15px; font-family:var(--lum-mono); font-size:11px; letter-spacing:.03em; cursor:pointer; white-space:nowrap; }
.arcfield.arcfield-warm .arcfield-addsub-canon:hover{ background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); color:#3d2807; border-color:transparent; }
@media (max-width:759px){ .arcfield.arcfield-warm .arcfield-headctl{ align-items:flex-start; } }

/* ============================================================================
   R5 S3 · the shared Read SPINE (author _arcFieldReadFace + visitor renderInteract
   #walk). Scoped under .read-list so it cannot bleed; consumes --lum-* so it adapts
   to whichever ground it sits in — author warm-dim (.arcfield.arcfield-warm
   .arcfield-read) OR visitor amber (.itx-root lum-amber-ember). Glow-dot highlight +
   glow shadows are the mockup's mark-glow literals (like the gilding literals). The
   threshold cue uses --subtheory-1 (a mark hue), NOT Yumi cyan (covenant).
   ============================================================================ */
.read-list{ position:relative; }
.read-list .read-gutter-svg{ position:absolute; left:0; top:0; width:56px; height:100%; overflow:visible; }
.read-list .read-row{ position:relative; display:flex; gap:16px; align-items:flex-start; min-height:120px; padding:18px 0 18px 56px; border-bottom:1px solid var(--lum-glass-bd-2); }
.read-list .read-row:last-child{ border-bottom:none; }
.read-list .read-mark{ position:absolute; left:0; top:18px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; }
.read-list .read-mark svg{ width:100%; height:100%; }
.read-list .read-body{ flex:1; min-width:0; }
.read-list .read-row-top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
.read-list .read-title{ font-family:var(--lum-serif); font-size:19px; color:var(--lum-ink); margin:0; }
.read-list .read-title a{ text-decoration:none; color:inherit; }
.read-list .read-title a:hover{ color:var(--lum-gold-d); }
.read-list .read-glow{ display:inline-flex; align-items:center; gap:5px; font-family:var(--lum-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--lum-ink-3); }
.read-list .read-glow-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.read-list .read-glow-dot.is-bright{ background:radial-gradient(circle at 35% 30%, #fff4d6 0%, var(--lum-gold) 55%, var(--lum-gold-d) 100%); box-shadow:0 0 9px 2px rgba(255,206,74,.55); }
.read-list .read-glow-dot.is-mature{ background:radial-gradient(circle at 35% 30%, #fff4d6 0%, var(--lum-gold-l) 55%, var(--lum-gold-d) 100%); box-shadow:0 0 6px 1px rgba(242,194,90,.45); }
.read-list .read-glow-dot.is-forming{ background:var(--lum-glass-bd); box-shadow:none; opacity:.85; }
.read-list .read-first-line{ font-family:var(--lum-serif); font-size:15px; line-height:1.5; color:var(--lum-ink-2); margin:0 0 4px; max-width:62ch; }
.read-list .read-meta{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.04em; color:var(--lum-ink-3); }
.read-list .read-private{ display:inline-flex; align-items:center; gap:5px; font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--lum-ink-3); border:1px solid var(--lum-glass-bd-2); border-radius:999px; padding:2px 8px; }
.read-list .read-private::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--lum-ink-3); }
/* arc-level closing (author lens) */
.arcfield-read .read-closing{ margin-top:26px; padding-top:16px; position:relative; }
.arcfield-read .read-closing::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent 0%, var(--lum-gold-l) 15%, var(--lum-gold) 50%, var(--lum-gold-l) 85%, transparent 100%); }
.arcfield-read .read-closing p{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.05em; color:var(--lum-ink-3); margin:0; }
/* visitor threshold cue (amber room) */
.itx-root .room-threshold{ display:flex; align-items:center; gap:12px; font-family:var(--lum-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-ink-3); margin:6px 0 18px; }
.itx-root .room-threshold::before{ content:''; width:28px; height:1px; background:linear-gradient(90deg, transparent, var(--subtheory-1)); flex:none; }
.itx-root .room-threshold::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--subtheory-1), var(--lum-glass-bd-2) 45%, transparent); }

/* ============================================================================
   R5 S5 · publication legibility. D2: a quiet "in the commons" chip on published
   arc-list cards (light). D3: the quiet publish/unpublish control + state line in
   the (warm) arc head. Covenant: quiet recessed meta, never a walk-count badge.
   ============================================================================ */
.arcs.lum-amber-deep .arc-card-meta{ display:flex; flex-direction:column; gap:4px; }
.arcs.lum-amber-deep .arc-chip-commons{ display:inline-flex; align-items:center; gap:5px; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.arcs.lum-amber-deep .arc-chip-commons::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold-hi); flex:none; }
.arcfield.arcfield-warm .arcfield-pub{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--lum-mono); font-size:11px; margin:10px 0 0; }
.arcfield.arcfield-warm .arcfield-pub-btn{ background:transparent; border:1px solid var(--lum-gold-l); color:var(--lum-gold-d); border-radius:var(--lum-r-pill,999px); padding:6px 13px; cursor:pointer; font-family:var(--lum-mono); font-size:11px; letter-spacing:.03em; }
.arcfield.arcfield-warm .arcfield-pub-btn:hover{ background:#f6ecd4; }
.arcfield.arcfield-warm .arcfield-pub-btn-quiet{ border-color:var(--lum-glass-bd-2); color:var(--lum-ink-3); }
.arcfield.arcfield-warm .arcfield-pub-btn[disabled]{ cursor:default; opacity:.6; }
.arcfield.arcfield-warm .arcfield-pub-status{ color:var(--lum-ink-2); }
.arcfield.arcfield-warm .arcfield-pub-status b{ color:var(--lum-gold-d); font-weight:600; }
/* R-ARC S3 -- the ember lifecycle strip (owner-only, warm-dim interior only, so no
   base/light variant needed: the arc detail root is always .arcfield-warm). The
   status chip is the quiet ember/graduated marker (Preston's ruling); the buttons
   mirror .arcfield-pub-btn's warm chrome. Tokens by name only -- --lum-* + the
   sheet's established warm literal for hover (matches .arcfield-pub-btn:hover). */
.arcfield.arcfield-warm .arcfield-lifecycle{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.arcfield.arcfield-warm .arcfield-status-chip{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:var(--lum-r-pill,999px); border:1px solid var(--lum-glass-bd-2); }
.arcfield.arcfield-warm .arcfield-status-ember{ color:var(--lum-gold-d); border-color:var(--lum-gold-l); }
.arcfield.arcfield-warm .arcfield-status-graduated{ color:var(--lum-ink-2); }
.arcfield.arcfield-warm .arcfield-life-btn{ background:transparent; border:1px solid var(--lum-gold-l); color:var(--lum-gold-d); border-radius:var(--lum-r-pill,999px); padding:6px 13px; cursor:pointer; font-family:var(--lum-mono); font-size:11px; letter-spacing:.03em; }
.arcfield.arcfield-warm .arcfield-life-btn:hover{ background:#f6ecd4; }
.arcfield.arcfield-warm .arcfield-rename-btn,
.arcfield.arcfield-warm .arcfield-ungraduate-btn{ border-color:var(--lum-glass-bd-2); color:var(--lum-ink-3); }
.arcfield.arcfield-warm .arcfield-q-rename{ width:100%; box-sizing:border-box; background:transparent; border:none; border-bottom:1px solid var(--lum-gold-l); color:var(--lum-ink); font-family:var(--font-serif); font-size:inherit; font-weight:inherit; padding:2px 0; outline:none; }
.arcfield.arcfield-warm .arcfield-q-unnamed{ color:var(--lum-ink-3); font-style:italic; }
.arcfield.arcfield-warm .arcfield-pub-hint{ color:var(--lum-ink-3); font-family:var(--lum-serif); font-style:italic; font-size:11px; }

/* ============================================================================
   R5 S6 · D11 mark-picker trigger in the author Read row + D6 keyboard focus rings
   (chrome only — the frozen renderer's SVG output is styled, never edited).
   ============================================================================ */
.read-list .read-change-mark{ font-family:var(--lum-mono); font-size:10px; color:var(--lum-ink-3); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:0; }
.read-list .read-change-mark:hover{ color:var(--lum-gold-d); }
.read-list .read-change-mark:focus-visible,
.read-list .read-title a:focus-visible{ outline:2px solid var(--lum-gold); outline-offset:2px; border-radius:3px; }
/* keyboard focus ring on constellation marks: the frozen renderer emits data-st-sub-id;
   latent until those nodes carry tabindex (renderer-owned) — CSS only, no renderer edit. */
.arcfield.lum-amber .arc-detail-web-view [data-st-sub-id]:focus-visible{ outline:2px solid var(--lum-gold); outline-offset:2px; }

/* MW-2 P3 (Arcs / arc-detail): several arc-interior controls were sub-44px at
   mobile (pub-btn 27, addsub-canon 29, arc-voice-ask 29, add-sub/page .btn primaries
   39/40, read-sub rows 23, change-mark 13). Give each a 44px effective hit area at
   <=759. Sizing only -- no tokens/hex; min-height is a fresh property here (no base
   rule sets it), so no cascade battle. Desktop untouched. */
@media (max-width:759px){
  .arcfield.arcfield-warm .arcfield-pub-btn,
  .arcfield.arcfield-warm .arcfield-addsub-canon,
  .arcfield .arc-voice-ask,
  .arcfield .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .read-list .read-title a{ min-height:44px; display:inline-flex; align-items:center; }
  .read-list .read-change-mark{ min-height:44px; display:inline-flex; align-items:center; }
  /* the Page-face CTA carries a pre-existing .arcfield-page-open{display:inline-block}
     at 0,3,0 that wins `display` over the 0,2,0 .arcfield .btn rule above; match its
     specificity (later source) so it flex-recenters in the 44px box too. */
  .arcfield.arcfield-warm .arcfield-page-open{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ---------------------------------------------------------------------
   AES-3 · THE ARC HEAD LEARNS THE KIT (R-POLISH B3)

   THE DIAGNOSIS, by inventory rather than by feel. Four control families in one
   header, and THREE of them were wearing the same gold-outlined pill:
     .arcfield-addsub-canon (:13045)  gold border, gold text  — the real primary
     .arcfield-life-btn     (:13110)  gold border, gold text  — IDENTICAL to it
     .arc-detail-delete     (:12752)  outlined pill           — a peer of both
     .seg-opt.is-on         (:12750)  FILLED GOLD GRADIENT    — outranked them all
   So the loudest thing in the head was a view toggle, "+ Sub-theory" and
   "Rename" were indistinguishable, and the destructive act was a peer pill.
   CC-3's role law says gold is the ONE primary and chips carry state; this head
   had gold on four things and a hierarchy on none.

   THE CONVERSION (kit grammar, adopted at the per-surface selectors because the
   0,3,0 rules above outrank any 0,1,0 .k-* class — the kit is the SOURCE of the
   grammar here, not the cascade winner):
     1 the faces seg goes CARVED and gives gold up; selected = lifted paper
     2 "+ Sub-theory" becomes the ONE filled-gold primary in the view
     3 the lifecycle verbs go quiet — they are corrections, not the forward act
     4 the status chip becomes state: a quiet neutral pill, no border competing
     5 DELETE goes quiet AND cornered (order:99) — it keeps its confirm panel

   PRESERVED, deliberately: `openArcDeleteConfirm` and its panel are UNTOUCHED —
   this re-skins the trigger only, per the ruling. And NO rule here declares
   `display` or `min-height` on these classes, because the <=759 blocks at
   :12969-12973 and :13136-13139 set the 44px touch targets and this block is
   LATER in source — declaring either would silently revert MW-2 P3's mobile hit
   areas at equal specificity. Colour, fill, edge and order only. */
/* 1 · the faces seg — carved, and gold retired from it */
.arcfield.arcfield-warm .seg{
  box-shadow:inset 0 1px 2px rgba(80,50,15,.12);
}
.arcfield.arcfield-warm .seg-opt.is-on{
  color:var(--lum-ink); background:var(--lum-base); font-weight:600;
  box-shadow:0 1px 3px rgba(80,50,15,.18);
}
/* 2 · THE ONE PRIMARY — the only filled gold in the view */
.arcfield.arcfield-warm .arcfield-addsub-canon{
  background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold));
  border-color:transparent; color:var(--lum-gold-ink); font-weight:600;
}
.arcfield.arcfield-warm .arcfield-addsub-canon:hover{
  background:linear-gradient(180deg,var(--lum-gold),var(--lum-gold-d));
  color:var(--lum-base); border-color:transparent;
}
/* 3 · the lifecycle verbs go quiet (Graduate / Return to ember / Rename) */
.arcfield.arcfield-warm .arcfield-life-btn{
  background:transparent; border-color:rgba(38,32,25,.18); color:var(--lum-ink-2);
}
.arcfield.arcfield-warm .arcfield-life-btn:hover{
  background:rgba(38,32,25,.05); border-color:rgba(38,32,25,.34); color:var(--lum-ink);
}
/* 4 · the status chip is STATE, not a control */
.arcfield.arcfield-warm .arcfield-status-chip{
  background:rgba(38,32,25,.05); border-color:rgba(38,32,25,.16); color:var(--lum-ink-2);
}
/* 5 · DELETE — quiet and cornered; the panel behind it is untouched */
.arcfield.arcfield-warm .arc-detail-delete{
  order:99; align-self:flex-end;
  background:none; border:none; border-radius:0; padding:2px 0;
  font-family:var(--lum-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--lum-ink-3);
}
.arcfield.arcfield-warm .arc-detail-delete:hover{
  background:none; border-color:transparent; color:var(--lum-rose);
}

/* =============================================================================
   W8 LANE B · GLOBAL SEARCH  (renderSearch on .lum-amber)  — dark luminous ground;
   serif-italic search bar w/ amber focus ring, kind chips w/ live counts, results
   grouped Arcs→Sub-theories→Books→Notes with real glyphs + match highlight, honest
   states. Tokens + the block's rgba-wash idiom only (no new hex). Yumi-cyan is
   reserved for the seam-only cross-cut; note glyphs use neutral ink tokens.
   ============================================================================= */
.search.lum-amber{ display:block; box-sizing:border-box; width:100%; max-width:none; min-height:100vh; margin:0; padding:28px 0 80px; color:var(--lum-ink); }
.search.lum-amber .search-page{ box-sizing:border-box; max-width:820px; margin:0 auto; padding:14px 26px 0; }

/* search bar */
.search.lum-amber .search-shell{ position:relative; margin-bottom:8px; }
.search.lum-amber .search-icon{ position:absolute; left:20px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--lum-gold-l); opacity:.75; pointer-events:none; display:block; }
.search.lum-amber .search-icon svg{ width:18px; height:18px; display:block; }
.search.lum-amber .search-input{ width:100%; box-sizing:border-box; background:var(--lum-base); border:1px solid var(--lum-glass-bd-2); border-radius:16px; padding:20px 22px 20px 52px; font-family:var(--lum-serif); font-style:italic; font-size:24px; color:var(--lum-ink); outline:none; transition:border-color .25s, box-shadow .25s; }
.search.lum-amber .search-input::placeholder{ color:var(--lum-ink-4); font-style:italic; }
.search.lum-amber .search-input:focus{ border-color:var(--lum-gold-d); box-shadow:0 0 0 4px rgba(255,206,74,.10); }
.search.lum-amber .search-scope{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-ink-4); padding:0 4px 18px; }

/* kind chips */
.search.lum-amber .search-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.search.lum-amber .search-chip{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--lum-ink-3); background:rgba(255,236,200,.05); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:7px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:color .2s, background .2s, border-color .2s; }
.search.lum-amber .search-chip:hover{ color:var(--lum-ink); }
.search.lum-amber .search-chip.is-on{ color:var(--lum-gold-ink); background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); border-color:transparent; }
.search.lum-amber .search-chip-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.search.lum-amber .search-chip-book .search-chip-dot{ background:var(--lum-ink-3); }
.search.lum-amber .search-chip-arc .search-chip-dot{ background:var(--lum-gold); }
.search.lum-amber .search-chip-sub .search-chip-dot{ background:var(--lum-gold-l); }
.search.lum-amber .search-chip-note .search-chip-dot{ background:var(--lum-ink-4); }
.search.lum-amber .search-chip-n{ opacity:.6; }
.search.lum-amber .search-chip.is-on .search-chip-n{ opacity:.8; }

/* cross-cut seam (empty today -> hidden; future Yumi mounts here) */
.search.lum-amber .search-crosscut{ margin-bottom:26px; }
.search.lum-amber .search-crosscut:empty{ display:none; margin:0; }

/* result groups + rows */
.search.lum-amber .search-group{ margin-bottom:30px; }
.search.lum-amber .search-group-head{ display:flex; align-items:baseline; gap:10px; font-family:var(--lum-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--lum-gold-l); border-bottom:1px solid var(--lum-glass-bd-2); padding-bottom:8px; margin-bottom:12px; }
.search.lum-amber .search-group-count{ color:var(--lum-ink-4); font-size:10px; }
.search.lum-amber .search-res{ display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:12px; cursor:pointer; text-decoration:none; color:inherit; transition:background .18s; }
.search.lum-amber .search-res:hover{ background:rgba(255,206,74,.06); }
.search.lum-amber .search-res-body{ flex:1; min-width:0; }
.search.lum-amber .search-res-title{ font-family:var(--lum-serif); font-style:italic; font-weight:600; font-size:19px; color:var(--lum-ink); line-height:1.25; }
.search.lum-amber .search-res-sub{ font-size:12.5px; color:var(--lum-ink-3); margin-top:2px; }
.search.lum-amber .search-res-snip{ font-size:13px; color:var(--lum-ink-3); margin-top:6px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.search.lum-amber .search-res-crumb{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--lum-ink-4); margin-top:7px; }
.search.lum-amber mark{ background:rgba(255,206,74,.22); color:var(--lum-gold-l); border-radius:2px; padding:0 1px; }

/* row glyphs */
.search.lum-amber .search-row-mark,
.search.lum-amber .search-row-arc,
.search.lum-amber .search-row-note{ flex:0 0 44px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.search.lum-amber .search-row-mark > svg{ width:34px; height:34px; display:block; }
.search.lum-amber .search-row-arc > svg,
.search.lum-amber .search-row-note > svg{ width:30px; height:30px; display:block; }
.search.lum-amber .search-row-arc{ color:var(--lum-gold); }
.search.lum-amber .search-row-note{ color:var(--lum-ink-3); }
.search.lum-amber .search-row-cover{ flex:0 0 42px; width:42px; height:60px; border-radius:4px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.5); }
.search.lum-amber .search-row-cover-img{ width:100%; height:100%; object-fit:cover; display:block; }
.search.lum-amber .search-row-cover-fallback{ display:flex; flex-direction:column; justify-content:center; padding:6px; background:var(--lum-base); border:1px solid var(--lum-glass-bd-2); }
.search.lum-amber .search-row-cover-fallback .src-t{ font-family:var(--lum-serif); font-style:italic; font-size:9px; line-height:1.15; color:var(--lum-ink-2); max-height:33px; overflow:hidden; }
.search.lum-amber .search-row-cover-fallback .src-a{ font-family:var(--lum-mono); font-size:7px; color:var(--lum-ink-4); margin-top:3px; }

/* honest states */
.search.lum-amber .search-empty{ padding:50px 10px; text-align:center; }
.search.lum-amber .search-empty-mark{ width:46px; height:46px; margin:0 auto 16px; border-radius:50%; background:radial-gradient(circle at 40% 34%, rgba(255,206,74,.5), rgba(255,206,74,0) 72%); }
.search.lum-amber .search-empty-text{ font-family:var(--lum-serif); font-style:italic; font-size:19px; color:var(--lum-ink-3); }
.search.lum-amber .search-empty-sub{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.06em; color:var(--lum-ink-4); margin-top:10px; line-height:1.9; }
.search.lum-amber .search-empty .search-signin{ margin-top:18px; }

/* mobile 759 reflow */
@media (max-width:759px){
  .search.lum-amber .search-page{ padding-top:6px; padding-left:16px; padding-right:16px; }
  .search.lum-amber .search-input{ font-size:20px; padding:16px 18px 16px 46px; }
  .search.lum-amber .search-icon{ left:16px; }
  .search.lum-amber .search-res-title{ font-size:17px; }
}
/* ===== end W8 LANE B · GLOBAL SEARCH ===== */

/* =============================================================================
   HOME (renderHome on .lum-amber-deep) — Amber threshold: welcome + alternator,
   whole-field panel, left-off arc cards, still-reading glimpse (rail deferred).
   Tokens --lum-* only; centered-1080 via `> *`; direct-child margins use `X auto Y`.
   ============================================================================= */
.home-page.lum-amber-deep{ display:block; box-sizing:border-box; width:100%; max-width:none; min-height:100vh; margin:0; padding:30px 0 80px; color:var(--lum-ink); font-family:var(--lum-sans); line-height:1.55; text-align:left; }
.home-page.lum-amber-deep > *{ box-sizing:border-box; max-width:1080px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; }
.home-page.lum-amber-deep .home-welcome{ margin:0 auto 22px; }
.home-page.lum-amber-deep .home-welcome-title{ font-family:var(--lum-serif); font-weight:500; font-size:clamp(28px,4vw,34px); line-height:1.06; color:var(--lum-ink); margin:0 0 14px; }
.home-page.lum-amber-deep .home-alt{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* D4c (H5): color lifted --lum-ink-4 -> --lum-ink-3 so the alternator note clears AA (size unchanged per the locked decision). */
.home-page.lum-amber-deep .home-altnote{ font-family:var(--lum-serif); font-style:italic; font-size:13px; color:var(--lum-ink-3); }
.home-page.lum-amber-deep .seg{ display:inline-flex; border:1px solid var(--lum-glass-bd); border-radius:var(--lum-r-pill); padding:3px; background:rgba(255,255,255,.06); }
.home-page.lum-amber-deep .seg-opt{ font-family:var(--lum-sans); font-size:12.5px; font-weight:500; color:rgba(255,244,224,.72); background:none; border:none; border-radius:var(--lum-r-pill); padding:7px 16px; cursor:pointer; transition:color .18s, background .18s; }
.home-page.lum-amber-deep .seg-opt:hover{ color:var(--lum-ink); }
.home-page.lum-amber-deep .seg-opt.is-on{ color:var(--lum-gold-ink); background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); font-weight:600; }
.home-page.lum-amber-deep .home-yumi{ display:flex; align-items:flex-start; gap:10px; margin:18px auto; }
.home-page.lum-amber-deep .home-yumi-dot{ flex:none; width:9px; height:9px; border-radius:50%; margin-top:7px; background:var(--lum-cyan); box-shadow:0 0 9px color-mix(in srgb, var(--lum-cyan) 70%, transparent); }
.home-page.lum-amber-deep .home-yumi-text{ font-family:var(--lum-serif); font-style:italic; font-size:16px; line-height:1.45; color:color-mix(in srgb, var(--lum-cyan) 52%, var(--lum-ink)); margin:0; }
.home-page.lum-amber-deep .home-yumi-text b{ color:var(--lum-ink); font-weight:600; font-style:italic; }
.home-page.lum-amber-deep .home-variant{ margin:0 auto; }
.home-page.lum-amber-deep .home-variant-hidden{ display:none; }
.home-page.lum-amber-deep .home-wholefield{ padding:18px 18px 6px; margin:0 auto; }
.home-page.lum-amber-deep .home-wf{ position:relative; width:100%; aspect-ratio:100 / 42; }
.home-page.lum-amber-deep .home-wf svg, .home-page.lum-amber-deep .home-arc-ff svg{ position:absolute; inset:0; width:100%; height:100%; }
/* D4b (H3): the caption explaining the whole-field interaction was the lowest-contrast copy on the page (9.5px --lum-ink-4). Bumped to 11px (matching sibling .home-fieldstat) + --lum-ink-3. */
.home-page.lum-amber-deep .home-wfcap{ text-align:center; font-family:var(--lum-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--lum-ink-3); margin:12px 0 14px; }
.home-page.lum-amber-deep .home-fieldstat{ font-family:var(--lum-mono); font-size:11px; letter-spacing:.06em; color:var(--lum-ink-3); margin:12px auto 0; }
.home-page.lum-amber-deep .home-sectlabel{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-ink-3); margin:0 auto 12px; }
.home-page.lum-amber-deep .home-arc{ display:flex; gap:20px; align-items:stretch; padding:18px 20px; margin:0 auto 12px; }
.home-page.lum-amber-deep .home-arcfield{ flex:none; width:188px; position:relative; overflow:hidden; border-radius:13px; border:1px solid var(--lum-glass-bd-2); background:radial-gradient(120% 120% at 50% 30%, color-mix(in srgb, var(--lum-base) 55%, transparent), color-mix(in srgb, var(--lum-base) 82%, transparent)); }
.home-page.lum-amber-deep .home-arc-ff{ position:relative; width:100%; aspect-ratio:100 / 60; }
.home-page.lum-amber-deep .home-arc:hover .home-arcfield{ border-color:color-mix(in srgb, var(--lum-gold-l) 40%, transparent); }
.home-page.lum-amber-deep .home-arcbody{ flex:1; min-width:0; display:flex; flex-direction:column; }
.home-page.lum-amber-deep .home-arctop{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.home-page.lum-amber-deep .home-arctitle{ font-family:var(--lum-serif); font-weight:600; font-size:21px; line-height:1.1; color:var(--lum-ink); }
.home-page.lum-amber-deep .home-arcmeta{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.05em; color:var(--lum-ink-3); }
.home-page.lum-amber-deep .home-arcact{ display:flex; gap:9px; flex-wrap:wrap; margin-top:auto; padding-top:14px; }
.home-page.lum-amber-deep .home-arcbtn{ font-family:var(--lum-sans); font-size:12.5px; text-decoration:none; display:inline-flex; align-items:center; border-radius:var(--lum-r-pill); padding:8px 16px; cursor:pointer; color:var(--lum-ink-2); background:color-mix(in srgb, var(--lum-base) 46%, transparent); border:1px solid var(--lum-glass-bd-2); transition:color .18s, border-color .18s; }
.home-page.lum-amber-deep .home-arcbtn:hover{ color:var(--lum-ink); border-color:color-mix(in srgb, var(--lum-gold-l) 50%, transparent); }
.home-page.lum-amber-deep .home-arcbtn-primary{ color:var(--lum-gold-ink); border:none; background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); font-weight:600; }
.home-page.lum-amber-deep .home-arcbtn-primary:hover{ color:var(--lum-gold-ink); box-shadow:0 0 18px -5px color-mix(in srgb, var(--lum-gold) 60%, transparent); }
/* still-reading glimpse (the "people you walk with" glimpse is omitted: no honest local source) */
.home-page.lum-amber-deep .home-glimpses{ display:flex; gap:16px; flex-wrap:wrap; margin:0 auto; }
.home-page.lum-amber-deep .home-glimpse{ flex:0 1 440px; min-width:0; padding:16px 18px; }
.home-page.lum-amber-deep .home-gl{ display:flex; align-items:center; justify-content:space-between; font-family:var(--lum-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-ink-3); margin:0 0 12px; }
.home-page.lum-amber-deep .home-gl-link{ font-family:var(--lum-sans); font-size:11px; letter-spacing:0; text-transform:none; color:var(--lum-ink-3); text-decoration:none; border-bottom:1px dotted var(--lum-ink-4); transition:color .18s; }
.home-page.lum-amber-deep .home-gl-link:hover{ color:var(--lum-ink-2); }
.home-page.lum-amber-deep .home-spines{ display:flex; gap:10px; flex-wrap:wrap; }
/* D2 (closes H1): the still-reading spine adopts the SAME cover treatment as the
   Shelf (.shelf-book-cover-area / -placeholder) at the existing 52x78 (2:3) frame
   — a real self-healing <img> via buildSelfHealingCover, else a cloth placeholder
   face (title + "cover pending"). The old text-only bar + left edge-highlight
   (.home-mspine-edge) is RETIRED — a face-on cover has no spine edge. */
.home-page.lum-amber-deep .home-mspine{ position:relative; display:block; width:52px; height:78px; border-radius:3px 6px 6px 3px; overflow:hidden; cursor:pointer; text-decoration:none; background:rgba(24,16,6,.5); border:1px solid var(--lum-glass-bd-2); box-shadow:0 8px 16px -8px rgba(0,0,0,.7), inset 1px 0 0 rgba(255,255,255,.06); transition:transform .18s; }
.home-page.lum-amber-deep .home-mspine:hover{ transform:translateY(-3px); }
.home-page.lum-amber-deep .home-mspine-cover-img{ display:block; width:100%; height:100%; object-fit:cover; }
.home-page.lum-amber-deep .home-mspine-cover{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; height:100%; padding:7px 5px; text-align:center; background:linear-gradient(155deg, var(--lum-cloth), rgba(24,16,6,.94)); }
/* D4a (closes H2): line-clamp so a long title truncates with an ellipsis instead
   of overflowing the box. Font family/weight/size/color UNCHANGED — only the clamp. */
.home-page.lum-amber-deep .home-mspine-title{ font-family:var(--lum-serif); font-weight:600; font-size:10px; line-height:1.08; color:var(--lum-ink); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.home-page.lum-amber-deep .home-mspine-pending{ font-family:var(--lum-mono); font-size:6.5px; letter-spacing:.06em; text-transform:lowercase; color:var(--lum-ink-3); }
.home-page.lum-amber-deep .home-reading-status{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.06em; color:var(--lum-ink-3); margin:10px 0 0; }
@media (max-width:759px){
  .home-page.lum-amber-deep .home-arc{ flex-direction:column; gap:14px; }
  .home-page.lum-amber-deep .home-arcfield{ width:100%; }
  .home-page.lum-amber-deep .home-glimpse{ flex-basis:100%; }

  /* MW-1 P3: 44px effective tap targets on Home's interactive controls at <=759
     (the field/left segmented, the arc-card buttons, the "Your shelf" link were
     ~31-34px). Sizing only -- no tokens, no color, desktop untouched. */
  .home-page.lum-amber-deep .seg-opt{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .home-page.lum-amber-deep .home-arcbtn{ min-height:44px; }
  .home-page.lum-amber-deep .home-gl-link{ min-height:44px; display:inline-flex; align-items:center; }
}
/* ===== end HOME (renderHome on .lum-amber-deep) ===== */

/* ============================================================================
   R3 · HOME — UNIVERSAL v1.2 LIGHT SKIN. Home ships the Universal light-ground
   skin (Preston's felt pass on docs/studio/mockups/home.html — the LIGHT side).
   Ported byte-faithful from that mockup's .skin-universal block, re-scoped from
   the mockup's <body> class to the live page-context class .home-page.lum-amber-
   deep — EXACTLY the R2 Shelf mechanism (.shelf.lum-amber-deep, in the "R2 ·
   UNIVERSAL v1.2 SKIN" block below): a scoped
   token re-point + a restrained set of §8 depth recipes that paint a LIGHT surface
   over the dark body ground, WITHOUT flipping the route out of umberGroundDark (so
   nav chrome + every other dark route stay byte-identical). PURELY ADDITIVE over
   the base .home-page.lum-amber-deep block above — every property is color /
   background / gradient / box-shadow / border-color ONLY. Every hex traces to the
   established Universal v1.2 light set -- the Shelf R2 .shelf.lum-amber-deep token
   values plus the mockup's felt-passed sub-panel + rescue literals -- no
   new color is invented. Recipes: 6 atmospheric ground · 4 one lamplight (welcome) ·
   3 ink-to-gold (welcome title) · 5 gilded button (Continue / signed-out Sign in) ·
   2 luminous field marks (SVG-driven by the locked renderer — no CSS override) +
   literal rescues for base rules that hardcode dark / near-white values.
   ============================================================================ */

/* 1 · token re-points — same --lum-* the base consumes, swapped to Universal
   light values (the Shelf R2 .shelf.lum-amber-deep token set) */
/* R-POLISH B1-FIX · THE HOUR, REFINED -- Home's root is now an ON-GROUND
   context, not a light page.
   Home rejoined data-ground="dark" (views.js umberGroundDark), so everything
   that is NOT inside a card now sits directly on the twilight world and must
   draw from the on-ground cream ramp. B1's light ink ramp here (--ink #241710 /
   --ink-2 #645940 and the --lum-* twins) was correct for a bright page and is
   dark-on-dark on the world -- measured: .home-altnote, .home-sectlabel,
   .home-fieldstat, .home-welcome-title, .home-yumi-text all render dark text on
   a transparent backdrop. That made this conversion a LEGIBILITY BLOCKER
   shipping in the same commit as the ground flip, not a polish pass.
   BOTH families flip, because Home draws from both: the global --ink-* (section
   labels, field stats) and the skin's --lum-ink-* (title, altnote, arc body).
   The CARD interiors are re-pointed BACK to the on-card ramp by .lit-page
   below, so a token that is cream out here is card-ink inside a page.
   The light FILL tokens (--lum-base/--lum-glass/--lum-cloth) are deliberately
   KEPT light: they fill the vellum pages, which are still light. */
.home-page.lum-amber-deep{
  --paper:transparent;
  --ink:var(--on-ground);
  --gold:var(--gold-world);   /* GOLD ROLE 1 · interactive / fill          */
  --gold-deep:var(--gold-ember); /* on the world the DEEP gold would sink; the
                                    ember is the on-dark AA-safe small-text gold */
  --gold-hi:#d9a441;     /* GOLD ROLE 2 · gilding — edge + glow ONLY    */
  --lum-star:#ffce4a;    /* GOLD ROLE 3 · luminous — true glow ONLY     */
  --field-1:#f2c25a; --field-2:#e07a52; --field-3:#d98f8a; --field-4:#f5bace; --field-5:#a9b98c;
  --field-6:#98d4b0; --field-7:#8590d8; --field-8:#f8e078; --field-9:#e8b068; --field-10:#b8896c;
  --lum-base:#fffdf8;       /* raised panel surface */
  --lum-glass:#efe7d6;      /* quiet parchment card/chip fill (was translucent gradient) */
  --lum-glass-bd:#e3d8c1;   /* warm opaque hairline */
  --lum-glass-bd-2:#e3d8c1; /* 2nd hairline tier collapses to the one light line */
  --lum-cloth:#e3d8c1;      /* cover-placeholder base (bg also rescued below) */
  /* THE HOUR: the --lum-* ink twins follow the global ramp onto the world.
     .lit-page re-points them back to the on-card ramp inside every vellum page. */
  --lum-ink:var(--on-ground);
  --lum-ink-2:var(--on-ground-2);
  --lum-ink-3:var(--on-ground-2);
  --lum-ink-4:var(--on-ground-3);
  --lum-gold:var(--gold-world); /* every FILL site -> interactive gold; text+glow peeled below */
  --lum-gold-ink:#3d2807;   /* dark ink on gold fills */
  /* The locked sub-theory constellation renderer (arc-constellation.js, out of
     scope) draws its TEXT + inert chrome from the GLOBAL --ink-family and --sunk
     tokens, NOT --lum-*.
     R-POLISH B1 · PG-1: Home is NO LONGER data-ground="dark" (views.js dropped
     'home' from umberGroundDark), so these are no longer a correction for the
     dark remap -- they ARE Home's light ink ramp, and they are KEPT deliberately.
     The old rationale here ("Home keeps data-ground=dark so the nav stays
     consistent") was reasoning from a premise theme.css does not require: the
     dark remap lists .app-nav / .yumi-bloom / .yumi-panel / .spotlight-panel as
     INDEPENDENT selectors, so that chrome self-darkens over any ground.
     Why KEEP them rather than fall through to :root — the Slice-0 contrast gate
     measured :root's --ink-3 (#978b6d) at 2.94:1 on --paper, a WCAG AA FAIL.
     #645940 is the AA-safe collapse (~6:1). Deleting these as "now redundant"
     would be a contrast REGRESSION, not a cleanup.
     B1-FIX · THE HOUR: these now carry the ON-GROUND ramp for the same reason --
     the renderer chrome they feed is only light-page-correct inside a card, and
     .lit-page restores the light values there. The AA argument is unchanged in
     kind, only inverted in ground; both ends are re-measured in the contrast
     table in docs/checkpoints/r-polish-b1-fix.md. */
  --ink-2:var(--on-ground-2);  /* renderer text: Yumi label / question / empty hint */
  --ink-3:var(--on-ground-2);
  --ink-4:var(--on-ground-3);  /* renderer inert chrome: book-square + node strokes */
  --sunk:#2E3446;              /* renderer book-square fill -> the on-world sunk */
}

/* 2 · RECIPE 6 · atmospheric weathered LIGHT ground, HOME-SCOPED.
   R-POLISH B1 · PG-1 + XL-1 -- THE PAPER IS THE PAGE, NOT A SHEET.
   Measured before this change (rig, 1920x1080): .home-page was x=173 w=1560,
   because DW-2 caps it at max-width:1560px from 1200up. The paper therefore
   STOPPED at 1560 and the dark body ground showed through as 173px gutters on
   each side -- P-G's "light sheet on a dark frame", and an 8px twin seam at 390.
   The element's own background can never fix that: it is bounded by the very box
   that creates the frame, and painting the same gradient on both the element and
   the viewport would seam anyway (a 1560-wide gradient and a 1920-wide one do not
   line up).
   So the ground moves to a VIEWPORT-FIXED layer and the element goes transparent.
   One continuous paper world at every width, with the composition box free to
   stay 1560 for measure. This is the same technique as the global body::before
   ground (and the .home-welcome::before lamplight below), scoped to Home. */
.home-page.lum-amber-deep{
  background-color:transparent;
  background-image:none;
  box-shadow:none;
}
/* R-POLISH B1-FIX: B1's Home-scoped fixed bright-paper layer is RETIRED.
   It painted a full-viewport light vignette that would now fight the twilight
   world (and it was the brief's suspected cause of the nav bug -- falsified:
   the nav was position:static and simply scrolled away; see §0.4a of the
   checkpoint). The global body::before ground + body::after grain pair in
   theme.css is now the app's SINGLE ground mechanism, on every route.
   The .home-page.lum-amber-deep{background:transparent} rule above is KEPT --
   it is what lets that one world show through Home unbroken at every width. */

/* ============================================================================
   THE LIT PAGE -- the ruled page-surface class (SYS-1 kit).
   Spec: docs/studio/praxis-the-hour-refined.html (`.card` / `.acard`).

   "Printed pages are where you work." A .lit-page is a sheet of vellum laid on
   the twilight world: the vellum gradient, a 15px radius, and the Apple-tight
   shadow trio (hairline + contact + modest ambient) that makes it sit ON the
   world rather than float in it.

   It is a TOKEN BOUNDARY as much as a fill: it re-points both ink families back
   to the on-card ramp, so any subtree inside a page reads as print while the
   same tokens read as cream out on the world. This is why applying it does NOT
   require touching page interiors -- the interiors follow their tokens.

   Additive per canon §4-D: a new primitive, adopted where a stage already
   touches markup. It does not rewrite .home-arc / .home-glimpse / .lum-glass. */
.lit-page{
  position:relative;               /* the containing block for .lit-spine */
  background-color:var(--card-1);
  background-image:linear-gradient(180deg,var(--card-1) 0%,var(--card-2) 100%);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  color:var(--card-ink);
  /* the on-card ramp -- both families, so every consumer crosses back */
  --ink:var(--card-ink);
  --ink-2:var(--card-ink-2);
  --ink-3:var(--card-meta);
  --ink-4:var(--card-meta);
  --lum-ink:var(--card-ink);
  --lum-ink-2:var(--card-ink-2);
  --lum-ink-3:var(--card-meta);
  --lum-ink-4:var(--card-meta);
  --paper:var(--card-1);
  --sunk:#e3d4b0;                 /* renderer book-square fill, back to light */
  /* gold on vellum must be the DEEP gold: the world gold fails AA on paper */
  --gold:var(--gold-on-card);
  --gold-deep:var(--gold-on-card);
  --lum-gold:var(--gold-on-card);
  --border:rgba(38,32,25,.14);
}
/* MO-1 hover lift -- opt-in, so non-interactive pages do not animate. */
.lit-page-lift{ transition:transform .2s ease, box-shadow .2s ease; }
.lit-page-lift:hover{ transform:translateY(-1px); box-shadow:var(--card-shadow-h); }
@media (prefers-reduced-motion:reduce){
  .lit-page-lift{ transition:none; }
  .lit-page-lift:hover{ transform:none; }
}
/* THE CLOTH SPINE -- 3px at .85, the bound edge of a printed page. */
.lit-spine{
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0; opacity:.85; pointer-events:none;
}
.lit-spine-ox{    background:linear-gradient(180deg,var(--cloth-ox-1),var(--cloth-ox-2)); }
.lit-spine-olive{ background:linear-gradient(180deg,var(--cloth-olive-1),var(--cloth-olive-2)); }
.lit-spine-teal{  background:linear-gradient(180deg,var(--cloth-teal-1),var(--cloth-teal-2)); }

/* ============================================================================
   HOME BECOMES THE HOUR (Stage 3). Verbatim treatments from the reference,
   wired to real tokens and real content. Arc THUMBNAILS are untouched -- the
   renderer converts once, in B2 (GR-1).
   ============================================================================ */

/* the dated kicker */
.home-page.lum-amber-deep .home-kicker{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.22em;
  color:var(--on-ground-3); text-transform:uppercase; margin:0 0 14px;
}
/* the hero: cream, with the italic gold accent.
   -webkit-text-fill-color is REQUIRED here, not decorative. The parent
   .home-welcome-title is gradient-clipped (RECIPE 3: background-clip:text +
   -webkit-text-fill-color:transparent), and text-fill-color INHERITS -- so the
   accent's `color` alone is a dead declaration and the word paints TRANSPARENT.
   getComputedStyle reports color:#DFB759 either way, which is why this passed a
   computed-style contrast probe while being invisible on screen (the VISUAL
   GATE lesson, caught by the red-team). Setting the fill explicitly is what
   actually paints it. */
.home-page.lum-amber-deep .home-welcome-accent{
  font-style:italic; color:var(--gold-ember); font-weight:inherit;
  -webkit-text-fill-color:var(--gold-ember);
}
/* the gold hairline under the hero */
.home-page.lum-amber-deep .home-herorule{
  width:64px; height:1px; margin:26px 0 22px;
  background:linear-gradient(90deg,var(--gold-world),transparent);
}

/* ---------------------------------------------------------------------------
   THE GOLD THREAD -- engineered structurally, per the brief.
   The reference positions its nodes with hardcoded pixel tops (top:176px,
   top:360px), which desynchronise the moment a card's height changes. Here the
   line is a container pseudo and EACH ROW OWNS ITS NODE via its own ::before,
   centred with top:50%/translateY(-50%). There are therefore ZERO hardcoded
   vertical offsets: the thread self-aligns at any card height, any width, any
   number of rows. The single horizontal figure is derived from the two layout
   variables below, so the node cannot drift off the line.
   .home-variant is already the reference's `.thread` in structure --
   resume -> label -> cards -> new-arc -- so this needs no DOM change. */
/* SPECIFICITY NOTE (found by measuring, not by reading): the composed layout
   resets `.home-page.lum-amber-deep.home-composed > *{padding-left:0}` inside
   @media (min-width:1200px). That selector is (0,3,0) -- IDENTICAL specificity
   to `.home-page.lum-amber-deep .home-variant` -- and it is later in source
   order, so it silently won and the thread gutter computed to 0px while the
   nodes still sat at -30px: the line and its nodes would have been 34px apart.
   The composed selector is listed here explicitly at (0,4,0) so the gutter wins
   for THIS element only; every other composed child keeps its 0 inset. */
.home-page.lum-amber-deep .home-variant,
.home-page.lum-amber-deep.home-composed > .home-variant{
  --thread-x:8px;      /* line offset from the container's left edge */
  --thread-w:1px;      /* line width -- half of it centres the nodes  */
  --thread-pad:34px;   /* content inset that clears the line          */
  --thread-r:4px;      /* node radius                                 */
  position:relative;
  padding-left:var(--thread-pad);
}
.home-page.lum-amber-deep .home-variant::before{
  content:''; position:absolute; left:var(--thread-x); top:14px; bottom:26px;
  width:var(--thread-w); pointer-events:none;
  background:linear-gradient(180deg,
    var(--gold-ember) 0%,
    color-mix(in srgb, var(--gold-world) 50%, transparent) 30%,
    color-mix(in srgb, var(--gold-world) 18%, transparent) 100%);
}
.home-page.lum-amber-deep .home-variant > .home-yumi,
.home-page.lum-amber-deep .home-variant > .home-arc,
.home-page.lum-amber-deep .home-variant > .home-wholefield,
.home-page.lum-amber-deep .home-variant > .home-arc-start{ position:relative; }
.home-page.lum-amber-deep .home-variant > .home-yumi::before,
.home-page.lum-amber-deep .home-variant > .home-arc::before,
.home-page.lum-amber-deep .home-variant > .home-wholefield::before,
.home-page.lum-amber-deep .home-variant > .home-arc-start::before{
  content:''; position:absolute;
  /* centre the node on the LINE's centre, not its left edge -- hence + w/2 */
  left:calc(var(--thread-x) + (var(--thread-w) / 2) - var(--thread-pad) - var(--thread-r));
  top:50%; transform:translateY(-50%);
  width:calc(var(--thread-r) * 2); height:calc(var(--thread-r) * 2);
  border-radius:50%; background:var(--gold-world); pointer-events:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold-world) 14%, transparent);
}
/* the resume line is the live end of the thread -- it burns */
.home-page.lum-amber-deep .home-variant > .home-yumi::before{
  background:var(--gold-ember);
  box-shadow:0 0 8px color-mix(in srgb, var(--gold-ember) 55%, transparent),
             0 0 0 3px color-mix(in srgb, var(--gold-world) 16%, transparent);
}

/* the ember dot on an arc touched TODAY */
.home-page.lum-amber-deep .home-arcmeta-ember{
  display:inline-flex; align-items:center; gap:8px;
}
.home-page.lum-amber-deep .home-arcmeta-ember::before{
  content:''; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--gold-on-card);
  box-shadow:0 0 7px color-mix(in srgb, var(--gold-on-card) 55%, transparent);
}

/* 3 · RECIPE 4 · the ONE lamplight — a subtle warm wash behind the welcome/
   greeting region (Home's single most meaning-bearing area) */
.home-page.lum-amber-deep .home-welcome{ position:relative; }
.home-page.lum-amber-deep .home-welcome::before{ content:''; position:absolute; inset:-16% -8%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 30% 40%, rgba(242,194,90,.24) 0%, transparent 70%); }
/* MW-1 P8: the welcome lamplight spilled ~8% (~30px) past the viewport edge at
   mobile widths -> a standing horizontal scroll (scrollWidth 413 at 390). Constrain
   its horizontal inset to 0 at <=759 (the vertical -16% wash is kept, so the felt
   glow stays). Placed AFTER the base ::before rule so source order wins. */
@media (max-width:759px){
  .home-page.lum-amber-deep .home-welcome::before{ left:0; right:0; }
}
.home-page.lum-amber-deep .home-welcome > *{ position:relative; z-index:1; }

/* 4 · RECIPE 3 · ink-to-gold on the ONE >=18px display title (display-only) */
.home-page.lum-amber-deep .home-welcome-title{
  background:linear-gradient(180deg,var(--ink) 42%,var(--gold) 112%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* 5 · RECIPE 5 · gilded button — the primary actions (Continue, signed-out Sign in) */
.home-page.lum-amber-deep .home-arcbtn-primary,
.home-page.lum-amber-deep .btn-primary{
  color:#3d2807; border-color:var(--gold-deep);
  background:linear-gradient(180deg,var(--field-1) 0%,var(--gold-hi) 40%,var(--gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 6px 18px -8px rgba(217,164,65,.6);
}
.home-page.lum-amber-deep .home-arcbtn-primary:hover,
.home-page.lum-amber-deep .btn-primary:hover{
  color:#3d2807;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 9px 22px -8px rgba(217,164,65,.72); transform:none;
}

/* 6 · GOLD ROLE-SPLIT · segmented control + small gold-adjacent text stay legible */
.home-page.lum-amber-deep .seg-opt{ color:var(--lum-ink-2); }
.home-page.lum-amber-deep .seg-opt.is-on{ background:linear-gradient(180deg,#f2c25a,#e0a838); color:#3d2807; }
/* B1-FIX · THE HOUR: Home's Yumi line now sits ON THE WORLD, not on paper, so
   the light-page deep teal (#256b80, 2.72:1 on #191F33 -- measured FAIL) is
   re-pointed to the on-ground teal (7.03:1 -- measured PASS). Same correction,
   inverted ground. The cyan DOT is untouched. Shelf's twin at ~12383 keeps
   #256b80 deliberately: that surface is still a light page. */
.home-page.lum-amber-deep .home-yumi-text{ color:var(--teal-on-ground); }

/* 7 · RECIPE 6 (plane 2) · sub-panels need their own light fill once the outer
   card goes solid parchment (the base color-mix radials read near-invisible on light) */
.home-page.lum-amber-deep .home-arcfield{ background:linear-gradient(180deg,#f4e6c4,#eedcb2); }
.home-page.lum-amber-deep .home-wholefield .home-wf{ background:linear-gradient(180deg,#f4e6c4,#eedcb2); border-radius:12px; }

/* ---------------------------------------------------------------------
   AES-5b · THE PLATE-FRAME + CARVED EDGE (R-POLISH B3)

   The three constellation thumbnails were three different objects:
     .home-wf        — plate: parchment fill + radius 12, no edge at all
     .home-arcfield  — RAISED frame: radius 13 + a 1px outset border (:13232)
     .arc-const      — no plate: a flat edge-to-edge band, radius 0, with a
                       bottom rule standing in for a frame (:1819)
   One family, three grammars. They converge here on the plate the `.home-wf`
   precedent already set, with the CARVED edge — inset shadow + inset hairline —
   which is the ratified grammar from CC-2 and the RD-1 field (:12998). A
   miniature of a field that is itself carved should not be raised.

   THE ONE TRAP, and how the hover survives it: `.home-arcfield`'s frame is a
   real `border`, and :13234 animates its `border-color` on hover. Dropping the
   border for a carve would have silently killed that affordance — a dead hover
   of exactly the kind the smoke-test law was written for. The hover is REBUILT
   below on the carve: the inset hairline goes gold instead of the border. Same
   signal, new grammar, verified live (44px probe + computed box-shadow).
   NOTE, precisely: the original :13234 rule is NOT removed — it is left in
   place and INERT, since `border:none` below zeroes the border it animates.
   Dead but harmless; removing it would edit a load-bearing rule this batch has
   no mandate to touch. Logged so the next reader is not misled by it.

   Placed AFTER :13232-13234 deliberately — equal specificity, so source order
   is what carries the override. */
.arcs.lum-amber-deep .arc-card-thumb.arc-const{
  margin:11px 11px 0;
  border-bottom:none;
  border-radius:12px;
  background:linear-gradient(180deg,#f4e6c4,#eedcb2);
  box-shadow:inset 0 2px 10px rgba(38,32,25,.16), inset 0 0 0 1px rgba(38,32,25,.10);
}
.home-page.lum-amber-deep .home-arcfield,
.home-page.lum-amber-deep .home-wholefield .home-wf{
  border:none;
  box-shadow:inset 0 2px 10px rgba(38,32,25,.16), inset 0 0 0 1px rgba(38,32,25,.10);
}
.home-page.lum-amber-deep .home-arc:hover .home-arcfield{
  box-shadow:inset 0 2px 10px rgba(38,32,25,.16), inset 0 0 0 1px rgba(217,164,65,.55);
}

/* 8 · LITERAL RESCUES · base rules hardcoding dark / near-white values (color/bg only) */
.home-page.lum-amber-deep .home-mspine{ background:#efe7d6; }
.home-page.lum-amber-deep .home-mspine-cover{ background:linear-gradient(155deg,#efe7d6,#e3d8c1); }
.home-page.lum-amber-deep .home-arcbtn{ background:#efe7d6; color:var(--lum-ink-2); }
.home-page.lum-amber-deep .home-arcbtn:hover{ color:var(--lum-ink); border-color:var(--gold-hi); }
/* ===== end R3 · HOME UNIVERSAL v1.2 LIGHT SKIN ===== */

/* =============================================================================
   DW-2 · HOME — >=1200 DESKTOP COMPOSITION (fork H-A: two-region + rail).
   Additive over the base .home-page rules; <=1199 renders byte-identical (the two
   felt-pass-ruled additive elements below render at all widths but are display:none
   under the tier, so they never disturb 390/1024). Tokens only. The page becomes a
   grid — welcome spans, the active variant is the work region (col 1), Still-Reading
   becomes a companion rail (col 2). The resume card is recomposed to fill the wide
   work region (enlarged thumb · body row · Continue anchored right), killing the
   ~40% right-hollow; the field canvas runs at real scale.
   ============================================================================= */
.home-page.lum-amber-deep .home-arcdesc{ display:none; }
.home-page.lum-amber-deep .home-arc-start{ display:none; }
@media (min-width:1200px){
  /* two-region grid */
  .home-page.lum-amber-deep.home-composed{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    column-gap:28px;
    max-width:1560px;
    margin-left:auto; margin-right:auto;
    padding-left:24px; padding-right:24px;
    align-items:start;
    /* pack rows to the top: the page's min-height:100vh would otherwise stretch the
       auto rows (default align-content) and inflate the short welcome row by ~188px. */
    align-content:start;
  }
  .home-page.lum-amber-deep.home-composed > *{ max-width:none; margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
  .home-page.lum-amber-deep .home-welcome{ grid-column:1 / -1; grid-row:1; }
  .home-page.lum-amber-deep .home-variant{ grid-column:1; grid-row:2; min-width:0; width:100%; }
  .home-page.lum-amber-deep .home-glimpses{ grid-column:2; grid-row:2; display:block; margin:0; align-self:stretch; }
  /* DW-HOME-LAMP: constrain the welcome lamplight's -8% horizontal bleed at the
     widened tier (mirrors the <=759 fix at :12547) so the grid never re-introduces
     the ~79px h-scroll the narrow gutter would otherwise expose. */
  .home-page.lum-amber-deep .home-welcome::before{ left:0; right:0; }
  /* Still-Reading rail (was flex:0 1 440px, left-islanded). box-sizing:border-box so
     width:100% includes the card padding — content-box would overflow the 320 track. */
  .home-page.lum-amber-deep .home-glimpse{ box-sizing:border-box; width:100%; position:sticky; top:74px; }
  /* resume card recompose: enlarged thumb · body row · Continue anchored right */
  .home-page.lum-amber-deep .home-arc{ align-items:center; gap:28px; }
  .home-page.lum-amber-deep .home-arcfield{ width:248px; }
  .home-page.lum-amber-deep .home-arcbody{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:28px; align-items:center; }
  .home-page.lum-amber-deep .home-arctop{ grid-column:1; grid-row:1; flex-direction:column; align-items:flex-start; gap:5px; }
  .home-page.lum-amber-deep .home-arcdesc{
    display:block; grid-column:1; grid-row:2; margin:9px 0 0;
    font-family:var(--lum-serif); font-style:italic; font-size:17px; line-height:1.42; color:var(--lum-ink-2);
  }
  .home-page.lum-amber-deep .home-arcact{ grid-column:2; grid-row:1 / span 2; margin-top:0; padding-top:0; align-self:center; }
  /* >=1200-only "start a new arc" affordance (to the existing #arcs create flow) */
  .home-page.lum-amber-deep .home-arc-start{
    display:flex; align-items:center; gap:16px; margin:12px 0 0; padding:18px 26px;
    border:1px dashed var(--lum-glass-bd); border-radius:var(--lum-r-card); text-decoration:none;
    color:var(--lum-ink-3); font-family:var(--lum-mono); font-size:12px; letter-spacing:.04em;
    transition:border-color .18s, color .18s;
  }
  .home-page.lum-amber-deep .home-arc-start:hover{ border-color:var(--gold-hi); color:var(--lum-ink-2); }
  .home-page.lum-amber-deep .home-arc-start-plus{ font-size:24px; line-height:1; color:var(--gold); }
  /* field canvas at real scale in the wide work region */
  .home-page.lum-amber-deep .home-wf{ aspect-ratio:100 / 40; }
  /* D2: cap the field Yumi lead (a 534px single line = 76.2ch; cap the TEXT element
     in its own Cormorant ch so it wraps to a comfortable measure — the flex parent
     cap did nothing since the line is narrower than the container). */
  .home-page.lum-amber-deep .home-yumi-text{ max-width:64ch; }
  /* D6: keyboard focus rings on the desktop tier (tokens only) */
  .home-page.lum-amber-deep .seg-opt:focus-visible,
  .home-page.lum-amber-deep .home-arcbtn:focus-visible,
  .home-page.lum-amber-deep .home-arc-start:focus-visible,
  .home-page.lum-amber-deep .home-gl-link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
}

/* =============================================================================
   R4 · NOTEBOOK — UNIVERSAL v1.2 LIGHT SKIN. The Notebook ships the Universal
   light-ground skin (Preston's felt pass on docs/studio/mockups/notebook.html —
   the LIGHT pole; the mockup's dark "reading room" pole was comparison chrome,
   retired). Ported byte-faithful from that mockup's .skin-universal block,
   re-scoped from the mockup's <body> class to the live page-context class
   .notebook.lum-amber-deep — EXACTLY the R2 Shelf / R3 Home mechanism: a scoped
   token re-point + a restrained set of §8 depth recipes + literal rescues that
   paint a LIGHT surface over the dark body ground, WITHOUT flipping the route out
   of umberGroundDark (nav + every other dark route stay byte-identical). PURELY
   ADDITIVE over the base .notebook.lum-amber-deep block above — every property is
   color / background / gradient / box-shadow / border-color, plus composer-seam
   structure. Every hex traces to the Universal v1.2 light set (the Shelf R2 / Home
   R3 token values + the mockup's felt-passed sub-panel / rescue literals, promoted
   to --u-* tokens so RULE bodies carry ZERO raw hex). Also CLOSES the composer
   class-name seam (NB1/NB2): live emits .nb-ce/.nb-composer but the dark block
   styled the never-emitted .nb-capfield, so the composer fell to the legacy cream
   .notebook .nb-composer rule (~9576). The .nb-composer / .nb-ce / .seg /
   .btn-primary rules below give the composer its intended light treatment, beating
   the legacy rule on specificity + source order.
   Recipes: 6 atmospheric ground · 3 ink-to-gold (title) · 5 gilded button
   (Capture / Create) · literal rescues for base rules that hardcode dark values.
   ============================================================================= */

/* 1 · token re-points — same --lum-* the base consumes, swapped to Universal
   light values (the Shelf R2 / Home R3 set) + --u-* recipe/rescue tokens so every
   rule body below references var() and carries no raw hex. */
.notebook.lum-amber-deep{
  --paper:#f4efe4;
  --ink:#241710;
  --gold:#a8761a;        /* GOLD ROLE 1 · interactive / fill            */
  --gold-deep:#855410;   /* GOLD ROLE   · deep gold for small TEXT (AA) */
  --gold-hi:#d9a441;     /* GOLD ROLE 2 · gilding — edge + glow ONLY    */
  --lum-star:#ffce4a;    /* GOLD ROLE 3 · luminous — true glow ONLY     */
  --field-1:#f2c25a;
  /* surfaces — solid on light (translucent glass is a dark-ground device) */
  --lum-base:#fffdf8;
  --lum-glass:#efe7d6;
  --lum-glass-bd:#e3d8c1;
  --lum-glass-bd-2:#e3d8c1;
  --lum-cloth:#c9b7a0;
  /* ink ramp — tertiary held at ink-2 for WCAG AA (canon tertiary fails <18px) */
  --lum-ink:#241710;
  --lum-ink-2:#645940;
  --lum-ink-3:#645940;
  --lum-ink-4:#978b6d;
  --lum-gold:#a8761a;
  --lum-gold-l:#d9a441;
  --lum-gold-d:#855410;
  --lum-gold-ink:#3d2807;
  /* registers deepened so the spine + pill text hold AA on paper */
  --marginalia-color:#2f7d73;
  --question-color:#2f4a75;
  --journal-color:#5f4f96;
  --lum-cyan:#256b80;
  --lum-rose:#b8563f;
  /* §8 depth-recipe + literal-rescue values as tokens (verbatim §8 recipe stops /
     sibling rescues — the mockup's felt-passed .skin-universal set) */
  --u-ground-2:#eee4cd;
  --u-sheet-1:#fffdf6;
  --u-sheet-2:#fdf8ea;
  --u-spread-2:#fbf4e5;
  --u-chip:#f4ecdb;
  --u-panel-1:#f6ead0;
  --u-panel-2:#efe1c2;
  --u-gathered:#fbefcf;
  --u-toggle-off:#e7ddc9;
  --u-seg-2:#e0a838;
  --u-cloth-2:#6f5a3c;
  --u-shot-1:#d8c9b0;
  --u-shot-2:#b09a7c;
  --u-teal-deep:#1f5a6b;
  --u-teal-mid:#4a9fb8;
  --u-orb-hi:#fff4d6;
  --u-white:#fff;
}

/* 2 · RECIPE 6 · atmospheric weathered LIGHT ground, NOTEBOOK-SCOPED (paints over
   the dark body ground, exactly like Shelf R2 / Home R3) */
/* AES-2 · ONE WORLD, SHEETS ON IT — the Notebook becomes a lit sheet.
   The twin of the Shelf conversion above; same reasoning, same bounded scope
   (ground recipe + frame + margin only, zero composition change). */
.notebook.lum-amber-deep{
  background-color:var(--card-1);
  background-image:linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
  background-attachment:scroll;
  width:auto;
  margin:var(--sheet-gap);
  min-height:calc(100vh - (var(--sheet-gap) * 2));
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
}

/* the bound-book spread — SOLID sheet on light, radius + WARM shadow kept (the one
   bound signature that carries); glass blur is a dark device -> dropped. */
.notebook.lum-amber-deep .notebook-spread{
  background:linear-gradient(180deg,var(--u-sheet-1),var(--u-spread-2));
  border:1px solid var(--lum-glass-bd);
  box-shadow:0 30px 60px -30px rgba(120,75,15,.34), inset 0 1px 0 rgba(255,250,235,.9);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.notebook.lum-amber-deep .leaf-left{ border-right-color:var(--lum-glass-bd-2); }

/* 3 · RECIPE 3 · ink-to-gold on the ONE >=18px display title (display-only) */
.notebook.lum-amber-deep .notebook-title{
  background:linear-gradient(180deg,var(--ink) 42%,var(--gold) 112%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* tabs + master switch — light */
.notebook.lum-amber-deep .nb-tab{ background:var(--u-chip); color:var(--lum-ink-2); }
.notebook.lum-amber-deep .nb-tab.is-on{ background:linear-gradient(180deg,var(--field-1),var(--u-seg-2)); color:var(--lum-gold-ink); }
.notebook.lum-amber-deep .nb-toggle{ background:var(--u-toggle-off); }
.notebook.lum-amber-deep .nb-toggle[aria-pressed="true"]{ background:linear-gradient(180deg,var(--field-1),var(--u-seg-2)); }

/* #3a light — the book band on paper (a raised sub-panel, RECIPE 6 plane 2) */
.notebook.lum-amber-deep .nb-bookband{ background:linear-gradient(180deg,var(--u-panel-1),var(--u-panel-2)); border-bottom-color:var(--lum-glass-bd-2); }
.notebook.lum-amber-deep .nb-bb-cover{ box-shadow:0 12px 26px -12px rgba(120,75,15,.4), 0 0 22px -4px rgba(217,164,65,.5), inset 1px 0 0 rgba(255,255,255,.4); }
.notebook.lum-amber-deep .nb-bb-cover-cloth{ background:linear-gradient(135deg,var(--lum-cloth) 0%,var(--u-cloth-2) 100%); }
.notebook.lum-amber-deep .nb-bb-cover-title{ color:var(--u-sheet-1); }
.notebook.lum-amber-deep .nb-bb-cover-author{ color:rgba(255,250,235,.85); }
.notebook.lum-amber-deep .nb-bb-banklabel{ color:var(--gold-deep); }
.notebook.lum-amber-deep .nb-bb-seespanel{ background:rgba(37,107,128,.08); border-color:rgba(37,107,128,.3); color:var(--u-teal-deep); }
.notebook.lum-amber-deep .nb-bb-seespanel b{ color:var(--lum-ink); }
/* band hierarchy (#3a / FORK 2): title = NAME tier (Cormorant italic); author = a
   DM-Mono meta label. Overrides the dark block's serif-25px / serif-italic author. */
.notebook.lum-amber-deep .nb-bb-title{ font-style:italic; font-size:26px; }
.notebook.lum-amber-deep .nb-bb-author{ font-family:var(--lum-mono); font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--lum-ink-3); margin-top:8px; }

/* 7 · composer SEAM CLOSE (structure + light). Live emits .nb-ce/.nb-composer;
   the dark block styled .nb-capfield (never emitted) so the composer fell to the
   legacy cream .notebook .nb-composer (~9576). These rules (0,3,0 / 0,4,0) beat it
   and give the composer its intended light sheet. */
.notebook.lum-amber-deep .nb-composer{
  background:linear-gradient(180deg,var(--u-sheet-1),var(--u-sheet-2));
  border:1px solid var(--lum-glass-bd-2); border-radius:14px; padding:14px 16px;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.9);
  transition:border-color .2s, box-shadow .2s;
}
.notebook.lum-amber-deep .nb-composer:focus-within{ border-color:var(--gold-hi); box-shadow:inset 0 1px 0 rgba(255,250,235,.9), 0 0 0 3px rgba(217,164,65,.18); }
.notebook.lum-amber-deep .nb-composer .nb-ce{ font-family:var(--lum-serif); font-size:17px; line-height:1.4; color:var(--lum-ink); background:transparent; border:none; outline:none; width:100%; resize:none; display:block; min-height:1.4em; }
.notebook.lum-amber-deep .nb-composer .nb-ce::placeholder{ color:var(--lum-ink-4); font-style:italic; }
.notebook.lum-amber-deep .nb-composer .nb-shots{ display:flex; flex-wrap:wrap; gap:9px; margin-top:11px; }
.notebook.lum-amber-deep .nb-composer .crow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:12px; }
.notebook.lum-amber-deep .nb-composer .crow .spacer{ flex:1; }
/* register segmented control — light (beats legacy .notebook .seg-opt.is-on 9586) */
.notebook.lum-amber-deep .seg{ display:inline-flex; padding:3px; border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); background:rgba(255,236,200,.06); }
.notebook.lum-amber-deep .seg-opt{ font-family:var(--lum-sans); font-size:12.5px; font-weight:500; color:var(--lum-ink-2); background:none; border:none; border-radius:var(--lum-r-pill,999px); padding:6px 15px; cursor:pointer; }
.notebook.lum-amber-deep .seg-opt:hover{ color:var(--lum-ink); }
.notebook.lum-amber-deep .seg-opt.is-on{ background:linear-gradient(180deg,var(--field-1),var(--u-seg-2)); color:var(--lum-gold-ink); font-weight:600; }
/* quiet chip primitive (composer photo chips + right-leaf "Change") — light */
.notebook.lum-amber-deep .chip{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-2); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:7px 13px; background:var(--u-chip); cursor:pointer; }
.notebook.lum-amber-deep .chip:hover{ color:var(--lum-ink); border-color:var(--gold-hi); }
/* gilded primary — Capture / Create (RECIPE 5). Beats the dark .btn-primary (11050). */
.notebook.lum-amber-deep .btn-primary,
.notebook.lum-amber-deep .createbtn{ color:var(--lum-gold-ink); border:1px solid var(--gold-deep); background:linear-gradient(180deg,var(--field-1) 0%,var(--gold-hi) 40%,var(--gold) 100%); box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 6px 18px -8px rgba(217,164,65,.6); }
.notebook.lum-amber-deep .btn-primary:hover,
.notebook.lum-amber-deep .createbtn:hover{ color:var(--lum-gold-ink); box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 9px 22px -8px rgba(217,164,65,.72); }

/* #1 unified composer — the labeled "bring one in" modes row (paste/import/dictate
   hand-off + photo/add-image inline). Replaces the run-in .nb-capmodes prose. */
.notebook.lum-amber-deep .nb-modes{ margin-top:13px; }
.notebook.lum-amber-deep .nb-modes-label{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-ink-4); margin-bottom:8px; display:block; }
.notebook.lum-amber-deep .nb-modes-row{ display:flex; flex-wrap:wrap; gap:8px; }
.notebook.lum-amber-deep .nb-mode{ display:inline-flex; align-items:center; gap:7px; font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-2); background:var(--u-chip); border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill,999px); padding:7px 13px; cursor:pointer; transition:color .2s, border-color .2s, background .2s; }
.notebook.lum-amber-deep .nb-mode:hover{ color:var(--lum-ink); border-color:var(--gold-hi); background:rgba(255,236,200,.06); }
.notebook.lum-amber-deep .nb-mode .ic{ font-size:13px; line-height:1; }
.notebook.lum-amber-deep .nb-mode .handoff{ font-family:var(--lum-mono); font-size:11px; color:var(--lum-ink-4); }
.notebook.lum-amber-deep .nb-modes-hint{ font-family:var(--lum-serif); font-style:italic; font-size:12.5px; color:var(--lum-ink-3); margin-top:9px; }

/* CD-6 UNIFICATION (Stage 1): the inline writeline is retired; a quiet "Catch a
   thought" affordance opens the shared capture door. Mirrors the composer's paper
   (the .nb-composer amber block above) so the leaf reads unchanged. Additive — the
   dead .nb-composer / .nb-modes rules above are left in place per the round ruling. */
.notebook.lum-amber-deep .nb-catch{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background:linear-gradient(180deg,var(--u-sheet-1),var(--u-sheet-2));
  border:1px solid var(--lum-glass-bd-2); border-radius:14px; padding:15px 16px;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.9);
  transition:border-color .2s, box-shadow .2s;
}
.notebook.lum-amber-deep .nb-catch:hover{ border-color:var(--gold-hi); box-shadow:inset 0 1px 0 rgba(255,250,235,.9), 0 6px 18px -12px rgba(217,164,65,.5); }
.notebook.lum-amber-deep .nb-catch:focus-visible{ outline:none; border-color:var(--gold-hi); box-shadow:inset 0 1px 0 rgba(255,250,235,.9), 0 0 0 3px rgba(217,164,65,.18); }
.notebook.lum-amber-deep .nb-catch-glyph{ font-family:var(--lum-serif); font-size:20px; line-height:1; color:var(--lum-gold-ink); flex:none; }
.notebook.lum-amber-deep .nb-catch-copy{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.notebook.lum-amber-deep .nb-catch-line{ font-family:var(--lum-serif); font-style:italic; font-size:17px; line-height:1.3; color:var(--lum-ink-3); }
.notebook.lum-amber-deep .nb-catch-sub{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-ink-4); }
.notebook.lum-amber-deep .nb-catch-cue{ font-family:var(--lum-sans); font-size:20px; line-height:1; color:var(--lum-ink-4); flex:none; }

/* 8 · note cards + entry chrome — light (rescue the dark rgba fills / glows) */
.notebook.lum-amber-deep .notebook-entry{ background:var(--u-sheet-1); border-color:var(--lum-glass-bd-2); box-shadow:0 6px 16px -12px rgba(120,75,15,.24); }
.notebook.lum-amber-deep .notebook-entry-gathered{ border-color:var(--gold-hi); background:var(--u-gathered); box-shadow:0 0 0 1px rgba(217,164,65,.4); }
.notebook.lum-amber-deep .notebook-entry-tag-m{ color:var(--gold-deep); background:rgba(168,118,26,.12); }
.notebook.lum-amber-deep .notebook-entry-tag-q{ color:var(--question-color); background:rgba(47,74,117,.1); }
.notebook.lum-amber-deep .notebook-entry-tag-j{ color:var(--lum-ink-2); background:rgba(95,79,150,.12); }
.notebook.lum-amber-deep .notebook-entry-acts a.notebook-entry-gather,
.notebook.lum-amber-deep .notebook-entry-acts a:hover{ color:var(--gold-deep); }
/* FF-8 light skin: the collapsed action row on the live (lum-amber-deep) notebook —
   the ⋯ toggle on the row, the overflow menu, and the separated destructive Delete. */
.notebook.lum-amber-deep .notebook-entry-more{ font-family:var(--lum-mono); font-size:13px; line-height:1; letter-spacing:.04em; color:var(--lum-ink-4); }
.notebook.lum-amber-deep .notebook-entry-more:hover{ color:var(--gold-deep); }
.notebook.lum-amber-deep .notebook-entry-overflow.is-open{ padding-top:11px; border-top:1px solid var(--lum-glass-bd-2); }
.notebook.lum-amber-deep .notebook-entry-overflow a{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.04em; color:var(--lum-ink-3); text-decoration:none; cursor:pointer; }
.notebook.lum-amber-deep .notebook-entry-overflow a:hover{ color:var(--gold-deep); }
.notebook.lum-amber-deep .notebook-entry-overflow .nb-of-sep{ background:var(--lum-glass-bd-2); }
.notebook.lum-amber-deep .notebook-entry-overflow .notebook-entry-delete{ color:var(--danger); }
.notebook.lum-amber-deep .notebook-entry-overflow .notebook-entry-delete:hover{ color:var(--danger); text-decoration:underline; text-underline-offset:3px; }
.notebook.lum-amber-deep .notebook-entry-overflow .notebook-entry-delete-confirm{ color:var(--danger); font-weight:600; }
.notebook.lum-amber-deep .notebook-entry-overflow .notebook-entry-delete-cancel{ color:var(--lum-ink-4); }
/* D6: the ⋯ toggle + the overflow controls (incl. the relocated Delete) keep keyboard focus
   rings — the old .notebook-entry-acts a:focus-visible no longer reaches them once moved. The
   primary-row links (Gather / ask-Yumi) are folded in here too so ALL note-action controls
   ring at every width (their prior ring was ≥1200-only — the WS-B red-team's asymmetry nit). */
.notebook.lum-amber-deep .notebook-entry-acts a:focus-visible,
.notebook.lum-amber-deep .notebook-entry-more:focus-visible,
.notebook.lum-amber-deep .notebook-entry-overflow a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* working-page gathered note — light */
.notebook.lum-amber-deep .nb-gnote{ background:var(--u-sheet-1); border-color:var(--lum-glass-bd-2); border-left-color:var(--gold); color:var(--lum-ink-2); }

/* #3b per-note cover chip — a small self-healing cover thumb stating the book on
   Inbox/Journal entries (suppressed on <book> tabs). buildSelfHealingCover renders
   the real cover into .nb-chip-cover-img, or falls back to the cloth .nb-chip-cover-t. */
.notebook.lum-amber-deep .nb-entry-bookchip{ display:inline-flex; align-items:center; gap:9px; margin-top:9px; padding:4px 11px 4px 5px; border-radius:var(--lum-r-pill,999px); background:var(--u-chip); border:1px solid var(--lum-glass-bd-2); }
.notebook.lum-amber-deep .nb-chip-cover{ position:relative; flex:none; width:22px; height:32px; border-radius:2px 3px 3px 2px; overflow:hidden; box-shadow:0 4px 8px -4px rgba(0,0,0,.7), inset 1px 0 0 rgba(255,255,255,.08); display:flex; align-items:flex-end; padding:3px; background:linear-gradient(135deg,var(--lum-cloth) 0%,rgba(24,16,6,.92) 100%); }
.notebook.lum-amber-deep .nb-chip-cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.notebook.lum-amber-deep .nb-chip-cover-t{ font-family:var(--lum-serif); font-weight:600; font-size:5.5px; line-height:1.05; color:var(--u-sheet-1); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.notebook.lum-amber-deep .nb-chip-title{ font-family:var(--lum-serif); font-style:italic; font-weight:600; font-size:14px; line-height:1.1; color:var(--lum-ink-2); }

/* Stage 4 · hierarchy + Yumi resting slot + empty states =================== */
/* NAME tier: the forming sub-theory name is Cormorant italic (like the band title
   + chip title); the gathered-note excerpt is Cormorant italic body. */
.notebook.lum-amber-deep .nb-name-canvas-host .wc-input{ font-style:italic; }
.notebook.lum-amber-deep .nb-gnote{ font-style:italic; }
/* Yumi RESTING complicate slot — coherent deep-teal on light (cyan=Yumi seam, AA).
   Fully specified so the legacy cream .notebook .nb-complicate does not bleed. */
.notebook.lum-amber-deep .nb-complicate{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:12px 0 0; background:none; border:none; border-top:1px solid var(--lum-glass-bd-2); border-radius:0; font-family:var(--lum-serif); font-style:italic; font-size:14px; color:var(--u-teal-deep); }
.notebook.lum-amber-deep .nb-ctag{ color:var(--u-teal-deep); }
.notebook.lum-amber-deep .nb-ctext{ color:var(--u-teal-deep); }
.notebook.lum-amber-deep .nb-ybubble{ background:radial-gradient(circle at 38% 32%, var(--u-white), var(--u-teal-mid) 46%, var(--lum-cyan) 100%); color:var(--u-white); }
/* empty-state welcome (#empty) — a calm teaching leaf on the empty Inbox. */
.notebook.lum-amber-deep .nb-empty{ text-align:center; padding:34px 20px 10px; }
.notebook.lum-amber-deep .nb-empty-mark{ width:34px; height:34px; margin:0 auto 16px; border-radius:50%; background:radial-gradient(circle at 38% 30%, var(--u-orb-hi) 0%, var(--lum-star) 45%, var(--gold) 100%); box-shadow:0 0 16px rgba(217,164,65,.5); }
.notebook.lum-amber-deep .nb-empty-title{ font-family:var(--lum-serif); font-style:italic; font-size:22px; color:var(--lum-ink); margin-bottom:10px; }
.notebook.lum-amber-deep .nb-empty-body{ font-family:var(--lum-sans); font-size:13.5px; line-height:1.6; color:var(--lum-ink-3); max-width:400px; margin:0 auto 20px; }
.notebook.lum-amber-deep .nb-empty-steps{ display:flex; flex-direction:column; gap:10px; max-width:360px; margin:0 auto; text-align:left; }
.notebook.lum-amber-deep .nb-empty-step{ display:flex; align-items:flex-start; gap:11px; }
.notebook.lum-amber-deep .nb-empty-step .n{ flex:none; width:20px; height:20px; border-radius:50%; border:1px solid var(--lum-glass-bd-2); font-family:var(--lum-mono); font-size:10px; color:var(--lum-ink-3); display:flex; align-items:center; justify-content:center; }
.notebook.lum-amber-deep .nb-empty-step .t{ font-family:var(--lum-serif); font-style:italic; font-size:14px; color:var(--lum-ink-2); }
/* signed-out door (buildNotebookSignedOut .empty-state): the body <p> is governed by
   the pre-existing `.notebook .empty-state p{ color:var(--ink-2) }` (~9621); --ink-2 is
   NOT re-pointed under this light skin, so it keeps its dark-ground value = low contrast
   on paper (~2:1). This rescue (0,3,1, later source) beats it to the light ink ramp so
   the logged-out prompt is legible. (The global/unscoped .empty-state stays the
   R3-flagged craft-pass debt -- this touches only .notebook.lum-amber-deep.) */
.notebook.lum-amber-deep .empty-state p{ color:var(--lum-ink-3); }
/* ===== end R4 · NOTEBOOK UNIVERSAL v1.2 LIGHT SKIN ===== */

/* =============================================================================
   DW-2 · NOTEBOOK — >=1200 DESKTOP COMPOSITION (fork N-A: widen the spread ~1360).
   Additive over the base .notebook rules; <=1199 renders byte-identical. Tokens only.
   The two-leaf spread metaphor is PRESERVED (leaves stay flex:1, gutter = the
   .leaf-left border) — only the governor widens (900 -> 1360), so each leaf grows to
   ~650px and the narrow-leaf interior pile resolves on its own: the capture .crow goes
   inline (Capture beside the register pills), the 5 bring-in chips sit on one row, and
   the 6-action note row is one line. Note-body prose is ch-capped so the wider leaf
   keeps its reading measure.
   ============================================================================= */
@media (min-width:1200px){
  .notebook.lum-amber-deep > *{ max-width:1360px; }
  /* the wider leaf keeps its measure (Cormorant note body runs ~74ch at a 650px leaf) */
  .notebook.lum-amber-deep .notebook-entry-body{ max-width:70ch; }
  /* D6: keyboard focus rings on the desktop tier (tokens only) */
  .notebook.lum-amber-deep .nb-tab:focus-visible,
  .notebook.lum-amber-deep .seg-opt:focus-visible,
  .notebook.lum-amber-deep .nb-mode:focus-visible,
  .notebook.lum-amber-deep .btn-primary:focus-visible,
  .notebook.lum-amber-deep .notebook-entry-acts a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
}

/* =============================================================================
   WAVE 5 · IDENTITY  (account renderer DELETED, S-B sweep — .account.lum-amber-ember
   rules now ORPHANED dead CSS, ledgered for a dedicated CSS-dead-sweep). Additive +
   scoped: the ~311 account/portrait rules are 100% token-based, so remapping the
   base tokens to --lum-* here reskins every section (no load-bearing rule rewritten)
   + glass cards + full-bleed centered-1080 (gutter on the ROOT, column on `> *` with
   NO padding — account's children are heterogeneous, so `> *` padding would double-
   inset the sectioned cards). CYAN IS YUMI ONLY: --teal is NOT remapped to --lum-cyan
   (galaxy hues + capstone filament stay non-cyan; mockup #7fd0f0 not ported). Cards
   SOLID (no backdrop-filter, iOS). Atmosphere = ember (5.1 #1, Profiles ground).
   ============================================================================= */
.account.lum-amber-ember{
  display:block; box-sizing:border-box; width:100%; max-width:none;
  min-height:100vh; margin:0; padding:56px 24px 72px; color:var(--lum-ink);
  /* token remaps — the whole portrait reskins to Lumen by construction */
  --ink:var(--lum-ink); --ink-2:var(--lum-ink-2);
  --ink-3:var(--lum-ink-3); --ink-4:var(--lum-ink-4);
  --text-d:var(--lum-ink); --muted:var(--lum-ink-3);
  --gold:var(--lum-gold); --gold-light:var(--lum-gold-l);
  --text-on-dark:var(--lum-gold-ink); --border:var(--lum-glass-bd-2);
  --danger:var(--lum-coral);
  --surface:color-mix(in srgb, var(--lum-ink) 4%, transparent);
  --surface-2:color-mix(in srgb, var(--lum-ink) 6%, transparent);
  --surface-d:color-mix(in srgb, var(--lum-ink) 6%, transparent);
  --shadow-1:0 18px 40px -30px rgba(0,0,0,.6);
  --shadow-d:0 18px 44px -28px rgba(0,0,0,.6);
  --grad:linear-gradient(150deg, var(--lum-gold-l), var(--lum-coral));
}
/* centered-1080 column; gutter is the root padding above, so every direct child
   (bare card, section wrapper, eyebrow) shares one left edge — no double inset. */
.account.lum-amber-ember > *{
  box-sizing:border-box; max-width:1080px;
  margin-left:auto; margin-right:auto;
}
/* glass cards (mock .card: frosted white gradient over the lamplit ground, a
   gold-cream hairline, 17px). SOLID gradient — no backdrop-filter. */
.account.lum-amber-ember .account-card,
.account.lum-amber-ember .account-hero{
  background:var(--lum-glass);
  border:1px solid var(--lum-glass-bd-2);
  border-radius:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 44px -28px rgba(0,0,0,.6);
}
/* stat cards + expand panel share the glass material (keep their own radius). */
.account.lum-amber-ember .account-stat,
.account.lum-amber-ember .account-expand-panel{
  background:var(--lum-glass);
  border:1px solid var(--lum-glass-bd-2);
}
/* #2 (5.1): descriptor renders always; EMPTY = muted italic invitation. */
.account.lum-amber-ember .account-hero .account-hero-tagline-empty{ color:var(--lum-ink-4); opacity:.85; }
/* 759 reflow — tighten the root gutter for phones (matches Shelf/Home). */
@media (max-width:759px){
  .account.lum-amber-ember{ padding-left:16px; padding-right:16px; }
}
/* Stage 2 — through-line THREADS sub-block: the label + gathered member-notes +
   keep/aside on real getReaderModel(uid).threads. Token-based (inherits the Amber
   remap above); NO cyan (these are the reader's own threads, not a Yumi element);
   the keep/aside chips reuse .portrait-chip (already reskinned). Column layout so
   the gathered notes + acts stack under the through-line name. */
.account.lum-amber-ember .portrait-thread-row{ flex-direction:column; align-items:stretch; gap:0; }
.account.lum-amber-ember .portrait-thread-name{ font-family:var(--lum-serif); font-weight:500; font-style:italic; font-size:19px; line-height:1.24; color:var(--lum-ink); }
.account.lum-amber-ember .portrait-thread-gathered{ margin-top:11px; padding-top:11px; border-top:1px solid var(--lum-glass-bd-2); }
.account.lum-amber-ember .portrait-thread-glab{ display:block; font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-ink-3); margin-bottom:8px; }
.account.lum-amber-ember .portrait-thread-note{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:5px 0; }
.account.lum-amber-ember .portrait-thread-note .tx{ font-family:var(--lum-serif); font-style:italic; font-size:14px; line-height:1.4; color:var(--lum-ink-2); }
.account.lum-amber-ember .portrait-thread-note .bk{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.04em; color:var(--lum-gold); flex:none; }
.account.lum-amber-ember .portrait-thread-acts{ display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; }
.account.lum-amber-ember .portrait-thread-kept{ font-family:var(--lum-serif); font-style:italic; font-size:13.5px; color:var(--lum-ink-3); }
/* #3 (5.1): VALUES as full-width vrows — uniform glow (brightness BLOCKED, no meta)
   + name + Rename + ×, persisted via setProfile. Token-based, non-cyan. */
.account.lum-amber-ember .account-vlist{ display:flex; flex-direction:column; gap:0; }
.account.lum-amber-ember .account-vrow{ display:flex; align-items:center; gap:16px; padding:14px 6px; border-bottom:1px solid var(--lum-glass-bd-2); }
.account.lum-amber-ember .account-vglow{ flex:none; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 38% 32%, var(--lum-gold-l) 0%, var(--lum-gold) 48%, var(--lum-gold-d) 100%); box-shadow:0 0 10px color-mix(in srgb, var(--lum-gold) 55%, transparent); }
.account.lum-amber-ember .account-vmain{ flex:1 1 auto; min-width:0; }
.account.lum-amber-ember .account-vname{ font-family:var(--lum-serif); font-weight:600; font-size:22px; line-height:1.2; color:var(--lum-ink); }
.account.lum-amber-ember .account-vacts{ flex:none; display:flex; align-items:center; gap:10px; }
.account.lum-amber-ember .account-vrename{ font-family:var(--lum-sans); font-size:12.5px; color:var(--lum-ink-3); background:transparent; border:1px solid var(--lum-glass-bd-2); border-radius:var(--lum-r-pill); padding:5px 13px; cursor:pointer; transition:color .15s, border-color .15s; }
.account.lum-amber-ember .account-vrename:hover{ color:var(--lum-ink); border-color:var(--lum-gold); }
.account.lum-amber-ember .account-vremove{ font-family:var(--lum-sans); font-size:16px; line-height:1; color:var(--lum-ink-4); background:transparent; border:none; cursor:pointer; padding:4px 6px; }
.account.lum-amber-ember .account-vremove:hover{ color:var(--lum-coral); }
.account.lum-amber-ember .account-vrename-in{ font-family:var(--lum-serif); font-size:22px; color:var(--lum-ink); background:color-mix(in srgb, var(--lum-ink) 6%, transparent); border:1px solid var(--lum-gold); border-radius:8px; padding:2px 8px; outline:none; width:100%; box-sizing:border-box; }
.account.lum-amber-ember .account-declare{ display:flex; align-items:center; gap:10px; padding:14px 6px 4px; }
.account.lum-amber-ember .account-declare-plus{ flex:none; font-family:var(--lum-sans); font-size:17px; color:var(--lum-gold); }
.account.lum-amber-ember .account-declare-in{ flex:1 1 auto; min-width:0; font-family:var(--lum-serif); font-style:italic; font-size:17px; color:var(--lum-ink); background:transparent; border:none; outline:none; }
.account.lum-amber-ember .account-declare-in::placeholder{ color:var(--lum-ink-4); }
.account.lum-amber-ember .account-declare-hint{ flex:none; font-family:var(--lum-mono); font-size:10px; letter-spacing:.06em; color:var(--lum-ink-4); }
/* #5 (5.1): galaxy Connections/Counts toggles; state rides the STABLE galCard
   (galaxy el + paths reset on re-render/mouseleave). GOLD on-state (non-cyan). */
.account.lum-amber-ember .portrait-gal-toggles{ display:flex; gap:20px; flex-wrap:wrap; margin:0 0 12px; }
.account.lum-amber-ember .portrait-gal-toggle{ margin-top:0; }
.account.lum-amber-ember .portrait-gal-toggle.on .portrait-switch{ background:color-mix(in srgb, var(--lum-gold) 30%, transparent); border-color:var(--lum-gold); }
.account.lum-amber-ember .portrait-gal-toggle.on .portrait-switch .portrait-knob{ background:var(--lum-gold); }
.account.lum-amber-ember .portrait-gal-toggle.on .portrait-toggle-lbl{ color:var(--lum-gold); }
/* Connections ON → all bond paths; Counts ON → all per-star labels. */
.account.lum-amber-ember .portrait-galaxy-wrap.gal-show-bonds .portrait-bonds path{ opacity:.42; }
.account.lum-amber-ember .portrait-galaxy-wrap.gal-show-counts .portrait-star .ct{ opacity:.9; }
/* ===== end WAVE 5 · IDENTITY (Account) ===== */

/* =============================================================================
   WAVE 6 (re-scoped) · OWN PROFILE  (social surface, real backing only)
   The own-profile renderer (DELETED, S-B sweep — .op-root rules now ORPHANED dead
   CSS, ledgered for a dedicated CSS-dead-sweep) was the reader's own profile (#profile). Reached from the
   Account page this wave (index.html nav left untouched per build ruling).
   Everything is scoped under .op-root so no selector bleeds to another surface;
   idea-marks render via bookSubMarkHTML -> PraxisMarks (global .lum-mark). The
   social counters (walk-with / consequence) render em dashes -- no cross-user
   data model exists yet (Stage-0 recon 2026-07-02). --lum-* tokens only.
   ========================================================================== */
.op-root { max-width: 840px; margin: 0 auto; padding: 34px 20px 70px; }

.op-head { padding: 26px 28px; margin: 0 0 16px 0; }
.op-head-top { display: flex; align-items: center; gap: 20px; }
.op-mark {
  flex: none; width: 74px; height: 74px; border-radius: 50%;
  position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 32%,
    rgba(255, 236, 200, 0.30) 0%,
    color-mix(in srgb, var(--lum-gold) 10%, transparent) 45%, transparent 72%);
  box-shadow: 0 0 0 1px var(--lum-glass-bd);
}
.op-mark span {
  font-family: var(--lum-serif); font-weight: 600; font-size: 34px;
  color: var(--lum-gold-l); text-shadow: 0 0 18px rgba(255, 236, 200, 0.5);
}
.op-head-id { flex: 1; min-width: 0; }
.op-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-name {
  font-family: var(--lum-serif); font-weight: 600; font-size: 30px;
  color: var(--lum-ink); line-height: 1.05;
}
.op-youtag {
  font-family: var(--lum-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lum-ink-3);
  border: 1px solid var(--lum-glass-bd-2); border-radius: var(--lum-r-pill); padding: 3px 8px;
}
.op-ident {
  font-family: var(--lum-serif); font-style: italic; font-size: 18px;
  color: var(--lum-ink-2); margin-top: 3px;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.op-ident-empty { color: var(--lum-ink-4); }
.op-edit {
  font-family: var(--lum-sans); font-style: normal; font-size: 11px;
  color: var(--lum-ink-4); cursor: pointer; background: none; border: none;
  padding: 0; border-bottom: 1px dotted var(--lum-ink-4);
}
.op-edit:hover { color: var(--lum-ink-2); border-bottom-color: var(--lum-ink-2); }
.op-walk { margin-top: 16px; font-family: var(--lum-sans); font-size: 12.5px; color: var(--lum-ink-3); }
.op-walk b { color: var(--lum-ink-2); font-weight: 600; }
.op-walk .op-sep { color: var(--lum-ink-4); margin: 0 9px; }

/* inline edit form -- writes ONLY displayNameOverride / penName / tagline via
   the EXISTING saveProfileToFirestore full-doc .set() (integrations.js:810). */
.op-edit-form {
  display: none; margin: 18px 0 0 0; padding-top: 16px;
  border-top: 1px solid var(--lum-glass-bd-2);
}
.op-edit-form.is-open { display: block; }
.op-edit-field { display: block; margin: 0 0 12px 0; }
.op-edit-label {
  display: block; font-family: var(--lum-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lum-ink-3); margin: 0 0 5px 0;
}
.op-edit-input {
  width: 100%; font-family: var(--lum-sans); font-size: 14px; color: var(--lum-ink);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--lum-glass-bd-2);
  border-radius: 10px; padding: 9px 12px;
}
.op-edit-input:focus { outline: none; border-color: var(--lum-glass-bd); }
.op-edit-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.op-edit-save {
  font-family: var(--lum-sans); font-size: 12.5px; color: var(--lum-gold-ink);
  background: var(--lum-gold); border: 1px solid var(--lum-gold);
  border-radius: var(--lum-r-pill); padding: 8px 16px; cursor: pointer;
}
.op-edit-save:hover { background: var(--lum-gold-l); border-color: var(--lum-gold-l); }
.op-edit-note { font-family: var(--lum-sans); font-size: 12px; color: var(--lum-ink-3); }

/* consequence -- deferred; the social model is absent, so the counter is an em dash. */
.op-conseq { padding: 22px 28px; margin: 0 0 24px 0; }
.op-conseq-label {
  font-family: var(--lum-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lum-ink-3); margin: 0 0 8px 0;
}
.op-conseq-head {
  font-family: var(--lum-serif); font-weight: 500; font-size: 25px;
  color: var(--lum-ink); line-height: 1.18; margin: 0 0 4px 0;
}
.op-conseq-head b { color: var(--lum-gold-l); font-weight: 600; }
.op-conseq-sub {
  font-family: var(--lum-serif); font-style: italic; font-size: 15px;
  color: var(--lum-ink-3); margin: 0;
}

/* your arcs -- the signed-in user's OWN arcs (real). */
.op-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px 0; }
.op-arcs-head { font-family: var(--lum-serif); font-weight: 500; font-size: 22px; color: var(--lum-ink); margin: 0; }
.op-newarc {
  font-family: var(--lum-sans); font-size: 12.5px; color: var(--lum-ink-3);
  border: 1px dashed var(--lum-glass-bd-2); border-radius: var(--lum-r-pill);
  padding: 7px 14px; cursor: pointer; background: none;
}
.op-newarc:hover { color: var(--lum-ink-2); border-color: var(--lum-glass-bd); }
.op-arcs-sub { font-family: var(--lum-sans); font-size: 13px; color: var(--lum-ink-3); margin: 0 0 16px 0; }
.op-arcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.op-arc {
  display: block; padding: 18px 20px; color: inherit; text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.op-arc:hover { transform: translateY(-2px); }
.op-thumb {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 76px; margin: 0 0 14px 0; border-radius: var(--lum-r-card);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lum-glass-bd-2); overflow: hidden;
}
.op-thumb-empty::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, var(--lum-gold-l), transparent 70%); opacity: 0.5;
}
.op-arc-title { font-family: var(--lum-serif); font-weight: 600; font-size: 20px; color: var(--lum-ink); line-height: 1.1; margin: 0; }
/* real meta (reused _arcCardMeta2El .arc-card-meta) recoloured for the ember ground */
.op-root .arc-card-meta { color: var(--lum-ink-3); border-top-color: var(--lum-glass-bd-2); }

/* honest empty state -- an invitation, not placeholder cards. */
.op-empty { padding: 28px; text-align: center; }
.op-empty-h { font-family: var(--lum-serif); font-weight: 500; font-size: 20px; color: var(--lum-ink); margin: 0 0 6px 0; }
.op-empty-p { font-family: var(--lum-sans); font-size: 13.5px; color: var(--lum-ink-3); margin: 0 auto 14px; max-width: 42ch; }
.op-empty-btn {
  font-family: var(--lum-sans); font-size: 12.5px; color: var(--lum-gold-ink);
  background: var(--lum-gold); border: none; border-radius: var(--lum-r-pill); padding: 9px 18px; cursor: pointer;
}
.op-empty-btn:hover { background: var(--lum-gold-l); }

/* Account-page discoverability link to #profile (index.html nav untouched this wave). */
.op-account-link {
  display: inline-block; margin: 0 0 20px 0; font-family: var(--lum-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lum-ink-3); text-decoration: none;
  border-bottom: 1px solid var(--lum-glass-bd-2); padding-bottom: 2px;
}
.op-account-link:hover { color: var(--lum-gold-l); border-bottom-color: var(--lum-gold-l); }

@media (max-width: 759px) {
  .op-root { padding: 22px 16px 60px; }
  .op-head { padding: 22px 20px; }
  .op-head-top { gap: 14px; }
  .op-mark { width: 60px; height: 60px; }
  .op-mark span { font-size: 28px; }
  .op-name { font-size: 26px; }
  .op-conseq { padding: 20px; }
  .op-conseq-head { font-size: 22px; }
  .op-arcs-grid { grid-template-columns: 1fr; }
}
/* ===== end WAVE 6 (re-scoped) · OWN PROFILE ===== */

/* =====================================================================
   W6.5 · SOCIAL SURFACES — discovery (#commons) / other-profile
   (#reader) / interact (#walk) + own-profile publish control. Namespaced
   .dsc-/.otp-/.itx-/.soc- + .op-pub-* additions; --lum-* tokens only,
   composed on .lum-glass. Desktop-first; one max-width:759 step-down.
   ===================================================================== */

/* ---- shared ---- */
.soc-signin { max-width: 840px; margin: 0 auto; padding: 60px 20px 80px; text-align: center; }
.soc-signin .op-name { display: block; margin: 0 0 10px; }
.soc-signin .op-arcs-sub { margin: 0 auto 20px; }
.soc-badge { font-family: var(--lum-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--lum-gold-l); border: 1px solid var(--lum-glass-bd); border-radius: var(--lum-r-pill); padding: 2px 8px; white-space: nowrap; }
.soc-marks { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.soc-marks-empty { min-height: 26px; }

/* ---- discovery (#commons) ---- */
.dsc-root { max-width: 900px; margin: 0 auto; padding: 34px 20px 70px; }
.dsc-head { margin: 0 0 24px; }
.dsc-head .eyebrow { font-family: var(--lum-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lum-ink-3); margin: 0 0 8px; }
.dsc-h1 { font-family: var(--lum-serif); font-weight: 600; font-size: 34px; color: var(--lum-ink); line-height: 1.05; margin: 0 0 8px; }
.dsc-sub { font-family: var(--lum-sans); font-size: 14px; color: var(--lum-ink-3); margin: 0 0 16px; max-width: 560px; }
.dsc-turn { font-family: var(--lum-sans); font-size: 12.5px; font-weight: 600; color: var(--lum-gold-ink); background: linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border: none; border-radius: var(--lum-r-pill); padding: 9px 18px; cursor: pointer; }
.dsc-turn:hover { box-shadow: 0 0 18px -6px rgba(255,206,74,.6); }
.dsc-field { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dsc-status { font-family: var(--lum-sans); font-size: 13px; color: var(--lum-ink-3); grid-column: 1 / -1; }
.dsc-empty { grid-column: 1 / -1; padding: 34px 28px; text-align: center; }
.dsc-empty-h { font-family: var(--lum-serif); font-style: italic; font-size: 18px; color: var(--lum-ink-2); margin: 0; }
.dsc-card { display: flex; gap: 16px; align-items: stretch; padding: 16px 18px; text-decoration: none; }
.dsc-card:hover { border-color: var(--lum-glass-bd); }
.dsc-thumb { flex: none; width: 96px; min-height: 64px; align-content: center; justify-content: center; border-radius: 12px; background: rgba(28,18,9,.32); border: 1px solid var(--lum-glass-bd-2); padding: 8px; }
.dsc-thumb.soc-marks-empty { display: block; }
.dsc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dsc-titlerow { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.dsc-title { font-family: var(--lum-serif); font-weight: 600; font-size: 20px; color: var(--lum-ink); line-height: 1.12; margin: 0; }
.dsc-who { font-family: var(--lum-serif); font-style: italic; font-size: 14px; color: var(--lum-ink-2); margin: 4px 0 0; }
.dsc-meta { font-family: var(--lum-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--lum-ink-4); margin-top: auto; padding-top: 10px; }

/* ---- other-profile (#reader) ---- */
.otp-root { max-width: 840px; margin: 0 auto; padding: 34px 20px 70px; }
.otp-back, .itx-back { display: inline-block; font-family: var(--lum-sans); font-size: 12.5px; color: var(--lum-ink-3); text-decoration: none; margin: 0 0 18px; }
.otp-back:hover, .itx-back:hover { color: var(--lum-gold-l); }
.otp-hero { display: flex; align-items: center; gap: 20px; padding: 26px 28px; margin: 0 0 24px; }
.otp-mark { flex: none; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lum-grad, linear-gradient(140deg,#b8841f,#27566a)); color: var(--lum-ink); font-family: var(--lum-serif); font-size: 26px; box-shadow: inset 0 0 0 1px var(--lum-glass-bd); }
.otp-id { flex: 1; min-width: 0; }
.otp-name { font-family: var(--lum-serif); font-weight: 600; font-size: 27px; color: var(--lum-ink); line-height: 1.05; margin: 0; }
.otp-tag { font-family: var(--lum-serif); font-style: italic; font-size: 15px; color: var(--lum-ink-2); margin: 4px 0 0; }
.otp-follow { margin-top: 12px; font-family: var(--lum-sans); font-size: 12.5px; font-weight: 600; color: var(--lum-gold-ink); background: linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border: none; border-radius: var(--lum-r-pill); padding: 8px 16px; cursor: pointer; }
.otp-follow:hover { box-shadow: 0 0 18px -6px rgba(255,206,74,.6); }
.otp-follow.is-on { color: var(--lum-ink-2); background: none; border: 1px solid var(--lum-glass-bd); }
.otp-follow[disabled] { opacity: .55; cursor: default; }
.otp-status { font-family: var(--lum-sans); font-size: 13px; color: var(--lum-ink-3); }
.otp-arcs-head, .itx-arclevel-head { font-family: var(--lum-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lum-ink-3); margin: 0 0 14px; }
.otp-arcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* ---- interact (#walk) ---- */
.itx-root { max-width: 760px; margin: 0 auto; padding: 34px 20px 70px; }
.itx-head { margin: 0 0 22px; }
.itx-head .eyebrow { font-family: var(--lum-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lum-ink-3); margin: 0 0 8px; }
.itx-titlerow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.itx-title { font-family: var(--lum-serif); font-weight: 600; font-size: 32px; color: var(--lum-ink); line-height: 1.06; margin: 0; }
.itx-who { font-family: var(--lum-serif); font-style: italic; font-size: 16px; color: var(--lum-ink-2); margin: 6px 0 0; }
.itx-author-link { color: var(--lum-gold-l); text-decoration: none; }
.itx-author-link:hover { text-decoration: underline; }
.itx-meta { font-family: var(--lum-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--lum-ink-4); margin: 10px 0 0; }
.itx-subs { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; }
.itx-sub { display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--lum-glass-bd-2); border-radius: var(--lum-r-card); background: rgba(28,18,9,.28); }
.itx-sub-mark { flex: none; padding-top: 2px; }
.itx-sub-body-wrap { flex: 1; min-width: 0; }
.itx-sub-head { font-family: var(--lum-serif); font-weight: 600; font-size: 20px; color: var(--lum-ink); line-height: 1.15; margin: 0; }
.itx-sub-body { font-family: var(--lum-serif); font-size: 17px; line-height: 1.55; color: var(--lum-ink-2); margin: 8px 0 0; }
.itx-thread { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.itx-thread-empty { font-family: var(--lum-sans); font-size: 12px; color: var(--lum-ink-4); font-style: italic; margin: 0; }
.itx-arclevel { margin: 0 0 24px; }
.itx-contrib { padding: 12px 14px; border: 1px solid var(--lum-glass-bd-2); border-radius: 12px; background: rgba(20,12,5,.3); border-left: 2px solid var(--lum-glass-bd); }
.itx-contrib-question { border-left-color: var(--lum-rose); }
.itx-contrib-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.itx-contrib-tag { font-family: var(--lum-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--lum-ink-3); }
.itx-contrib-question .itx-contrib-tag { color: var(--lum-rose); }
.itx-contrib-from { font-family: var(--lum-sans); font-size: 12px; color: var(--lum-ink-2); font-weight: 600; }
.itx-contrib-body { font-family: var(--lum-serif); font-size: 16px; line-height: 1.5; color: var(--lum-ink-2); margin: 0; }
.itx-status { font-family: var(--lum-sans); font-size: 13px; color: var(--lum-ink-3); }
.itx-gone { padding: 34px 28px; text-align: center; }
.itx-gone-h { font-family: var(--lum-serif); font-style: italic; font-size: 18px; color: var(--lum-ink-2); margin: 0 0 12px; }
.itx-gone-link { font-family: var(--lum-sans); font-size: 13px; color: var(--lum-gold-l); text-decoration: none; }

/* interact composer */
.itx-composer { padding: 20px 22px; margin: 8px 0 0; }
.itx-composer-head { font-family: var(--lum-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lum-ink-3); margin: 0 0 14px; }
.itx-composer-modes { display: inline-flex; border: 1px solid var(--lum-glass-bd); border-radius: var(--lum-r-pill); padding: 3px; background: rgba(255,255,255,.06); margin: 0 0 12px; }
.itx-mode { font-family: var(--lum-sans); font-size: 12px; font-weight: 500; color: var(--lum-ink-3); background: none; border: none; border-radius: var(--lum-r-pill); padding: 6px 14px; cursor: pointer; }
.itx-mode.is-on { color: var(--lum-gold-ink); background: linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); font-weight: 600; }
.itx-target { display: block; width: 100%; font-family: var(--lum-sans); font-size: 13px; color: var(--lum-ink); background: rgba(20,12,5,.4); border: 1px solid var(--lum-glass-bd-2); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.itx-field { display: block; width: 100%; box-sizing: border-box; font-family: var(--lum-serif); font-size: 16px; color: var(--lum-ink); background: rgba(20,12,5,.4); border: 1px solid var(--lum-glass-bd-2); border-radius: 12px; padding: 12px 14px; resize: vertical; min-height: 72px; }
.itx-field::placeholder { color: var(--lum-ink-4); }
.itx-identity { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.itx-identity-label { font-family: var(--lum-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lum-ink-3); }
.itx-identity-btn { font-family: var(--lum-sans); font-size: 12px; color: var(--lum-ink-2); background: rgba(28,18,9,.5); border: 1px solid var(--lum-glass-bd-2); border-radius: var(--lum-r-pill); padding: 5px 12px; cursor: pointer; }
.itx-identity-btn:hover { border-color: var(--lum-glass-bd); }
.itx-identity-chosen { font-family: var(--lum-sans); font-size: 12px; color: var(--lum-ink-3); }
.itx-composer-actions { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
.itx-send { font-family: var(--lum-sans); font-size: 12.5px; font-weight: 600; color: var(--lum-gold-ink); background: linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border: none; border-radius: var(--lum-r-pill); padding: 9px 20px; cursor: pointer; }
.itx-send:hover { box-shadow: 0 0 18px -6px rgba(255,206,74,.6); }
.itx-send[disabled] { opacity: .55; cursor: default; }
.itx-send-note { font-family: var(--lum-sans); font-size: 12px; color: var(--lum-ink-3); }

/* ---- own-profile publish control (2D) ---- */
.op-arc-cell { display: flex; flex-direction: column; gap: 8px; }
.op-follows { margin-top: 10px; font-family: var(--lum-sans); font-size: 12.5px; color: var(--lum-ink-3); }
.op-pub { display: flex; flex-direction: column; gap: 8px; padding: 0 2px; }
.op-pub-status { font-family: var(--lum-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lum-gold-l); }
.op-pub-btn { align-self: flex-start; font-family: var(--lum-sans); font-size: 12px; color: var(--lum-ink-2); background: rgba(28,18,9,.5); border: 1px solid var(--lum-glass-bd-2); border-radius: var(--lum-r-pill); padding: 6px 14px; cursor: pointer; }
.op-pub-btn:hover { color: var(--lum-ink); border-color: var(--lum-glass-bd); }

/* ── FINISH-CHOREO S1 · the shared publish ceremony + unpublish confirm overlay.
   Fade the scrim, slide the panel; kit tokens only; NO scale() (P9 mobile-canon
   motion restraint); reduced-motion collapses to instant. Ground-adaptive tokens
   so the panel sits correctly over a light OR dark route. ── */
.pub-ceremony-scrim {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10045;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim, rgba(18,13,8,.58));
  opacity: 0; transition: opacity var(--dur-gentle) var(--ease-standard);
}
.pub-ceremony-scrim.is-open { opacity: 1; }
.pub-ceremony-panel {
  width: 100%; max-width: 420px; box-sizing: border-box;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); padding: 22px 22px 18px;
  transform: translateY(16px);
  transition: transform var(--dur-gentle) var(--ease-emphasis);
}
.pub-ceremony-scrim.is-open .pub-ceremony-panel { transform: translateY(0); }
.pub-ceremony-title { font-family: var(--font-serif); font-size: 20px; color: var(--ink); margin: 0 0 14px; }
.pub-ceremony-gate { font-family: var(--font-body); font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 18px; }
.pub-ceremony-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.pub-ceremony-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); min-width: 74px; }
.pub-ceremony-seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pub-ceremony-seg-btn { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-2); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer; }
.pub-ceremony-seg-btn.is-on { color: var(--text-on-dark); background: var(--gold); border-color: var(--gold); }
.pub-ceremony-hint { font-family: var(--font-body); font-size: 12px; color: var(--ink-3); line-height: 1.45; margin: 2px 0 14px; }
.pub-ceremony-sweep { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); background: var(--wash); border-radius: var(--radius-sm); padding: 9px 12px; margin: 0 0 18px; }
.pub-ceremony-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-ceremony-confirm { font-family: var(--font-body); font-size: 13px; color: var(--text-on-dark); background: var(--grad); border: none; border-radius: var(--radius-pill); padding: 9px 18px; cursor: pointer; }
.pub-ceremony-confirm:disabled { opacity: .6; cursor: default; }
.pub-ceremony-cancel { font-family: var(--font-body); font-size: 13px; color: var(--ink-2); background: transparent; border: none; padding: 9px 8px; cursor: pointer; }
.pub-ceremony-note { font-family: var(--font-body); font-size: 12px; color: var(--ink-3); }
.pub-confirm-copy { font-family: var(--font-body); font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 18px; }
/* quiet, not an alarm register (Preston): the Unpublish button is a soft filled
   button, not danger-red. */
.pub-confirm-yes { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
  .pub-ceremony-scrim, .pub-ceremony-panel { transition: none; }
}

/* ── FINISH-CHOREO S2 · THE THRESHOLD. A1 (ruled): reuses the _pubOverlay scrim/Esc/
   backdrop/fade+slide engine with a DISTINCT QUIET FULL-SCREEN skin -- not a scaled-up
   publish card. Two moves only (P9): opacity fade on the shared scrim + translateY slide
   on the panel; NO scale() on any viewport; reduced-motion collapses to instant. Kit
   tokens; ground-adaptive (--surface/--ink) so it sits over a light OR dark route. ── */
.threshold-panel {
  align-self: stretch; flex: 1 1 auto; width: 100%; max-width: none;
  box-sizing: border-box; border: 0; border-radius: 0; box-shadow: none;
  background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom));
  transform: translateY(18px);
  transition: transform var(--dur-gentle) var(--ease-emphasis);
}
.pub-ceremony-scrim.is-open .threshold-panel { transform: translateY(0); }
.threshold-inner { width: 100%; max-width: 560px; margin: 0 auto; }
.threshold-sweep {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding: 0 0 24px; margin: 0 0 10px; border-bottom: 1px solid var(--border);
}
.threshold-sweep-col { flex: 1 1 160px; min-width: 0; }
.threshold-sweep-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px;
}
.threshold-sweep-list { list-style: none; margin: 0; padding: 0; }
.threshold-sweep-item {
  font-family: var(--font-body); font-size: 13px; color: var(--ink-2);
  line-height: 1.45; padding: 2px 0; word-break: break-word;
}
.threshold-sweep-item.is-none { color: var(--ink-3); font-style: italic; }
.threshold-question {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 5vw, 40px);
  line-height: 1.15; color: var(--ink); margin: 8px 0 0;
}
.threshold-question-unnamed { color: var(--ink-3); }
.threshold-ask {
  font-family: var(--font-body); font-size: 15px; color: var(--ink-2);
  line-height: 1.5; margin: 16px 0 22px;
}
.threshold-input {
  width: 100%; box-sizing: border-box; font-family: var(--font-serif); font-size: 18px;
  color: var(--ink); background: transparent; border: none;
  border-bottom: 1px solid var(--border); border-radius: 0; padding: 8px 2px; outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.threshold-input::placeholder { color: var(--ink-3); }
.threshold-input:focus { border-bottom-color: var(--gold); }
.threshold-note {
  font-family: var(--font-body); font-size: 12px; color: var(--ink-3);
  line-height: 1.45; margin: 8px 0 0;
}
.threshold-actions { display: flex; align-items: center; gap: 12px; margin: 30px 0 0; }
.threshold-finish {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* P3 tap target */
  font-family: var(--font-body); font-size: 14px; color: var(--text-on-dark);
  background: var(--grad); border: none; border-radius: var(--radius-pill);
  padding: 0 26px; cursor: pointer;
}
.threshold-notyet {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* P3 tap target */
  font-family: var(--font-body); font-size: 14px; color: var(--ink-2);
  background: transparent; border: none; padding: 0 12px; cursor: pointer;
}
.threshold-notyet:hover { color: var(--ink); }
.threshold-finish:focus-visible, .threshold-notyet:focus-visible,
.threshold-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 759px) {
  .threshold-panel { padding: 15vh 20px calc(28px + env(safe-area-inset-bottom)); justify-content: flex-start; }
  .threshold-sweep { gap: 18px; }
  .threshold-input { font-size: 16px; } /* iOS focus-zoom guard (P7) */
}
@media (prefers-reduced-motion: reduce) { .threshold-panel { transition: none; } }

/* S2: the standing st-room-threshold label becomes the reader's answering line when set --
   a quiet serif sentence that wraps, dropping the mono-uppercase eyebrow + gild rule-lines
   (the reader's own line now stands at the threshold). */
.st-page.lum-amber-deep .st-room-threshold.has-answer {
  display: block; font-family: var(--lum-serif); font-style: italic; font-size: 16px;
  letter-spacing: 0; text-transform: none; color: var(--lum-ink-2); line-height: 1.5;
}
.st-page.lum-amber-deep .st-room-threshold.has-answer::before,
.st-page.lum-amber-deep .st-room-threshold.has-answer::after { content: none; display: none; }
.op-pub-unpub:hover { border-color: rgba(255,142,142,.4); color: var(--lum-rose); }
.op-pub-panel { display: none; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--lum-glass-bd-2); border-radius: 12px; background: rgba(20,12,5,.35); }
.op-pub-panel.is-open { display: flex; }
.op-pub-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-pub-label { font-family: var(--lum-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lum-ink-3); min-width: 80px; }
.op-pub-seg { display: inline-flex; border: 1px solid var(--lum-glass-bd); border-radius: var(--lum-r-pill); padding: 3px; background: rgba(255,255,255,.06); }
.op-pub-seg-btn { font-family: var(--lum-sans); font-size: 11.5px; color: var(--lum-ink-3); background: none; border: none; border-radius: var(--lum-r-pill); padding: 5px 12px; cursor: pointer; }
.op-pub-seg-btn.is-on { color: var(--lum-gold-ink); background: linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); font-weight: 600; }
.op-pub-hint { font-family: var(--lum-sans); font-size: 11.5px; color: var(--lum-ink-4); margin: 0; line-height: 1.4; }
.op-pub-confirm { align-self: flex-start; font-family: var(--lum-sans); font-size: 12px; font-weight: 600; color: var(--lum-gold-ink); background: linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); border: none; border-radius: var(--lum-r-pill); padding: 8px 16px; cursor: pointer; }
.op-pub-confirm[disabled] { opacity: .55; cursor: default; }
.op-pub-note { font-family: var(--lum-sans); font-size: 11.5px; color: var(--lum-ink-3); }

/* ---- mobile step-down (<760) ---- */
@media (max-width:759px) {
  .dsc-root, .otp-root, .itx-root { padding: 22px 16px 60px; }
  .dsc-field, .otp-arcs-grid { grid-template-columns: 1fr; }
  .dsc-card { flex-direction: column; }
  .dsc-thumb { width: 100%; }
  .dsc-h1 { font-size: 28px; }
  .itx-title { font-size: 26px; }
  .otp-hero { flex-direction: column; text-align: center; }
  .otp-id { text-align: center; }
}
/* ===== end W6.5 SOCIAL SURFACES ===== */

/* =============================================================================
   W9 · THE INTRO JOURNEY (Part A) — first-run guided walk.
   Body-level overlay (.intro-journey carries .lum-amber for the atmosphere).
   All selectors scoped under .intro-journey to guarantee zero bleed; every
   colour is a live token, or the documented Lumen rgba-of-token wash
   (rgba(255,206,74,x)=--lum-gold · rgba(127,208,240,x)=--lum-cyan ·
   rgba(255,255,255,x)=Lumen glass idiom · rgba(46,138,147,x)=--teal ·
   rgba(125,109,176,x)=--register-journal · rgba(154,126,78,x)=--meta ·
   rgba(35,23,8,x)=--lum-base · rgba(207,156,42,x)=--lum-gold-d). Bright sims use
   ground-stable tokens (--page/--page-2/--br-deep/--meta/--teal) since --ink is
   re-pointed under [data-ground=dark].
   ============================================================================= */
.intro-journey{ position:fixed; inset:0; z-index:10060; overflow-y:auto; -webkit-overflow-scrolling:touch; color:var(--lum-ink); font-family:var(--lum-sans); font-weight:300; }
.intro-journey ::selection{ background:rgba(255,206,74,.25); }
.intro-journey :focus-visible{ outline:1.5px solid var(--lum-cyan); outline-offset:3px; border-radius:8px; }
.intro-journey button{ font-family:inherit; }

.intro-journey .ij-stage{ max-width:560px; min-height:100%; margin:0 auto; padding:64px 24px 200px; box-sizing:border-box; }

/* staggered reveals */
.intro-journey .ij-a{ opacity:0; transform:translateY(16px); animation:ij-up .7s cubic-bezier(.22,.8,.28,1) forwards; }
.intro-journey .ij-a1{ animation-delay:.05s; } .intro-journey .ij-a2{ animation-delay:.16s; }
.intro-journey .ij-a3{ animation-delay:.3s; } .intro-journey .ij-a4{ animation-delay:.44s; }
@keyframes ij-up{ to{ opacity:1; transform:none; } }

/* back chevron */
.intro-journey .ij-backchev{ position:fixed; top:20px; left:18px; z-index:2; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--lum-glass-bd-2); color:var(--lum-ink-2); font-size:17px; line-height:1; cursor:pointer; transition:border-color .25s,color .25s; }
.intro-journey .ij-backchev:hover{ border-color:var(--lum-glass-bd); color:var(--lum-ink); }
.intro-journey .ij-backchev[disabled]{ opacity:0; pointer-events:none; }

/* hero constellation (welcome / release) */
.intro-journey .ij-appmark{ width:104px; height:104px; margin:8px auto 30px; border-radius:26px; background:rgba(255,255,255,.06); border:1px solid var(--lum-glass-bd); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 50px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
.intro-journey .ij-cluster{ position:relative; width:96px; height:96px; }
.intro-journey .ij-breathe{ animation:ij-breathe 5.5s ease-in-out infinite; transform-origin:center; }
@keyframes ij-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.intro-journey .ij-threads{ position:absolute; inset:0; overflow:visible; }
.intro-journey .ij-threads line{ stroke:rgba(255,206,74,.5); stroke-width:1; }
.intro-journey .ij-threads .ij-thread-y{ stroke:rgba(127,208,240,.55); }
.intro-journey .ij-n{ position:absolute; }
.intro-journey .ij-n-a{ left:36px; top:14px; }
.intro-journey .ij-n-b{ left:15px; top:51px; }
.intro-journey .ij-n-c{ left:59px; top:45px; }
.intro-journey .ij-n-y{ left:40px; top:62px; color:var(--lum-cyan); }

/* titles / lede / Yumi voice */
.intro-journey .ij-h1{ font-family:var(--lum-serif); font-weight:600; font-size:clamp(34px,7vw,46px); letter-spacing:-.015em; line-height:1.06; text-align:center; color:var(--lum-ink); }
.intro-journey .ij-h1 em{ font-style:italic; font-weight:500; color:var(--lum-gold-l); }
.intro-journey .ij-lede{ max-width:400px; margin:16px auto 0; text-align:center; font-size:16px; line-height:1.6; color:var(--lum-ink-2); }
.intro-journey .ij-yumi-line{ max-width:420px; margin:22px auto 0; text-align:center; font-family:var(--lum-serif); font-style:italic; font-size:18px; line-height:1.55; color:var(--lum-cyan); }
.intro-journey .ij-crest{ display:inline-block; vertical-align:-3px; margin-right:8px; color:var(--lum-cyan); }
.intro-journey .ij-crest svg{ display:inline-block; vertical-align:middle; }

/* covenant feature rows */
.intro-journey .ij-featrows{ max-width:430px; margin:34px auto 0; display:flex; flex-direction:column; gap:26px; text-align:left; }
.intro-journey .ij-featrow{ display:flex; gap:16px; align-items:flex-start; }
.intro-journey .ij-fico{ flex:none; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--lum-glass-bd-2); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.intro-journey .ij-fico svg{ width:22px; height:22px; stroke:var(--lum-gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.intro-journey .ij-ft{ font-size:15px; font-weight:600; color:var(--lum-ink); letter-spacing:-.01em; }
.intro-journey .ij-fd{ font-size:13.5px; line-height:1.55; color:var(--lum-ink-3); margin-top:3px; }
.intro-journey .ij-fd i{ font-family:var(--lum-serif); font-style:italic; color:var(--lum-cyan); font-size:14px; }

/* stance rows */
.intro-journey .ij-stances{ display:flex; flex-direction:column; gap:12px; max-width:430px; margin:32px auto 0; }
.intro-journey .ij-stance{ text-align:left; display:flex; gap:14px; align-items:center; background:rgba(255,255,255,.05); border:1px solid var(--lum-glass-bd-2); border-radius:16px; padding:15px 18px; cursor:pointer; color:var(--lum-ink-2); font-size:13.5px; line-height:1.45; transition:border-color .3s,background .3s; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); font-family:var(--lum-sans); }
.intro-journey .ij-stance b{ display:block; font-size:15.5px; font-weight:600; color:var(--lum-ink); letter-spacing:-.01em; margin-bottom:2px; }
.intro-journey .ij-ring{ flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--lum-glass-bd); position:relative; transition:border-color .25s; }
.intro-journey .ij-stance:hover{ border-color:var(--lum-glass-bd); }
.intro-journey .ij-stance.is-picked{ border-color:var(--lum-cyan); background:rgba(127,208,240,.08); }
.intro-journey .ij-stance.is-picked b{ color:var(--lum-cyan); }
.intro-journey .ij-stance.is-picked .ij-ring{ border-color:var(--lum-cyan); }
.intro-journey .ij-stance.is-picked .ij-ring::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--lum-cyan); }

/* guided-act simulated surfaces */
.intro-journey .ij-actkick{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--lum-gold-d); text-align:center; margin-bottom:12px; }
.intro-journey .ij-acttitle{ font-family:var(--lum-serif); font-weight:600; font-size:clamp(27px,5.4vw,34px); letter-spacing:-.015em; line-height:1.1; text-align:center; color:var(--lum-ink); margin-bottom:22px; }
.intro-journey .ij-sim{ max-width:520px; margin:0 auto; border-radius:22px; overflow:hidden; border:1px solid var(--lum-glass-bd-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 55px rgba(0,0,0,.45); }
.intro-journey .ij-sim-bar{ display:flex; justify-content:space-between; align-items:center; padding:11px 18px; background:rgba(255,255,255,.05); border-bottom:1px solid var(--lum-glass-bd-2); }
.intro-journey .ij-sim-bar .t{ font-family:var(--lum-serif); font-style:italic; font-size:15px; color:var(--lum-gold-l); }
.intro-journey .ij-sim-bar .live{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lum-ink-4); }
.intro-journey .ij-sim-body{ padding:24px 22px 26px; min-height:190px; }
.intro-journey .ij-sim.is-dark .ij-sim-body{ background:var(--lum-base); }
.intro-journey .ij-sim.is-bright .ij-sim-body{ background:linear-gradient(170deg,var(--page-2),var(--page)); color:var(--br-deep); }
.intro-journey .ij-sim.is-bright .ij-sim-bar{ background:var(--page-2); border-bottom-color:var(--line-page); }
.intro-journey .ij-sim.is-bright .ij-sim-bar .t{ color:var(--br-deep); }
.intro-journey .ij-sim.is-bright .ij-sim-bar .live{ color:var(--meta); }

/* shelf act */
.intro-journey .ij-shelf-empty{ border:1px dashed rgba(255,206,74,.3); border-radius:16px; padding:26px 20px; text-align:center; color:var(--lum-ink-3); font-size:13.5px; line-height:1.6; }
.intro-journey .ij-shelf-empty .big{ font-family:var(--lum-serif); font-style:italic; font-size:19px; color:var(--lum-ink-2); display:block; margin-bottom:6px; }
.intro-journey .ij-bookrow{ display:flex; gap:12px; align-items:flex-end; min-height:110px; justify-content:center; }
.intro-journey .ij-spine{ width:86px; height:124px; border-radius:8px 11px 11px 8px; position:relative; background:linear-gradient(165deg,var(--lum-cloth),var(--lum-base)); border:1px solid rgba(255,206,74,.32); display:flex; align-items:flex-end; padding:9px 8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(0,0,0,.4); animation:ij-shelfin .7s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ij-shelfin{ from{ opacity:0; transform:translateY(16px) scale(.92); } to{ opacity:1; transform:none; } }
.intro-journey .ij-spine i{ font-family:var(--lum-serif); font-style:italic; font-weight:500; font-size:11px; line-height:1.25; color:var(--lum-ink-2); }
.intro-journey .ij-spine::before{ content:''; position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--lum-gold); box-shadow:0 0 8px rgba(255,206,74,.9); }

/* margin act (bright) */
.intro-journey .ij-margin-wrap{ display:flex; border-radius:16px; overflow:hidden; border:1px solid var(--line-page); }
.intro-journey .ij-margin-page{ flex:1.3; background:var(--page); padding:18px 20px; font-family:var(--lum-serif); font-size:15px; line-height:1.7; color:var(--br-deep); }
.intro-journey .ij-margin-page .bt{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); margin-bottom:8px; }
.intro-journey .ij-margin-side{ flex:1; background:var(--page-2); border-left:1px dashed rgba(46,138,147,.4); padding:16px; display:flex; flex-direction:column; gap:10px; }
.intro-journey .ij-regs{ display:flex; gap:8px; }
.intro-journey .ij-reg{ flex:1; font-family:var(--lum-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:6px 0; border-radius:999px; border:1px solid; background:none; cursor:pointer; transition:background .25s,border-color .25s; }
.intro-journey .ij-reg.is-m{ color:var(--teal); border-color:rgba(46,138,147,.45); }
.intro-journey .ij-reg.is-j{ color:var(--register-journal); border-color:rgba(125,109,176,.45); }
.intro-journey .ij-reg.is-on.is-m{ background:rgba(46,138,147,.12); border-color:var(--teal); }
.intro-journey .ij-reg.is-on.is-j{ background:rgba(125,109,176,.12); border-color:var(--register-journal); }
.intro-journey .ij-margin-side textarea{ width:100%; min-height:84px; resize:vertical; background:var(--page-2); border:1px solid var(--line-page-2); border-radius:12px; padding:10px 12px; font-family:var(--lum-serif); font-style:italic; font-size:14.5px; line-height:1.5; color:var(--br-deep); outline:none; box-sizing:border-box; }
.intro-journey .ij-keepnote{ align-self:flex-end; background:var(--br-deep); color:var(--page); border:none; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:500; cursor:pointer; font-family:var(--lum-sans); }
.intro-journey .ij-notecard{ background:var(--page-2); border:1px solid rgba(46,138,147,.4); border-left:3px solid var(--teal); border-radius:12px; padding:12px 14px; font-family:var(--lum-serif); font-style:italic; font-size:14.5px; line-height:1.55; color:var(--br-deep); animation:ij-shelfin .5s; }
.intro-journey .ij-notecard.is-j{ border-color:rgba(125,109,176,.4); border-left-color:var(--register-journal); }
.intro-journey .ij-notecard .nr{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-style:normal; margin-bottom:5px; }
.intro-journey .ij-notecard.is-j .nr{ color:var(--register-journal); }

/* what-she-sees act (bright) */
.intro-journey .ij-sees-list{ display:flex; flex-direction:column; }
.intro-journey .ij-sees-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid rgba(154,126,78,.28); }
.intro-journey .ij-sees-row:last-child{ border-bottom:none; }
.intro-journey .ij-sees-row .l{ font-size:13px; color:var(--meta); line-height:1.5; }
.intro-journey .ij-sees-row .l b{ display:block; font-size:15px; font-weight:600; color:var(--br-deep); letter-spacing:-.01em; }
.intro-journey .ij-pill{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.intro-journey .ij-pill.is-vis{ color:var(--teal); border:1px solid rgba(46,138,147,.45); }
.intro-journey .ij-memchips{ display:flex; gap:8px; }
.intro-journey .ij-memchip{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:6px 13px; border-radius:999px; border:1px solid rgba(154,126,78,.45); background:none; color:var(--meta); cursor:pointer; transition:border-color .25s,color .25s,background .25s; }
.intro-journey .ij-memchip.is-on{ border-color:var(--teal); color:var(--teal); background:rgba(46,138,147,.08); }

/* Yumi guide dock (solid — no blur, per the overlay-chrome guardrail) */
.intro-journey .ij-dock{ max-width:520px; margin:18px auto 0; background:rgba(35,23,8,.92); border:1px solid rgba(127,208,240,.38); border-radius:20px; padding:15px 18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 40px rgba(0,0,0,.4); }
.intro-journey .ij-dock-line{ display:flex; gap:11px; align-items:flex-start; }
.intro-journey .ij-dock .ij-crest{ margin-top:2px; flex:none; margin-right:0; }
.intro-journey .ij-dock-words{ font-family:var(--lum-serif); font-style:italic; font-size:17px; line-height:1.55; color:var(--lum-cyan); }
.intro-journey .ij-dock-sub{ margin-top:8px; margin-left:26px; font-size:12.5px; line-height:1.55; color:var(--lum-ink-3); }
.intro-journey .ij-dock-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 2px 26px; }
.intro-journey .ij-dchip{ font-size:13px; color:var(--lum-ink-2); background:rgba(255,255,255,.06); border:1px solid var(--lum-glass-bd-2); border-radius:999px; padding:7px 15px; cursor:pointer; transition:border-color .25s,color .25s; font-family:var(--lum-sans); }
.intro-journey .ij-dchip:hover{ border-color:var(--lum-cyan); color:var(--lum-ink); }
.intro-journey .ij-typein{ display:flex; gap:8px; margin:10px 0 2px 26px; }
.intro-journey .ij-typein input{ flex:1; background:rgba(255,255,255,.06); border:1px solid var(--lum-glass-bd-2); border-radius:12px; padding:10px 15px; font-family:var(--lum-serif); font-style:italic; font-size:15px; color:var(--lum-ink); outline:none; min-width:0; }
.intro-journey .ij-typein input::placeholder{ color:var(--lum-ink-4); }
.intro-journey .ij-typein button{ background:rgba(255,255,255,.08); border:1px solid var(--lum-glass-bd); color:var(--lum-gold); border-radius:12px; padding:10px 16px; font-size:13px; font-weight:500; cursor:pointer; font-family:var(--lum-sans); }
/* R8 (values): the preset-moment value chips — selectable; on-state = gilding
   gold (the reader's own declaration; NOT cyan, which is Yumi-only). Inherits the
   journey's dark ground per the felt pass. */
.intro-journey .ij-vchips{ display:flex; flex-wrap:wrap; gap:9px; max-width:470px; margin:26px auto 4px; }
.intro-journey .ij-vchip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--lum-sans); font-size:13.5px; color:var(--lum-ink-2); background:rgba(255,255,255,.06); border:1px solid var(--lum-glass-bd-2); border-radius:999px; padding:8px 15px; cursor:pointer; transition:border-color .2s,color .2s,background .2s; }
.intro-journey .ij-vchip::before{ content:''; width:8px; height:8px; border-radius:50%; flex:none; background:var(--lum-glass-bd-2); transition:background .2s,box-shadow .2s; }
.intro-journey .ij-vchip:hover{ border-color:var(--lum-gold); color:var(--lum-ink); }
.intro-journey .ij-vchip.is-on{ color:var(--lum-ink); border-color:var(--lum-gold); background:color-mix(in srgb, var(--lum-gold) 14%, transparent); }
.intro-journey .ij-vchip.is-on::before{ background:radial-gradient(circle at 35% 30%, #fff4d6 0%, var(--lum-gold-l, #d9a441) 55%, var(--lum-gold-d, #855410) 100%); box-shadow:0 0 9px rgba(217,164,65,.55); }
.intro-journey .ij-vown{ max-width:470px; margin-left:auto; margin-right:auto; }
@media (max-width:759px){
  .intro-journey .ij-vchip{ min-height:44px; }
  .intro-journey .ij-vown input{ font-size:16px; }
}

/* action area — dots · one primary · one quiet link */
.intro-journey .ij-actionbar{ position:fixed; left:0; right:0; bottom:0; z-index:2; padding:14px 24px calc(20px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,rgba(35,23,8,.94) 46%); display:flex; flex-direction:column; align-items:center; gap:13px; }
.intro-journey .ij-dots{ display:flex; gap:7px; }
.intro-journey .ij-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,206,74,.22); cursor:pointer; transition:background .3s,box-shadow .3s; border:none; padding:0; }
.intro-journey .ij-dot.is-on{ background:var(--lum-gold); box-shadow:0 0 8px rgba(255,206,74,.7); }
.intro-journey .ij-primary{ width:min(360px,100%); padding:16px 0; border-radius:15px; border:1px solid var(--lum-glass-bd); background:linear-gradient(180deg,var(--lum-gold-l),var(--lum-gold)); color:var(--lum-gold-ink); font-size:16px; font-weight:600; letter-spacing:-.01em; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 30px rgba(207,156,42,.3); transition:transform .2s,filter .2s; font-family:var(--lum-sans); }
.intro-journey .ij-primary:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.intro-journey .ij-primary.is-enter{ background:var(--grad); color:var(--page); border-color:transparent; }
.intro-journey .ij-secondary{ background:none; border:none; cursor:pointer; font-size:13px; font-weight:500; color:var(--lum-ink-3); padding:2px 6px; font-family:var(--lum-sans); }
.intro-journey .ij-secondary:hover{ color:var(--lum-ink-2); }
.intro-journey .ij-secondary:empty{ display:none; }

/* reduced motion — disable reveals + breathe + entrance animations */
@media (prefers-reduced-motion:reduce){
  .intro-journey .ij-a{ animation:none; opacity:1; transform:none; }
  .intro-journey .ij-breathe{ animation:none; }
  .intro-journey .ij-spine{ animation:none; }
  .intro-journey .ij-notecard{ animation:none; }
}

/* mobile 759 reflow */
@media (max-width:759px){
  .intro-journey .ij-stage{ padding:48px 18px 210px; }
  .intro-journey .ij-h1{ font-size:33px; }
  .intro-journey .ij-backchev{ top:14px; left:12px; }
  .intro-journey .ij-margin-wrap{ flex-direction:column; }
  .intro-journey .ij-margin-side{ border-left:none; border-top:1px dashed rgba(46,138,147,.4); }
}
/* =============================================================================
   W9 · INTRO PART B — per-page panels · re-summon · About Orientation bits.
   Panels are body-level, dual-ground per INTROS[i].ground. Bright panels use
   ground-stable tokens (--page/--br-deep/--meta/--teal) so they stay bright on
   dark-ground surfaces. "new" flag is GOLD (mockup's cyan would break the
   cyan=Yumi-only rule). Same rgba-of-token conventions as Part A.
   ============================================================================= */
.intro-panel-wrap{ position:fixed; left:0; right:0; bottom:0; z-index:10005; display:flex; justify-content:center; padding:0 18px calc(20px + env(safe-area-inset-bottom)); pointer-events:none; }
.intro-panel{ pointer-events:auto; position:relative; width:100%; max-width:460px; border-radius:18px; border:1px solid; padding:20px 22px 18px; box-shadow:0 20px 55px rgba(0,0,0,.45); animation:ij-panel-up .5s cubic-bezier(.22,.8,.28,1); }
@keyframes ij-panel-up{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.intro-panel.is-dark{ background:var(--lum-base); border-color:var(--lum-glass-bd); color:var(--lum-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 55px rgba(0,0,0,.5); }
.intro-panel.is-bright{ background:linear-gradient(170deg,var(--page-2),var(--page)); border-color:var(--line-page); color:var(--br-deep); }
.intro-panel-x{ position:absolute; top:9px; right:11px; width:28px; height:28px; border-radius:50%; border:none; background:none; font-size:20px; line-height:1; cursor:pointer; padding:0; }
.intro-panel.is-dark .intro-panel-x{ color:var(--lum-ink-3); }
.intro-panel.is-bright .intro-panel-x{ color:var(--meta); }
.intro-panel-x:hover{ opacity:.65; }
.intro-panel-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:11px; padding-right:26px; }
.intro-panel-name{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.intro-panel.is-dark .intro-panel-name{ color:var(--lum-gold-d); }
.intro-panel.is-bright .intro-panel-name{ color:var(--meta); }
.intro-panel-badge{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid; white-space:nowrap; }
.intro-panel.is-dark .intro-panel-badge{ color:var(--lum-ink-4); border-color:rgba(255,206,74,.2); }
.intro-panel.is-bright .intro-panel-badge{ color:var(--meta); border-color:var(--line-page); }
.intro-panel-title{ font-family:var(--lum-serif); font-weight:500; font-size:21px; line-height:1.25; margin-bottom:8px; }
.intro-panel.is-dark .intro-panel-title{ color:var(--lum-ink); }
.intro-panel.is-bright .intro-panel-title{ color:var(--br-deep); }
.intro-panel-body{ font-size:13px; line-height:1.65; }
.intro-panel.is-dark .intro-panel-body{ color:var(--lum-ink-2); }
.intro-panel.is-bright .intro-panel-body{ color:var(--br-deep); }
.intro-panel-eg{ font-family:var(--lum-serif); font-style:italic; font-size:13px; line-height:1.5; margin-top:12px; padding-top:10px; border-top:1px dashed; }
.intro-panel.is-dark .intro-panel-eg{ color:var(--lum-gold-l); border-top-color:rgba(255,206,74,.18); }
.intro-panel.is-bright .intro-panel-eg{ color:var(--teal); border-top-color:rgba(46,138,147,.3); }
.intro-panel-foot{ font-family:var(--lum-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; margin-top:12px; opacity:.55; }

/* "new" / tag flags — GOLD (not the mockup's cyan; cyan is Yumi-only) */
.intro-new{ font-family:var(--lum-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:2px; color:var(--gold-ink); border:1px solid var(--border-2); }
.intro-panel.is-dark .intro-new{ color:var(--lum-gold-l); border-color:rgba(255,206,74,.35); }
.intro-tag{ font-family:var(--lum-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }

/* R-POLISH B1 · AMB-1 -- the .intro-summon re-summon control is RETIRED (its
   rules, its :hover, and its <=759 reposition below). Only the "+" create door
   and the Yumi flower may float. Its content lives in About's "Re-enter a page"
   section, built from the same INTROS source (js/intros.js PART B). */

/* About Orientation additions (bright About ground; theme + lum font tokens) */
/* W10: re-scoped from the retired .about-panel switcher to .about -- these
   style the buildAboutOrientation card, now placed in the .orientation frame. */
.about .intro-eg{ font-family:var(--lum-serif); font-style:italic; color:var(--teal); margin-top:8px; font-size:13.5px; }
.about .intro-retake{ margin-top:12px; display:inline-block; background:var(--grad); color:var(--page); border:none; border-radius:999px; padding:8px 18px; font-family:var(--lum-sans); font-size:13px; font-weight:600; cursor:pointer; }
.about .intro-retake:hover{ filter:brightness(1.05); }

@media (prefers-reduced-motion:reduce){ .intro-panel{ animation:none; } }
@media (max-width:759px){
  .intro-panel-wrap{ padding:0 12px calc(14px + env(safe-area-inset-bottom)); }
  .intro-panel{ max-width:none; }
}
/* ===== end W9 · INTRO JOURNEY (Part A) ===== */

/* ============================================================================
   R8 · VALUE-MARK REGISTER (.vr-*) — the quiet per-object value affordance,
   shared across book detail / sub-theory / arc. Uses a SELF-CONTAINED --vr-* token
   palette (opaque light card + dark ink) declared on .vr-card — the same idiom
   .bk-surface uses with --bk-*. Base --ink AND --lum-ink both resolve to the
   dark-ground LIGHT text on the arc scope (which never re-points them for its
   chrome region), so either would be invisible on a light card (reviewer HOLD,
   1.18:1). A self-contained opaque light card + dark ink makes AA DETERMINISTIC
   (~15:1) on every mount surface, independent of scope-token quirks. All hex is
   confined to the token declaration; rules wire only tokens.
   ============================================================================ */
.vr-card{
  --vr-ink:#241710; --vr-ink-2:#645940; --vr-ink-3:#7c7052;   /* dark ink tiers (AA on --vr-card) */
  --vr-card:#fcf6e8; --vr-field:#fffdf8;                       /* opaque light card + near-white field */
  --vr-line:rgba(36,23,16,.16);                               /* --line-page */
  --vr-gold:#a8761a; --vr-gold-d:#855410; --vr-gold-hi:#d9a441; --vr-gold-ink:#3d2807; --vr-orb-hi:#fff4d6;
  --vr-rose:#b8563f;                                          /* R7 AA-safe rose */
  margin:14px 0; padding:18px 20px; border:1px solid var(--vr-line); border-radius:14px;
  background:var(--vr-card); color:var(--vr-ink); box-shadow:0 6px 22px -14px rgba(120,75,15,.22), inset 0 1px 0 rgba(255,252,243,.7); }
.vr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.vr-h{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-ink-2); }
.vr-sub{ font-family:var(--font-mono); font-size:10px; color:var(--vr-ink-3); }
.vr-marks{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.vr-mark{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:12.5px; color:var(--vr-ink-2);
  border:1px solid var(--vr-line); background:rgba(217,164,65,.08); border-radius:999px; padding:4px 8px 4px 10px; }
.vr-mark.is-editing{ border-color:var(--vr-gold-hi); }
.vr-mark-name{ font:inherit; color:var(--vr-ink); font-weight:500; background:none; border:0; padding:0; cursor:pointer; }
.vr-mark-name:hover{ color:var(--vr-gold-d); }
.vr-mark-x{ font-family:var(--font-mono); font-size:14px; line-height:1; color:var(--vr-ink-3); background:none; border:0; cursor:pointer; padding:0 2px; }
.vr-mark-x:hover{ color:var(--vr-rose); }
.vr-add{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; letter-spacing:.03em;
  color:var(--vr-gold-d); background:transparent; border:1px dashed var(--vr-gold-hi); border-radius:999px; padding:5px 12px; cursor:pointer; }
.vr-add:hover{ background:rgba(217,164,65,.1); }
/* luminous value orb (Universal depth recipe 2; value hue = gilding gold). Hex
   fallbacks so it also renders standalone in the retrofit offer-cards (no .vr-card). */
.vr-orb{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 30%, var(--vr-orb-hi,#fff4d6) 0%, var(--vr-gold-hi,#d9a441) 55%, var(--vr-gold-d,#855410) 100%);
  box-shadow:0 0 8px 1px rgba(217,164,65,.5); }
.vr-orb-soft{ box-shadow:0 0 5px 0 rgba(217,164,65,.4); opacity:.9; }
/* lineage line — a value carried, its "why" strung on a thread */
.vr-line{ display:flex; align-items:flex-start; gap:10px; margin-top:9px; }
.vr-rail{ width:1px; align-self:stretch; margin:3px 0 2px; background:linear-gradient(180deg,var(--vr-gold-d),transparent); flex:none; }
.vr-why{ font-family:var(--font-serif); font-style:italic; font-size:15px; line-height:1.45; color:var(--vr-ink-2); }
.vr-why b{ font-style:normal; font-weight:600; color:var(--vr-gold-d); }
/* inline lineage editor */
.vr-edit{ margin-top:10px; }
.vr-edit-in{ width:100%; font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--vr-ink); background:var(--vr-field);
  border:1px solid var(--vr-line); border-radius:10px; padding:10px 12px; resize:vertical; min-height:52px; box-sizing:border-box; }
.vr-edit-row{ display:flex; gap:8px; margin-top:8px; }
.vr-edit-save,.vr-edit-cancel{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:6px 14px; cursor:pointer; }
.vr-edit-save{ color:var(--vr-gold-ink); border:1px solid var(--vr-gold-d); background:linear-gradient(180deg,var(--vr-gold-hi),var(--vr-gold)); }
.vr-edit-cancel{ color:var(--vr-ink-2); border:1px solid var(--vr-line); background:transparent; }
/* the value picker */
.vr-pick{ margin-top:14px; border-top:1px dashed var(--vr-line); padding-top:14px; }
.vr-pick-lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-ink-2); margin-bottom:10px; }
.vr-pick-empty{ font-family:var(--font-body); font-size:12.5px; color:var(--vr-ink-2); line-height:1.5; }
.vr-whyin{ width:100%; font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--vr-ink); background:var(--vr-field);
  border:1px solid var(--vr-line); border-radius:10px; padding:10px 12px; margin-bottom:10px; box-sizing:border-box; }
.vr-whyin::placeholder{ color:var(--vr-ink-3); font-style:italic; }
.vr-pick-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.vr-opt{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:12.5px; color:var(--vr-ink-2);
  border:1px solid var(--vr-line); background:var(--vr-field); border-radius:999px; padding:5px 12px 5px 10px; cursor:pointer; }
.vr-opt:hover{ border-color:var(--vr-gold-hi); color:var(--vr-ink); }
/* mobile-canon (P1–P9): 44px hit areas · 16px inputs (no iOS zoom) · no h-scroll */
@media (max-width:759px){
  .vr-card{ padding:16px 14px; }
  .vr-mark{ min-height:44px; padding:5px 8px 5px 12px; }
  .vr-mark-name{ display:inline-flex; align-items:center; min-height:44px; }
  .vr-mark-x{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0; }
  .vr-add{ min-height:44px; padding:10px 16px; }
  .vr-opt{ min-height:44px; padding:9px 14px 9px 12px; }
  .vr-edit-save,.vr-edit-cancel{ min-height:44px; padding:11px 18px; }
  .vr-edit-in,.vr-whyin{ font-size:16px; }
}

/* ============================================================================
   R8 · YUMI VALUE RETROFIT — Account (ember ground). Offer-cards; accepting
   adds a DECLARED value (a stone), never a mark. Scoped to .account.lum-amber-
   ember so nothing bleeds; --lum-* palette to match the values section above.
   ============================================================================ */
.account.lum-amber-ember .account-retro{ margin-top:18px; }
.account.lum-amber-ember .account-retro-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--lum-mono); font-size:11px; letter-spacing:.05em;
  color:var(--lum-gold); background:transparent; border:1px dashed var(--lum-gold); border-radius:var(--lum-r-pill); padding:9px 16px; cursor:pointer; transition:background .15s; }
.account.lum-amber-ember .account-retro-btn:hover{ background:color-mix(in srgb, var(--lum-gold) 12%, transparent); }
.account.lum-amber-ember .account-retro-btn:disabled{ opacity:.55; cursor:default; }
.account.lum-amber-ember .account-retro-body{ margin-top:13px; }
.account.lum-amber-ember .account-retro-cov{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.02em; color:var(--lum-ink-4); line-height:1.6; margin-bottom:13px; }
.account.lum-amber-ember .account-retro-loading,
.account.lum-amber-ember .account-retro-empty,
.account.lum-amber-ember .account-retro-error{ font-family:var(--lum-serif); font-style:italic; font-size:15px; color:var(--lum-ink-3); line-height:1.5; padding:6px 0; }
.account.lum-amber-ember .account-retro-error{ color:var(--lum-coral); }
.account.lum-amber-ember .account-retro-card{ border:1px solid var(--lum-glass-bd-2); border-radius:14px;
  background:color-mix(in srgb, var(--lum-ink) 5%, transparent); padding:16px 17px; margin-bottom:12px; }
.account.lum-amber-ember .account-retro-top{ display:flex; align-items:center; gap:10px; }
.account.lum-amber-ember .account-retro-name{ font-family:var(--lum-serif); font-weight:600; font-size:21px; color:var(--lum-ink); }
.account.lum-amber-ember .account-retro-why{ font-family:var(--lum-serif); font-style:italic; font-size:15px; line-height:1.5; color:var(--lum-ink-2); margin:8px 0 9px; }
.account.lum-amber-ember .account-retro-books{ font-family:var(--lum-mono); font-size:10px; letter-spacing:.03em; color:var(--lum-gold); overflow-wrap:anywhere; }
.account.lum-amber-ember .account-retro-acts{ display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.account.lum-amber-ember .account-retro-add,
.account.lum-amber-ember .account-retro-rename,
.account.lum-amber-ember .account-retro-no{ font-family:var(--lum-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  border-radius:var(--lum-r-pill); padding:7px 14px; cursor:pointer; border:1px solid var(--lum-glass-bd-2); background:transparent; color:var(--lum-ink-3); transition:color .15s, border-color .15s; }
.account.lum-amber-ember .account-retro-add{ color:var(--lum-gold-ink, #3d2807); border-color:transparent; background:linear-gradient(180deg, var(--lum-gold-l), var(--lum-gold)); }
.account.lum-amber-ember .account-retro-rename:hover,
.account.lum-amber-ember .account-retro-no:hover{ color:var(--lum-ink); border-color:var(--lum-gold); }
.account.lum-amber-ember .account-retro-renin{ font-family:var(--lum-serif); font-size:20px; color:var(--lum-ink); background:color-mix(in srgb, var(--lum-ink) 6%, transparent); border:1px solid var(--lum-gold); border-radius:8px; padding:2px 10px; outline:none; }
@media (max-width:759px){
  .account.lum-amber-ember .account-retro-btn{ min-height:44px; }
  .account.lum-amber-ember .account-retro-add,
  .account.lum-amber-ember .account-retro-rename,
  .account.lum-amber-ember .account-retro-no{ min-height:44px; padding:11px 16px; }
  .account.lum-amber-ember .account-retro-renin{ font-size:16px; }
}

/* =====================================================================
   R9a — Profile / Galaxy (merged #profile). SHAPE-B v5 contract
   (docs/studio/mockups/profile.html, felt-passed 2026-07-12). Additive,
   self-scoped under .pf-root. The page-scope block re-points the globals to the
   Universal light set (the R5/R3/R7 precedent, components.css:1707-1713) so the
   below-hero content renders LIGHT over the data-ground=dark body, while the
   hero keeps the deep-warm galaxy well (§7 ground spectrum). Tokens-only: fonts
   = --font-serif/body/mono; deep category text = the --field-*-deep ramp
   (theme.css, AA-verified 4.89-7.17:1 on --surface-2); warm shadows = the global
   --shadow-1/2 (AM24). Base rules ARE the desktop-first baseline; the composition
   tier is the @media(min-width:1200px) block at the END (AM3/AM27; the 759/760
   tier is byte-untouched). Ground gradients carry literal stops per the R5 ground
   precedent (a surface paints its own ground).
   ===================================================================== */
.pf-root{
  /* light content set — verbatim from the R5 Arcs light skin (components.css:1707-1713) */
  --ink:#241710; --ink-2:#645940; --ink-3:#978b6d; --ink-4:#978b6d;
  --surface:#fffdf8; --surface-2:#efe7d6; --border:#e3d8c1; --line:#e3d8c1; --line-2:#e3d8c1;
  --gold:#a8761a; --gold-deep:#855410; --gold-hi:#d9a441; --gold-light:#d9a441; --star-gold:#ffce4a;
  --thread:#c2a463;
  /* bright field ramp defended in-scope (its home universal-depth.css is flagged as possibly-failing) */
  --field-1:#f2c25a; --field-2:#e07a52; --field-3:#d98f8a; --field-4:#f5bace; --field-5:#a9b98c;
  --field-6:#98d4b0; --field-7:#8590d8; --field-8:#f8e078; --field-9:#e8b068; --field-10:#b8896c;
  /* hero galaxy well — the deep-warm field stage (§7); mockup values */
  --br-deep:#1c1209; --sunk-d:#241406; --scrim:rgba(15,9,4,.6); --text-on-dark:#f0e3c8;
  --radius:16px;
  min-height:100vh; color:var(--ink); line-height:1.6;
  background-color:#f4efe4;
  background-image:
    radial-gradient(70% 55% at 14% 2%,  rgba(248,228,176,.55) 0%, rgba(248,228,176,0) 60%),
    radial-gradient(62% 52% at 89% 12%, rgba(232,200,135,.42) 0%, rgba(232,200,135,0) 62%),
    radial-gradient(82% 62% at 72% 104%,rgba(232,176,104,.32) 0%, rgba(232,176,104,0) 60%),
    linear-gradient(155deg,#f4efe4,#eee4cd);
  background-attachment:fixed;
}
/* focusable pf controls get a visible ring (D6/AM23) — scoped, no global selector */
.pf-root [tabindex]:focus-visible,
.pf-root a:focus-visible,
.pf-root button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* HERO */
.pf-hero{ position:relative; overflow:hidden; color:var(--text-on-dark); background:radial-gradient(120% 130% at 50% 6%, color-mix(in srgb,var(--br-deep) 78%,var(--sunk-d)) 0%, var(--br-deep) 56%, color-mix(in srgb,var(--br-deep) 64%, #3a2a14) 100%); }
.pf-hero-head{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:18px 22px; }
.pf-idrow{ display:flex; gap:12px; align-items:center; }
.pf-avatar{ position:relative; width:46px; height:46px; flex:none; border-radius:50%; background:linear-gradient(140deg,var(--gold-hi),var(--gold-deep)); display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:600; font-size:22px; color:#2a1a06; }
.pf-avatar::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--gold-hi); transform:translate(4px,4px); opacity:.75; }  /* AM49 offset gold ring */
.pf-name{ font-family:var(--font-serif); font-weight:600; font-size:24px; color:#fff4dc; line-height:1.05; }
.pf-tag{ font-family:var(--font-serif); font-style:italic; font-size:14.5px; color:var(--gold-hi); opacity:.9; }
.pf-byline{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--text-on-dark); opacity:.62; margin-top:2px; }  /* AM49 byline */
.pf-preview-link{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--text-on-dark); opacity:.75; border:1px solid rgba(217,164,65,.45); border-radius:999px; padding:0 14px; white-space:nowrap; cursor:pointer; background:rgba(0,0,0,.16); min-height:44px; display:inline-flex; align-items:center; }
.pf-preview-link:hover{ opacity:1; border-color:var(--gold-hi); }
.pf-vis-badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#3a2408; background:var(--gold-hi); border-radius:999px; padding:6px 11px; align-self:center; }
.pf-sky-host{ position:relative; height:478px; }
.pf-sky{ display:block; width:100%; height:100%; }
/* ---------------------------------------------------------------------
   THE DAWN SEAM (R-POLISH B3) — the galaxy's night dissolving into the page.

   BEFORE: `.pf-hero`'s radial is fully opaque with no light stop, so dark ->
   light happened the instant its box ended and `.pf-root`'s ground showed
   through — a HARD CUT. The AM28 hairline below is a 1px gold ornament; it
   marked that cut, it never blended it.

   WHY A BAND, NOT A FADE THROUGH THE BOTTOM: `.pf-hero-dock` is the hero's LAST
   child (views.js:19114) — the hero's bottom IS the dock, and the dock's text is
   `--text-on-dark`. Fading the hero's existing bottom would have put light text
   on a lightening ground: the same coupling trap AES-2 hit on Shelf/Notebook.
   So the hero grows a dawn band BELOW the dock and the ramp lives THERE. The
   dock keeps its full night; nothing readable ever sits on the ramp.

   The ramp is layered UNDER the dock (z-index 1 vs the dock's 3) and OVER the
   sky (z-index auto), so it is the galaxy that dissolves — which is the point.
   Literal stops: this block paints its own ground per the R5 precedent declared
   at :14690, and the final stop must equal `.pf-root`'s #f4efe4 exactly or the
   seam it removes reappears one step further down.

   The hairline STAYS, on top of a real gradient rather than instead of one — at
   the foot of a dawn it reads as the horizon it always wanted to be. That takes
   an EXPLICIT z-index on `::after` (B3 red-team BLOCK): a positioned box with a
   positive z-index paints in a LATER step than one at `z-index:auto`, so source
   order does NOT save it — the ramp at z-index:1 would have painted clean over
   the hairline, and at `bottom:0` the ramp is at its 100% stop, fully opaque.
   The stack is therefore explicit and ordered: ramp 1 · hairline 2 · dock 3.

   RAMP HEIGHT == PADDING (B3 red-team CONCERN): at 104px the ramp reached ~28px
   past the dock's box and ~14px into its content, where `.pf-taphint` sits — so
   "nothing readable ever sits on the ramp" was false as measured. Pinning the
   ramp to exactly the 76px band makes it true: the ramp starts where the dock
   ends. The stops are percentages and rescale themselves. */
.pf-hero{ padding-bottom:76px; }
.pf-hero::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:76px;
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(28,18,9,0)      0%,
    rgba(74,50,22,.45)   34%,
    rgba(150,112,54,.72) 66%,
    rgba(226,206,168,.94) 88%,
    #f4efe4              100%);
}
.pf-hero::after{ content:''; position:absolute; left:20px; right:20px; bottom:0; height:1px; z-index:2; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(217,164,65,.6),transparent); }  /* AM28 gilded seam — z-index:2 added by B3: above the dawn ramp (1), below the dock (3) */
.pf-hero-dock{ position:relative; z-index:3; padding:0 16px 14px; }
/* AM48 strip overflow: edge fade + scroll affordance */
.pf-strip-wrap{ position:relative; }
.pf-strip{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:none; }
.pf-strip::-webkit-scrollbar{ display:none; }
.pf-strip-wrap.overflow::after{ content:''; position:absolute; top:0; right:0; bottom:10px; width:44px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--br-deep) 88%); }
/* R9b Lane G S1: the '›' chevron (.pf-strip-more) is retired -- it read as a stray glyph above the
   counts on mobile (overflow path); the .pf-strip-wrap.overflow::after edge-fade (above) is the sole
   overflow cue now. The span is also dropped from _pfBuildPage. */
.pf-vchip{ flex:none; font-family:var(--font-body); font-size:12.5px; padding:0 15px; min-height:44px; border-radius:999px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; color:var(--text-on-dark); background:rgba(240,227,200,.07); border:1px solid rgba(217,164,65,.5); }
.pf-vchip .vorb{ width:8px; height:8px; border-radius:50%; background:var(--gold-hi); opacity:.85; }
.pf-vchip.on{ color:#3a2408; background:linear-gradient(135deg,var(--gold-hi),var(--gold)); border-color:transparent; font-weight:500; }
.pf-vchip.on .vorb{ background:#fff2cf; }
.pf-vchip.dim{ opacity:.5; }
.pf-vchip:focus-visible{ outline:2px solid var(--star-gold); outline-offset:2px; }
.pf-counts{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-on-dark); padding:2px 4px 0; font-variant-numeric:tabular-nums lining-nums; }
.pf-counts b{ color:var(--star-gold); font-weight:500; }
.pf-counts .cx{ cursor:pointer; border-bottom:1px dotted rgba(240,227,200,.4); }
.pf-counts .cx:hover{ color:var(--star-gold); }
.pf-taphint{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-on-dark); opacity:.5; padding:7px 4px 0; }
/* sky */
.pf-star,.pf-planet{ cursor:pointer; }
.pf-star:hover .core,.pf-star:focus-visible .core{ r:6.4; }
.pf-star.lit .core{ r:6.6; }
.pf-star.faded{ opacity:.26; }
.pf-planet:hover .phit,.pf-planet:focus-visible .phit{ opacity:.15; }
.pf-plabel{ font-family:var(--font-serif); fill:var(--text-on-dark); opacity:.84; font-size:16px; }
.pf-plabel.dom{ font-size:19px; opacity:.96; font-weight:600; }
.pf-conline{ stroke:var(--gold-hi); stroke-width:1; opacity:0; transition:opacity .5s; }
.pf-sky.show-lines .pf-conline{ opacity:.4; }
/* R9b Lane P: the value web is FAINT-BY-DEFAULT (was opacity:0/hidden-until-tap) so cross-category value
   lines read at BOTH widths without a tap; tap brightens the tapped value. (Felt-passed 2026-07-13.) */
.pf-vline{ fill:none; stroke:var(--star-gold); stroke-width:1.5; opacity:.34; transition:opacity .4s; }  /* R9b Lane G S3: now a lensing PATH (fill:none is load-bearing) */
.pf-sky .pf-vline.on{ opacity:.78; }
/* R9b Lane G S3: the sigil-galaxy core is tappable (-> thesis; wired in S7). */
.pf-sg-core{ cursor:pointer; }
.pf-sg-core:focus-visible{ outline:2px solid var(--star-gold); outline-offset:2px; }
/* R9b Lane G S7: published-arc constellations -- persistent quiet lensing lines + a small arc label (-> arc
   page). Faint vs the brighter value-lighting layer (.pf-vline .34/.78). */
.pf-aline{ fill:none; stroke:var(--gold-hi); stroke-width:1; opacity:.2; stroke-dasharray:1 5; stroke-linecap:round; }
.pf-alabel{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; fill:var(--gold-hi); opacity:.62; text-transform:uppercase; cursor:pointer; }
.pf-alabel:hover{ opacity:.92; }
.pf-alabel:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* R9b Lane G S4: CSS-only motion (zero per-frame JS). Differential sigil rotation (4 speeds) + core breath +
   planet drift (±~1% viewport) + star orbit (>=120s) + speck twinkle. Freezes under prefers-reduced-motion. */
@keyframes pf-spin{ to{ transform:rotate(360deg); } }
@keyframes pf-spinr{ to{ transform:rotate(-360deg); } }
@keyframes pf-breath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@keyframes pf-drA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(10px,-8px); } }
@keyframes pf-drB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-9px,7px); } }
@keyframes pf-drC{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(7px,9px); } }
@keyframes pf-orbit{ to{ transform:rotate(360deg); } }
@keyframes pf-tw{ 0%,100%{ opacity:.10; } 50%{ opacity:.28; } }
.pf-sg-rings g{ transform-box:fill-box; transform-origin:center; }
.pf-sg-r1{ animation:pf-spin 150s linear infinite; }
.pf-sg-r2{ animation:pf-spin 96s linear infinite; }
.pf-sg-r3{ animation:pf-spin 64s linear infinite; }
.pf-sg-r4{ animation:pf-spinr 120s linear infinite; }
.pf-sg-core{ transform-box:fill-box; transform-origin:center; animation:pf-breath 6.5s ease-in-out infinite; }
.pf-planet{ transform-box:view-box; }
.pf-planet.d0{ animation:pf-drA 34s ease-in-out infinite; }
.pf-planet.d1{ animation:pf-drB 41s ease-in-out infinite; }
.pf-planet.d2{ animation:pf-drC 38s ease-in-out infinite; }
.pf-spk[data-anim]{ animation:pf-tw 5s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){
  /* !important is LOAD-BEARING: it must beat .pf-planet.d0/.d1/.d2 (higher specificity) AND the per-star INLINE
     animation:pf-orbit style -- a plain reset loses the cascade to both and the freeze is a false PASS. */
  .pf-sg-r1,.pf-sg-r2,.pf-sg-r3,.pf-sg-r4,.pf-sg-core,.pf-planet,.pf-star,.pf-spk{ animation:none !important; }
}
.pf-invite{ font-family:var(--font-serif); font-style:italic; fill:var(--gold-hi); opacity:.74; font-size:14px; }
@media (prefers-reduced-motion:reduce){ .pf-conline,.pf-vline{ transition:none; } }
/* BELOW */
.pf-below{ padding:0 18px; }
.pf-thesis{ position:relative; padding:26px 6px 22px; max-width:70ch; }
.pf-thesis p{ font-family:var(--font-serif); font-size:22px; line-height:1.5; color:var(--ink); }
.pf-thesis em{ color:var(--gold-deep); font-style:normal; }
.pf-edit{ position:absolute; top:24px; right:2px; font-family:var(--font-mono); font-size:10px; color:var(--ink-3); cursor:pointer; border-bottom:1px solid var(--line); }
.pf-edit:hover{ color:var(--gold-deep); }
.pf-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin:0 0 9px 4px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pf-eyebrow .cap{ color:var(--ink-3); text-transform:none; letter-spacing:.01em; font-size:10.5px; font-weight:400; }
.pf-eyebrow .whisper{ color:var(--ink-3); text-transform:none; letter-spacing:.02em; font-size:10px; display:inline-flex; align-items:center; gap:5px; }
.pf-eyebrow .whisper::before{ content:''; width:12px; height:0; border-top:1.4px dashed var(--ink-3); }
.pf-sec{ margin-bottom:22px; }
.pf-card{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:20px 22px; }
/* values */
.pf-offer{ background:var(--surface-2); border-radius:12px; box-shadow:var(--shadow-1); padding:13px 15px; margin-bottom:18px; position:relative; overflow:hidden; }
.pf-offer::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-hi); }
.pf-offer .lab{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.pf-offer .obody{ font-family:var(--font-serif); font-size:16px; color:var(--ink-2); line-height:1.4; }
.pf-offer .says{ margin-top:7px; font-size:12.5px; color:var(--ink-3); }
.pf-offer .says .prop{ font-family:var(--font-serif); font-weight:600; font-size:17px; color:var(--ink); margin-left:5px; }
.pf-acts{ margin-top:9px; display:flex; gap:7px; flex-wrap:wrap; }
.pf-chip{ font-family:var(--font-body); font-size:12px; padding:0 14px; min-height:44px; border-radius:999px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink-2); display:inline-flex; align-items:center; }
.pf-chip.yes{ background:linear-gradient(135deg,var(--gold-hi),var(--gold)); color:#3a2408; border-color:transparent; font-weight:500; }
.pf-vcard{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line); }
.pf-vcard:first-of-type{ border-top:none; }
/* R10 S1-3: the whole value card = the door to #value/<id> (content untouched). */
.pf-vcard{ cursor:pointer; }
.pf-vcard:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; border-radius:var(--radius-sm); }
.pf-orb{ flex:none; margin-top:5px; }
.pf-vmain{ min-width:0; }
.pf-vname{ font-family:var(--font-serif); font-weight:600; line-height:1.05; }
.pf-vcard.w1 .pf-vname{ font-size:29px; color:var(--ink); }
.pf-vcard.w2 .pf-vname{ font-size:25px; color:#3a2a18; }
.pf-vcard.w3 .pf-vname{ font-size:22px; color:var(--ink-2); }
.pf-vcard.w4 .pf-vname{ font-size:19px; color:var(--ink-3); }
.pf-why{ font-family:var(--font-serif); font-style:italic; font-size:16.5px; line-height:1.45; color:#4a3d29; max-width:60ch; margin-top:6px; }
.pf-why::before{ content:'\201C'; }
.pf-why::after{ content:'\201D'; }
.pf-drawn{ font-family:var(--font-body); font-size:12.5px; color:var(--ink-3); margin-top:9px; }
.pf-sublinks{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px 14px; }
.pf-sublink{ font-family:var(--font-body); font-size:13px; color:var(--field-deep,var(--gold-deep)); border-bottom:1px solid currentColor; cursor:pointer; display:inline-flex; align-items:center; gap:6px; opacity:.95; }
.pf-sublink::after{ content:'\2192'; opacity:.55; margin-left:2px; }
.pf-sublink.draft{ color:var(--ink-3); }
.pf-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.pf-orphan{ font-size:12.5px; color:var(--ink-3); font-style:italic; margin-top:15px; padding-left:11px; border-left:2px solid var(--line); }
/* numbers + lens toggle */
/* P6a: one stable layout across toggle states — caption shrinks/wraps in its own
   column (min-width:0), toggle stays pinned right (flex:none); no wrap-swap. */
.pf-numhead{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:nowrap; margin-bottom:14px; }
.pf-numhead > .pf-eyebrow{ margin:0; flex:1 1 auto; min-width:0; }
.pf-numhead > .pf-seg{ flex:none; }
.pf-seg{ display:inline-flex; background:var(--surface-2); border-radius:999px; padding:3px; }
.pf-seg button{ font-family:var(--font-body); font-size:11.5px; padding:0 13px; min-height:32px; border:none; background:transparent; color:var(--ink-3); border-radius:999px; cursor:pointer; }
.pf-seg button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); font-weight:500; }
.pf-seg button:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.pf-statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:12px; }
.pf-stat{ text-align:center; cursor:pointer; }
.pf-stat .n{ font-family:var(--font-mono); font-weight:500; font-size:26px; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums lining-nums; }
.pf-stat .l{ font-family:var(--font-mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }
.pf-stat:hover .n{ color:var(--gold-deep); }
.pf-catgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-top:16px; }
.pf-catcard{ background:var(--surface-2); border-radius:11px; padding:11px 12px 12px 14px; position:relative; overflow:hidden; }
.pf-catcard::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rail); }
/* P4: align-items:flex-start (was center) so a long category name that wraps (e.g. "Technology &
   Society") keeps its dot on the FIRST line instead of floating to the vertical middle of two lines;
   the dot is nudged 3px to sit on the first line's optical centre. */
.pf-catcard .cn{ font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--ink); display:flex; align-items:flex-start; gap:6px; }
.pf-catcard .cn .pf-dot{ margin-top:3px; }
.pf-catcard .cm{ font-family:var(--font-mono); font-size:10.5px; color:var(--railtext); margin-top:3px; font-variant-numeric:tabular-nums lining-nums; }
.pf-bar{ height:5px; border-radius:3px; background:rgba(100,89,64,.14); margin-top:8px; overflow:hidden; }
.pf-bar i{ display:block; height:100%; background:var(--barfill); border-radius:3px; }
.pf-numcov{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); font-style:italic; margin-top:15px; padding-top:12px; border-top:1px solid var(--line); }
.pf-invite-line{ font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--gold-deep); opacity:.85; margin-top:10px; }
/* questions/now */
.pf-gap{ padding:12px 0; border-top:1px solid var(--line); }
.pf-gap:first-of-type{ border-top:none; }
.pf-gap-q{ font-family:var(--font-serif); font-size:18px; line-height:1.4; color:var(--ink); max-width:58ch; }
.pf-gap-q .cat{ font-weight:600; color:var(--field-deep); border-bottom:1px solid var(--field-deep); }
.pf-gap-a{ font-family:var(--font-body); font-size:13px; color:var(--ink-3); margin-top:4px; }
.pf-now{ font-family:var(--font-serif); font-size:17px; font-style:italic; color:var(--ink-2); max-width:60ch; }
.pf-now b{ font-style:normal; font-weight:600; color:var(--ink); }
/* AM41-42 published full-width band, equal-height */
.pf-pubgrid{ display:grid; grid-template-columns:1fr; gap:12px; }
.pf-pub{ background:var(--surface-2); border-radius:12px; padding:15px 16px 15px 17px; cursor:pointer; position:relative; overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; min-height:100%; }
.pf-pub::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rail); }
.pf-pub:hover{ box-shadow:var(--shadow-2); }
.pf-pub .pt{ font-family:var(--font-serif); font-weight:600; font-size:19px; color:var(--ink); line-height:1.15; }
.pf-pub .pe{ font-family:var(--font-serif); font-style:italic; font-size:14.5px; color:var(--ink-2); margin-top:5px; line-height:1.4; }
.pf-pub .pl{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3); margin-top:7px; }
.pf-pub .pm{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:11px; }
.pf-pub .pcat{ font-family:var(--font-mono); font-size:10.5px; color:var(--railtext); display:inline-flex; align-items:center; gap:5px; }
.pf-pub .pdate{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; }
.pf-pub-more{ margin-top:14px; font-family:var(--font-body); font-size:13px; color:var(--gold-deep); cursor:pointer; border-bottom:1px solid rgba(133,84,16,.35); display:inline-block; }
/* settings */
.pf-settings .pf-eyebrow{ color:var(--ink-3); }
.pf-set-fields{ display:grid; grid-template-columns:1fr; gap:8px; }
.pf-field{ display:flex; align-items:flex-start; gap:10px; }
.pf-field label{ font-family:var(--font-body); font-size:11.5px; color:var(--ink-3); width:120px; flex:none; padding-top:6px; }
.pf-field input,.pf-field textarea{ flex:1; font-family:var(--font-body); font-size:12.5px; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 9px; }
.pf-field textarea{ min-height:46px; resize:vertical; font-family:var(--font-serif); font-size:14px; }
.pf-set-row{ display:flex; gap:10px; margin-top:12px; }
.pf-btn{ font-family:var(--font-body); font-size:12px; padding:0 16px; min-height:44px; border-radius:8px; cursor:pointer; border:1px solid var(--line); display:inline-flex; align-items:center; }
.pf-btn.save{ background:linear-gradient(135deg,var(--gold-hi),var(--gold)); color:#3a2408; border-color:transparent; }
.pf-btn.ghost{ background:transparent; color:var(--ink-3); }
.pf-toggle{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:11.5px; color:var(--ink-3); margin-top:12px; cursor:pointer; }
.pf-toggle .tk{ width:30px; height:17px; border-radius:999px; background:var(--gold); position:relative; }
.pf-toggle .tk::after{ content:''; position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%; background:#fff; }
.pf-toggle.off .tk{ background:var(--ink-3); }
.pf-toggle.off .tk::after{ right:auto; left:2px; }
.pf-covenant{ margin-top:14px; font-size:11.5px; color:var(--ink-3); }
.pf-covenant a{ color:var(--gold-deep); text-decoration:none; border-bottom:1px solid rgba(133,84,16,.3); }
.pf-root.is-visitor .pf-owner-only{ display:none !important; }
/* R9b Lane G S6: the in-galaxy selection PANEL. Bottom sheet <=1199 / anchored side panel >=1200. z per ledger
   (below app modals 10021). Scrim mobile-only. Deep-hue header from the S5 wheel. */
.pf-panel-host{ position:fixed; inset:0; z-index:10018; pointer-events:none; visibility:hidden; }
.pf-panel-host.open{ visibility:visible; }
.pf-panel-scrim{ position:absolute; inset:0; background:var(--scrim,rgba(15,9,4,.5)); opacity:0; transition:opacity .3s; pointer-events:auto; }
.pf-panel-host.open .pf-panel-scrim{ opacity:1; }
.pf-panel{ position:absolute; left:0; right:0; bottom:0; max-height:70vh; background:var(--surface); color:var(--ink); border-radius:18px 18px 0 0; box-shadow:0 -8px 40px rgba(20,12,4,.4); display:flex; flex-direction:column; overflow:hidden; transform:translateY(101%); transition:transform .34s cubic-bezier(.22,.61,.36,1); pointer-events:auto; }
.pf-panel-host.open .pf-panel{ transform:translateY(0); }
.pf-panel-grip{ align-self:center; width:38px; height:4px; border-radius:3px; background:var(--line); margin:9px 0 2px; flex:none; }
.pf-panel-hd{ padding:14px 20px 13px; color:var(--text-on-dark); position:relative; flex:none; }
.pf-panel-hd .pk{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; opacity:.72; }
.pf-panel-hd .pt{ font-family:var(--font-serif); font-weight:600; font-size:23px; line-height:1.05; margin-top:3px; display:flex; align-items:center; gap:9px; }
.pf-panel-hd .pdot{ width:12px; height:12px; border-radius:50%; flex:none; box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.pf-panel-x{ position:absolute; top:6px; right:8px; background:rgba(255,255,255,.16); border:none; color:var(--text-on-dark); width:44px; height:44px; border-radius:50%; font-size:19px; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; }
.pf-panel-x:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
.pf-panel-bd{ padding:16px 20px 24px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pf-pcounts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:10px; margin-bottom:16px; }
.pf-pcount{ background:var(--surface-2); border-radius:11px; padding:11px 6px; text-align:center; }
.pf-pcount .n{ font-family:var(--font-mono); font-weight:500; font-size:23px; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums lining-nums; }
.pf-pcount .l{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }
.pf-peyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin:16px 0 8px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pf-peyebrow .cap{ text-transform:none; letter-spacing:.01em; color:var(--ink-3); font-size:10px; }
.pf-spark{ display:block; width:100%; height:46px; }
.pf-spark rect{ fill:var(--rail,var(--gold-hi)); }
.pf-spark .ax{ stroke:var(--line); stroke-width:1; }
.pf-spark-lab{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:8.5px; color:var(--ink-3); margin-top:3px; }
.pf-pret{ font-family:var(--font-serif); font-size:15px; color:var(--ink-2); padding:7px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; }
.pf-pret:first-of-type{ border-top:none; }
.pf-pret b{ color:var(--ink); font-weight:600; } .pf-pret em{ color:var(--ink); font-style:italic; }
.pf-pret .ct{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); white-space:nowrap; }
.pf-pstars{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; }
.pf-pstar{ font-family:var(--font-body); font-size:13px; color:var(--railtext,var(--gold-deep)); border-bottom:1px solid currentColor; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.pf-pstar::after{ content:'\2192'; opacity:.55; } .pf-pstar.draft{ color:var(--ink-3); }
.pf-pstar .sd{ width:7px; height:7px; border-radius:50%; background:var(--star-gold); flex:none; }
.pf-pstar:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.pf-pshelf{ margin-top:16px; font-family:var(--font-body); font-size:13.5px; color:var(--gold-deep); cursor:pointer; border-bottom:1px solid rgba(133,84,16,.35); display:inline-block; }
.pf-pshelf:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.pf-psparse{ font-family:var(--font-serif); font-style:italic; font-size:14.5px; color:var(--gold-deep); opacity:.9; line-height:1.5; }
@media (min-width:1200px){
  .pf-panel-scrim{ display:none; }
  .pf-panel{ left:auto; right:24px; bottom:auto; top:96px; width:400px; max-height:calc(100vh - 150px); border-radius:16px; transform:translateX(130%); box-shadow:0 20px 60px rgba(20,12,4,.35); }
  .pf-panel-host.open .pf-panel{ transform:translateX(0); }
  .pf-panel-grip{ display:none; }
}
/* mobile base */
.pf-grid{ display:block; }
/* >=1200 composition (AM3/AM27/AM41 — desktop canon; converted from the mockup @container) */
@media (min-width:1200px){
  /* R9b Lane G S1 desktop composition rider: the portrait STAGE widens 1280 -> 1400 (content), and the
     hero-dock (value strip + counts + taphint) centers to the SAME 1400 column so it composes with the
     body instead of pinning to the full-bleed hero's left edge (the 274px @1920 misalignment). Both are
     content-box with equal 34px side padding, so their CONTENT edges align in both the centered (>=1468)
     and parent-filled regimes. The sky SVG stays full-bleed (it is not touched here). */
  .pf-below{ max-width:1400px; margin:0 auto; }
  .pf-hero-head{ padding:24px 34px; }
  .pf-name{ font-size:29px; } .pf-tag{ font-size:17px; } .pf-avatar{ width:52px; height:52px; font-size:25px; }
  .pf-sky-host{ height:60vh; min-height:420px; max-height:600px; } .pf-hero-dock{ padding:0 34px 16px; max-width:1400px; margin:0 auto; }   /* S4 presence: hero ~60vh */
  .pf-below{ padding:0 34px; } .pf-thesis{ padding:34px 6px 26px; } .pf-thesis p{ font-size:24px; max-width:72ch; }
  /* AM27+AM41 + R9b S1: Values | Numbers stay a two-up pair (row 1); arcs/questions/now now span the FULL
     stage width (were rail-confined). AM51 DOM order is untouched -- only the grid placement changes. */
  .pf-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:26px 30px; align-items:start; grid-template-areas:"values numbers" "arcs arcs" "questions questions" "now now"; }
  .pf-root .sec-values{ grid-area:values; } .pf-root .sec-numbers{ grid-area:numbers; align-self:start; } .pf-root .sec-arcs{ grid-area:arcs; } .pf-root .sec-questions{ grid-area:questions; } .pf-root .sec-now{ grid-area:now; }
  .pf-sec{ margin-bottom:0; } .pf-grid{ row-gap:26px; }
  .pf-root .sec-returns, .pf-root .sec-journey, .pf-root .sec-threads, .pf-root .sec-lineage, .pf-root .sec-published, .pf-root .sec-consent{ margin-top:26px; }
  /* P6: at >=1200 the lineage row's space-between threw the value tag ~819px to the far edge of the
     1400 stage. Cap the rows to a readable measure and set the tag ADJACENT to its why-line. */
  .pf-root .sec-lineage .pf-lineage{ max-width:78ch; }
  .pf-root .sec-lineage .pf-lin-row{ justify-content:flex-start; }
  /* P7 desktop density (>=1200 ONLY; mobile untouched): the thin DNA/reflection cards (a one-line
     Threads/Now, a couple of returns/journey rows) carried the full 20px 22px card padding and read
     empty in the wide stage. Hug the content a touch so thin data reads intentional. FELT -- for the
     re-pass. Cards with rich content (Values, Numbers, Published, reader-model) are left at 20px 22px. */
  .pf-root .sec-threads .pf-card,
  .pf-root .sec-returns .pf-card,
  .pf-root .sec-now .pf-card,
  .pf-root .sec-journey .pf-card{ padding:15px 22px; }
  .pf-root .sec-lineage .pf-card{ padding:16px 22px; }
  .pf-pubgrid{ grid-template-columns:repeat(3,1fr); }
  .pf-pubgrid[data-n="2"]{ grid-template-columns:repeat(2,1fr); }                          /* R9b: 2-up at n=2 */
  .pf-pubgrid[data-n="1"]{ grid-template-columns:minmax(0,600px); justify-content:start; } /* P5: contained + left-aligned (was a 440px card floating centred in the 1400 stage) */
  .pf-set-fields{ grid-template-columns:1fr 1fr; gap:8px 22px; } .pf-settings{ margin-top:26px; }
  .pf-root.is-visitor .pf-grid{ grid-template-areas:"values numbers" "arcs arcs"; }
}
/* R9a Slice 5b — value-retrofit dock (AM19) + reader-model carry chrome */
.pf-offer-dock{ margin-bottom:16px; }
.pf-retro-body{ margin-top:10px; }
.pf-retro-cov{ font-family:var(--font-body); font-size:11px; color:var(--ink-3); margin:6px 0 10px; }
.pf-retro-loading,.pf-retro-error,.pf-retro-empty,.pf-retro-none{ font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--gold-deep); padding:6px 0; }
.pf-retro-renin{ font-family:var(--font-body); font-size:12.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:5px 9px; }
.pf-yumi-mount{ margin-top:22px; }
/* the carried reader-model section keeps its own .account-readermodel/.rm-* skin
   (felt-pass restyle later); ensure it sits on the light card ground, not dark. */
.pf-root .account-readermodel{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:18px 20px; }
.pf-returns-card,.pf-journey-card{ margin-top:16px; }
.pf-returns-row,.pf-journey-row{ font-family:var(--font-serif); font-size:15px; color:var(--ink-2); padding:7px 0; border-top:1px solid var(--line); }
.pf-returns-row:first-child,.pf-journey-row:first-child{ border-top:none; }
.pf-returns-row b,.pf-journey-row b{ font-weight:600; color:var(--ink); }
.pf-returns-ct{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.pf-returns-row em,.pf-journey-row em{ font-style:italic; color:var(--ink); }
/* R9b Lane G S1: journey month-label dedup -- a same-month continuation beat hugs its month header
   (no separating border, tightened top, small indent) so the bold month prints once per group. */
.pf-journey-cont{ border-top:none; padding-top:0; padding-left:16px; }
/* R9b Lane P — knowledge arcs (question-led), lineage band, threads reflection, Now cross-link, published quality pack */
.pf-arc{ padding:16px 0; border-top:1px solid var(--line); }
.pf-arc:first-of-type{ border-top:none; }
.pf-arc-q{ font-family:var(--font-serif); font-weight:600; font-size:19.5px; line-height:1.25; color:var(--ink); max-width:60ch; }
.pf-arc .pf-sublinks{ margin-top:10px; }
.pf-arc-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:11px; }
.pf-arc-open{ font-family:var(--font-body); font-size:12.5px; color:var(--gold-deep); cursor:pointer; border-bottom:1px solid rgba(133,84,16,.3); }
.pf-arc-open:hover{ color:var(--gold); }
.pf-arc-count{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.pf-lineage{ display:flex; flex-direction:column; }
.pf-lin-row{ padding:12px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.pf-lin-row:first-child{ border-top:none; }
.pf-lin-row .pf-why{ margin-top:0; max-width:62ch; }
.pf-lin-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); cursor:pointer; white-space:nowrap; border-bottom:1px dotted rgba(133,84,16,.4); }
.pf-lin-tag:hover{ color:var(--gold); }
.pf-thread-row{ font-family:var(--font-serif); font-size:15px; color:var(--ink-2); padding:7px 0; border-top:1px solid var(--line); }
.pf-thread-row:first-child{ border-top:none; }
.pf-now-link{ font-family:var(--font-body); font-size:13px; color:var(--gold-deep); margin-top:11px; cursor:pointer; display:inline-block; }
.pf-now-link b{ font-weight:600; }
.pf-now-link:hover{ color:var(--gold); }
.pf-pub.untitled .pt{ font-style:italic; font-weight:500; font-size:17.5px; color:var(--ink-2); line-height:1.3; }
/* P7 (mobile canon): form controls >= 16px so iOS never zoom-jumps on focus.
   Mobile-only override (desktop keeps the quiet 12.5/14px register). */
@media (max-width:759px){
  .pf-root .pf-field input,
  .pf-root .pf-field textarea{ font-size:16px; }
}
/* END R9a Profile / Galaxy */

/* =====================================================================
   R-POLISH B1 — HOME (PG-1 · XL-1 · TY-1 · MO-1 · CC-2/CC-4)
   Appended last on purpose: every rule here is a deliberate override of an
   earlier equal-specificity Home rule, so source order carries it without
   inflating selectors. Desktop-first discipline (canon §3) is respected —
   anything that must differ below 760 carries its own max-width query, and
   nothing here edits a shared base rule that both widths want differently.
   ===================================================================== */

/* --- TY-1 · THE 12px ABSOLUTE FLOOR ---------------------------------------
   Measured before: SEVEN Home classes rendered below the floor at every width
   (.home-reading-status 9px · .home-sectlabel/.home-arcmeta/.home-gl 10px ·
   .home-wfcap/.home-fieldstat/.home-gl-link 11px). TY-1: "the ramp carries a
   12px absolute floor; nothing in the app renders smaller."
   Section headers additionally move UP the ramp out of the single mono-caps
   whisper: .home-sectlabel and .home-gl are real headings now (DM Sans, ink-2),
   while true meta (counts, status) stays mono at the floor. */
.home-page.lum-amber-deep .home-sectlabel,
.home-page.lum-amber-deep .home-gl{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--ink-2);
}
.home-page.lum-amber-deep .home-wfcap,
.home-page.lum-amber-deep .home-fieldstat,
.home-page.lum-amber-deep .home-arcmeta,
.home-page.lum-amber-deep .home-reading-status{
  font-size:12px;
  color:var(--ink-2);
}
/* .home-gl-link is a link inside a heading row: it keeps the body face, sits at
   the floor, and gets a 24px pointer target (ruled minimum for link-row actions).
   Measured before: 18px tall. */
.home-page.lum-amber-deep .home-gl-link{
  font-size:12px;
  min-height:24px;
  display:inline-flex;
  align-items:center;
  color:var(--gold-deep);          /* light-ground gold for small text (AA) */
  border-bottom-color:var(--gold);
}

/* --- CC-4 · gold as small text on light = --gold-deep ---------------------
   The ground-check-first rail: on Home's light paper, small gold text resolves
   to --gold-deep (#855410, 5.95:1) rather than --gold (#a8761a, 3.92:1 — a fail
   below 18px per the Slice-0 contrast gate). Display-size gold is unaffected. */
.home-page.lum-amber-deep .home-arcbtn:not(.home-arcbtn-primary){
  color:var(--gold-deep);
}

/* --- CC-4 · focus-visible = 2px gold ring, --gold-deep on this light ground */
.home-page.lum-amber-deep a:focus-visible,
.home-page.lum-amber-deep button:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:2px;
}

/* --- MO-1 · THE APP ANSWERS YOUR HAND ------------------------------------
   Two durations, two easings, the named moments that apply on this surface:
   hover lift, press, and the panel/route reveal. Home had zero motion before
   this except the seg's colour fade. Reduced-motion kills all of it at the foot
   of this block. */
.home-page.lum-amber-deep .home-arc,
.home-page.lum-amber-deep .home-glimpse,
.home-page.lum-amber-deep .home-arc-start{
  transition:transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.home-page.lum-amber-deep .home-arc:hover,
.home-page.lum-amber-deep .home-glimpse:hover,
.home-page.lum-amber-deep .home-arc-start:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px -14px rgba(133,84,16,.45);
}
.home-page.lum-amber-deep .home-arc:active,
.home-page.lum-amber-deep .home-arcbtn:active,
.home-page.lum-amber-deep .home-arc-start:active,
.home-page.lum-amber-deep .seg-opt:active{
  transform:translateY(1px) scale(.99);
  transition:transform 90ms var(--ease-standard);
}
.home-page.lum-amber-deep .home-arcbtn{
  transition:color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}

/* --- XL-1 · THE DESK WIDENS (tier >=1600, designed at 1920) ---------------
   The composition box stays measure-bound; what widens is the working column
   and the rail, so the page composes rather than stretches. The 173px side
   margins are now PAGE MARGIN on continuous paper, not a frame around a sheet
   (the fixed ground above is what makes that true). */
@media (min-width:1600px){
  .home-page.lum-amber-deep.home-composed{
    max-width:1680px;
    grid-template-columns:minmax(0,1fr) 360px;
    column-gap:var(--space-xl,32px);
  }
  .home-page.lum-amber-deep .home-glimpse{ flex:1 1 auto; }
}

/* --- PG-1 · the 390 seam, and why there is no rule for it here ------------
   Measured before: an 8px dark gutter each side at 390. Traced to the UA
   default `body{margin:8px}`, which this app never resets at phone widths —
   NOT to Home's own padding (that was already `30px 0 80px`, i.e. 0 on the
   sides), so a padding override here would have been dead CSS.
   The viewport-fixed paper ground above already paints that 8px band, so the
   seam is gone at 390 without touching a shared chrome rule that every other
   surface also stands on. The body-margin reset itself is logged as a residual
   for the app-wide chrome pass rather than reached for from Home's batch. */

/* --- MO-1 · reduced-motion kills every moment above, globally -------------- */
@media (prefers-reduced-motion:reduce){
  .home-page.lum-amber-deep .home-arc,
  .home-page.lum-amber-deep .home-glimpse,
  .home-page.lum-amber-deep .home-arc-start,
  .home-page.lum-amber-deep .home-arcbtn{
    transition:none!important;
  }
  .home-page.lum-amber-deep .home-arc:hover,
  .home-page.lum-amber-deep .home-glimpse:hover,
  .home-page.lum-amber-deep .home-arc-start:hover,
  .home-page.lum-amber-deep .home-arc:active,
  .home-page.lum-amber-deep .home-arcbtn:active,
  .home-page.lum-amber-deep .home-arc-start:active,
  .home-page.lum-amber-deep .seg-opt:active{
    transform:none!important;
  }
}

/* --- UX-2 · the nav active state, made unmistakable ----------------------
   Canon §4-B rules a 2px gold underline with its space reserved so toggling
   never shifts layout. The live rule only changed the link's COLOUR to --ink,
   which on the dark nav is a whisper away from the resting --ink-3. The
   underline is added here (desktop) with a transparent twin on every link so
   the row never reflows. */
@media (min-width:760px){
  .app-nav-link:not(.app-nav-profile){
    border-bottom:2px solid transparent;   /* reserved space, always */
    border-radius:0;
  }
  .app-nav-link.app-nav-link-active:not(.app-nav-profile),
  .app-nav-link.app-nav-link-active:not(.app-nav-profile):hover{
    border-bottom-color:var(--gold);
    color:var(--ink);
    font-weight:600;
  }
}

/* --- CC-2 · the nav search well, carved ----------------------------------
   The control converts at the WELL, not the input: .k-field carries a 44px
   touch min-height that would burst the 38px nav bar. Same carved grammar —
   a ground-layer recess with one inset shadow — expressed at the right element. */
.app-nav-search{
  background:var(--sunk);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.app-nav-search:focus-within{
  border-color:var(--gold);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28), 0 0 0 3px rgba(210,162,62,.22);
}
/* END R-POLISH B1 — HOME */

/* =====================================================================
   R-POLISH B1 — NOTEBOOK (NBK-1 · XL-1 · TY-1 · MO-1 · UX-3)
   ===================================================================== */

/* --- NBK-1 · THE LEAF KEEPS GROWING (reconciled, NOT overridden) ----------
   The brief's original NBK-1 premise -- "the note stream scrolls WITHIN the
   leaf" -- was checked against the code at Slice 0 and found to CONTRADICT a
   deliberate ruling carried by three independent artifacts: the source mockups
   (design/notebook.html), the ship checkpoint (notebook-hybrid.md: min-height
   430, no scroll), and DW-2's stress test, which rendered 200 notes straight
   down the page and measured only render time. A bounded, scrolling leaf would
   be a NEW design decision, not a polish fix.
   So the growth is HONOURED and COMPOSED instead: the spread is a 2-track grid,
   so both leaves already share one height and the frame grows with the longer
   stream. What was uncomposed is the OTHER leaf -- a long left stream left the
   right leaf as a tall blank column. That is an empty state, and SYS-1 says
   every empty state teaches or invites, so it is composed below rather than
   left to stretch. Nothing here bounds or scrolls the stream. */
.notebook.lum-amber-deep .leaf-right > *{
  position:sticky;
  top:var(--space-lg,24px);        /* the right leaf's content stays with the reader
                                      as the left stream grows past a screen */
}
.notebook.lum-amber-deep .leaf-right:empty::after,
.notebook.lum-amber-deep .nb-rightempty{
  display:block;
  font-family:var(--font-serif);
  font-size:15px;
  line-height:1.6;
  color:var(--lum-ink-3);
  max-width:34ch;
}

/* --- XL-1 · BOTH LEAVES WIDEN AT THE >=1600 TIER --------------------------
   DW-2 already widened the governor 900 -> 1360 at >=1200. The XL tier carries
   it to 1680 (the same tier width Home composes on), so each leaf grows rather
   than the spread stranding in the middle of a wide desk. The reading measure
   stays bounded by the 70ch cap on the note body, so lines never run long. */
@media (min-width:1600px){
  .notebook.lum-amber-deep > *{ max-width:1680px; }
  .notebook.lum-amber-deep .leaf{ padding:30px 34px; }
}

/* --- TY-1 · THE 12px ABSOLUTE FLOOR, NOTEBOOK ----------------------------
   Measured before: TWENTY classes in the Notebook amber skin rendered below the
   floor (9px .nb-yname-tag/.nb-ctag/.nb-modes-label · 9.5px entry timestamp,
   visibility, leaftag, banklabel, cover-author, newborn-eyebrow, glab ·
   10px .nb-tab count, entry lock · 10.5px the entry ACTION LINKS (Gather / Send
   / Delete) · 11-11.5px the rest). Nothing in the app renders smaller than 12. */
.notebook.lum-amber-deep .nb-yname-tag,
.notebook.lum-amber-deep .nb-ctag,
.notebook.lum-amber-deep .nb-modes-label,
.notebook.lum-amber-deep .notebook-entry-ts,
.notebook.lum-amber-deep .notebook-entry-vis,
.notebook.lum-amber-deep .notebook-entry-src,
.notebook.lum-amber-deep .nb-leaftag,
.notebook.lum-amber-deep .nb-bb-banklabel,
.notebook.lum-amber-deep .nb-bb-cover-author,
.notebook.lum-amber-deep .nb-newborn-eyebrow,
.notebook.lum-amber-deep .nb-glab,
.notebook.lum-amber-deep .nb-tab .c,
.notebook.lum-amber-deep .notebook-entry-lock,
.notebook.lum-amber-deep .nb-name-hint,
.notebook.lum-amber-deep .nb-newborn-stay,
.notebook.lum-amber-deep .nb-bb-whatsees,
.notebook.lum-amber-deep .nb-bookhead .ba,
.notebook.lum-amber-deep .nb-bb-author,
.notebook.lum-amber-deep .notebook-head .eyebrow,
.notebook.lum-amber-deep .leaf .eyebrow{
  font-size:12px;
}

/* --- TY-1 · THE READER'S-WORDS LAW ---------------------------------------
   "User marginalia gets the finest setting in the app -- its own register,
   distinct from system italic, and UPRIGHT at length." The system voice in this
   surface is serif ITALIC (hints, empty bodies, newborn snippets), so the
   reader's own words are set upright to hold a register the chrome cannot
   occupy. Italics stay reserved for accents. */
.notebook.lum-amber-deep .notebook-entry-body{
  font-family:var(--font-serif);
  font-size:17px;
  line-height:1.5;
  font-style:normal;               /* UPRIGHT — the reader's register */
  color:var(--lum-ink);
}
.notebook.lum-amber-deep .notebook-entry-body em,
.notebook.lum-amber-deep .notebook-entry-body i{
  font-style:italic;               /* accents inside the reader's own text still read */
}

/* --- CC-4 · 24px pointer targets on the entry action links ----------------
   Gather / Send to a sub-theory / Ask Yumi / Delete sit in a link row; the
   ruled minimum for a link-row action is a 24px target. Measured before: the
   row's anchors were 10.5px text with no target height. */
.notebook.lum-amber-deep .notebook-entry-acts a,
.notebook.lum-amber-deep .notebook-entry-acts button{
  font-size:12px;
  min-height:24px;
  display:inline-flex;
  align-items:center;
}

/* --- MO-1 · the spread answers the hand ----------------------------------
   The SAVE PULSE itself is the kit's .mo-savepulse, applied by
   renderNotebookEntry to the note just committed. These are the hover/press
   moments on the surrounding controls. */
.notebook.lum-amber-deep .nb-tab,
.notebook.lum-amber-deep .notebook-entry-acts a{
  transition:color var(--dur-fast) var(--ease-standard),
             background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.notebook.lum-amber-deep .nb-tab:active,
.notebook.lum-amber-deep .nb-capture:active{
  transform:translateY(1px) scale(.99);
  transition:transform 90ms var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){
  .notebook.lum-amber-deep .nb-tab,
  .notebook.lum-amber-deep .notebook-entry-acts a{ transition:none!important; }
  .notebook.lum-amber-deep .nb-tab:active,
  .notebook.lum-amber-deep .nb-capture:active{ transform:none!important; }
}

/* --- CC-2 · the capture composer, carved ---------------------------------
   The composer textarea gets the carved recess (controls are cut INTO the
   paper, content sits ON it). Applied here rather than by adding .k-field in
   the renderer, because the composer is an auto-growing textarea whose height
   is JS-managed -- .k-field's min-height would fight autogrowWriteline. Same
   grammar, expressed where it does not contest the behaviour. */
.notebook.lum-amber-deep .nb-composer .ce,
.notebook.lum-amber-deep .notebook-writeline textarea{
  background:var(--sunk);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(80,50,15,.14), inset 0 0 0 1px rgba(255,255,255,.35);
  transition:box-shadow var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.notebook.lum-amber-deep .nb-composer .ce:focus,
.notebook.lum-amber-deep .notebook-writeline textarea:focus{
  border-color:var(--gold);
  box-shadow:inset 0 1px 2px rgba(80,50,15,.16), 0 0 0 3px rgba(168,118,26,.22);
  outline:none;
}
.notebook.lum-amber-deep .nb-tab:focus-visible,
.notebook.lum-amber-deep .notebook-entry-acts a:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:2px;
}
/* END R-POLISH B1 — NOTEBOOK */

/* --- TY-1 floor · THE MEASURED COMPLETION --------------------------------
   The enumerated list above was written from a grep and was INCOMPLETE — the
   live floor scan then found four more offenders, which is the whole reason
   the scan is the gate and the list is not:
     · .notebook-entry-overflow — a SECOND actions container beside
       .notebook-entry-acts, carrying its own add-to-arc / delete /
       delete-confirm / delete-cancel links at 10.5px. Targeting only
       .notebook-entry-acts left every one of them below the floor.
     · .notebook-entry-tag — the register chip, the smallest text in the app at 8.5px.
     · .nb-mode .handoff and .nb-switch — 11px composer chrome.
   Re-measured to zero after this block. */
.notebook.lum-amber-deep .notebook-entry-overflow a,
.notebook.lum-amber-deep .notebook-entry-overflow button{
  font-size:12px;
  min-height:24px;
  display:inline-flex;
  align-items:center;
}
.notebook.lum-amber-deep .notebook-entry-tag{ font-size:12px; padding:2px 9px; }
.notebook.lum-amber-deep .nb-mode .handoff,
.notebook.lum-amber-deep .nb-switch{ font-size:12px; }

/* --- TY-1 floor · HOME, THE MEASURED COMPLETION --------------------------
   The Home list above was ALSO written from a grep and was ALSO incomplete —
   the exhaustive own-text scan found three more, one of them the smallest text
   in the app. Recording the ruling, not just the fix:
     · .home-mspine-title 10px -> 12px. It is the fallback label inside a 62x92
       cover PLACEHOLDER, so it is clamped to two lines to stay in the tile.
     · .home-mspine-pending "cover pending" was 6.5px — unreadable at any
       distance, i.e. decoration wearing the costume of text. Raising it to 12px
       inside a 62px tile would crowd out the title it sits under, so the honest
       reading of TY-1 ("nothing in the app renders smaller than 12") is that this
       micro-label should not be TEXT at all: the empty placeholder already says
       "no cover", and the book's full title is on the anchor's own title
       attribute, so nothing is lost to a reader or to assistive tech.
     · .app-nav-search-kbd (the ⌘K badge) 10px -> 12px.
   FLAGGED for Preston's felt pass: the "cover pending" removal is the one
   judgement call in this batch that removes something a reader could see. */
.home-page.lum-amber-deep .home-mspine-title{
  font-size:12px;
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-page.lum-amber-deep .home-mspine-pending{ display:none; }
.app-nav-search-kbd{ font-size:12px; }

/* ===========================================================================
   THE ARC STANDARD — S1 · THE FIELD                       (2026-07-22, v3.244)
   Brief: docs/studio/arc-standard-brief.md (9f254a0). Mockup (felt-passed):
   mockup/arc-standard @ 1ee4bb5.

   LAW 1 — ONE GROUND. The arc interior is ONE lit sheet on the Hour's twilight,
   world margins visible, and NOTHING floats on that sheet as a panel. What this
   replaces was the pre-WALL shelf disease, measured before the build: the wrap
   painted rgb(233,220,188) and the constellation panel painted rgb(253,249,238)
   inside it — a visible seam on all four sides, with a header above it, a rail
   beside it, and seven controls scattered around all three. There is no panel
   here now, so there is no seam to fix.

   The sheet recipe is the SHIPPED one (.shelf.lum-amber-deep, above): the same
   --card-* vellum, the same --sheet-gap margin, the same --card-shadow. It is
   not re-derived here, because one world means one recipe.
   ======================================================================== */

.arcfield.af-world{
  /* the sheet's own ink ramp: inside the vellum the type crosses back to print */
  --ink:var(--card-ink); --ink-2:var(--card-ink-2); --ink-3:var(--card-meta);
  padding:0 0 96px;
  margin-top:calc(var(--sheet-gap) + env(safe-area-inset-top));
}
.arcfield.af-world .af-sheet{
  background-color:var(--card-1);
  background-image:linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
  background-attachment:scroll;  /* a sheet scrolls with the page; only the world is fixed */
  margin:0 var(--sheet-gap);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  color:var(--card-ink);
  overflow:hidden;
}
/* F4 THE HARVEST TURN — a finished arc reads finished at a glance, badge-free:
   the whole sheet takes a warm-gold cast. Weather carries "finished"; there is
   no chip, no label on any mark, nothing added to the composition. */
.arcfield.af-world .af-sheet.is-harvest{
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(223,183,89,.22) 0%, rgba(223,183,89,.06) 46%, rgba(223,183,89,0) 72%),
    linear-gradient(180deg, var(--harvest-1) 0%, var(--harvest-2) 100%);
}

/* ---- THE SKY (F4 / law 3) — an atmospheric band, not a header. No rule
   beneath it: a rule would make it a header again, and the question would read
   as a title over content rather than as sky over a field.
   F2 PRESENCE (S-FELT): the sky flows INTO the field as ONE sheet — no hard band
   edge. The overlay is a gentle brightening at the sheet's head that dissolves
   fully into the vellum well before the gate row, so sky, gate and field read as
   one continuous surface rather than a bright band stacked on a page. --------- */
.arcfield.af-world .af-sky{
  padding:52px 46px 34px;
  background:linear-gradient(180deg,
    rgba(255,251,240,.66) 0%,
    rgba(253,247,232,.28) 52%,
    rgba(246,239,220,0) 100%);
}
.arcfield.af-world .af-q{
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(28px, 2.8vw, 37px); line-height:1.16; letter-spacing:.002em;
  color:var(--card-ink); margin:0; max-width:34ch;
  border:0; border-bottom:1px dashed transparent; background:none; padding:0;
  transition:border-color 150ms var(--ease, ease);
}
.arcfield.af-world h1.af-q[role="button"]{ cursor:text; }
.arcfield.af-world h1.af-q[role="button"]:hover,
.arcfield.af-world .af-invite[role="button"]:hover{ border-bottom-color:rgba(38,32,25,.22); }
.arcfield.af-world .af-q:focus{ outline:none; border-bottom-color:var(--gold-on-card); }
.arcfield.af-world input.af-q-edit{ width:100%; max-width:34ch; display:block; }
/* the ANSWER joins the question in the SAME display voice — one completed
   thought standing on one line of sky, never a caption under a title. */
.arcfield.af-world .af-a{
  font-family:var(--font-serif); font-weight:500; font-style:italic;
  font-size:clamp(25px, 2.5vw, 33px); line-height:1.2;
  color:var(--card-ink-warm); margin:18px 0 0; max-width:34ch;
}
/* law 4 — the empty carries no furniture: ONE --ink-3 line and nothing else. */
.arcfield.af-world .af-invite{
  font-family:var(--font-serif); font-style:italic; font-size:20px;
  color:var(--card-meta); margin:0; max-width:34ch;
  border:0; border-bottom:1px dashed transparent; padding:0;
}
/* value embers RIDE the sky: a small gold mark and fine text. No pill, no
   border, no fill — sky, not kit chrome. When there are none there is nothing;
   the old "Values this carries" panel dissolves entirely. */
.arcfield.af-world .af-embers{ display:flex; gap:22px; flex-wrap:wrap; margin:26px 0 0; }
.arcfield.af-world .af-ember{
  display:inline-flex; align-items:baseline; gap:7px;
  font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--ember-ink);
}
.arcfield.af-world .af-ember i{
  width:5px; height:5px; border-radius:50%; background:var(--gold-ember);
  box-shadow:0 0 7px 1px rgba(223,183,89,.75);
  flex:0 0 auto; position:relative; top:-3px;
}

/* ---- THE GATE ROW (F5 / law 5) — every arc control lives here and nowhere
   else. A kicker, one act, one door, one overflow. ----------------------- */
.arcfield.af-world .af-gate{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 46px 18px;
}
.arcfield.af-world .af-kicker{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--card-meta);
  margin:0 auto 0 0; min-width:0;
}
.arcfield.af-world .af-btn{
  font-family:var(--font-body); font-size:13.5px; border-radius:var(--radius-pill, 999px);
  cursor:pointer; padding:9px 16px; min-height:44px;
  border:1px solid rgba(38,32,25,.2); background:rgba(255,255,255,.5);
  color:var(--card-ink);
  transition:border-color 150ms var(--ease, ease), background 150ms var(--ease, ease);
}
.arcfield.af-world .af-btn:hover{ border-color:var(--gold-on-card); }
.arcfield.af-world .af-btn-primary{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold-ember));
  border-color:transparent; color:#3d2807; font-weight:600;
}
.arcfield.af-world .af-door{
  border-color:rgba(143,106,18,.5); color:var(--gold-ink-door); font-weight:500;
}
.arcfield.af-world .af-door-published{
  display:inline-flex; align-items:center; min-height:44px; padding:9px 16px;
  border-radius:var(--radius-pill, 999px); border:1px solid rgba(143,106,18,.5);
  background:rgba(143,106,18,.10); color:var(--gold-ink-door);
  font-family:var(--font-body); font-size:13.5px; font-weight:500;
}
.arcfield.af-world .af-btn-quiet{ background:none; border-color:transparent; color:var(--card-ink-2); }
.arcfield.af-world .af-btn-more{ width:44px; padding:0; text-align:center; color:var(--card-meta); }

/* the overflow menu — SOLID, never blurred (canon §2: no backdrop-filter on
   any dropdown, at any width; and no filter/transform on an ancestor of an
   absolutely-positioned child that can overflow it — the iOS nav bug). */
.arcfield.af-world .af-more{ position:relative; }
.arcfield.af-world .af-menu{
  display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  min-width:238px; padding:8px; border-radius:var(--radius-md, 12px);
  background:var(--card-1); border:1px solid rgba(38,32,25,.16);
  box-shadow:var(--card-shadow);
}
.arcfield.af-world .af-menu.is-open{ display:block; }
.arcfield.af-world .af-menu-head{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--card-meta); margin:10px 8px 4px;
}
.arcfield.af-world .af-menu-head:first-child{ margin-top:2px; }
.arcfield.af-world .af-menu-item{
  display:block; width:100%; text-align:left; cursor:pointer;
  font-family:var(--font-body); font-size:13.5px; color:var(--card-ink);
  background:none; border:0; border-radius:var(--radius-sm, 8px);
  padding:9px 10px; min-height:38px;
}
.arcfield.af-world .af-menu-item:hover{ background:rgba(38,32,25,.06); }
.arcfield.af-world .af-menu-item.is-danger{ color:var(--danger); }
.arcfield.af-world .af-menu-item.is-connecting{
  background:rgba(194,164,99,.22); box-shadow:inset 0 0 0 1px var(--thread);
}
.arcfield.af-world .af-menu-yumi:empty{ display:none; }
.arcfield.af-world .af-menu-yumi{ padding:2px 10px 8px; font-size:13px; color:var(--card-ink-2); }

/* ---- THE FIELD (law 1) — the arrangement sits DIRECTLY on the sheet. No
   container fill, no border, no shadow, no inner scroll context: there is no
   panel here to have a seam, and one scroll world (RD-2). --------------- */
.arcfield.af-world .af-field{
  background:none; border:0; box-shadow:none; padding:0 30px; margin:0;
  overflow:visible; min-height:0;
}
.arcfield.af-world .af-field::before,
.arcfield.af-world .af-field::after{ content:none; }
.arcfield.af-world .af-field svg{ display:block; width:100%; height:auto; overflow:visible; }
/* F7 THE ZOOM (S2) — the camera flies in toward the tapped mark and the route
   swaps to the clearing. A transform on the CONTAINER only; mark positions
   inside the SVG never move (law 7). MO-1 timing + easing; the sheet's
   overflow:hidden clips the growing field, so it reads as flying inward.
   Under reduced motion the flight never starts (skipped in JS) — the class is
   still defined but harmless. */
.arcfield.af-world .af-field{ transform:scale(1); opacity:1; will-change:transform, opacity; }
.arcfield.af-world .af-field.af-zooming{
  transition:transform var(--dur-gentle, 300ms) cubic-bezier(.22,1,.36,1),
             opacity var(--dur-gentle, 300ms) ease;
  transform:scale(2.8);
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .arcfield.af-world .af-field.af-zooming{ transition:none; transform:none; opacity:1; }
}
/* F7 QUIET LABELS — a resting mark carries its NAME and nothing else; the
   thread count is a property of the APPROACH (S2), never of rest. The halo
   stroke keeps a label legible where it crosses a thread. */
.arcfield.af-world .st-mlabel{
  font-family:var(--font-body); fill:var(--card-ink-2);
  paint-order:stroke; stroke:var(--card-1); stroke-width:3px; stroke-linejoin:round;
}

/* ---- THE SOIL ROW (G1 / law 9) — books stand at the field's FOOT in the
   shelf's cover dialect, on a soil-tinted band. They are ground, not growth:
   never inside the arrangement canvas again. ----------------------------- */
.arcfield.af-world .af-soil{
  padding:20px 46px 30px;
  background:linear-gradient(180deg, rgba(88,68,34,.05), rgba(88,68,34,.10));
}
.arcfield.af-world .af-soil-h{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--card-meta); margin:0 0 14px;
}
.arcfield.af-world .af-soil-empty{
  font-family:var(--font-serif); font-style:italic; font-size:15px;
  color:var(--card-meta); margin:0;
}
.arcfield.af-world .af-soil-row{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.arcfield.af-world .af-book{
  position:relative; width:58px; height:82px; flex:0 0 auto; overflow:hidden;
  border-radius:2px 3px 3px 2px; text-decoration:none;
  background:linear-gradient(150deg, var(--cloth-page-1), var(--cloth-page-2));
  box-shadow:0 1px 2px rgba(38,32,25,.20), 0 4px 10px rgba(38,32,25,.10);
}
/* the bound edge — the shelf's cloth spine, so a coverless book is a BOOK and
   not a hole. 2 of the 5 seed books carry no coverUrl; on a real library the
   fraction is larger, which is why this is the base and the cover is the skin. */
.arcfield.af-world .af-book::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:rgba(38,32,25,.16); z-index:1;
}
.arcfield.af-world .af-book-t{
  position:absolute; left:10px; right:5px; top:10px;
  font-family:var(--font-serif); font-size:9px; line-height:1.2; color:var(--card-ink-warm);
}
.arcfield.af-world .af-book-a{
  position:absolute; left:10px; right:5px; bottom:7px; font-style:normal;
  font-family:var(--font-mono); font-size:6.5px; letter-spacing:.04em; color:var(--card-meta);
}
.arcfield.af-world .af-book-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* the whisper card rides the sheet's margin, not the retired warm-dim room's */
.arcfield.af-world .arcfield-whisper{ margin:18px var(--sheet-gap) 0; }

/* ---- MOBILE (<=759) — same grammar full-width, one scroll world, no pinch,
   no pan. The sky band stays slim; the Gate Row wraps; the P3 44px targets are
   in the base rules above, not a mobile special case. -------------------- */
@media (max-width:759px){
  .arcfield.af-world .af-sky{ padding:30px 20px 24px; }
  .arcfield.af-world .af-q{ font-size:26px; }
  .arcfield.af-world .af-a{ font-size:22px; }
  .arcfield.af-world .af-invite{ font-size:18px; }
  .arcfield.af-world .af-gate{ padding:4px 20px 14px; gap:10px; }
  .arcfield.af-world .af-kicker{ flex:1 0 100%; margin:0 0 4px; }
  .arcfield.af-world .af-field{ padding:0 12px; }
  .arcfield.af-world .af-soil{ padding:16px 20px 24px; }
  /* the soil is a horizontal band at 390 — shelf-dialect overflow, so the row
     never wraps into a second stack and never widens the document (RD-2). */
  .arcfield.af-world .af-soil-row{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .arcfield.af-world .af-menu{ right:auto; left:0; min-width:0; width:calc(100vw - 56px); }
}

/* S1 fix — the soil book's text box. At 58x82 with a 9px serif, a long title
   ran under the author line and the two collided ("...Casino Capitalism" over
   "Henry Giroux") on three of the five seed books. The title is now bounded
   above the author's line and clamped, and the box carries a little more room.
   Real titles on this arc run 16-59 chars, so this is sized to the data. */
.arcfield.af-world .af-book{ width:62px; height:90px; }
.arcfield.af-world .af-book-t{
  top:9px; bottom:22px; overflow:hidden; font-size:8.5px; line-height:1.22;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
}
.arcfield.af-world .af-book-a{ bottom:8px; font-size:6px; }

/* ===========================================================================
   THE ARC STANDARD — S2 · THE CLEARING (the workshop reframed)   (2026-07-23)
   Field -> clearing -> page is one continuous zoom. The clearing is the
   workshop at the middle distance: a breadcrumb (where-you-are), ONE faint
   horizon line (G2, the only continuity cue), the D3 one-gesture return. The
   court — the workshop's two-column anatomy — is preserved; this is framing. */
.st-build.lum-amber-deep .stb-clearing-crumb{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin:0 0 14px; font-family:var(--lum-mono, var(--font-mono));
  font-size:11px; letter-spacing:.08em;
}
.st-build.lum-amber-deep .stb-crumb-back{
  color:var(--lum-gold, var(--gold)); text-decoration:none;
  text-transform:uppercase; letter-spacing:.13em;
}
.st-build.lum-amber-deep .stb-crumb-back:hover{ text-decoration:underline; }
.st-build.lum-amber-deep .stb-crumb-sep{ color:var(--lum-ink-4, var(--ink-4)); }
.st-build.lum-amber-deep .stb-crumb-here{
  color:var(--lum-ink-2, var(--ink-2)); font-family:var(--lum-serif, var(--font-serif));
  font-style:italic; font-size:14px; letter-spacing:0; text-transform:none;
}
/* the single faint horizon — the clearing's one continuity cue (G2). */
.st-build.lum-amber-deep .stb-clearing-horizon{
  height:1px; margin:0 0 22px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--lum-gold, var(--gold)) 34%, transparent) 22%,
    color-mix(in srgb, var(--lum-gold, var(--gold)) 34%, transparent) 78%,
    transparent 100%);
  opacity:.6;
}

/* ===========================================================================
   THE ARC STANDARD — S3 · THE UNROOTED SEAT              (2026-07-23, ruling 5a)
   Orphan sub-theories (arcId → no arc) surface here, honest and repairable.
   Quiet by design and rendered only when orphans exist (sparse-honest). Scoped
   to the light Arcs page. */
.arcs.lum-amber-deep .arcs-unrooted{ margin:var(--sp-6, 40px) 0 0; }
.arcs.lum-amber-deep .arcs-unrooted-h{ margin-bottom:6px; }
.arcs.lum-amber-deep .arcs-unrooted-sub{
  font-family:var(--font-serif); font-style:italic; font-size:15px;
  color:var(--ink-3); margin:0 0 14px;
}
.arcs.lum-amber-deep .arcs-unrooted-row{
  display:flex; align-items:center; gap:14px;
  padding:11px 14px; border:1px solid var(--border);
  border-radius:var(--radius-md, 12px); background:var(--surface);
  margin:0 0 10px;
}
.arcs.lum-amber-deep .arcs-unrooted-mark{ flex:0 0 auto; width:26px; height:26px; line-height:0; }
.arcs.lum-amber-deep .arcs-unrooted-title{
  flex:1 1 auto; min-width:0; font-family:var(--font-serif); font-size:17px;
  color:var(--ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.arcs.lum-amber-deep .arcs-unrooted-title:hover{ text-decoration:underline; }
.arcs.lum-amber-deep .arcs-unrooted-adopt{ position:relative; flex:0 0 auto; }
.arcs.lum-amber-deep .arcs-unrooted-btn{
  font-family:var(--font-body); font-size:13px; cursor:pointer;
  padding:8px 14px; min-height:40px; border-radius:var(--radius-pill, 999px);
  border:1px solid var(--gold); background:none; color:var(--gold-ink, var(--gold));
}
.arcs.lum-amber-deep .arcs-unrooted-btn:hover{ background:var(--wash); }
.arcs.lum-amber-deep .arcs-unrooted-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  min-width:200px; max-height:280px; overflow:auto; padding:6px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md, 12px); box-shadow:var(--card-shadow);
}
.arcs.lum-amber-deep .arcs-unrooted-menu.is-open{ display:block; }
.arcs.lum-amber-deep .arcs-unrooted-opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:none; border:0; border-radius:var(--radius-sm, 8px);
  padding:9px 10px; min-height:38px;
}
.arcs.lum-amber-deep .arcs-unrooted-opt:hover{ background:var(--wash); }
@media (max-width:759px){
  .arcs.lum-amber-deep .arcs-unrooted-menu{ right:auto; left:0; }
}

/* THE ARC STANDARD — S3 · the weave a11y twin (field-card acts). Revealed when
   a field card is lifted; keyboard/touch users weave without dragging. */
.st-build.lum-amber-deep .stb-fc-acts{
  display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;
}
/* red-team BLOCK #3: the acts belong to the LIFTED state only — never floating
   under a collapsed card. Scoped so an un-lift hides them even before the node
   is removed. */
.st-build.lum-amber-deep .rf-card:not(.rf-lifted) .stb-fc-acts{ display:none; }
.st-build.lum-amber-deep .stb-fc-act{
  font-family:var(--lum-mono, var(--font-mono)); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; text-decoration:none;
  padding:6px 11px; min-height:32px; border-radius:var(--radius-pill, 999px);
  border:1px solid var(--lum-line, rgba(255,236,200,.22));
  color:var(--lum-ink-2, var(--ink-2)); background:none;
}
.st-build.lum-amber-deep .stb-fc-weave{ border-color:var(--lum-gold-d, var(--gold)); color:var(--lum-gold, var(--gold)); }
.st-build.lum-amber-deep .stb-fc-act:hover{ border-color:var(--lum-gold, var(--gold)); }

/* ===========================================================================
   THE ARC STANDARD — S4 · THE MARK COMPOSER              (2026-07-23)
   Form-first: silhouette → treatment → pigment. Whole composed marks are
   chosen. The uniqueness law is enforced in-arc — a combination a sibling
   already wears is shown closed and Plant is refused. Reuses the shipped
   .st-picker modal shell (backdrop + dialog); these rules dress the composer's
   own preview + grids. */
.mc-composer{ max-width:560px; }
.mc-preview{
  display:flex; align-items:center; justify-content:center;
  height:104px; margin:6px 0 6px;
}
.mc-preview svg{ width:66px; height:66px; }
.mc-row-label{
  display:flex; align-items:baseline; gap:10px; margin:16px 0 8px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
}
.mc-row-name{ color:var(--ink-2); }
.mc-row-hint{ color:var(--meta); font-size:9.5px; }
.mc-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:9px; }
.mc-cell{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 4px 8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md, 12px);
  transition:border-color 120ms var(--ease, ease), box-shadow 120ms var(--ease, ease);
}
.mc-cell:hover{ border-color:var(--gold); }
.mc-cell-mark{ width:34px; height:34px; line-height:0; }
.mc-cell-name{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.03em; color:var(--meta); text-transform:uppercase; }
.mc-cell.is-sel{ border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.mc-cell.is-taken{
  opacity:.34; cursor:not-allowed;
  background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 5px, transparent 5px 10px);
}
.mc-cell.is-taken .mc-cell-name{ text-decoration:line-through; }
.mc-foot{ display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }
.mc-law{ font-family:var(--font-body); font-size:12px; color:var(--ink-2); margin-right:auto; flex:1 1 200px; }
.mc-law-warn{ color:var(--danger); }
.mc-plant.is-refused{ opacity:.45; cursor:not-allowed; }
@media (max-width:759px){
  .mc-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* =============================================================================
   R-CAPTURE — THE DOOR (the capture sheet). Ported from the felt-passed spec
   docs/studio/mockups/capture.html (SHAPE-B, PASS 2026-07-23). Ground = LIGHT
   working surface over --scrim (ruled). Every color is a named token (Law 6);
   .mo-savepulse + @keyframes mo-save are REUSED from praxis-kit.css (not
   redefined). Desktop-first: base = the >=760 corner card; @media(max-width:759)
   steps down to the bottom sheet (CLAUDE.md §3). z-ledger: scrim 10020 / sheet
   10021 (app modal tier) / toast 10022.
   ============================================================================= */

/* DEVICE FELT PASS (Defect 2) — the floating-control stack clearance, ONE token so
   every scroll container that carries a floating control (the "+" door, the Yumi
   bloom, the scan foot) clears it by the same measure and the four surfaces never
   drift apart. Sized to the TALLEST reach: the shelf-raised "+" = --sp-5 (24) + 62px
   lift + 42px height = 128px, + a 32px gap = 160px (bumped from 144 at the device felt
   pass: +16 was positive but read crowded on the exact surface that had overlapped;
   the pad sits below the fold on every surface so the extra air costs nothing visible).
   safe-area is added at each use site (the FABs already carry env(safe-area-inset-bottom),
   so it cancels in the gap). */
:root{ --floating-stack-h:160px; }
/* CD-1 — the "+" create door (bottom-left), mirroring .yumi-bloom's ruled
   size/position/z (components.css:19-58) in the opposite corner. Gilded family
   (Universal Recipe 5) so the two corners read as one "presence" grammar. */
.cap-create-door{
  position:fixed; bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  left:var(--sp-5); z-index:9999; width:42px; height:42px; border:none; background:transparent;
  padding:0; margin:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-appearance:none; appearance:none;
}
.cap-create-glyph{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(180deg, var(--field-1) 0%, var(--gold-hi) 42%, var(--gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 0 8px color-mix(in srgb, var(--gold-hi) 40%, transparent);
  display:flex; align-items:center; justify-content:center; transition:transform var(--dur-fast) var(--ease-standard);
}
.cap-create-door:hover .cap-create-glyph{ transform:translateY(-2px); }
.cap-create-door:focus-visible .cap-create-glyph{ outline:2px solid var(--gold-hi); outline-offset:3px; }
.cap-create-glyph svg{ width:18px; height:18px; }
/* CD-1 corner reconcile (gate fix): at mobile on the Shelf the shipped
   .shelf-add-primary "+ Add a book" FAB owns bottom-left (components.css:12890,
   z:90). The global create-door would render on top of it (z:9999), obscuring +
   stealing its clicks — so on #books it stacks ABOVE the FAB (route-toggled by
   capUpdateCreateDoorPos()). The exact stacking is an OWNER felt call. */
@media (max-width:759px){
  .cap-create-door.cap-on-shelf{ bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px) + 62px); }
}

/* CD-1 — the nav entry. Gold underline = door-open (canon §4-B); the transparent
   border reserves the space so toggling never shifts layout. */
.app-nav-link.cap-nav-entry{ cursor:pointer; border-bottom:2px solid transparent; }
.app-nav-link.cap-nav-entry[aria-current="true"]{ color:var(--dark-ink, var(--ink)); border-bottom-color:var(--gold); }

/* CD-2/3/4/5/6 — the sheet */
.capdoor-scrim{
  position:fixed; inset:0; z-index:10020; background:var(--scrim);
  opacity:0; pointer-events:none; transition:opacity var(--dur-gentle) var(--ease-standard);
}
.capdoor-scrim.is-open{ opacity:1; pointer-events:auto; }
.capdoor-scrim.is-nudge{ animation:cap-nudge 260ms var(--ease-standard); }
@keyframes cap-nudge{ 0%,100%{ background:var(--scrim); } 50%{ background:color-mix(in srgb, var(--scrim) 80%, black 20%); } }

.capdoor-sheet{
  position:fixed; z-index:10021; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; overflow:hidden;
  left:var(--sp-5); bottom:calc(var(--sp-5) + 42px + 14px);
  width:420px; max-width:calc(100vw - 48px); border-radius:var(--radius-lg);
  max-height:min(620px, calc(100vh - 140px));
  transform-origin:bottom left; transform:scale(.94) translateY(10px); opacity:0; pointer-events:none;
  transition:transform var(--dur-gentle) var(--ease-emphasis), opacity var(--dur-gentle) var(--ease-standard);
}
.capdoor-sheet.is-open{ transform:none; opacity:1; pointer-events:auto; }
.capdoor-sheet.cap-expanded{ width:480px; max-height:min(700px, calc(100vh - 110px)); }

@media (max-width:759px){
  .capdoor-sheet{
    left:0; right:0; bottom:0; top:auto; width:auto; max-width:none;
    border:none; border-top:1px solid var(--border);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:0 -14px 40px -18px var(--scrim);
    max-height:56vh;
    /* S3f: opacity:0 when closed so a transformed/filtered ancestor (iOS fixed-pos
       hazard) or the dynamic viewport can never leak the painted sheet onto the page. */
    transform:translateY(100%); opacity:0; pointer-events:none;
    transition:transform .26s var(--ease-standard), opacity .26s var(--ease-standard);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .capdoor-sheet.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  /* MOBILE-SHEET-POLISH FAIL A (2026-07-24): the desktop rule .capdoor-sheet.cap-expanded
     sets width:480px; on mobile the expanded modes (voice/paste/photo/scan) must stay the
     full-width bottom sheet — reset width:auto so the 480px never overflows a 390 viewport. */
  .capdoor-sheet.cap-expanded{ width:auto; max-height:86vh; }
  /* MOBILE-SHEET-POLISH FAIL B: hide the desktop ⌘Enter keyboard hint on touch and keep the
     File button right-aligned; safe-area L/R padding so File clears a notch in any orientation.
     Scoped to the FOOT hint only — the uploadrow's .capdoor-hint copy is untouched. */
  .capdoor-foot{ padding-left:calc(16px + env(safe-area-inset-left, 0px)); padding-right:calc(16px + env(safe-area-inset-right, 0px)); }
  .capdoor-foot .capdoor-hint{ display:none; }
  .capdoor-foot .capdoor-commit{ margin-left:auto; }
}

.capdoor-handle{ display:none; }
@media (max-width:759px){
  .capdoor-handle{
    display:block; width:36px; height:4px; border-radius:999px; background:var(--border);
    margin:10px auto 0; cursor:grab; touch-action:none;
  }
}

.capdoor-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 16px 0; flex:none; }
.capdoor-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.capdoor-eyebrow-sub{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--ink-3); letter-spacing:.02em; text-transform:none; margin-top:2px; }
.capdoor-close{
  flex:none; width:32px; height:32px; border:none; background:transparent; color:var(--ink-3);
  font-size:20px; line-height:1; cursor:pointer; border-radius:999px;
}
.capdoor-close:hover{ color:var(--ink); background:var(--wash); }
.capdoor-close:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }

/* DEVICE FELT PASS (Defect 3, UNPROVEN — iOS-WebKit only, not reproducible in Blink):
   .capdoor-body is a flex item (flex:1 1 auto) in the column-flex sheet, with content
   that overflows its box (measured +24px @390 note mode). Default min-height:auto lets
   iOS-WebKit refuse to shrink the item, so overflow-y:auto never engages and the field
   lays over the modes' 2nd row. min-height:0 lets it shrink and actually scroll. Zero
   effect in Blink (it already shrinks); the real check is Preston's device walk. */
.capdoor-body{ padding:10px 16px 4px; overflow-y:auto; flex:1 1 auto; min-height:0; }

/* CD-6 — the mode set */
.capdoor-modes{ display:flex; gap:6px; flex-wrap:wrap; padding:2px 0 12px; }
.capdoor-mode{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12.5px;
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:999px; padding:7px 12px; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.capdoor-mode:hover{ color:var(--ink); border-color:var(--gold); }
.capdoor-mode[aria-pressed="true"]{ color:var(--gold-deep); background:color-mix(in srgb, var(--gold) 16%, transparent); border-color:var(--gold); font-weight:600; }
.capdoor-mode .ic{ font-size:13px; line-height:1; }
.capdoor-mode.is-seat{ opacity:.82; }

/* CD-2 — the hero field (one textarea, reused across note/voice/paste) */
.capdoor-field-wrap{
  background:var(--sunk); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:10px 12px; box-shadow:inset 0 1px 2px rgba(80,50,15,.14), inset 0 0 0 1px rgba(255,255,255,.35);
  transition:box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.capdoor-field-wrap:focus-within{
  border-color:var(--gold);
  box-shadow:inset 0 1px 2px rgba(80,50,15,.16), 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.capdoor-field{
  width:100%; border:none; background:transparent; outline:none; resize:none;
  font-family:var(--font-serif); font-size:16px; line-height:1.5; color:var(--ink);
  min-height:46px; display:block;
}
.capdoor-field::placeholder{ color:var(--ink-3); font-style:italic; }
.cap-expanded .capdoor-field{ min-height:88px; font-size:17px; }

/* register segmented control (light variant of the shipped .seg pattern) */
.capdoor-seg{ display:inline-flex; padding:3px; gap:2px; background:var(--sunk); border:1px solid var(--border); border-radius:999px; margin-top:10px; }
.capdoor-seg button{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; border:none; background:transparent; color:var(--ink-3); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard);
}
.capdoor-seg button:hover{ color:var(--ink); }
.capdoor-seg button[aria-pressed="true"]{ font-weight:700; }
.capdoor-seg button[aria-pressed="true"][data-r="marginalia"]{ background:var(--marginalia-color); color:var(--br-deep); }
.capdoor-seg button[aria-pressed="true"][data-r="question"]{ background:var(--question-color); color:var(--text-on-dark); }
.capdoor-seg button[aria-pressed="true"][data-r="journal"]{ background:var(--journal-color); color:var(--text-on-dark); }

/* CD-3 — the context chip (always present, always tappable) */
.capdoor-context{ margin-top:12px; position:relative; }
.capdoor-chip{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:13px;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:999px; padding:7px 12px 7px 9px; cursor:pointer; max-width:100%;
}
.capdoor-chip:hover{ border-color:var(--gold); }
.capdoor-chip .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.capdoor-chip .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.capdoor-chip .chev{ font-size:9px; color:var(--ink-3); }
.capdoor-chip-pop{
  position:absolute; left:0; top:calc(100% + 6px); min-width:230px; z-index:5;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-1); padding:5px; display:none; max-height:240px; overflow-y:auto;
}
.capdoor-context.is-open .capdoor-chip-pop{ display:block; }
.capdoor-chip-opt{
  display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:8px; cursor:pointer;
  font-size:13px; color:var(--ink);
}
.capdoor-chip-opt:hover{ background:var(--wash); }
.capdoor-chip-opt .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.capdoor-chip-opt .sub{ color:var(--ink-3); font-size:11.5px; margin-left:auto; }
.capdoor-chip-opt[aria-selected="true"]{ font-weight:700; }

/* CD-5 — the caught-this-session strip */
.capdoor-caught{ margin-top:14px; display:flex; flex-direction:column; gap:6px; max-height:150px; overflow-y:auto; }
.capdoor-caught-empty{ font-family:var(--font-mono); font-size:11.5px; font-style:italic; color:var(--ink-3); margin-top:14px; }
.capdoor-caught-item{
  display:flex; align-items:baseline; gap:8px; padding:7px 9px; border-radius:8px;
  background:var(--surface-2); font-size:12.5px; color:var(--ink-2);
}
.capdoor-caught-item .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.capdoor-caught-item .txt{ flex:1; font-family:var(--font-serif); font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.capdoor-caught-item .target{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3); flex:none; }

/* DOOR-SEG (CD-6 Stage 3) — paste-split forward act + per-note review. Reuses the
   chip / seg idiom; #capSplit-scoped so the cap-mode-* hide selectors never touch it. */
.capdoor-caught-split{
  margin-left:auto; flex:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold); background:transparent; border:1px solid var(--border);
  border-radius:999px; padding:3px 9px; cursor:pointer;
}
.capdoor-caught-split:hover{ border-color:var(--gold); }
.capdoor-split{ margin-top:14px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-2); padding:12px 13px; }
.capdoor-split-loading{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-align:center; padding:16px 0; }
.capdoor-split-head{ font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--ink); margin:0 0 6px; }
.capdoor-split-row{ border-top:1px solid var(--border); padding:11px 0; }
.capdoor-split-head + .capdoor-split-row{ border-top:none; } /* CDSEG-NIT1: the head div is the real :first-of-type, so the old .capdoor-split-row:first-of-type never fired — target the first row after the head instead. */
.capdoor-split-text{ font-family:var(--font-serif); font-size:14px; line-height:1.45; color:var(--ink); white-space:pre-wrap; }
.capdoor-split-ctl{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px; }
#capSplit .capdoor-seg{ display:inline-flex; margin-top:0; }
.capdoor-split-chipwrap{ position:relative; }
.capdoor-split-chipwrap.is-open .capdoor-chip-pop{ display:block; }
/* CD6-SPLIT-POP-FIX (v3.258): flip the per-child picker ABOVE the chip when it would clip below the
   scrollable body fold (.open-up set in JS). Scoped to the split chipwrap — the door-core chip pop untouched. */
.capdoor-split-chipwrap.open-up.is-open .capdoor-chip-pop{ top:auto; bottom:calc(100% + 6px); }
.capdoor-split-foot{ display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:12px; }
.capdoor-split-cancel{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); background:transparent; border:none; cursor:pointer; }
.capdoor-split-cancel:hover{ color:var(--ink); }

/* CD-6 — voice hero (mode: voice) */
.capdoor-mic-hero{ display:none; flex-direction:column; align-items:center; text-align:center; margin:6px 0 14px; }
.cap-mode-voice .capdoor-mic-hero{ display:flex; }
.capdoor-mic{
  position:relative; width:72px; height:72px; border-radius:999px; border:none; cursor:pointer;
  color:var(--text-on-dark); background:radial-gradient(circle at 32% 28%, var(--teal), var(--gold) 130%);
  box-shadow:var(--shadow-2);
}
.capdoor-mic svg{ width:28px; height:28px; }
.capdoor-mic::before,.capdoor-mic::after{
  content:''; position:absolute; inset:-6px; border-radius:999px; border:2px solid var(--gold-hi); opacity:.35; pointer-events:none;
}
.capdoor-mic::after{ inset:-12px; opacity:.18; }
.capdoor-mic.is-listening{ animation:cap-mic-pulse 1.3s ease-in-out infinite; }
@keyframes cap-mic-pulse{ 0%,100%{ box-shadow:var(--shadow-2); } 50%{ box-shadow:var(--shadow-2), 0 0 0 9px rgba(216,164,65,.18); } }
.capdoor-mic-label{ margin-top:12px; font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--ink); }
.capdoor-mic-hint{ margin-top:3px; font-size:12px; color:var(--ink-3); max-width:32ch; }
.capdoor-bars{ display:none; gap:5px; align-items:flex-end; height:32px; margin:10px 0 4px; }
.cap-mic-active .capdoor-bars{ display:flex; }
.capdoor-bars span{ width:5px; border-radius:4px; background:linear-gradient(var(--teal), var(--gold)); animation:cap-eq 1s ease-in-out infinite; }
.capdoor-bars span:nth-child(1){ animation-delay:0s; } .capdoor-bars span:nth-child(2){ animation-delay:.12s; }
.capdoor-bars span:nth-child(3){ animation-delay:.24s; } .capdoor-bars span:nth-child(4){ animation-delay:.36s; }
.capdoor-bars span:nth-child(5){ animation-delay:.48s; }
@keyframes cap-eq{ 0%,100%{ height:9px; } 50%{ height:32px; } }
.capdoor-listen-state{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; color:var(--gold-deep); min-height:14px; }
.capdoor-loss-note{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); text-align:center; max-width:36ch; margin:8px auto 0; line-height:1.5; }

/* CD-6 — paste/import extras (mode: paste) */
.capdoor-uploadrow{ display:none; gap:8px; margin:0 0 10px; flex-wrap:wrap; }
.cap-mode-paste .capdoor-uploadrow{ display:flex; }
.capdoor-pill{
  font-family:var(--font-body); font-size:13px; color:var(--ink); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px; padding:8px 14px;
}
.capdoor-pill:hover{ border-color:var(--gold); }

/* scan seat (present-but-labeled; book-scan/OCR not built — SCAN owns it, §7). CD-6
   retired the photo seat: photo mode is now LIVE (rules below). */
.capdoor-seat-card{ display:none; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:30px 16px; border:1.5px dashed var(--border); border-radius:var(--radius-lg); color:var(--ink-3); margin-top:6px; }
.cap-mode-scan .capdoor-seat-card.for-scan{ display:flex; }
.capdoor-seat-card .ico{ width:32px; height:32px; opacity:.55; }
.capdoor-seat-card .lbl{ font-family:var(--font-body); font-size:13.5px; color:var(--ink-2); }
.capdoor-seat-card .sub{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-3); }
.cap-mode-scan  .capdoor-seg, .cap-mode-scan  .capdoor-context, .cap-mode-scan  .capdoor-field-wrap{ display:none; }
/* CD-6: photo mode is LIVE (migrated from the retired notebook writeline). It keeps the
   field + register + context (a note WITH a photo) and adds attach pills + a preview
   strip. Camera/OCR + book-scan stay SCAN's socket (the .for-scan seat, above). */
.capdoor-photo{ display:none; margin-top:2px; }
.cap-mode-photo .capdoor-photo{ display:block; }
.capdoor-photo-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.capdoor-photo-shots{ display:flex; flex-direction:column; gap:12px; }

/* footer — CD-4 talk-it-through seat (inert socket) + commit hint + commit */
.capdoor-foot{ flex:none; display:flex; align-items:center; gap:8px; padding:12px 16px 14px; border-top:1px solid var(--border); margin-top:4px; }
.capdoor-seat-btn{
  flex:none; width:32px; height:32px; border-radius:999px; border:1px dashed var(--line-2);
  background:transparent; color:var(--ink-3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  position:relative;
}
.capdoor-seat-btn:hover{ color:var(--teal); border-color:var(--teal); }
.capdoor-seat-btn svg{ width:15px; height:15px; }
.capdoor-seat-tip{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--br-deep); color:var(--text-on-dark); font-family:var(--font-body); font-size:11.5px;
  padding:7px 10px; border-radius:8px; white-space:nowrap; box-shadow:var(--shadow-1);
  opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-standard);
}
.capdoor-seat-btn.show-tip .capdoor-seat-tip{ opacity:1; }
.capdoor-hint{ flex:1 1 auto; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.capdoor-hint kbd{ font-family:var(--font-mono); font-size:9.5px; border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; color:var(--ink-4); background:var(--surface-2); }
.capdoor-commit{
  flex:none; font-family:var(--font-body); font-size:13.5px; font-weight:700; color:var(--br-deep);
  border:1px solid var(--gold-deep); border-radius:999px; padding:9px 18px; cursor:pointer;
  background:linear-gradient(180deg, var(--field-1) 0%, var(--gold-hi) 40%, var(--gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 6px 18px -8px rgba(217,164,65,.6);
}
.capdoor-commit:hover{ box-shadow:inset 0 1px 0 rgba(255,240,200,.7), 0 9px 22px -8px rgba(217,164,65,.72); }
.capdoor-commit:disabled{ opacity:.45; cursor:default; box-shadow:none; }
.capdoor-commit:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }

/* the save-pulse receipt toast (mirrors the kit .k-toast) */
.capdoor-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  z-index:10022; display:inline-flex; align-items:center; gap:14px;
  background:var(--br-deep); color:var(--text-on-dark); padding:12px 16px; border-radius:12px;
  box-shadow:var(--shadow-2); font-family:var(--font-body); font-size:13.5px;
  opacity:0; pointer-events:none; transition:opacity var(--dur-gentle) var(--ease-standard), transform var(--dur-gentle) var(--ease-standard);
  max-width:calc(100vw - 32px);
}
.capdoor-toast.is-show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.capdoor-toast button{ color:var(--gold-hi); background:none; border:0; font-weight:700; cursor:pointer; font-family:inherit; font-size:13.5px; flex:none; }
@media (max-width:759px){ .capdoor-toast{ bottom:calc(64px + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion:reduce){
  .capdoor-scrim, .capdoor-sheet, .capdoor-toast, .cap-create-glyph,
  .capdoor-mic, .capdoor-bars span, .mo-savepulse{ transition:none!important; animation:none!important; }
}

/* CA-1 — the desk's carrying-question row (its OWN block above .desk-row; the
   shipped .desk-head baseline flex stays a tight h2+count row). Inert until the
   renderShelfDesk wiring lands. */
.desk-question{ display:block; width:100%; margin:8px 0 16px; min-height:26px; }
.desk-question-line{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  background:none; border:none; padding:2px 0; cursor:text; text-align:left;
  font-family:var(--font-mono); font-size:13px; font-style:italic; color:var(--ink-3);
}
.desk-question-line:hover, .desk-question-line:focus-visible{ color:var(--ink-2); outline:none; }
.desk-question.is-authored .desk-question-line{
  font-family:var(--font-serif); font-style:normal; font-weight:500; font-size:18px; color:var(--ink);
}
.desk-question-clear{
  opacity:0; width:22px; height:22px; border-radius:999px; border:none; background:transparent;
  color:var(--ink-3); cursor:pointer; font-size:13px; flex:none;
  transition:opacity var(--dur-fast) var(--ease-standard);
}
.desk-question:hover .desk-question-clear, .desk-question-clear:focus-visible{ opacity:1; }
.desk-question-clear:hover{ color:var(--danger); }
.desk-question-input{
  font-family:var(--font-serif); font-size:18px; color:var(--ink); background:transparent;
  border:none; border-bottom:1px solid var(--gold); outline:none; width:100%; max-width:560px; padding:2px 0;
}
.desk-carry-confirm{
  margin-top:10px; max-width:440px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); font-size:13px; color:var(--ink-2); display:none; flex-direction:column; gap:9px;
}
.desk-carry-confirm.is-open{ display:flex; }
.desk-carry-confirm .q{ font-family:var(--font-serif); color:var(--ink); }
.desk-carry-confirm .row{ display:flex; gap:8px; }
.desk-carry-confirm button{ font-family:var(--font-body); font-size:12.5px; font-weight:600; border-radius:999px; padding:7px 14px; cursor:pointer; border:1px solid transparent; }
.desk-carry-confirm .replace{ background:var(--grad); color:var(--text-on-dark); }
.desk-carry-confirm .cancel{ background:transparent; border-color:var(--border); color:var(--ink-2); }

/* ============================================================================
   SCAN SURFACE (#scan) — ported from scan-surface.html (SHAPE-B mockup), the
   felt-pending porting reference. Additive, scoped under .scan-surface, all
   classes scan-prefixed, Universal v1.2 tokens wired real (mockup inlined the
   values; here they resolve from theme.css). The whole surface is one fixed
   full-viewport layer injected into #app; it covers the app nav. env() insets
   throughout; a prefers-reduced-motion block gives a still-state for every
   mandated signature. SCAN ROUND S2–S4.
   ============================================================================ */
.scan-surface{ position:fixed; inset:0; z-index:9000; overflow:hidden;
  background:var(--scan-cam-bg); color:var(--scan-on-dark);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
.scan-surface *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

.scan-screen{ position:absolute; inset:0; display:none; }
.scan-screen.is-active{ display:block; }

/* ---- camera stack (shared): live video / freeze canvas / warm-up veil ---- */
.scan-cam-stack{ position:absolute; inset:0; background:var(--scan-cam-bg); overflow:hidden; }
#scan-cam-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--scan-cam-bg); }
#scan-cam-freeze{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.scan-cam-warm{ position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(178deg,var(--hour-1),var(--hour-3) 62%,var(--hour-4));
  transition:opacity .5s ease; display:flex; align-items:center; justify-content:center; }
.scan-cam-warm.is-on{ opacity:1; }
.scan-warm-orb{ width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--gold-hi), var(--gold-ember) 55%, transparent 72%);
  animation:scanWarmPulse 1.4s ease-in-out infinite; }
@keyframes scanWarmPulse{ 0%,100%{ transform:scale(.82); opacity:.7 } 50%{ transform:scale(1.06); opacity:1 } }
.scan-warm-line{ position:absolute; bottom:38%; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--scan-on-dark-2); }
.scan-cam-tint{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 22%, transparent 62%, rgba(0,0,0,.62) 100%); }

/* ---- viewfinder chrome ---- */
.scan-vf-top{ position:absolute; top:0; left:0; right:0; z-index:20;
  padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
  display:flex; align-items:center; gap:10px; }
.scan-vf-back{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--scan-glass); border:1px solid rgba(246,239,224,.14);
  color:var(--scan-on-dark); font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.scan-vf-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--scan-on-dark-2); }
.scan-vf-top .scan-spacer{ flex:1; }
.scan-vf-torch{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--scan-glass); border:1px solid rgba(246,239,224,.14);
  color:var(--scan-on-dark); font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.scan-vf-torch.is-hidden{ display:none; }
.scan-torch-tip{ position:absolute; top:44px; right:0; width:158px; background:var(--scan-glass-2); color:var(--scan-on-dark);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; line-height:1.4; padding:7px 9px; border-radius:var(--radius-sm);
  border:1px solid rgba(246,239,224,.14); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; text-transform:none; }
.scan-vf-torch.tip-open .scan-torch-tip{ opacity:1; transform:translateY(0); }

.scan-reticle{ position:absolute; z-index:12; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(74vw,340px); height:min(50vh,300px); pointer-events:none; }
.scan-br{ position:absolute; width:30px; height:30px; border:2px solid rgba(246,239,224,.9);
  transition:all .22s cubic-bezier(.22,1,.36,1); }
.scan-br.tl{ left:0; top:0; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
.scan-br.tr{ right:0; top:0; border-left:0; border-bottom:0; border-radius:0 8px 0 0; }
.scan-br.bl{ left:0; bottom:0; border-right:0; border-top:0; border-radius:0 0 0 8px; }
.scan-br.br2{ right:0; bottom:0; border-left:0; border-top:0; border-radius:0 0 8px 0; }
/* FELT SIGNATURE 1 — lock-on snap: brackets tighten inward + flare gold */
.scan-reticle.is-lock .scan-br{ width:22px; height:22px; border-color:var(--gold-hi); box-shadow:0 0 12px rgba(240,215,154,.6); }
.scan-reticle.is-lock .scan-br.tl{ transform:translate(9px,9px); }
.scan-reticle.is-lock .scan-br.tr{ transform:translate(-9px,9px); }
.scan-reticle.is-lock .scan-br.bl{ transform:translate(9px,-9px); }
.scan-reticle.is-lock .scan-br.br2{ transform:translate(-9px,-9px); }
/* RENDER ROUND (D8, second half — layout only). The guide used to be anchored to
   the same 46%-of-viewport expression as the reticle, which parked it in whatever
   gap happened to be left above the control block. Measured at 390x664: it cleared
   .scan-vf-bottom by 0.6px at safe-area-bottom 0, and was COVERED OUTRIGHT --
   390 x 26px of full overlap -- once a 34px bottom inset grew that block. A 0.6px
   clearance is the same flush-constant fragility as D7's lift.
   It is now a child of .scan-vf-bottom anchored to `bottom:100%`, so it rides
   immediately above the controls at every viewport height and every inset, and the
   block that was eating it can no longer reach it. Costs the block no height.
   The reticle is NOT moved or resized: scanShelfCropRect() (views.js ~9003) reads
   its rect to build the capture crop, so it is capture geometry, not decoration. */
.scan-vf-guide{ position:absolute; z-index:12; left:0; right:0; bottom:100%; margin-bottom:10px; text-align:center;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--scan-on-dark-2); pointer-events:none; padding:0 20px; }
/* S3e: hide the idle hint while the "Reading the shelf…" shimmer is up (one label at a time). */
.scan-vf-guide.is-hidden{ visibility:hidden; }

/* R1 (T13) — the pending-draft bar, ON the capture view. Same glass-on-camera
   register as .scan-torch-tip / .scan-vf-top chrome, gold-hi accent so it reads as
   waiting rather than broken. SOLID fill (no backdrop-filter) per canon §2. */
.scan-draftbar{ position:absolute; z-index:21; left:0; right:0;
  top:calc(56px + env(safe-area-inset-top));
  margin:0 calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left));
  background:var(--scan-glass-2); border:1px solid var(--gold-hi); border-radius:var(--radius-md);
  padding:11px 13px; box-shadow:0 6px 18px rgba(0,0,0,.34); }
.scan-draftbar-txt{ margin:0 0 9px; font-family:var(--font-body); font-size:13px; line-height:1.4; color:var(--scan-on-dark); }
.scan-draftbar-acts{ display:flex; gap:8px; }
.scan-draftbar-btn{ flex:1; min-height:38px; border-radius:var(--radius-sm); cursor:pointer;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; border:1px solid rgba(246,239,224,.30); color:var(--scan-on-dark); }
.scan-draftbar-btn.is-go{ background:var(--gold-hi); border-color:var(--gold-hi); color:var(--br-deep); font-weight:600; }
.scan-draftbar-btn.is-danger{ border-color:var(--danger); color:var(--danger); }
.scan-draftbar-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* RULING B — what a BLOCKED shutter tap looks like. The shutter itself is never
   disabled and never grayed (a dead-looking control reads as a broken app); the tap
   calls attention HERE instead. Same bar, briefly brighter — no new component, no
   modal. Reduced-motion gets the steady emphasis without the pulse. */
.scan-draftbar.is-calling{ animation:scanDraftCall 1.4s ease-out 1; }
@keyframes scanDraftCall{
  0%   { box-shadow:0 6px 18px rgba(0,0,0,.34); border-color:var(--gold-hi); }
  18%  { box-shadow:0 6px 26px rgba(240,215,154,.55); border-color:var(--gold); }
  100% { box-shadow:0 6px 18px rgba(0,0,0,.34); border-color:var(--gold-hi); }
}
@media (prefers-reduced-motion: reduce){
  .scan-draftbar.is-calling{ animation:none; box-shadow:0 6px 26px rgba(240,215,154,.55); }
}
/* RENDER ROUND (D8, first half — layout only). The bar OVERLAYS; nothing is pushed.
   At 390x844 it clears the framing brackets by 74.8px, which is why it looked fine
   until a real phone. At 390x664 -- iPhone portrait with the Safari toolbars up --
   the reticle rises to top 155.4 while the bar still ends at 163.4, so the bar sat
   8px INTO the frame and buried the two top brackets (30x30 each) outright.
   The reticle cannot move (it is the capture crop, views.js ~9003), so the bar
   yields: on a short viewport it compacts to roughly 86px, clearing the brackets by
   ~13px. Height-scoped so the designed bar is untouched wherever there is room. */
@media (max-height:720px){
  .scan-draftbar{ padding:8px 11px; }
  .scan-draftbar-txt{ margin-bottom:7px; font-size:12px; line-height:1.3; }
  .scan-draftbar-btn{ min-height:32px; font-size:9.5px; }
}

.scan-vf-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:20;
  padding:14px calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  display:flex; flex-direction:column; align-items:center; gap:16px; }
.scan-mode-seg{ display:inline-flex; padding:3px; border-radius:var(--radius-pill); background:var(--scan-glass); border:1px solid rgba(246,239,224,.16); }
.scan-mode-seg button{ font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--scan-on-dark-2); background:none; border:none;
  border-radius:var(--radius-pill); padding:8px 22px; min-height:40px; cursor:pointer; }
.scan-mode-seg button.is-on{ color:var(--gold-ink-on-gold); background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold-ember) 100%); font-weight:600; }
.scan-actionrow{ display:flex; align-items:center; justify-content:center; gap:24px; width:100%; }
.scan-shutter{ width:72px; height:72px; border-radius:50%; background:rgba(246,239,224,.16); border:3px solid rgba(246,239,224,.9);
  cursor:pointer; display:flex; align-items:center; justify-content:center; }
.scan-shutter:active{ transform:scale(.94); }
.scan-shutter .core{ width:56px; height:56px; border-radius:50%; background:var(--scan-on-dark); }
.scan-shutter[disabled]{ opacity:.5; cursor:default; }
.scan-book-auto{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.scan-book-auto .ring{ width:52px; height:52px; border-radius:50%; border:2px dashed rgba(246,239,224,.5); display:flex; align-items:center; justify-content:center; color:var(--scan-on-dark-2); font-size:19px; }
.scan-book-auto .lbl{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--scan-on-dark-2); }

/* ---- BOOK verdict card — slides over the still-warm camera ---- */
.scan-verdict{ position:absolute; left:0; right:0; bottom:0; z-index:40;
  transform:translateY(115%); transition:transform .34s cubic-bezier(.22,1,.36,1); }
.scan-verdict.is-up{ transform:translateY(0); }
.scan-verdict-inner{ margin:0 auto; max-width:520px;
  background:var(--card-1); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:0 -8px 40px -12px rgba(0,0,0,.55); color:var(--ink);
  padding:18px calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)); }
.scan-vd-grip{ width:38px; height:4px; border-radius:2px; background:var(--line-page-2); margin:0 auto 14px; }
.scan-vd-row{ display:flex; gap:14px; align-items:flex-start; }
.scan-verdict .scan-cov{ width:64px; height:96px; flex:none; }
.scan-vd-meta{ flex:1; min-width:0; }
.scan-vd-title{ font-family:var(--font-serif); font-weight:600; font-size:20px; line-height:1.15; color:var(--ink); margin:0; }
.scan-vd-author{ font-family:var(--font-body); font-size:13px; color:var(--ink-2); margin:3px 0 0; }
.scan-vd-context{ font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--gold-deep); margin:10px 0 0; display:flex; align-items:center; gap:6px; }
.scan-vd-context .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }
.scan-vd-actions{ display:flex; gap:10px; margin-top:16px; }

/* ---- shared buttons (scoped) ---- */
.scan-btn{ font-family:var(--font-body); font-size:15px; font-weight:600; border-radius:var(--radius-md); padding:13px 18px; cursor:pointer; border:1px solid transparent; min-height:48px; }
.scan-btn-primary{ background:linear-gradient(180deg,var(--gold-hi),var(--gold-ember)); color:var(--gold-ink-on-gold); flex:1; }
.scan-btn-ghost{ background:transparent; border-color:var(--line-page-2); color:var(--ink); }
.scan-btn-quiet{ background:var(--wash-page); color:var(--ink-2); border-color:var(--line-page); }
/* S3c: a disabled scan button (e.g. "Shelve 0" when nothing is ready) reads inert —
   no live gold, no pointer. */
.scan-btn:disabled{ opacity:.4; filter:grayscale(.55); cursor:default; }
/* S1: the walker's primary accept — full-width and spaced off the evidence box above
   (red-team NOTE 3: it otherwise sat flush, and a 195px primary read as a minor button). */
.scan-wk-accept{ display:block; width:100%; margin-top:14px; }

/* ---- SHELF MODE — shimmer read + live tray ---- */
/* FELT SIGNATURE 2 — the shimmer read (visibly indeterminate, NO percentages) */
.scan-shimmer{ position:absolute; inset:0; z-index:35; display:none; align-items:center; justify-content:center; flex-direction:column; gap:18px; }
.scan-shimmer.is-on{ display:flex; }
.scan-shim-frame{ width:min(74vw,340px); height:min(46vh,280px); border-radius:12px; overflow:hidden; position:relative;
  border:1px solid rgba(246,239,224,.2); background:rgba(0,0,0,.3); }
.scan-shim-sweep{ position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(240,215,154,.5) 50%, transparent 70%);
  background-size:280% 100%; animation:scanShimSweep 1.15s linear infinite; }
@keyframes scanShimSweep{ from{ background-position:180% 0 } to{ background-position:-80% 0 } }
.scan-shim-line{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--scan-on-dark-2); }

.scan-tray{ position:absolute; left:0; right:0; bottom:0; z-index:30; display:none;
  padding:10px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.5) 70%, transparent); }
.scan-tray.is-on{ display:block; }
.scan-tray-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; padding:0 2px; }
.scan-tray-count{ font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--scan-on-dark); }
.scan-tray-count b{ color:var(--gold-hi); font-weight:600; }
.scan-tray-sub{ font-family:var(--font-mono); font-size:10px; color:var(--scan-on-dark-2); }
.scan-tray-strip{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scroll-behavior:smooth; }
.scan-tray-cov{ width:44px; height:66px; flex:none; border-radius:2px 4px 4px 2px; position:relative; overflow:visible;
  animation:scanTrayDrop .34s cubic-bezier(.22,1,.36,1); }
@keyframes scanTrayDrop{ from{ transform:translateY(14px) scale(.9); opacity:0 } to{ transform:translateY(0) scale(1); opacity:1 } }
.scan-dupe-tick{ position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%;
  background:var(--teal); color:var(--text-on-dark); font-size:10px; line-height:16px; text-align:center; box-shadow:0 0 0 2px rgba(0,0,0,.6);
  animation:scanTickPop .3s ease; }
@keyframes scanTickPop{ from{ transform:scale(0) } to{ transform:scale(1) } }
/* R-FIRSTSHELF-DUPES (2b) — the ALREADY-ON-YOUR-SHELF marks. Same tick geometry as
   the within-scan absorb tick above (the tray's existing state vocabulary, not a new
   chip), moved to the LEFT so one cover can carry both, and in the gold "on your
   shelf" role rather than the absorb tick's teal. Deliberately NOT the .is-lean gray
   register: gray reads as unavailable, and these entries stay addable/visible.
   EXACT is filled + ✓ (certainty); PROBABLE is hollow + ? (a maybe). */
.scan-dupe-tick.is-shelved, .scan-dupe-tick.is-maybe{ left:-6px; right:auto; }
.scan-dupe-tick.is-shelved{ background:var(--gold-hi); color:var(--br-deep); }
.scan-dupe-tick.is-maybe{ background:transparent; color:var(--gold-hi);
  box-shadow:0 0 0 2px rgba(0,0,0,.6), inset 0 0 0 1.5px var(--gold-hi); }
.scan-tray-review{ margin-top:4px; }
.scan-tray .scan-btn{ min-height:46px; }

/* ---- REVIEW — the mirror shelf (quiet DRAFT-CASE dialect of the carved cavity) ---- */
#scan-screen-review{ background:var(--page); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.scan-rv-wrap{ min-height:100%; padding:calc(12px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(var(--floating-stack-h) + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)); max-width:960px; margin:0 auto; }
.scan-rv-top{ display:flex; align-items:center; gap:12px; height:48px; }
.scan-rv-back{ width:36px; height:36px; border-radius:50%; background:var(--wash-page); border:1px solid var(--line-page); color:var(--ink); font-size:17px; cursor:pointer; }
.scan-rv-top h1{ font-family:var(--font-serif); font-weight:500; font-size:26px; color:var(--ink); margin:0; }
.scan-rv-count{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-3); margin:4px 0 2px; }
.scan-rv-draftbadge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); background:var(--wash-page); border:1px dashed var(--line-page-2); border-radius:var(--radius-pill); padding:4px 10px; margin-top:2px; }
.scan-draft-band{ margin-top:20px; }
.scan-draft-band-hd{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.scan-draft-band-hd .lbl{ font-family:var(--font-serif); font-weight:600; font-size:18px; color:var(--ink); }
.scan-draft-band-hd .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }
.scan-cavity{ position:relative; background:var(--shelf-cavity); border-radius:3px; padding:14px 12px 16px;
  box-shadow:inset 0 15px 20px -15px rgba(36,23,16,.34); }
.scan-cavity::after{ content:''; position:absolute; left:-2px; right:-2px; bottom:-9px; height:9px; background:var(--board-face); border-bottom:5px solid var(--board-under); border-radius:0 0 3px 3px; }
.scan-shelfline{ display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:14px; row-gap:22px; }
.scan-dc{ width:64px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; cursor:default; }
.scan-dc .scan-cov{ width:64px; height:96px; }
/* CORRECTION PASS (C1) — THE CAPTION BOX HUGS ITS TEXT.
   `height:34px` reserved a fixed two-line slot, but the text inside is clamped to
   its own rendered height (24.2px in Blink, shorter again in iOS Cormorant). The
   spine-flag's margin was measured from the BOX bottom, so the reader saw the
   reserved remainder PLUS the margin: ~18px here, ~20px on device — while the next
   row's covers sat ~25px away. A label equidistant between two owners has no owner.
   `height:auto` makes the box bottom the TEXT bottom, so the flag is anchored to
   what the reader can actually see. The cell height is fixed independently below,
   so a shorter caption never changes the cell -- only where the flag sits inside it. */
.scan-dc .cap{ width:64px; height:auto; overflow:hidden; text-align:center; margin-top:7px; }
/* S2 (COVERS+VOICE): break at WORD boundaries; break INSIDE a word only when a
   single word cannot fit the line on its own (overflow-wrap:break-word). The Tier-1
   `word-break:break-word` broke mid-word ("Data Independen/ce") by greedily packing
   the line across the space; removed. The -webkit-line-clamp:2 owns the ellipsis.
   RENDER ROUND (D2): `break-word` was still the wrong instrument -- it does not
   only break as a last resort, it breaks whenever the word overruns the measure,
   and at 64px almost every long title does. Measured: "Counternarratives" rendered
   as "Counternarrat" / "ives" with NO ellipsis, because the two halves fit the
   2-line clamp and the clamp only marks a VERTICAL overflow. Now `normal`: a word
   is never split arbitrarily, and scanFitReviewText supplies the ellipsis.
   CORRECTION PASS (C2) -- `hyphens:auto` REMOVED from this rule and from .cov-t.
   It was added here as the "correct typographic instrument" and turned out to be a
   second greedy packer: with a dictionary present (iOS has one; the verification
   engine does not, which is why it read as inert), the line-breaker fills line 1 as
   far as it can INCLUDING a hyphenated fragment. Measured at this 64px measure,
   11px serif: "Artificial" 39.7px and "Intelligence" 50.1px each fit alone -- a
   clean two-line space-wrap existed -- but "Artificial In-" is 55.1px, which also
   fits, so the breaker took it and shipped "Artificial In- / telligence". Removing
   it leaves word-boundary wrapping, with the JS floor marking the genuinely
   over-measure word ("Counternarratives", 78.6px) with a real ellipsis. */
.scan-dc .cap .t{ font-family:var(--font-serif); font-weight:600; font-size:11px; line-height:1.1; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:normal; text-overflow:ellipsis; }
/* the LEANING spine — an exception (Law 1: the lean carries it, never copy alone)
   RENDER ROUND (D6, Ruling 2) — THE INVERSION, BOTH ENDS.
   These are the ONLY cards that actually want the reader's judgment, and they were
   the deadest thing on the screen: grayscale(1) brightness(.86) on the art and
   --ink-3 on the label, which is the vocabulary every interface uses for
   "unavailable". Meanwhile .is-unlooked -- a catalogue outage the reader can do
   nothing about -- wore --gold-deep. The prominence ran backwards.
   Fixed at BOTH ends, because dropping the grayscale alone only levels them:
     · here      the grayscale goes (the book is fine; nothing about it is
                 unavailable), the deliberate -6deg lean STAYS as the "pull me out
                 and look" signal, and a --gold hairline rides the cover so the
                 card is the warmest thing in the band. The outline is on
                 .scan-cov; the focus ring is on .scan-dc, so they never collide.
     · below     .is-unlooked drops to --ink-3. It is informational, not a call to
                 action, so it now sits BELOW the lean in prominence rather than
                 above it. (This is the one place a quiet gray is the right answer:
                 the reader is not being asked for anything.) */
.scan-dc.is-lean{ cursor:pointer; }
.scan-dc.is-lean .scan-cov{ transform:rotate(-6deg); transform-origin:50% 100%; outline:1.5px solid var(--gold); outline-offset:-1.5px; }
.scan-dc.is-lean:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
/* R-FIRSTSHELF-DUPES (2b) — the review-face already-shelved / may-be-a-copy flags.
   Same .spine-flag typography the lean exception uses, re-scoped to these two states
   and coloured --gold-deep instead of the lean's --ink-3 gray. NO grayscale and NO
   lean rotation: these books are informational, not unavailable. The two states are
   told apart by COPY ("already shelved" / "may be a copy") and by the tray badge. */
.scan-dc.is-shelved .spine-flag, .scan-dc.is-maybe .spine-flag{ margin-top:8px; font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep); }
/* T14 — the catalogue-outage state. Deliberately NOT .is-lean: no grayscale, no
   lean. The spine was read correctly; only the lookup failed, so the book must not
   wear the "unavailable" gray. Clickable like the lean exception (it opens the
   same walker), flagged in the informational gold-deep register. */
.scan-dc.is-unlooked{ cursor:pointer; }
/* colour demoted --gold-deep -> --ink-3 (D6 Ruling 2, the second end of the
   inversion): informational, and it must not out-shout the lean beside it. */
.scan-dc.is-unlooked .spine-flag{ margin-top:8px; font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.scan-dc.is-unlooked:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ===== RENDER ROUND (D1 + D4) — ONE UNIFORM CELL BOX PER BAND =====
   A row went ragged because cell height was content-derived: measured 137px plain,
   169px once a status row appeared, 132/128px across the two exception states, all
   bottom-aligned by .scan-shelfline's align-items:flex-end, so cover tops and
   caption baselines wandered by up to 32px inside ONE row. Fixing D1 alone would
   have made it worse -- dropping the caption from placeholders shortens exactly
   those cells.
   So the cell is FIXED and the contents fit it, not the reverse:
     · a cover cell      = art (96) + caption (7 + 34)
     · a placeholder cell = ONE text block filling that same total, caption dropped
   The placeholder grows by flex-grow rather than a second height constant, which is
   what makes the ASYNC case safe: scanCoverNode can add .is-typeset long after
   layout (every candidate 404s) and the cell height does not move -- only what sits
   inside it. That was the round's real hazard.
   .has-flags is set by scanRenderReview per band, so the status row is reserved
   only where one is actually used and a first shelf pays no dead air for it. */
   CORRECTION PASS (C1): the status row is 27px (3px gap + a 24px two-line flag), so
   a flagged band is 137 + 27 = 164, not 169. And the typeset placeholder is now a
   FIXED 137px rather than flex-grown: growing it to "whatever is left" made an
   UNFLAGGED placeholder 169px and a FLAGGED one 137px in the SAME band -- the same
   raggedness D4 exists to remove, reintroduced one layer down. 137 is the same
   number from both directions (the unflagged cell height, and 164 minus the status
   row), so the two bands agree by construction rather than by coincidence. */
#scan-rv-confident .scan-dc{ height:137px; }
#scan-rv-confident.has-flags .scan-dc{ height:164px; }
#scan-rv-exceptions .scan-dc{ height:96px; }
#scan-rv-exceptions.has-flags .scan-dc{ height:128px; }
#scan-rv-confident .scan-dc .scan-cov{ flex:0 0 96px; }
#scan-rv-confident .scan-dc .scan-cov.is-typeset{ flex:0 0 137px; height:137px; }
/* C1: the flag rides its own caption. 3px satisfies the ruled ratio (<=4px to its
   own caption, >=3x that to the next row) on a TWO-line caption, which is the case
   the device pass measured. */
#scan-rv-confident .scan-dc .spine-flag{ margin-top:3px; }
#scan-rv-confident .scan-dc .scan-cov.is-typeset + .cap{ display:none; }
/* the taller typeset slot can carry more of the title; the clamp still owns the ellipsis */
#scan-rv-confident .scan-dc .scan-cov.is-typeset .cov-t{ -webkit-line-clamp:7; }
.scan-rv-lookupnote{ margin:8px 0 0; font-family:var(--font-body); font-size:12.5px; line-height:1.45; color:var(--ink-2);
  background:var(--wash-page); border-left:2px solid var(--gold-deep); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:8px 11px; }
.scan-wk-lookupfail{ margin:2px 0 12px; font-family:var(--font-body); font-size:12.5px; line-height:1.45; color:var(--ink-2);
  background:var(--wash-page); border-left:2px solid var(--gold-deep); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:8px 11px; }

/* generic typeset cloth cover (no external image — pre-sized slot, spine fallback) */
.scan-cov{ position:relative; border-radius:2px 5px 5px 2px; overflow:hidden;
  box-shadow:0 3px 5px rgba(36,23,16,.3); background:linear-gradient(135deg,var(--scan-cloth-1),var(--scan-cloth-2)); display:block; }
.scan-cov .cov-spine{ position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); }
.scan-cov .cov-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* COVERS+VOICE FIX (device felt pass): widen the text inset (was 8 7 7 10 -> inner
   47px) so ordinary words fit even where iOS renders the serif wider than Blink. */
.scan-cov .cov-txt{ position:absolute; inset:0; padding:7px 4px 7px 6px; display:flex; flex-direction:column; }
/* .cov-t is STAND-IN ART, not the label (the .cap caption below carries the readable
   title). It must NEVER stack mid-word: overflow-wrap:normal keeps whole words on the
   line and a word too wide simply CLIPS at the box edge (overflow:hidden) -- a designed
   cover cut, not a mid-word break. The Tier-1 `break-word` stacked "Independen/ce". */
/* RENDER ROUND (D3): the "designed cover cut" above was, measured, an UNMARKED
   one -- "Education for Critical Consciousness" put "Consciousness" on its own
   line, 13 characters into a 54px box, and the word was simply sliced mid-glyph
   with no ellipsis and no hyphen (scrollWidth > clientWidth, no clamp overflow to
   trigger the ellipsis). Same law as the caption now: never split arbitrarily, and
   let scanFitReviewText mark the cut. CORRECTION PASS (C2): `hyphens:auto` removed
   here too, for the reason recorded on the caption rule -- it packed a hyphenated
   fragment onto a line where a clean word break existed. */
.scan-cov .cov-t{ font-family:var(--font-serif); font-weight:600; font-size:10px; line-height:1.12; color:var(--scan-cover-ink); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:normal; text-overflow:ellipsis; }
.scan-cov .cov-a{ margin-top:auto; font-family:var(--font-body); font-size:7.5px; color:var(--scan-cover-meta); }

.scan-rv-foot{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:12px calc(18px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  background:linear-gradient(to top, var(--page) 60%, transparent); display:none; gap:10px; }
.scan-rv-foot.is-on{ display:flex; }

/* R3 (3a): the post-shelve tray-empty door — a quiet, centered done state. */
.scan-rv-done{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:60px 8px 28px; }
.scan-rv-done-mark{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--gold-hi); border:1.5px solid var(--gold); background:transparent; }
.scan-rv-done-line{ font-family:var(--font-serif); font-size:19px; line-height:1.35; color:var(--ink); margin:0; max-width:24ch; }
.scan-rv-done .scan-btn{ min-width:190px; }
/* S4: the done state is COMPOSED — the wrap becomes a flex column and the done
   block grows + centers in the viewport, instead of sitting in the top quarter with
   ~1000px of dead space below and the shelve toast floating at the bottom edge. The
   back/"The scan" header stays at the top; the done block owns the rest. */
.scan-rv-wrap.is-done{ display:flex; flex-direction:column; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
.scan-rv-wrap.is-done .scan-rv-done{ flex:1 1 auto; justify-content:center; padding-top:8px; padding-bottom:8px; }
/* the done block grows to fill; its children must NOT (the primary .scan-btn base
   carries flex:1, which would otherwise stretch it and un-center the cluster). */
.scan-rv-wrap.is-done .scan-rv-done > *{ flex:0 0 auto; }
/* S4: the legible, co-located Undo — a quiet text-button beneath the primary,
   discoverable and persistent with the done screen (was buried in the 9s toast). */
.scan-rv-done-undo{ background:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:13px; color:var(--ink-3); padding:11px 8px; min-height:44px; margin-top:-2px; }
.scan-rv-done-undo:active{ color:var(--ink-2); }
.scan-rv-done-undo:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--radius-sm); }

/* ---- EXCEPTION WALKER — sequential fix-next sheet ---- */
#scan-walker{ position:absolute; inset:0; z-index:80; display:none; background:var(--scrim); }
#scan-walker.is-on{ display:block; }
.scan-wk-sheet{ position:absolute; left:0; right:0; bottom:0; max-height:92%; overflow-y:auto;
  background:var(--card-1); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:16px calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  transform:translateY(0); }
.scan-wk-grip{ width:38px; height:4px; border-radius:2px; background:var(--line-page-2); margin:0 auto 12px; }
.scan-wk-progress{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); text-align:center; margin-bottom:14px; }
/* S3 (COVERS+VOICE): Yumi asks. Her shared crest + a serif question, so the sheet
   opens with her wondering aloud rather than a mono log-label. */
.scan-wk-ask{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.scan-wk-ask .yumi-glyph-host{ flex:none; display:inline-flex; }
.scan-wk-ask-t{ font-family:var(--font-serif); font-weight:600; font-size:20px; line-height:1.2; color:var(--ink); }
.scan-wk-row{ display:flex; gap:14px; }
.scan-wk-row .scan-cov{ width:70px; height:105px; flex:none; filter:grayscale(1) brightness(.9); }
.scan-wk-guess{ flex:1; min-width:0; }
.scan-wk-guess .g-t{ font-family:var(--font-serif); font-weight:600; font-size:18px; color:var(--ink); margin:2px 0 0; line-height:1.15; }
.scan-wk-guess .g-a{ font-family:var(--font-body); font-size:12px; color:var(--ink-2); margin:2px 0 0; }
.scan-wk-evidence{ margin-top:14px; padding:11px 13px; border-radius:var(--radius-md); background:var(--wash-page); border:1px solid var(--line-page);
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink); }
.scan-wk-evidence .lead{ color:var(--ink-3); }
/* S3: the raw spine read is KEPT (honest) but re-registered -- a quiet ink quote,
   not the alarm-orange (--danger) debug string it was. */
.scan-wk-evidence .raw{ color:var(--ink-2); font-weight:500; }
.scan-wk-cands{ margin-top:14px; }
.scan-wk-cands .c-hd{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.scan-wk-cand{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left;
  padding:11px 13px; border-radius:var(--radius-md); border:1px solid var(--line-page); background:var(--page-2); color:var(--ink); cursor:pointer; margin-bottom:8px; }
.scan-wk-cand:active{ background:var(--wash-page); }
.scan-wk-cand .ct{ font-family:var(--font-serif); font-weight:600; font-size:15px; }
.scan-wk-cand .ca{ font-family:var(--font-body); font-size:12px; color:var(--ink-2); }
.scan-wk-search{ width:100%; display:flex; align-items:center; gap:8px; padding:12px 13px; border-radius:var(--radius-md);
  border:1px dashed var(--line-page-2); background:transparent; color:var(--ink-3); font-family:var(--font-body); font-size:13px; cursor:pointer; margin-bottom:8px; }
/* S3: the three ways to decline -- quiet, grouped, SUBORDINATE to the gold accept.
   Text-buttons on no ground, 44px tap targets (P3), so one accept clearly outweighs
   them (replaces the old .scan-wk-foot / .scan-wk-skipall equal-weight buttons). */
.scan-wk-refuse{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px 20px; margin-top:18px; }
.scan-wk-refuse-btn{ background:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:12.5px; color:var(--ink-3); padding:11px 4px; min-height:44px; }
.scan-wk-refuse-btn:active{ color:var(--ink-2); }
.scan-wk-refuse-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--radius-sm); }

/* ---- RECEIPT + shelve flight glyph ---- */
#scan-flight-layer{ position:absolute; inset:0; z-index:70; pointer-events:none; display:none; }
#scan-flight-layer.is-on{ display:block; }
.scan-flight-cov{ position:fixed; width:44px; height:66px; z-index:71; }
#scan-shelf-glyph{ position:absolute; z-index:70; left:50%; top:26%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:12px; background:var(--scan-glass-2); border:1px solid rgba(246,239,224,.2);
  display:flex; align-items:center; justify-content:center; color:var(--gold-hi); font-size:30px; opacity:0; transition:opacity .3s ease; }
#scan-shelf-glyph.is-on{ opacity:1; }
/* FX-H (F6): STATE-GATED with display:none — the receipt renders ONLY after a shelve.
   Previously it was display:flex hidden by transform:translateY(140%), which on iPhone
   (bottom anchored above the home-indicator inset) rose into view as a clipped dark pill
   in Book mode's resting state. display:none = not rendered until #scan-receipt.is-on;
   the bottom:calc(24px + env(...)) then seats it fully on-screen above the inset. */
#scan-receipt{ position:absolute; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translate(-50%,0);
  z-index:75; background:var(--scan-glass-2); color:var(--scan-on-dark); border:1px solid rgba(246,239,224,.16);
  border-radius:var(--radius-pill); padding:12px 12px 12px 20px; display:none; align-items:center; gap:14px;
  box-shadow:0 10px 34px -12px rgba(0,0,0,.6); }
#scan-receipt.is-on{ display:flex; }
#scan-receipt .r-txt{ font-family:var(--font-body); font-size:14px; }
#scan-receipt .r-txt b{ color:var(--gold-hi); font-weight:600; }
#scan-receipt .r-undo{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--gold-hi); background:rgba(246,239,224,.1);
  border:1px solid rgba(246,239,224,.18); border-radius:var(--radius-pill); padding:9px 16px; cursor:pointer; min-height:42px; }

/* ---- PERMISSION + FAILURE cards (over the warm ground) ---- */
.scan-overlay{ position:absolute; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
  background:linear-gradient(178deg,var(--hour-1),var(--hour-3) 62%,var(--hour-4));
  padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); }
.scan-overlay.is-on{ display:flex; }
.scan-overlay.over-cam{ background:rgba(0,0,0,.72); }
.scan-card{ width:100%; max-width:360px; background:var(--card-1); border-radius:var(--radius-xl); color:var(--ink);
  padding:24px 22px; box-shadow:0 20px 60px -20px rgba(0,0,0,.6); max-height:calc(100% - 24px); overflow-y:auto; }
.scan-card .c-ic{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:16px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-ember)); color:var(--gold-ink-on-gold); }
.scan-card.warn .c-ic{ background:rgba(194,96,58,.16); color:var(--danger); }
.scan-card h2{ font-family:var(--font-serif); font-weight:600; font-size:23px; color:var(--ink); margin:0 0 8px; line-height:1.15; }
.scan-card p{ font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--ink-2); margin:0 0 8px; }
.scan-card .fineprint{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin:12px 0 4px; line-height:1.5; }
.scan-card .c-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.scan-card .c-actions.row{ flex-direction:row; }
.scan-add-door{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line-page); }
.scan-add-door .ad-lbl{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.scan-add-door .ad-field{ display:flex; gap:8px; }
.scan-add-door input{ flex:1; min-width:0; font-family:var(--font-body); font-size:16px; padding:12px 13px; border-radius:var(--radius-md);
  border:1px solid var(--line-page-2); background:var(--page-2); color:var(--ink); }
.scan-add-door input::placeholder{ color:var(--ink-3); }
.scan-add-door .ad-search{ margin-top:9px; width:100%; font-family:var(--font-body); font-size:13px; color:var(--ink-2);
  background:transparent; border:1px dashed var(--line-page-2); border-radius:var(--radius-md); padding:11px; cursor:pointer; text-align:center; }
.scan-add-status{ font-family:var(--font-mono); font-size:11px; color:var(--gold-deep); margin-top:10px; min-height:14px; }
/* SC7(c) desktop / no-live-shelf secondary: a shelf-photo drop zone (same pipeline) */
.scan-dropzone{ margin-top:14px; border:1.5px dashed var(--line-page-2); border-radius:var(--radius-md);
  padding:20px 14px; text-align:center; cursor:pointer; background:var(--page-2); }
.scan-dropzone.is-drag{ border-color:var(--gold); background:var(--wash-page); }
.scan-dropzone .dz-ic{ font-size:24px; color:var(--gold-deep); }
.scan-dropzone .dz-t{ font-family:var(--font-body); font-size:14px; color:var(--ink-2); margin-top:6px; }
.scan-dropzone .dz-h{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3); margin-top:4px; }
.scan-coach-rows{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.scan-coach-rows li{ display:flex; gap:12px; align-items:center; font-family:var(--font-body); font-size:14px; color:var(--ink-2); }
.scan-coach-rows .cr-ic{ width:34px; height:34px; flex:none; border-radius:9px; background:var(--wash-page); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--gold-deep); }

/* FX-E: the camera surface owns its corners — suppress the global Yumi Bloom flower
   while #scan is mounted (it collided with / clipped the verdict-card buttons).
   body.scan-active is added by renderScan and removed by the router on exit.
   S4: the global "+" create door is the SAME class of collider (bottom-left, z:9999,
   not per-surface) and overlapped Review/Not-a-book — hide it on the scan surface too. */
body.scan-active .yumi-bloom,
body.scan-active .cap-create-door{ display:none !important; }
/* CORRECTION PASS (C3) — THE FAB YIELDS TO ANY OPEN SHEET.
   D7 lifted the create-door clear of the Shelf's "+ Add a book" and it promptly
   landed on "Retrieve covers" inside the open Manage sheet: the same collision, a
   new victim. The general rule, rather than a third position tweak: a sheet is a
   modal surface, and a floating corner affordance has no business over one. This
   generalises the shipped `body.scan-active` hide to every sheet the app opens.
   :has() is the mechanism because these sheets are DESCENDANTS of the page, not
   body classes, so no ancestor selector reaches them and the alternative is a
   body-class toggle wired into three separate open/close paths.
   FLOOR CHECK: the repo states no supported-browser floor anywhere (no
   package.json, no browserslist, no support doc) -- reported as its own gap. But
   the shipped CSS already uses color-mix() 153 times across components.css +
   theme.css, and color-mix() is Safari 16.2+ / Chrome 111+, while :has() is Safari
   15.4+ / Chrome 105+. :has() therefore cannot raise a floor color-mix() has
   already set well above it. */
/* M7: the C3 rule covered SHEETS. A panel mounted into #shelf-editor-host is not a
   sheet, so the create-door and the Shelf's own "+ Add a book" FAB sat on top of
   the cleanup panel -- measured display:flex with the panel mounted. Every
   editor-host panel is now included, and the Shelf FAB yields too: it is the same
   collision C3 fixed, on a surface C3 did not name. */
body:has(.shelf-manage.is-open) .cap-create-door,
body:has(.capdoor-sheet.is-open) .cap-create-door,
body:has(.shelf-bulk-editor) .cap-create-door,
body:has(.shelf-editor) .cap-create-door,
body:has(.library-cleanup) .cap-create-door{ display:none !important; }
body:has(.shelf-bulk-editor) .shelf-add-primary,
body:has(.shelf-editor) .shelf-add-primary,
body:has(.library-cleanup) .shelf-add-primary{ display:none !important; }

/* nav draft-count badge on the Scan entry (mirrors .cap-nav-entry state attrs) */
.app-nav-scan-badge{ display:none; min-width:16px; height:16px; padding:0 4px; margin-left:6px;
  border-radius:var(--radius-pill); background:var(--gold); color:var(--gold-ink-on-gold);
  font-family:var(--font-mono); font-size:9px; line-height:16px; text-align:center; vertical-align:middle; }
.app-nav-scan-badge.is-on{ display:inline-block; }

/* ---- REDUCED MOTION — a still-state for every mandated signature ---- */
@media (prefers-reduced-motion: reduce){
  .scan-cam-warm{ transition:none; }
  .scan-warm-orb{ animation:none; opacity:1; }
  .scan-br{ transition:none; }
  .scan-reticle.is-lock .scan-br{ transform:none; }
  .scan-shim-sweep{ animation:none; background:linear-gradient(115deg, transparent 40%, rgba(240,215,154,.35) 50%, transparent 60%); }
  .scan-tray-cov, .scan-verdict{ animation:none; }
  .scan-flight-cov{ transition:opacity .2s ease; }
  #scan-receipt, .scan-verdict{ transition:none; }
}

/* ── P1 Item 3 — "Your data" (export) in the Profile's Settings register:
   .pf-card / .pf-set-row / .pf-btn are the named reference surface; these rules
   only ADD the card's inner rhythm and the disabled state. Item 2 adds the
   delete controls below this block. ── */
.pf-data-line{ font-family:var(--font-serif); font-size:15px; line-height:1.55; color:var(--ink-2); max-width:62ch; }
.pf-data-line b{ font-weight:600; color:var(--ink); }
.pf-data-actions{ flex-wrap:wrap; }
.pf-data-status{ margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--ink-3); }
.pf-data-status:empty{ margin-top:0; }
.pf-btn:disabled{ opacity:.55; cursor:default; }
@media (max-width:759px){
  .pf-data-actions .pf-btn{ flex:1 1 auto; justify-content:center; }
}

/* ── P1 Item 2 — account deletion: the confirmation panel INSIDE the Your-data
   card (same .pf-* register) + the #deleted done page (the profile's signed-out
   prompt register: .pf-below .pf-thesis .pf-card .pf-now). Danger colour is the
   existing --danger / --danger-line tokens (theme.css:601). ── */
/* AA on the cream card (measured on the rig 2026-09-03): --danger as INK is 4.1:1 at
   12px, the ghost's --ink-3 is 3.1:1, and --ink on a SOLID --danger fill is 4.17:1 —
   all below 4.5. So the danger controls keep dark ink and carry the danger as a
   border + a light wash: the enabled confirm is --ink (17:1) on a 14% --danger wash
   inside a --danger border. */
.pf-btn.ghost.pf-btn-danger{ color:var(--ink-2); border-color:var(--danger); }
.pf-btn-danger-solid{ background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--ink); font-weight:600; border-color:var(--danger); }
.pf-btn-danger-solid:disabled{ background:transparent; color:var(--ink-3); border-color:var(--danger-line); opacity:1; }
.pf-del{ margin-top:16px; padding:16px 0 4px; border-top:1px solid var(--line); }
.pf-del-title{ font-family:var(--font-serif); font-size:19px; color:var(--ink); margin-bottom:6px; }
.pf-del-copy{ font-size:13px; line-height:1.55; color:var(--ink-2); max-width:64ch; }
.pf-del-copy b{ color:var(--danger); font-weight:600; }
.pf-del-step{ margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.pf-del-step .whisper{ text-transform:none; letter-spacing:.02em; color:var(--ink-3); font-size:10.5px; }
.pf-del-num{ display:inline-flex; width:20px; height:20px; border-radius:50%; border:1px solid var(--line); align-items:center; justify-content:center; font-size:10.5px; color:var(--ink-3); }
.pf-del-field{ margin-top:8px; }
.pf-del-field label{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.pf-del-exportnote{ align-self:center; font-size:12px; line-height:1.4; color:var(--ink-3); }
.pf-del-progress{ margin-top:12px; font-size:13px; line-height:1.55; color:var(--ink-2); max-width:64ch; }
.pf-del-progress:empty{ margin-top:0; }
.pf-deleted .pf-set-row a.pf-btn{ text-decoration:none; }
@media (max-width:759px){
  .pf-del .pf-set-row{ flex-wrap:wrap; }
  .pf-del .pf-set-row .pf-btn{ flex:1 1 auto; justify-content:center; }
}