@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/crimson-pro-latin-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Belleza';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/furniture/Belleza-Regular.ttf') format('truetype');
}

:root {
  color-scheme: light;

  /* ==========================================================================
     TYPOGRAPHY STACK
     ========================================================================== */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif-display: "Crimson Pro", "Hoefler Text", Georgia, "Palatino Linotype", Palatino, serif;
  --gn-furniture-face: "Belleza", "Optima", "URW Classico", var(--font-serif-display), serif;
  /* Jeff's app-wide compact scale. The reader hamburger is the immutable
     reference; lists, chooser cards, and reader popups consume these tokens. */
  --gn-app-headline-size: 12px;
  --gn-app-headline-leading: 1.1;
  --gn-app-supporting-size: 9px;
  --gn-app-row-height: 56px;

  /* ==========================================================================
     STACKING CONTRACT
     Permanent chrome < open tools/popovers < modal/system interruption.
     Component-local popovers use the local token only inside a named layer.
     ========================================================================== */
  --gn-layer-chrome: 300;
  --gn-layer-chrome-raised: 310;
  --gn-layer-floating: 600;
  --gn-layer-floating-popover: 2;
  --gn-layer-modal: 900;
  --gn-layer-modal-raised: 910;
  --gn-layer-system: 1200;

  /* ==========================================================================
     SURFACE TIER
     ========================================================================== */
  --chrome-lightness: 92%;
  --toolbar-anchor: #C49A45;
  --toolbar-bg: #FBF3E4;
  --rail-anchor: #C49A45;
  --rail-bg: #FAF1E0;
  --canvas-anchor: #FDFCF9;
  --canvas-bg: #FDFCF9;
  --accent-anchor: #7A6020;
  --accent: #7A6020;
  --accent-soft: #F3E9D0;
  --accent-ink: #FDFCF9;
  --hover-anchor: #C49A45;
  --hover-bg: #F5EAD0;
  --hover-ink: #3A2820;
  --toolbar-ink: #3A2820;
  --rail-ink: #3A2820;
  --canvas-ink: #3A2820;
  --button-bg: #FCF6EA;
  --cue-bg: #FBF2E2;
  --top-band: #C49A45;
  --banner-bg: #F6EDDB;
  --banner-ink: #3A2820;
  --paper-bg: #FFFFFF;
  --home-escape-size: 48px;
  --home-escape-gap: 10px;
  --home-escape-top: max(12px, calc(env(safe-area-inset-top) + 10px));
  /* iPadOS windowed/Stage Manager controls occupy the upper-left titlebar.
     Safari does not consistently expose titlebar-area-x, so 96px is the
     deliberate fleet-floor fallback; safe-area/WCO values may only grow it. */
  --window-controls-left-clearance: max(96px, calc(env(safe-area-inset-left, 0px) + 12px), calc(env(titlebar-area-x, 84px) + 12px));
  --home-escape-left: var(--window-controls-left-clearance);
  --home-escape-enclave-width: calc(var(--home-escape-left) + var(--home-escape-size) + var(--home-escape-gap));
  --home-escape-enclave-height: calc(var(--home-escape-top) + var(--home-escape-size) + var(--home-escape-gap));

  --canvas: var(--canvas-bg);
  --panel: var(--paper-bg);
  --well-bg: var(--button-bg);
  --chrome-bg: var(--rail-bg);
  --chrome-border: rgba(196, 154, 69, 0.42);

  /* ==========================================================================
     SCORE & PAPER TIER
     ========================================================================== */
  --score-paper: var(--paper-bg);
  --score-paper-border: rgba(58, 40, 32, 0.15);
  --grid-line: rgba(58, 40, 32, 0.04);

  /* ==========================================================================
     INK & TEXT TIER
     ========================================================================== */
  --ink: var(--canvas-ink);
  --ink-secondary: #4A382E;
  --ink-muted: #7E6E65;
  --chrome-ink: var(--rail-ink);
  --chrome-ink-muted: var(--accent);

  /* ==========================================================================
     ACCENT TIER
     ========================================================================== */
  --accent-primary: var(--accent);
  --accent-primary-soft: var(--accent-soft);

  --accent-terracotta: #A04A2C;
  --accent-terracotta-soft: #FAF0EC;
  --terracotta-text: #8A3B20;

  --accent-secondary: var(--toolbar-anchor);
  --accent-secondary-soft: var(--accent-soft);
  --mustard-text: var(--accent);
  --flashlight-core: #FFF3B8;
  --flashlight-gilt: #D5A83F;
  --flashlight-warm: #B9792E;
  --flashlight-ink: var(--toolbar-ink);
  --flashlight-glow-intensity: 0.9;
  --flashlight-turn-strip-height: 48px;

  --accent-info: #5A8AAE;
  --accent-info-soft: #EDF3F7;
  --sky-text: #4A3B32;
  --count-in-led: #D5A83F;

  --accent-danger: #A43E32;
  --accent-danger-soft: #FAF0EE;

  /* ==========================================================================
     STATE TIER
     ========================================================================== */
  --active-bg: var(--accent-soft);
  --focus-outline: var(--accent);
  --disabled-bg: #EFE7D8;
  --disabled-text: #A1958D;

  /* ==========================================================================
     SHADOWS (WOOD-TINTED RGBA, LOW-ALPHA, WIDE)
     ========================================================================== */
  --shadow: 0 12px 32px rgba(58, 40, 32, 0.06);
  --shadow-soft: 0 6px 20px rgba(58, 40, 32, 0.04);
  --shadow-inset: inset 0 2px 4px rgba(58, 40, 32, 0.04);

  /* ==========================================================================
     LINE & BORDER SYSTEM (HAIRLINES)
     ========================================================================== */
  --line: rgba(58, 40, 32, 0.10);
  --line-strong: rgba(58, 40, 32, 0.18);

  /* ==========================================================================
     SYSTEM FALLBACK CHECKS
     ========================================================================== */
  --danger: var(--accent-danger);
  --green-deep: #2E6F40;

  /* ==========================================================================
     DARK FOCUS & IMMERSIVE READERS
     ========================================================================== */
  --focus-bg: var(--canvas-bg);
  --focus-panel: var(--toolbar-bg);
  --focus-ink: var(--toolbar-ink);
  --focus-ink-muted: var(--accent);

  /* ==========================================================================
     PROJECTION DISPLAY TOKENS
     ========================================================================== */
  --projection-bg: #251813;
  --projection-panel: #3A2820;
  --projection-text: #FAF8F3;
  --projection-muted: #FAF2E3;
  --projection-accent: #C49A45;

  --slide-transition-ms: 150ms;

  /* Legacy Alias Bridge */
  --paper: var(--canvas);
  --muted: var(--ink-muted);
  --font: var(--font-sans);
  --green: var(--accent-primary);
  --green-soft: var(--accent-primary-soft);
  --teal: var(--accent-primary);
  --teal-soft: var(--accent-primary-soft);
  --gold: var(--accent-secondary);
  --gold-soft: var(--accent-secondary-soft);
  --blue: var(--accent-info);
  --blue-soft: var(--accent-info-soft);
  --red: var(--accent-danger);
  --red-soft: var(--accent-danger-soft);
}

* {
  box-sizing: border-box;
  border-color: var(--line);
  outline-color: var(--focus-outline);
}

html {
  color: var(--ink);
  border-color: var(--line);
  outline-color: var(--focus-outline);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
}

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

button,
select,
input {
  font: inherit;
  border-color: var(--line);
  outline-color: var(--focus-outline);
}

button {
  border: 0;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--accent-primary);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel);
  vertical-align: -2px;
  outline-color: var(--focus-outline);
}

input[type="checkbox"]:checked {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  box-shadow: inset 0 0 0 3px var(--panel);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
}

/* Boot veil: index.html ships with static placeholder content (demo titles,
   "Hail Mary" markup, stub statuses) that init() replaces. Hide the shell
   until the app hydrates so refresh never flashes stale V1-looking content
   (Jeff, 2026-07-02). Failsafe timeout in index.html removes .booting even
   if init() dies. */
body.booting .app-shell {
  visibility: hidden;
}

.rail {
  background: var(--canvas);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px;
  border-bottom: 1px solid var(--line);
}

/* The real canonical mark (GLOGO icon) — the improvised CSS glyph that
   rendered as a gold "U" is retired (Jeff/Lainey ruling 2026-07-14). */
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
}

.brand-mark img,
.mass-picker-brand img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.brand-row h1,
.brand-row p,
.topbar h2,
.topbar p,
.block-header h3,
.block-header p {
  margin: 0;
}

.brand-row h1 {
  font-family: var(--font-serif-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.brand-row p {
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 12px;
}

.brand-row p.brand-powered {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mustard-text);
  font-size: 9.5px;
  font-weight: 700;
}

.rail-section {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.order-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.section-label,
.eyebrow,
.micro-label {
  color: var(--mustard-text);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.rail .section-label {
  color: var(--mustard-text);
  margin-bottom: 12px;
}

.select-label {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  margin-bottom: 7px;
}

.package-label {
  margin-top: 12px;
}

select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 0 10px;
  border-radius: 6px;
}

.auto-offline-status {
  min-height: 28px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mustard-text);
  font-size: 12px;
  line-height: 1.25;
}

.auto-offline-status::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--chrome-ink-muted);
}

.auto-offline-status[data-state="ready"]::before {
  background: var(--accent-secondary);
}

.auto-offline-status[data-state="busy"]::before,
.auto-offline-status[data-state="partial"]::before,
.auto-offline-status[data-state="cellular"]::before {
  background: var(--accent-secondary);
}

.auto-offline-status[data-state="blocked"]::before {
  background: var(--accent-danger);
}

.auto-offline-status span {
  min-width: 0;
  flex: 1;
}

.auto-offline-status button {
  min-height: 28px;
  flex: 0 0 auto;
  border-radius: 6px;
  padding: 0 8px;
  border: 1px solid rgba(196, 154, 69, 0.32);
  background: var(--accent-secondary-soft);
  color: var(--mustard-text);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.auto-offline-status button[hidden] {
  display: none;
}

.rail-action-row {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--well-bg);
  box-shadow: var(--shadow-inset);
}

.mode-toggle button {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 13px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.mode-toggle button[aria-pressed="true"] {
  border-color: rgba(196, 154, 69, 0.4);
  background: var(--accent-secondary-soft);
  color: var(--mustard-text);
  box-shadow: var(--shadow-soft);
}

.mode-toggle button:hover,
.mode-toggle button:focus-visible {
  color: var(--ink);
  outline: none;
}

.prepare-mode-toggle {
  margin-top: 10px;
}

.rail-section > .prepare-mode-toggle {
  display: flex;
}

.rail-section > .prepare-mode-toggle button {
  flex: 1;
}

.binder-editor .overlay-header .prepare-mode-toggle {
  margin: 0 0 8px;
}

.rail-action {
  flex: 1;
  min-height: 36px;
  border-radius: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.rail-action:hover {
  background: var(--hover-bg);
}

.liturgy-summary {
  margin-top: 10px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

.liturgy-summary strong {
  font-size: 13px;
}

.liturgy-summary span {
  color: var(--ink-muted);
  font-size: 12px;
}

.sync-tile {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.source-button {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.source-button.connected {
  border-color: var(--accent-primary);
  background: var(--active-bg);
}

.parish-connect-card {
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 28%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 90%, var(--accent-secondary) 10%);
  box-shadow: 0 8px 24px rgb(61 45 34 / 8%);
}

.parish-connect-card h3 {
  margin: 6px 0 5px;
  font-size: 1rem;
}

.parish-connect-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.parish-connect-card button {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 45%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.source-mark {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--accent-secondary);
  color: var(--chrome-bg);
  font-size: 11px;
  font-weight: 900;
}

.sync-tile strong,
.readiness-item strong {
  display: block;
  font-size: 13px;
}

.sync-tile span:last-child,
.readiness-item span:last-child {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  margin-top: 1px;
}

.piece-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 8px;
  scrollbar-width: auto;
  scrollbar-color: var(--accent-primary) transparent;
  overscroll-behavior: contain;
}

.piece-list::-webkit-scrollbar { width: 10px; }
.piece-list::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--accent-primary); background-clip: padding-box; }
.piece-list.has-more { box-shadow: inset 0 -16px 16px -18px rgba(58, 40, 32, 0.75); }

.piece-list-scroll-cue {
  align-self: center;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: var(--mustard-text);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  transition: max-height 140ms ease, margin 140ms ease, opacity 140ms ease;
}

.piece-list-scroll-cue.visible {
  max-height: 20px;
  margin-top: 6px;
  opacity: 1;
}

/* M-F easy-join multi-session picker (flag-gated product UI). */
.easy-join-picker {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-modal);
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(28, 22, 14, 0.42);
}
.easy-join-picker[hidden] { display: none; }
.easy-join-picker-shell {
  width: min(440px, 100%);
  display: grid;
  gap: 12px;
  padding: 22px 20px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(165deg, #fdfcf9 0%, #fbf3e4 70%, #f4e8d2 100%);
  box-shadow: 0 18px 48px rgba(40, 28, 12, 0.22);
}
.easy-join-picker-kicker {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.easy-join-picker-shell h2 {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.easy-join-picker-status {
  margin: 0;
  min-height: 1.25em;
  color: var(--ink-muted);
  font-size: var(--gn-app-supporting-size);
  font-weight: 650;
}
.easy-join-picker-list {
  display: grid;
  gap: 8px;
  margin: 4px 0 2px;
}
.easy-join-picker-option {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--well-bg, #fff);
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.easy-join-picker-option:hover,
.easy-join-picker-option:focus-visible {
  border-color: var(--accent-sky);
  outline: 3px solid rgba(90, 138, 174, 0.22);
  outline-offset: 1px;
}
.easy-join-picker-option[aria-selected="true"] {
  border-color: rgba(196, 154, 69, 0.78);
  box-shadow: 0 0 0 2px rgba(196, 154, 69, 0.18);
}
.easy-join-picker-option[data-network-highlight="1"]::after {
  content: "Nearby";
  justify-self: start;
  margin-top: 2px;
  color: var(--accent-terracotta);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.easy-join-picker-dismiss {
  justify-self: start;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.easy-join-picker-dismiss:focus-visible {
  outline: 3px solid rgba(90, 138, 174, 0.28);
  outline-offset: 2px;
}

/* moat-1: the canonical /glownotes/ front door is a live Mass picker. */
.mass-picker {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-modal);
  overflow: auto;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 12% 8%, rgba(90, 138, 174, 0.19), transparent 30%),
    linear-gradient(155deg, #fdfcf9 0%, #fbf3e4 62%, #f2e4cc 100%);
}

.mass-picker[hidden] { display: none; }

.mass-picker-shell {
  width: min(760px, 100%);
  min-height: calc(100dvh - 48px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mass-picker-brand {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(58, 40, 32, 0.15);
}

.mass-picker-kicker {
  margin: 18px 0 4px;
  color: var(--accent-sky);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mass-picker h1 {
  margin: 0;
  color: var(--ink);
  font: 700 clamp(2.3rem, 7vw, 4.5rem)/0.98 var(--font-display);
}

.mass-picker-lede {
  max-width: 620px;
  margin: 12px 0 24px;
  color: var(--ink-muted);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
}

.mass-picker-status { min-height: 24px; color: var(--ink-muted); font-size: var(--gn-app-headline-size); line-height: var(--gn-app-headline-leading); font-weight: 750; }
.mass-picker-list { display: grid; gap: 8px; margin-top: 10px; }
.mass-picker-list[hidden] { display: none; }
.mass-picker-group { display: grid; gap: 8px; }
.mass-picker-group + .mass-picker-group { margin-top: 8px; }
.mass-picker-group-title { margin: 0; color: var(--ink-muted); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.mass-picker-option {
  width: 100%;
  min-height: var(--gn-app-row-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(58, 40, 32, 0.15);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.92);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(58, 40, 32, 0.07);
  text-align: left;
  cursor: pointer;
}

.mass-picker-option:hover,
.mass-picker-option:focus-visible { border-color: var(--accent-sky); background: #fff; outline: 3px solid rgba(90, 138, 174, 0.18); }
.mass-picker-option.recommended { border-color: rgba(196, 154, 69, 0.72); box-shadow: 0 10px 28px rgba(196, 154, 69, 0.16); }
.mass-picker-option.last-choice::after { content: "Last used"; color: var(--accent-terracotta); font-size: var(--gn-app-supporting-size); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.mass-picker-option-copy { display: grid; gap: 1px; }
.mass-picker-option-time { color: var(--accent-terracotta); font-size: var(--gn-app-supporting-size); font-weight: 900; }
.mass-picker-option strong { font-family: var(--font-serif-display); font-size: var(--gn-app-headline-size); font-weight: 700; line-height: var(--gn-app-headline-leading); }
.mass-picker-option small { color: var(--ink-muted); font-size: var(--gn-app-supporting-size); }
.mass-picker-option-badges { justify-self: end; display: flex; align-items: center; gap: 8px; }
.mass-picker-lock {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(154, 127, 67, 0.4);
  border-radius: 999px;
  background: rgba(216, 206, 185, 0.46);
  font-size: 16px;
}
.mass-picker-badge { justify-self: end; padding: 6px 9px; border-radius: 999px; background: var(--accent-secondary); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mass-picker-cancel { align-self: flex-start; margin-top: 18px; min-height: 44px; padding: 8px 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--well-bg); color: var(--ink); font-weight: 850; }
.mass-picker-offline { margin: 18px 0 0; color: var(--ink-muted); font-size: 12px; }

.binder-passcode-prompt {
  width: min(590px, 100%);
  box-sizing: border-box;
  margin-top: 14px;
  padding: 22px;
  border: 1px solid rgba(154, 127, 67, 0.45);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 12px 30px rgba(58, 40, 32, 0.1);
}

.binder-passcode-prompt[hidden] { display: none; }

.binder-passcode-back {
  min-height: 38px;
  margin: -8px 0 14px -8px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: var(--accent-terracotta);
  font-weight: 850;
  cursor: pointer;
}

.binder-passcode-lock {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(154, 127, 67, 0.42);
  border-radius: 14px;
  background: rgba(216, 206, 185, 0.48);
  font-size: 22px;
}

.binder-passcode-kicker {
  margin: 15px 0 3px;
  color: var(--accent-terracotta);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.binder-passcode-prompt h2 {
  margin: 0;
  color: var(--ink);
  font: 700 clamp(1.7rem, 4vw, 2.35rem)/1.05 var(--font-display);
}

.binder-passcode-copy { margin: 9px 0 18px; color: var(--ink-muted); }
.binder-passcode-form { display: grid; gap: 7px; }
.binder-passcode-form label { color: var(--ink); font-size: 12px; font-weight: 900; }
.binder-passcode-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }

.binder-passcode-entry input,
.binder-passcode-entry button {
  min-height: 48px;
  box-sizing: border-box;
  border-radius: 10px;
  font: 800 15px/1 var(--font-sans);
}

.binder-passcode-entry input {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
}

.binder-passcode-entry input:focus {
  border-color: var(--accent-sky);
  outline: 3px solid rgba(90, 138, 174, 0.18);
}

.binder-passcode-entry button {
  padding: 8px 16px;
  border: 1px solid #c2b391;
  border-bottom-width: 3px;
  background: linear-gradient(180deg, #fffdf8 0%, #f3ecdd 100%);
  color: #4a3b32;
  cursor: pointer;
}

.binder-passcode-entry button:disabled { cursor: wait; opacity: .62; }
.binder-passcode-status { min-height: 20px; margin: 10px 0 0; color: var(--accent-terracotta); font-size: 13px; font-weight: 800; }

@media (max-width: 600px) {
  .mass-picker-option { min-height: var(--gn-app-row-height); padding: 7px 10px; }
  .mass-picker-option.last-choice::after { display: none; }
  .binder-passcode-prompt { padding: 18px; }
  .binder-passcode-entry { grid-template-columns: 1fr; }
}

.piece-button {
  width: 100%;
  min-height: 76px;
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  display: grid;
  gap: 4px;
  cursor: pointer;
}

.piece-button:hover {
  background: var(--hover-bg);
}

.piece-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.piece-top-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.piece-top-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piece-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--well-bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.piece-button.active .piece-thumb {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
}

.piece-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.piece-thumb span {
  font-weight: 950;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: currentColor;
  opacity: 0.88;
}

.oow-group-label {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.oow-piece-button {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
}

.oow-order-number {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-secondary-soft);
  color: var(--mustard-text);
  font-size: 12px;
  font-weight: 950;
}

.piece-button.active .oow-order-number {
  background: var(--accent-secondary);
  color: var(--chrome-bg);
}

.oow-piece-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.piece-button.active {
  background: var(--accent-primary);
  color: var(--accent-ink);
  border-color: var(--accent-secondary);
}

.piece-button strong {
  font-size: 14px;
}

.piece-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: currentColor;
  opacity: 0.78;
  font-size: 12px;
}

.piece-shepherd-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(53, 92, 140, 0.28);
  border-radius: 999px;
  padding: 3px 8px;
  color: currentColor;
  opacity: 0.86;
  font-size: 11px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace {
  min-width: 0;
  padding: 20px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
}

.topbar,
.live-strip,
.score-panel,
.side-panel .control-block,
.gn-floating-layer > .metronome-block {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.topbar,
.live-strip {
  box-shadow: var(--shadow-soft);
}

.topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--top-band);
  color: var(--toolbar-ink);
  border-color: var(--toolbar-anchor);
}

.topbar h2 {
  font-family: var(--font-serif-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  color: var(--toolbar-ink);
}

.topbar .eyebrow {
  color: var(--toolbar-ink);
  opacity: 0.78;
}

.topbar-actions,
.toolbar-cluster,
.reader-left,
.reader-right,
.cue-dock,
.bpm-row,
.toggle-grid {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  color: var(--ink);
  cursor: pointer;
}

.icon-button svg,
.score-tool-drawer svg,
.cache-action svg,
.tool-button svg,
.thickness-control svg,
.center-reveal svg,
.turner-popover svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button:hover,
.icon-button:focus-visible {
  border-color: var(--hover-anchor);
  background: var(--hover-bg);
  color: var(--hover-ink);
}

.icon-button.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(253, 252, 249, 0.18);
}

.icon-button svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.2;
}

.primary-action,
.secondary-action,
.ghost-action,
.cue-dock button,
.stepper {
  min-height: 38px;
  border-radius: 6px;
  padding: 0 14px;
  font-weight: 750;
  cursor: pointer;
}

.primary-action {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.secondary-action {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  color: var(--ink);
}

.primary-action:hover {
  border-color: var(--terracotta-text);
  background: var(--terracotta-text);
}

.secondary-action:hover,
.secondary-action:focus-visible {
  background: var(--hover-bg);
  color: var(--hover-ink);
}

.topbar-actions .secondary-action {
  width: auto;
  border-color: rgba(58, 40, 32, 0.22);
  background: var(--button-bg);
  color: var(--toolbar-ink);
}

.topbar-actions .secondary-action:hover,
.topbar-actions .secondary-action:focus-visible,
.topbar-actions .icon-button:hover,
.topbar-actions .icon-button:focus-visible {
  border-color: var(--hover-anchor);
  background: var(--hover-bg);
  color: var(--hover-ink);
}

.topbar-actions .icon-button {
  border-color: rgba(58, 40, 32, 0.22);
  background: var(--button-bg);
  color: var(--toolbar-ink);
}

#publishBinderRoom {
  border-color: rgba(58, 40, 32, 0.22);
  background: var(--button-bg);
  color: var(--toolbar-ink);
}

#publishBinderRoom:hover {
  border-color: var(--hover-anchor);
  background: var(--hover-bg);
  color: var(--hover-ink);
}

#startLive {
  border-color: var(--accent-terracotta);
  background: var(--accent-terracotta);
  color: var(--accent-ink);
}

#startLive:hover {
  border-color: var(--terracotta-text);
  background: var(--terracotta-text);
}

#saveBinderEditor {
  border-color: var(--accent-terracotta);
  background: var(--accent-terracotta);
  color: var(--accent-ink);
}

#saveBinderEditor:hover {
  border-color: var(--terracotta-text);
  background: var(--terracotta-text);
}

.ghost-action,
.cue-dock button,
.stepper {
  background: var(--well-bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.cue-dock button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.cue-dock {
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}

.cue-dock::-webkit-scrollbar {
  display: none;
}

.cue-dock-label {
  min-width: max-content;
  display: grid;
  place-items: center;
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cue-dock button {
  min-width: 58px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  padding: 0 12px;
  text-align: center;
  line-height: 1.08;
  white-space: nowrap;
}

.cue-dock button span {
  display: none;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--paper-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.cue-dock button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.cue-dock button em {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 650;
}

.cue-dock button.active span {
  background: var(--paper-bg);
  color: var(--accent);
}

.cue-dock button.nav-only {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}

.cue-dock button.nav-only.active {
  background: var(--accent-soft);
}

.live-strip {
  min-height: 72px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  background: var(--accent-primary-soft);
  overflow: hidden;
}

.readiness-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.86);
}

.readiness-item strong {
  color: var(--ink);
}

.readiness-item span:last-child {
  color: var(--ink-muted);
}

.readiness-action {
  margin-left: auto;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.readiness-action:hover {
  background: var(--line);
}

.readiness-action.ghost {
  background: transparent;
  color: var(--muted);
}

.terms-item div {
  min-width: 0;
}

.terms-item div > span,
.terms-item #termsClause {
  display: none;
}

.app-version-item {
  gap: 8px;
}

/* A [hidden] readiness item must be fully removed from the live-strip grid so it
   never occupies a column. .readiness-item's display:flex would otherwise override
   the UA [hidden] rule (installStatusItem / device-link both boot hidden). */
.readiness-item[hidden] {
  display: none;
}

.device-link-item div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.device-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.device-link-row[hidden] {
  display: none;
}

.device-link-input {
  min-width: 0;
  width: 130px;
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 0 8px;
}

.app-version-item div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.app-version-item small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-version-item .readiness-action {
  padding: 0 9px;
}

.projection-launch {
  margin-top: 10px;
}

.projection-launch-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.projection-launch-row input {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  color: var(--ink);
}

.projection-launch-row button {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.projection-launch-row button:hover {
  background: var(--line);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  display: inline-block;
  flex: 0 0 auto;
  background: var(--line-strong);
}

.status-dot.synced,
.status-dot.ok,
.status-dot.ready,
.status-dot.live {
  background: var(--accent-secondary);
}

.status-dot.warn {
  background: var(--accent-terracotta);
}

.status-dot.offline {
  background: var(--accent-danger);
}

.home-escape-button {
  position: fixed;
  top: var(--home-escape-top);
  left: var(--home-escape-left);
  z-index: var(--gn-layer-chrome);
  width: var(--home-escape-size);
  height: var(--home-escape-size);
  display: grid;
  place-items: center;
  border: 1px solid var(--toolbar-anchor);
  border-radius: 999px;
  background: var(--well-bg);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(32, 35, 31, 0.22);
  cursor: pointer;
  touch-action: manipulation;
}

.home-escape-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-escape-button:hover,
.home-escape-button:focus-visible {
  background: var(--hover-bg);
  color: var(--hover-ink);
  outline: 2px solid var(--accent-secondary);
  outline-offset: 2px;
}

body.reader-focus.controls-revealed .score-toolbar {
  left: var(--home-escape-enclave-width);
  padding-left: 0;
}

body.reader-focus.reader-portrait.controls-revealed .score-toolbar {
  left: var(--home-escape-enclave-width);
  padding-left: 0;
}

body.reader-focus:not(.controls-revealed) .home-escape-button {
  top: var(--home-escape-top);
  left: var(--home-escape-left);
  bottom: auto;
  transform: none;
}

body.reader-focus.controls-revealed .home-escape-button,
body.reader-focus.annotation-mode .home-escape-button {
  top: var(--home-escape-top);
  left: var(--home-escape-left);
  bottom: auto;
  transform: none;
}

.stage-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
}

.score-panel {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.navigation-banner {
  position: fixed;
  top: auto;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
  left: 50%;
  z-index: var(--gn-layer-floating);
  transform: translateX(-50%) translateY(-8px);
  min-width: 280px;
  max-width: min(520px, calc(100% - 48px));
  padding: 12px 18px;
  background: var(--banner-bg);
  border: 1px solid var(--toolbar-anchor);
  color: var(--banner-ink);
  box-shadow: var(--shadow-soft);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.navigation-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.navigation-banner span {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.navigation-banner span[hidden] {
  display: none;
}

.navigation-banner strong {
  display: block;
  margin-top: 2px;
  font-size: 24px;
}

.navigation-banner.titleless strong {
  margin-top: 0;
  font-size: 18px;
}

.app-update-banner {
  position: absolute;
  top: 84px;
  right: 18px;
  z-index: var(--gn-layer-floating);
  width: min(430px, calc(100% - 36px));
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--toolbar-anchor);
  border-radius: 16px;
  background: var(--banner-bg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.app-update-banner[hidden] {
  display: none;
}

.app-update-banner div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.app-update-banner strong,
.app-update-banner span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-update-banner strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.app-update-banner span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.app-update-banner button {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.app-update-banner button.ghost {
  background: var(--button-bg);
  color: var(--banner-ink);
}

.score-toolbar {
  position: relative;
  z-index: 5;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--toolbar-bg);
  color: var(--toolbar-ink);
  border-bottom: 1px solid var(--line);
}

.reader-chrome {
  display: grid;
  grid-template-columns: max-content minmax(150px, 1fr) max-content;
  min-width: 0;
}

/* iPad-landscape widths: controls would starve the title (24px collapse,
   wave-2 QA finding); give the right cluster its own row instead. */
@media (max-width: 1380px) {
  .reader-chrome {
    grid-template-columns: max-content minmax(150px, 1fr);
  }

  .reader-chrome .reader-right {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.reader-left,
.reader-right {
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reader-title {
  position: relative;
  min-width: 0;
  max-width: 100%;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  padding: 4px 12px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

.reader-build-stamp {
  position: absolute;
  top: 5px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #C2B391;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  color: #4A3B32;
  box-shadow: 0 2px 6px rgba(74, 59, 50, 0.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.reader-title span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-title strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.25;
}

.score-tool-drawer {
  position: absolute;
  top: 84px;
  right: 18px;
  z-index: 16;
  width: min(320px, calc(100vw - 36px));
  max-height: min(660px, calc(100vh - 118px));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  background: var(--toolbar-bg);
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(122, 96, 32, 0.16), inset 0 1px 0 rgba(253, 252, 249, 0.72);
}

.score-tool-drawer[hidden] {
  display: none;
}

.score-tool-drawer-section {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
}

.score-tool-drawer-section + .score-tool-drawer-section {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.score-tool-drawer-section span {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 850;
}

.score-tool-drawer button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-muted);
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.score-tool-drawer button:hover,
.score-tool-drawer button:focus-visible {
  background: var(--hover-bg);
  color: var(--hover-ink);
}

.score-tool-drawer button.active,
.score-tool-drawer button[aria-pressed="true"] {
  background: var(--active-bg);
  color: var(--accent);
}

/* C5-ENABLE precondition 7: the Link Device drawer entry must be FULLY gone
   while the cloud feature is off — the button's display:grid above would
   otherwise override the UA [hidden] rule (same trap as .device-link-item). */
.score-tool-drawer button[hidden] {
  display: none;
}

.score-tool-drawer hr.score-tool-drawer-divider {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Destructive row: relocated app reset. Same danger language as
   .ghost-action.danger / the reset confirm dialog. */
.score-tool-drawer button.score-tool-drawer-danger {
  color: var(--accent-danger);
}

.score-tool-drawer svg {
  width: 29px;
  height: 29px;
  justify-self: center;
  stroke: currentColor;
  stroke-width: 2.2;
}

/* Jeff's provided raster art (Pedal & MIDI DIN mark) rides the same icon
   column and footprint as the sibling stroke icons.

   The art is used VERBATIM as an alpha mask rather than painted as a raster:
   the source PNG is cream (RGB 237,234,227) on transparency, which rendered
   near-invisible against the cream drawer, and an <img> cannot inherit
   currentColor -- so it could not follow the muted/hover/active color states
   every sibling icon does. Masking paints the identical silhouette in
   currentColor, giving true parity with the stroke icons in all three states.
   Shape, proportions and detail are untouched. */
.score-tool-drawer-icon {
  --din-art: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFzUlEQVR4nO1bS28cRRCe4DgQHgECEuaIeJwJj4THGSWKePwKxDHGiCtxEBIOSETGCCkKAm4JCRIIEFdeF0A++oJf663azW7VdHvX5gJxoFHNrsNmtne6Z3ZnvSPtJ41keaer+lGvrqoJgjHGGGOMHGCMmVAKjuoQ3lCEFxThz4pxXRFuKsJrmtF0Porw7+i31js/yRjN5RmhIbSCIsCYxckwLL+sGa4owmZ8kVmfFi24LLSFRzBq2KpU7tOEZxQDD2rRPTdDeBDONptweK/XHVSr1ds14Tua4c+8F971EGxrwrcB4OCeLH6TKy8qxlLKidcV4UXFeEoTHGeuPNZslu81ZumAPPK3/E9+U4zTivCSjEmWCFzXjCeHtnCzvHyrZlxIob9a3hdjlomfMftUDY9pxo/atCw84F9NMC+bGOQJ5o0HNeGin4hiVTG+XqvV7hgUf6ElnkETXu3B83ei0lSQBxq1jYc044r7xGFHTiMMw7tytj2z4jptKiFqNFCGRPCIZqx5GKblBleO+NIVkVWMZ6MTjSQG5tKIMXP1iR6HUpM5Z15wXOwV45qH2H+t1PKhIAVkwRY3N5eKhlo+pAi+sUjCWt/qYMTgeei8RG1ZorUeulxLPU9j9mvCT2w2QdaQlt4N+Fj79uL3BRkgYm+ZdCULLZmDfRNgPrOf1x5i3+vkffS7hwq8m5ZOxybsj6tD5CLTxgkAcLAdYCQtfiVJ5330u7U4mIskId0m9bQT4n00wR+x9zdSuWMdhbeJYn/NZe0Hpd9Z6IRh+cnIHd+sWme8GDabcDiKs5M2gPHssPQ7Kx1N8EHMFmxLqO3D8Eyyr8eqjzj56LcPstKJVCEWuyiG04mDjFmcdF1pJbz1mbiPfudNRxO8GdsATswnhPXyKw7d14OM7fMGEd0pWabONWyGlZd6DtAMVxyWf2HQ4WxW+PJVjB/H3OIXPQiaCVcaKwzh6TzC2Szw5avq+ExMijetsYtq3bkTTh/IFvENyt2lhS/fKEKMJVXCsPxUN0Euzzj0/2Le4WwapOErYh8z5NOWl/CCw/qfytPdpUUavuK5YnbgvO2lX5L9PxzP092lRRq+cheISfOPXS8pR4KzSeWHg4KCGR+NSfN610uqR8LxxgaMQh4+I7ar1ftjqhJ2vaQs+bXOZxhinXMmu1MC/sqwAYujV5LyhByezwbopA3Y3Fy7OygoohuuUwU42QgOLMu6B4iqTU4jyMluUNXLLwQFhSY44XaDlC0QKgIk8nMGQjpjKFwE+IXCCo4mR4J41RhzS1AwyJzjmSHrZci0rsONxE2oV54NCgZN1edjktzoWcTRDJcTN4Dxw6BgiBd3pOegn5RYs4ApsZuSPFLw6TcpOh0UBNKh1p3UcUS0mnDWoQb1IkiBpMXjh6kY3hpUYeS9YMTRXRjBLa/CiEC6r5JtAexI+SkYUUjyVhFcT1UUsRRHXU0RK6N4QbIXR3G1VCrdloqQZjzZLi0nScK3UpIORgTt8vh3lg6yE5kIaoL5PBskBol2+vvT7ggWzvVBdOmAtJm4NkEY72VDs/DWDJ9bwvff+s5kEZWmfJqkRPQajdI9wZAhPBXB9xZPtVqvrz0w9DY5VcNj3pPnyhE5OcW4JI9m/KxBlcd9x7fLXvm2ye1CCHpKwo5ifN/VMqdDfK2ri2O30ZLx1aSx4n0iHjFXt3vyuaXwiUpTnjah1dbO5Rlbx6jcKhXBPwmbeN3WWyybGn2AwRDax8KvAxP75N5BmHe5yA4vIZeRBVn0rrfQjF+5x8KX/7e/VZ5rN0tbq9dtV3duqKl7LXGCu5PM2i4vYanbnuBWq10eKFnScDWzn+8XEjFGlyfH3SGXRzaI4fSefTDRCblkyGSG8cmMSITc6rwvNsOEMYuT0oMjSUhnei3F0/7S7JLQLkyFyhgzIcnH1qcvcF5y8eJGpQJl7fNvfTanI1dL8EM0hnFaaBTms7kxxhgjKBr+A3pC+NwwrSw9AAAAAElFTkSuQmCC");
  display: block;
  justify-self: center;
  background-color: currentColor;
  -webkit-mask-image: var(--din-art);
          mask-image: var(--din-art);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.score-tool-drawer button .score-tool-drawer-icon {
  width: 32px;
  height: 32px;
}

.score-tool-drawer button.active svg,
.score-tool-drawer button[aria-pressed="true"] svg {
  stroke: currentColor;
}

.cache-action {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--well-bg);
  color: var(--ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.cache-action:hover,
.cache-action:focus-visible {
  border-color: var(--hover-anchor);
  background: var(--hover-bg);
  color: var(--hover-ink);
}

.cache-action::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 5px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 253, 250, 0.96);
  border-radius: 999px;
  background: var(--accent-secondary);
  box-shadow: 0 1px 4px rgba(32, 35, 31, 0.18);
}

.cache-action svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.cache-action.cache-ready {
  border-color: var(--accent-secondary);
  background: var(--accent-secondary-soft);
  color: var(--mustard-text);
}

.cache-action.cache-ready::after {
  background: var(--paper-bg);
}

.cache-action.cache-busy {
  background: var(--accent-secondary-soft);
  color: var(--mustard-text);
}

.cache-action.cache-busy::after {
  background: var(--accent-secondary);
}

.cache-action.cache-partial {
  background: var(--accent-secondary-soft);
  color: var(--mustard-text);
}

.cache-action[data-cache-state="idle"]::after {
  background: var(--disabled-text);
}

.cache-action[data-cache-state="needs-reload"]::after,
.cache-action[data-cache-state="blocked"]::after {
  background: var(--accent-danger);
}

.annotation-rail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--gn-layer-floating);
  width: 64px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-left: 1px solid var(--rail-anchor);
  background: var(--rail-bg);
  color: var(--rail-ink);
  transition: left 160ms ease, right 160ms ease;
}

body.annotation-mode .annotation-rail {
  display: flex;
}

body.reader-focus.annotation-mode .annotation-rail {
  top: max(188px, calc(env(safe-area-inset-top) + 184px));
}

.annotation-rail.dragging {
  transition: none;
}

.annotation-drag-handle {
  width: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--chrome-border);
  border-radius: 10px;
  background: rgba(253, 252, 249, 0.72);
  color: var(--rail-ink);
  box-shadow: inset 0 0 0 1px rgba(253, 252, 249, 0.56), 0 8px 18px rgba(58, 40, 32, 0.12);
  cursor: grab;
  touch-action: none;
}

.annotation-drag-handle span {
  display: grid;
  grid-template-columns: repeat(3, 5px);
  grid-auto-rows: 5px;
  gap: 4px;
  width: 23px;
  height: 23px;
  opacity: 0.9;
}

.annotation-drag-handle span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    9px 0 0 currentColor,
    18px 0 0 currentColor,
    0 9px 0 currentColor,
    9px 9px 0 currentColor,
    18px 9px 0 currentColor,
    0 18px 0 currentColor,
    9px 18px 0 currentColor,
    18px 18px 0 currentColor;
}

.annotation-drag-handle:hover,
.annotation-drag-handle:focus-visible,
.annotation-drag-handle.dragging {
  background: var(--hover-bg);
  color: var(--hover-ink);
}

.annotation-drag-handle.dragging {
  cursor: grabbing;
}

body.annotation-mode .score-panel {
  align-self: start;
}

body.annotation-mode .score-page {
  max-width: calc(100% - 64px);
  margin-right: 64px;
  transition: margin 160ms ease, max-width 160ms ease;
}

body.annotation-mode .score-reader {
  place-items: start center;
}

body.annotation-mode.edit-rail-left .score-page,
body.annotation-mode .score-reader.edit-rail-left .score-page,
body.annotation-mode .annotation-rail.edit-rail-left ~ .score-page {
  margin-right: 0;
  margin-left: 64px;
}

body.edit-rail-left .annotation-rail,
.score-reader.edit-rail-left .annotation-rail,
.annotation-rail.edit-rail-left {
  right: auto;
  left: 0;
  border-right: 1px solid var(--chrome-border);
  border-left: 0;
}

@media (max-width: 1024px) {
  body.annotation-mode .score-page {
    width: min(699px, calc(100% - 64px));
  }
}

.annotation-rail-group,
.tool-cluster,
.swatch-cluster,
.annotation-utilities {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.annotation-scope-toggle {
  width: 48px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  background: var(--button-bg);
}

.annotation-scope-toggle span {
  color: var(--chrome-ink-muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.annotation-scope-toggle button {
  width: 40px;
  min-height: 28px;
  border-radius: 999px;
  color: var(--rail-ink);
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.annotation-scope-toggle button.active {
  background: var(--accent);
  color: var(--accent-ink);
}

.annotation-scope-toggle button:disabled {
  opacity: 0.42;
  cursor: default;
}

.tool-button {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rail-ink);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.tool-button[data-has-subtools]::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: -5px 0 0 currentColor;
  opacity: 0.62;
}

.tool-button:hover,
.tool-button:focus-visible {
  background: var(--hover-bg);
  color: var(--hover-ink);
}

.tool-button:active {
  transform: scale(0.97);
}

.tool-button.active {
  outline: 2px solid var(--accent-secondary);
  outline-offset: -2px;
  border-color: var(--accent-secondary);
  background: var(--accent);
  color: var(--accent-ink);
}

.tool-button.active:hover,
.tool-button.active:focus-visible {
  background: var(--accent);
}

.tool-button:disabled {
  opacity: 0.38;
  cursor: default;
  transform: none;
}

.source-button:focus-visible,
.tool-button:focus-visible,
.swatch:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.tool-button svg,
.thickness-control svg,
.center-reveal svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.sheep-button.compact {
  min-height: 38px;
  padding: 0 10px;
}

.sheep-button.compact .sheep-icon {
  width: 28px;
}

.sheep-button.compact .sheep-icon svg {
  width: 28px;
}

.swatch {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 99px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  background: var(--swatch-color, var(--accent-primary));
  cursor: pointer;
  outline-color: var(--focus-outline);
  box-shadow: 0 2px 6px rgba(32, 20, 15, 0.24);
}

.swatch[data-color="#FFFFFF"] {
  border-color: rgba(32, 21, 17, 0.32);
}

.swatch.active {
  border-color: var(--accent-secondary);
  box-shadow: inset 0 0 0 2px var(--chrome-bg), 0 0 0 2px rgba(196, 154, 69, 0.34), var(--shadow-soft);
}

.ink-subtool-row {
  position: absolute;
  top: min(100px, calc(100% - 430px));
  right: calc(100% + 10px);
  z-index: var(--gn-layer-floating-popover);
  display: block;
  width: min(328px, calc(100vw - 92px));
  max-height: calc(100% - 102px);
  padding: 14px;
  border: 1px solid #C2B391;
  border-radius: 12px;
  background: rgba(239, 232, 216, 0.98);
  color: #4A3B32;
  box-shadow: 0 16px 40px rgba(15, 36, 65, 0.22);
}

.ink-subtool-row[hidden] {
  display: none !important;
}

.pen-ink-controls,
.highlighter-ink-controls {
  display: grid;
  gap: 12px;
}

.pen-ink-controls[hidden],
.highlighter-ink-controls[hidden] {
  display: none !important;
}

.ink-subtool-row .swatch-cluster {
  width: auto;
  flex: 0 0 auto;
  flex-direction: row;
  gap: 8px;
}

.annotation-range-control {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 38px;
  gap: 9px;
  align-items: center;
  min-height: 38px;
  color: #4A3B32;
  font-size: 11px;
  font-weight: 850;
}

.annotation-range-control input {
  width: 100%;
  accent-color: #C2B391;
}

.annotation-range-control output {
  font: 900 10px/1 "Courier New", monospace;
  text-align: right;
}

.highlighter-axis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.highlighter-axis-grid button,
.stamp-categories button {
  min-height: 48px;
  padding: 4px 6px;
  border: 1px solid #D8CEB9;
  border-radius: 6px;
  background: #EFE8D8;
  color: #4A3B32;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8), inset -1px -1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(15, 36, 65, 0.15);
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.highlighter-axis-grid button[aria-pressed="true"],
.stamp-categories button[aria-selected="true"] {
  border: 2px solid #C2B391;
  background: #D8CEB9;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
}

.highlighter-swatches {
  display: grid;
  grid-template-columns: repeat(4, 48px);
  gap: 8px;
}

.highlighter-swatch {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(15, 36, 65, 0.15);
  border-radius: 6px;
  background: #EFE8D8;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8), inset -1px -1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(15, 36, 65, 0.15);
  cursor: pointer;
}

.highlighter-swatch::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 3px;
  background: var(--swatch-color);
  opacity: var(--swatch-opacity);
  mix-blend-mode: multiply;
}

.highlighter-swatch.active {
  outline: 3px solid #C2B391;
  outline-offset: 2px;
}

.annotation-led-readout {
  padding: 9px;
  border: 2px solid #000;
  border-radius: 4px;
  background: #3A2820;
  color: #FFF3B8;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.2);
  font: 900 10px/1.3 "Courier New", monospace;
}

.ink-subtool-row.first-reveal {
  animation: ink-subtools-first-reveal 180ms ease-out both;
}

@keyframes ink-subtools-first-reveal {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.stamp-palette,
.shape-palette,
.lasso-palette,
.layer-palette,
.history-palette {
  position: absolute;
  right: calc(100% + 10px);
  z-index: var(--gn-layer-floating-popover);
  display: none;
  gap: 8px;
  min-width: 220px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.stamp-palette,
.shape-palette {
  top: min(360px, calc(100% - 220px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stamp-palette {
  top: min(112px, calc(100% - 560px));
  width: min(328px, calc(100vw - 92px));
  max-height: calc(100% - 112px);
  grid-template-columns: 1fr;
  border-color: #C2B391;
  border-radius: 12px;
  background: rgba(239, 232, 216, 0.98);
  color: #4A3B32;
  box-shadow: 0 16px 40px rgba(15, 36, 65, 0.22);
}

.stamp-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.stamp-grid {
  display: grid;
  grid-template-columns: repeat(4, 48px);
  gap: 8px;
}

.stamp-tile {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid #D8CEB9;
  border-radius: 6px;
  background: #EFE8D8;
  color: #786A45;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8), inset -1px -1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(15, 36, 65, 0.15);
  font: 700 17px/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
}

.stamp-tile.text-small {
  font-size: 10px;
  font-style: italic;
}

.stamp-tile svg,
.stamp-visual svg {
  width: 27px;
  height: 27px;
}

.stamp-tile.active {
  outline: 2px solid #C2B391;
  outline-offset: 2px;
}

.annotation-panel-note {
  margin: 0;
  color: rgba(120, 106, 69, 0.82);
  font-size: 11px;
  line-height: 1.4;
}

.lasso-palette {
  top: min(330px, calc(100% - 128px));
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  min-width: 260px;
}

.lasso-text-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgba(194, 179, 145, 0.72);
  border-radius: 8px;
  background: rgba(253, 252, 249, 0.78);
}

.lasso-text-controls[hidden] { display: none !important; }
.lasso-text-controls > strong { grid-column: 1 / -1; color: #6B5B46; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.lasso-text-controls label { grid-column: 1 / -1; display: grid; grid-template-columns: 64px minmax(0, 1fr) 30px; gap: 6px; align-items: center; color: #4A3B32; font-size: 9px; font-weight: 850; }
.lasso-text-controls label:first-of-type { grid-template-columns: 64px 42px; }
.lasso-text-controls input[type="color"] { width: 40px; height: 28px; padding: 2px; border: 1px solid #C2B391; border-radius: 6px; background: #FFFDF8; }
.lasso-text-controls input[type="range"] { width: 100%; accent-color: #9A7F43; }
.lasso-text-controls output { text-align: right; font: 900 9px/1 "Courier New", monospace; }

.layer-palette {
  top: 112px;
  grid-template-columns: 1fr;
  min-width: 260px;
  align-items: stretch;
}

.history-palette {
  top: 168px;
  grid-template-columns: 1fr;
  min-width: 280px;
  max-width: 340px;
  align-items: stretch;
}

body.edit-rail-left .annotation-rail .stamp-palette,
body.edit-rail-left .annotation-rail .shape-palette,
body.edit-rail-left .annotation-rail .lasso-palette,
body.edit-rail-left .annotation-rail .layer-palette,
body.edit-rail-left .annotation-rail .history-palette,
.score-reader.edit-rail-left .annotation-rail .stamp-palette,
.score-reader.edit-rail-left .annotation-rail .shape-palette,
.score-reader.edit-rail-left .annotation-rail .lasso-palette,
.score-reader.edit-rail-left .annotation-rail .layer-palette,
.score-reader.edit-rail-left .annotation-rail .history-palette,
.annotation-rail.edit-rail-left .stamp-palette,
.annotation-rail.edit-rail-left .shape-palette,
.annotation-rail.edit-rail-left .lasso-palette,
.annotation-rail.edit-rail-left .layer-palette,
.annotation-rail.edit-rail-left .history-palette {
  right: auto;
  left: calc(100% + 10px);
}

body.edit-rail-left .annotation-rail .ink-subtool-row,
.score-reader.edit-rail-left .annotation-rail .ink-subtool-row,
.annotation-rail.edit-rail-left .ink-subtool-row {
  right: auto;
  left: calc(100% + 10px);
}

body.edit-rail-left .annotation-rail .ink-subtool-row.first-reveal,
.score-reader.edit-rail-left .annotation-rail .ink-subtool-row.first-reveal,
.annotation-rail.edit-rail-left .ink-subtool-row.first-reveal {
  animation-name: ink-subtools-first-reveal-left;
}

@keyframes ink-subtools-first-reveal-left {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ink-subtool-row.first-reveal {
    animation: none;
  }
}

body.stamps-mode .stamp-palette,
body.shapes-mode .shape-palette,
body.lasso-mode .lasso-palette,
body.layers-mode .layer-palette,
body.history-mode .history-palette {
  display: grid;
}

.stamp-palette button,
.shape-palette button,
.lasso-palette button,
.layer-palette button {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.stamp-palette button:hover,
.shape-palette button:hover,
.lasso-palette button:hover,
.layer-palette button:hover {
  background: var(--line);
}

.stamp-palette button.active,
.shape-palette button.active,
.layer-palette button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

#stampPalette .stamp-categories button {
  min-height: 48px;
  padding: 4px 6px;
  border: 1px solid #D8CEB9;
  border-radius: 6px;
  background: #EFE8D8;
  color: #4A3B32;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8), inset -1px -1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(15, 36, 65, 0.15);
  font-size: 9px;
}

#stampPalette .stamp-categories button[aria-selected="true"] {
  border: 2px solid #C2B391;
  background: #D8CEB9;
  color: #4A3B32;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
}

#stampPalette .stamp-tile {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  justify-content: center;
  padding: 3px;
  border: 1px solid #D8CEB9;
  border-radius: 6px;
  background: #EFE8D8;
  color: #786A45;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8), inset -1px -1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(15, 36, 65, 0.15);
  font: 700 17px/1 Georgia, "Times New Roman", serif;
}

#stampPalette .stamp-tile.text-small {
  font-size: 10px;
  font-style: italic;
}

#stampPalette .stamp-tile.active {
  outline: 2px solid #C2B391;
  outline-offset: 2px;
}

.lasso-palette span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.annotation-text-add {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid rgba(154, 127, 67, 0.55);
  border-radius: 8px;
  background: rgba(216, 206, 185, 0.48);
  color: #4A3B32;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.layer-palette-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.layer-palette button[aria-pressed="false"] {
  opacity: 0.62;
}

.history-palette .history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.history-palette .history-row button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.history-palette .history-row button:hover {
  background: var(--line);
}

.history-palette .history-row button.danger {
  border-color: rgba(164, 62, 50, 0.25);
  color: var(--accent-danger);
  background: var(--accent-danger-soft);
}

.thickness-control {
  width: 32px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 7px 0;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--rail-ink);
}

.thickness-control svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.thickness-control input {
  width: 26px;
  height: 82px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  writing-mode: vertical-lr;
  direction: rtl;
}

.thickness-control input::-webkit-slider-thumb {
  background: var(--accent-secondary);
}

.thickness-control input::-moz-range-thumb {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

.sheep-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sheep-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: 0 12px;
  font-weight: 850;
  cursor: pointer;
}

.sheep-button.disengaged {
  background: var(--accent-danger-soft);
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}

.catch-up-button {
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--accent-secondary);
  background: var(--accent-secondary-soft);
  color: var(--ink);
  padding: 0 12px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.catch-up-button[hidden],
.catch-up-action[hidden] {
  display: none;
}

.sheep-icon {
  width: 32px;
  height: 26px;
  display: grid;
  place-items: center;
}

.sheep-icon svg {
  width: 32px;
  height: 26px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.score-reader {
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 34px;
  position: relative;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    var(--canvas);
  background-size: 24px 24px;
}

/* Keep setup/debug layouts pinned to the top instead of centering a tall score. */
body:not(.reader-focus) .score-reader {
  align-items: start;
}

.score-page,
.score-page *,
.chart-viewer,
.chart-viewer *,
.annotation-layer,
.annotation-layer *,
.page-tap-zone,
.gn-curl-overlay,
.cue-dock,
.cue-dock *,
.count-in-band,
.count-in-band * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.score-page input,
.score-page textarea,
.score-page select,
.score-page [contenteditable="true"],
.score-page [contenteditable=""],
.chart-viewer input,
.chart-viewer textarea,
.chart-viewer select,
.chart-viewer [contenteditable="true"],
.chart-viewer [contenteditable=""],
.annotation-layer input,
.annotation-layer textarea,
.annotation-layer select,
.annotation-layer [contenteditable="true"],
.annotation-layer [contenteditable=""],
.cue-dock input,
.cue-dock textarea,
.cue-dock select,
.cue-dock [contenteditable="true"],
.cue-dock [contenteditable=""],
.count-in-band input,
.count-in-band textarea,
.count-in-band select,
.count-in-band [contenteditable="true"],
.count-in-band [contenteditable=""] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.center-reveal {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 99px;
  border: 1px solid rgba(32, 35, 31, 0.16);
  background: rgba(255, 253, 250, 0.88);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(32, 35, 31, 0.16);
  cursor: pointer;
}

.page-turn-flash {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  min-width: 72px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.88);
  border: 1px solid rgba(217, 208, 191, 0.8);
  color: var(--ink);
  box-shadow: 0 16px 38px rgba(32, 35, 31, 0.18);
  font-size: 12px;
  font-weight: 950;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.96);
  transition: opacity 120ms ease, transform 160ms ease;
}

.page-turn-flash span {
  line-height: 1;
}

body.page-turn-forward .page-turn-flash,
body.page-turn-back .page-turn-flash {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

body.page-turn-forward .page-turn-flash {
  right: max(34px, env(safe-area-inset-right));
}

body.page-turn-back .page-turn-flash {
  left: max(34px, env(safe-area-inset-left));
}

body.pedal-turn .page-turn-flash {
  border-color: rgba(53, 92, 140, 0.28);
  background: rgba(222, 233, 247, 0.92);
  color: var(--sky-text);
}

body.tap-turn .page-turn-flash {
  border-color: rgba(178, 123, 42, 0.26);
  background: rgba(255, 248, 233, 0.92);
  color: #805815;
}

.page-tap-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: var(--tap-zone-width, 30%);
  border: 0;
  border-color: transparent;
  outline-color: var(--focus-outline);
  background: transparent;
  cursor: pointer;
  /* Page-turn artifact 1 (diagnosed 2026-07-04): iOS Safari's DEFAULT tap
     highlight washes the ENTIRE 30%-wide button gray for ~100ms on every
     turn. Kill it; tap feedback is the page turning. */
  -webkit-tap-highlight-color: transparent;
  /* A corner curl is a horizontal finger gesture. Without reserving that
     axis, iPadOS cancels the PointerEvent stream before the 12px qualifier,
     so the mouse-only verifier passes while a real finger cannot turn the
     bundled Penitential Act PDF. Keep vertical score pan and pinch zoom;
     claim only horizontal movement inside the existing edge zones. */
  touch-action: pan-y pinch-zoom;
}

/* Cross-piece curl directions are claimed by the button that receives the
   initial contact. This state is resolved before pointerdown and never relies
   on a measured child shield, so iPadOS cannot award the boundary drag to a
   native pan before the 12px curl qualifier runs. */
body.reader-focus .page-tap-zone[data-gn-curl-boundary="1"] {
  touch-action: none;
}

/* Text-chart curl ownership must exist at iPadOS hit-test time, before any
   pointerdown handler can repair classes or measure a boundary. These child
   zones are permanent DOM and own only the bottom corner of each existing
   page-turn button; normal taps and the rest of the score keep their current
   behavior. */
.gn-curl-static-corner-zone[data-gn-curl-static-owner="text"] {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  pointer-events: none;
}

body.reader-focus.reader-text-chart .gn-curl-static-corner-zone[data-gn-curl-static-owner="text"] {
  pointer-events: auto;
  touch-action: none;
}

body.tap-zone-narrow {
  --tap-zone-width: 22%;
}

body.tap-zone-wide {
  --tap-zone-width: 38%;
}

.page-tap-zone.left {
  left: 0;
}

.page-tap-zone.right {
  right: 0;
}

body.tap-zone-training .page-tap-zone {
  background: rgba(53, 92, 140, 0.12);
  box-shadow: inset 0 0 0 2px rgba(53, 92, 140, 0.28);
}

body.tap-zone-training .page-tap-zone.left {
  border-radius: 18px 0 0 18px;
}

body.tap-zone-training .page-tap-zone.right {
  border-radius: 0 18px 18px 0;
}

body.tap-zone-training .page-tap-zone::after {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(32, 35, 31, 0.82);
  color: #fffdfa;
  content: attr(data-tap-label);
  font-size: 12px;
  font-weight: 950;
  transform: translate(-50%, -50%);
}

body.annotation-mode .page-tap-zone {
  pointer-events: none;
}

.score-page {
  width: min(760px, 100%);
  min-height: 620px;
  background: var(--score-paper);
  border: 1px solid var(--score-paper-border);
  box-shadow: 0 18px 34px rgba(58, 40, 32, 0.08);
  padding: 20px;
  position: relative;
}

.score-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--score-paper-border);
  padding-bottom: 12px;
  margin-bottom: 10px;
  color: var(--ink);
}

.score-heading span {
  font-size: 13px;
  color: var(--muted);
}

.score-page-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.score-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 850;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1;
}

.score-badge.baked-badge.baked-yes {
  color: var(--terracotta-text);
  background: var(--accent-primary-soft);
  border-color: rgba(160, 74, 44, 0.35);
}

.score-badge.baked-badge.baked-maybe {
  color: #9a7e21;
  background: rgba(255, 237, 191, 0.74);
  border-color: rgba(209, 173, 70, 0.58);
}

.score-badge.baked-badge.baked-no {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.86);
}

.count-in-band {
  position: absolute;
  left: 50%;
  top: max(8px, env(safe-area-inset-top));
  width: min(980px, calc(100% - 20px));
  z-index: var(--gn-layer-chrome);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--toolbar-ink);
  pointer-events: none;
  transform: translateX(-50%);
}

.count-in-band[hidden] {
  display: none;
}

.count-in-bar-content {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  background: color-mix(in srgb, var(--toolbar-bg) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--toolbar-anchor) 62%, transparent);
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(58, 40, 32, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.count-in-band[data-collapsed="true"] .count-in-bar-content {
  display: none;
}

@keyframes count-in-slide-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(calc(-100% - 10px));
  }
}

.count-in-band[data-collapsing="true"] .count-in-bar-content {
  animation: count-in-slide-up 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

.count-in-band[data-collapsing="true"] .count-in-bar-content * {
  pointer-events: none !important;
}

.count-in-hardware-button,
.count-in-gear-panel button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  border: 1px solid var(--chrome-border);
  border-radius: 7px;
  background: var(--button-bg);
  color: var(--toolbar-ink);
  box-shadow: inset 1px 1px 2px rgba(253, 252, 249, 0.84), inset -1px -1px 2px rgba(58, 40, 32, 0.06), 0 2px 4px rgba(58, 40, 32, 0.1);
  font: 850 10px/1 var(--font-sans);
  letter-spacing: 0.04em;
  pointer-events: auto;
}

.count-in-hardware-button:active,
.count-in-gear-panel button:active,
.count-in-gear-panel button[aria-pressed="true"] {
  background: var(--active-bg);
  box-shadow: inset 1px 1px 3px rgba(58, 40, 32, 0.14);
  transform: translateY(1px);
}

.count-in-gear {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 40px;
  border-width: 2px;
  border-color: var(--toolbar-anchor);
}

.count-in-gear-symbol {
  font-size: 23px;
  line-height: 1;
}

.count-in-leader-badge {
  position: absolute;
  top: -7px;
  right: -5px;
  padding: 2px 4px;
  border: 1px solid var(--toolbar-anchor);
  border-radius: 4px;
  background: var(--rail-bg);
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
}

.count-in-play-stop:disabled {
  color: var(--disabled-text);
  background: var(--disabled-bg);
  border-color: var(--line-strong);
  box-shadow: none;
}

.count-in-play-stop {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-width: 2px;
  border-color: var(--toolbar-anchor);
  border-radius: 7px;
}

.count-in-play-glyph {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}

.count-in-stop-glyph {
  display: none;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: currentColor;
}

.count-in-play-stop[data-running="true"] {
  border-color: var(--count-in-led);
  background: color-mix(in srgb, var(--count-in-led) 22%, var(--button-bg));
  color: var(--sky-text);
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--count-in-led) 40%, transparent), 0 0 11px color-mix(in srgb, var(--count-in-led) 68%, transparent);
}

.count-in-play-stop[data-running="true"] .count-in-play-glyph {
  display: none;
}

.count-in-play-stop[data-running="true"] .count-in-stop-glyph {
  display: block;
}

.count-in-glass {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 4px 8px;
  border: 2px solid #6B5B46;
  border-radius: 5px;
  background: #3A2820;
  box-shadow: inset 0 4px 8px rgba(58, 40, 32, 0.72), 0 1px 0 rgba(253, 252, 249, 0.3);
}

.count-in-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.count-in-progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.45vw, 7px);
  white-space: nowrap;
}

.count-in-progress-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 20px;
  display: grid;
  place-items: center;
  height: 26px;
  border: 1px solid rgba(251, 243, 228, 0.1);
  border-radius: 4px;
  color: rgba(251, 243, 228, 0.27);
  background: rgba(251, 243, 228, 0.035);
  font: 950 clamp(11px, 1.35vw, 18px)/1 'Courier New', Courier, monospace;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: color 80ms ease, opacity 80ms ease, background 80ms ease, box-shadow 80ms ease, transform 80ms ease;
}

.count-in-progress-cell[data-bar-start="true"]::before {
  content: "";
  position: absolute;
  left: calc(clamp(2px, 0.45vw, 7px) * -0.75);
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: rgba(251, 243, 228, 0.28);
}

.count-in-progress-cell[data-active="true"] {
  color: var(--count-in-led);
  background: color-mix(in srgb, var(--count-in-led) 13%, transparent);
  border-color: color-mix(in srgb, var(--count-in-led) 66%, transparent);
  opacity: 1;
  text-shadow: 0 0 6px color-mix(in srgb, var(--count-in-led) 86%, transparent), 0 0 13px color-mix(in srgb, var(--count-in-led) 54%, transparent);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--count-in-led) 16%, transparent), 0 0 9px color-mix(in srgb, var(--count-in-led) 34%, transparent);
  transform: translateY(-1px);
}

.count-in-tab {
  align-self: flex-start;
  display: flex;
  align-items: stretch;
  margin-left: 8px;
  pointer-events: auto;
}

.count-in-reveal {
  min-height: 19px;
  margin: 0;
  padding: 2px 14px 3px;
  border: 1px solid var(--toolbar-anchor);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: var(--button-bg);
  color: var(--accent);
  box-shadow: 0 2px 4px rgba(58, 40, 32, 0.1);
  font: 900 9px/1 var(--font-sans);
  letter-spacing: 0.08em;
  pointer-events: auto;
}

.count-in-conductor-icon {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  color: var(--accent, #C49A45);
  filter: none;
}

.pill-label-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-label-input {
  min-width: 44px;
  max-width: 104px;
  height: 26px;
  box-sizing: border-box;
  padding: 1px 4px;
  border: 0;
  border-bottom: 2px solid #9A7F43;
  border-radius: 3px 3px 0 0;
  outline: 0;
  background: rgba(255, 253, 248, 0.96);
  color: #4A3B32;
  font: inherit;
  text-align: center;
}

.pill-label-input:focus {
  box-shadow: 0 0 0 2px rgba(154, 127, 67, 0.25);
}

.chart-pill.pill-label-editing,
.cue-dock button.pill-label-editing {
  padding-inline: 6px;
}

.cue-dock button,
.chart-pill {
  -webkit-touch-callout: none;
}

.count-in-gear-panel {
  position: absolute;
  top: 55px;
  left: 8px;
  width: min(390px, calc(100vw - 36px));
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--toolbar-anchor);
  border-radius: 9px;
  background: var(--toolbar-bg);
  color: var(--toolbar-ink);
  box-shadow: 0 12px 30px rgba(58, 40, 32, 0.22);
  pointer-events: auto;
}

.count-in-gear-panel[hidden] {
  display: none;
}

.count-in-gear-section,
.count-in-preview-label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 850;
}

.count-in-option-row {
  display: flex;
  gap: 6px;
}

.count-in-option-row button,
.count-in-set-bpm {
  flex: 1 1 auto;
  padding: 8px 9px;
}

.count-in-other-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 10px;
}

.count-in-other-meter[hidden] {
  display: none;
}

.count-in-other-meter input {
  width: 58px;
  min-height: 32px;
  border: 1px solid var(--chrome-border);
  border-radius: 5px;
  background: var(--paper-bg);
  color: var(--ink);
  text-align: center;
  font-weight: 850;
}

.count-in-preview {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px inset var(--chrome-border);
  border-radius: 5px;
  background: var(--rail-bg);
  color: var(--ink);
  font: 700 12px/1.2 'Courier New', Courier, monospace;
}

@media (max-width: 760px) {
  .count-in-bar-content { gap: 4px; padding-inline: 5px; }
  .count-in-gear { flex-basis: 42px; width: 42px; }
  .count-in-progress-cell { min-width: 16px; }
}

.chart-pills {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: var(--gn-layer-chrome);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 999px;
  background: var(--well-bg);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.chart-pills-label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.chart-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chart-pill,
.display-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.chart-pill {
  gap: 7px;
}

.chart-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.chart-pill.active .status-dot {
  background: var(--paper-bg);
}

.chart-pill .status-dot {
  width: 7px;
  height: 7px;
}

.display-link {
  width: 100%;
  margin-top: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.score-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.score-half-page-window {
  position: relative;
  width: 100%;
  aspect-ratio: 8.5 / 5.5;
  overflow: hidden;
  background: var(--paper-bg);
}

.score-half-page-image {
  transform: translateY(0);
  transform-origin: top center;
}

.score-half-page-window[data-half-page-position="bottom"] .score-half-page-image {
  transform: translateY(-50%);
}

.score-half-page-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(32, 35, 31, 0.72);
  color: #fffdfa;
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}

.score-two-up-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  width: 100%;
}

.score-spread-page {
  position: relative;
  margin: 0;
  background: var(--paper-bg);
}

.score-spread-page figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.86);
  border: 1px solid rgba(217, 208, 191, 0.78);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.chart-viewer {
  min-height: 520px;
  background: var(--paper-bg);
}

.chart-frame {
  display: block;
  width: 100%;
  height: min(74vh, 780px);
  border: 0;
  background: var(--paper-bg);
}

.pdf-canvas-frame {
  position: relative; /* anchor for the zoom detail-canvas overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: clamp(10px, 2vw, 22px);
  background: var(--canvas-bg);
}

/* C4 piece 2: crisp re-render of the pinch-zoomed region, absolutely
   positioned over the base canvas. z-index 1 keeps it under the annotation
   ink layer (2) and score-link layer (4); pointer-events none keeps pen/tap
   behavior identical to the base canvas. */
.pdf-detail-canvas {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: var(--paper-bg);
}

.pdf-page-canvas {
  display: block;
  max-width: 100%;
  height: auto !important;
  background: var(--paper-bg);
  box-shadow: 0 14px 36px rgba(45, 35, 20, 0.18);
}

.pdf-canvas-frame figcaption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.verovio-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: clamp(10px, 2vw, 22px);
  width: 100%;
  max-width: 100%;
  background: var(--paper-bg, #FDFCF9);
  touch-action: pinch-zoom;
}

.verovio-page-inner {
  width: 100%;
  touch-action: pinch-zoom;
}

.verovio-page svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-bg, #FDFCF9);
  touch-action: pinch-zoom;
}

.verovio-page figcaption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.reader-focus .verovio-page {
  padding: 0;
}

.pdf-render-fallback {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 420px;
  padding: 28px;
  color: var(--ink);
  background: var(--paper-bg);
  text-align: center;
}

.chart-render-slow-warning {
  position: sticky;
  top: max(12px, env(safe-area-inset-top));
  z-index: 8;
  width: min(680px, calc(100% - 32px));
  margin: 16px auto;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--warning, #9a6700) 55%, transparent);
  border-radius: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper-bg) 88%, #f7c948 12%);
  box-shadow: 0 8px 24px rgba(45, 35, 20, 0.16);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.pdf-render-fallback-error {
  max-width: 680px;
  color: var(--danger, #9b2c2c);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pdf-render-fallback-build {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.lyrics-view {
  min-height: 520px;
  margin: 0;
  padding: clamp(18px, 3vw, 38px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: var(--paper-bg);
  font: 700 clamp(18px, 2.4vw, 30px) / 1.36 Georgia, "Times New Roman", serif;
  touch-action: pan-y pinch-zoom;
  white-space: pre-wrap;
}

body.non-worship-aid-chart .annotation-layer .ink,
body.non-worship-aid-chart .annotation-layer .highlight,
body.non-worship-aid-chart .annotation-layer .score-marker {
  display: none;
}

.staff-system {
  position: relative;
  height: 150px;
  margin: 24px 0 36px;
}

.staff-lines {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 54px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 13px);
}

.note-row {
  position: absolute;
  left: 42px;
  right: 36px;
  top: 17px;
  display: flex;
  justify-content: space-between;
}

.note-row span {
  width: 17px;
  height: 12px;
  background: var(--ink);
  border-radius: 50%;
  transform: rotate(-18deg);
  position: relative;
}

.note-row span::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 42px;
  right: -1px;
  bottom: 5px;
  background: var(--ink);
}

.row-two {
  top: 31px;
}

.row-two span:nth-child(odd) {
  transform: translateY(10px) rotate(-18deg);
}

.lyric-line {
  position: absolute;
  left: 42px;
  right: 42px;
  top: 86px;
  color: #373a32;
  font-size: 18px;
  line-height: 1.35;
  display: flex;
  justify-content: space-between;
}

.annotation-layer {
  position: absolute;
  inset: 88px 20px 20px;
  pointer-events: none;
}

.flashlight-glow-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.flashlight-glow {
  position: absolute;
  width: clamp(88px, 13vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88);
  background:
    radial-gradient(circle,
      rgba(255, 253, 232, 0.98) 0%,
      rgba(255, 243, 184, 0.82) 13%,
      rgba(213, 168, 63, 0.48) 31%,
      rgba(185, 121, 46, 0.18) 52%,
      rgba(185, 121, 46, 0) 73%);
  filter: blur(1.5px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  will-change: left, top, opacity, transform;
}

.flashlight-glow::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 232, 0.74), rgba(213, 168, 63, 0.12) 54%, transparent 76%);
  box-shadow: 0 0 26px 10px rgba(213, 168, 63, 0.22);
}

.flashlight-glow.active {
  opacity: var(--flashlight-glow-intensity);
  transform: translate(-50%, -50%) scale(1);
  animation: flashlight-breathe 1.35s ease-in-out infinite alternate;
}

@keyframes flashlight-breathe {
  from { filter: blur(1.5px) saturate(0.96); }
  to { filter: blur(2px) saturate(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .flashlight-glow,
  .flashlight-glow.active {
    animation: none;
    transition: none;
    transform: translate(-50%, -50%);
  }
}

body.flashlight-armed #scoreViewer,
body.flashlight-armed .page-tap-zone {
  touch-action: none;
  cursor: crosshair;
}

.flashlight-page-turn-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--flashlight-turn-strip-height);
  padding: 5px 8px;
  border-top: 1px solid color-mix(in srgb, var(--flashlight-gilt) 32%, transparent);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--score-paper) 72%, transparent),
    color-mix(in srgb, var(--score-paper) 91%, transparent)
  );
  pointer-events: none;
}

.flashlight-page-turn-strip[hidden] {
  display: none !important;
}

.flashlight-page-turn-arrow {
  min-width: 42px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--flashlight-gilt) 58%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--button-bg) 92%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--flashlight-core) 72%, transparent),
    0 2px 8px rgba(58, 40, 32, 0.08);
  color: var(--flashlight-ink);
  font: 800 17px/1 var(--font-sans);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.flashlight-armed .flashlight-page-turn-arrow {
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 243, 184, 0.5) 0%,
      rgba(213, 168, 63, 0.16) 46%,
      transparent 74%
    ),
    color-mix(in srgb, var(--button-bg) 92%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--flashlight-core) 72%, transparent),
    0 0 15px 5px rgba(213, 168, 63, 0.24),
    0 0 28px 10px rgba(185, 121, 46, 0.11),
    0 2px 8px rgba(58, 40, 32, 0.08);
}

.flashlight-page-turn-arrow:active {
  border-color: var(--flashlight-warm);
  background: var(--accent-soft);
  transform: translateY(1px);
}

.flashlight-page-turn-arrow:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* L41/L45: flashlight kills edge-tap, so page-turn arrows must read as
   page-turn, not as extra tool keycaps. Park them mid-height in the side
   gutters, above the circle stacks and away from the cue-dock. */
body.reader-focus.flashlight-armed .flashlight-page-turn-strip {
  position: fixed;
  left: max(12px, calc((100vw - var(--gn-reader-stage-width, 100vw)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
  right: max(72px, calc((100vw - var(--gn-reader-stage-width, 100vw)) / 2 + 72px), calc(env(safe-area-inset-right) + 68px));
  top: 0;
  bottom: 0;
  z-index: var(--gn-layer-chrome-raised);
  height: auto;
  align-items: center;
  padding: 0;
  border-top: 0;
  background: transparent;
  pointer-events: none;
}

body.reader-focus.flashlight-armed .flashlight-page-turn-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--anchor-offwhite, var(--button-bg));
  box-shadow:
    inset 0 0 0 1px rgba(255, 243, 184, 0.72),
    0 0 0 4px rgba(213, 168, 63, 0.18),
    0 0 18px rgba(213, 168, 63, 0.42);
}

body.reader-focus.flashlight-armed .flashlight-turn-glyph {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  pointer-events: none;
}

.annotation-base-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.annotation-cutout {
  position: absolute;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.reader-focus .annotation-layer {
  inset: clamp(12px, 2vw, 20px);
}

body.annotation-mode .annotation-layer {
  pointer-events: auto;
}

.ink-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Keep browser/PWA pinch zoom available while one-finger/Pencil pointers
     continue through the annotation engine. Multi-touch is gated in app.js. */
  touch-action: pinch-zoom;
}

body.annotation-mode .ink-canvas {
  pointer-events: auto;
}

body.annotation-mode .score-reader {
  cursor: crosshair;
}

.annotation-text-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.annotation-lasso-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.annotation-lasso-box {
  position: absolute;
  border: 2px dashed rgba(53, 92, 140, 0.82);
  border-radius: 10px;
  background: rgba(197, 227, 255, 0.18);
  box-shadow: 0 0 0 4px rgba(197, 227, 255, 0.16);
}

.annotation-lasso-stroke-box,
.annotation-lasso-object-box {
  position: absolute;
  border: 2px solid rgba(255, 181, 55, 0.88);
  border-radius: 12px;
  background: rgba(255, 181, 55, 0.08);
  box-shadow: 0 0 0 4px rgba(255, 181, 55, 0.11);
}

.annotation-lasso-object-box {
  border-radius: 7px;
  background: rgba(197, 227, 255, 0.08);
}

.annotation-selection-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #9A7F43;
  border-radius: 50%;
  background: #FFFDF8;
  box-shadow: 0 1px 3px rgba(74, 59, 50, 0.24);
}

.annotation-selection-handle.nw { top: -5px; left: -5px; }
.annotation-selection-handle.ne { top: -5px; right: -5px; }
.annotation-selection-handle.se { right: -5px; bottom: -5px; }
.annotation-selection-handle.sw { bottom: -5px; left: -5px; }

.annotation-selection-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #A04A2C;
  border-radius: 50%;
  background: #FFFDF8;
  color: #A04A2C;
  box-shadow: 0 3px 8px rgba(74, 59, 50, 0.22);
  font: 900 18px/1 var(--font-sans);
  pointer-events: auto;
  transform: translate(55%, -55%);
  cursor: pointer;
}

.annotation-selection-delete:focus-visible {
  outline: 2px solid #C49A45;
  outline-offset: 2px;
}

.annotation-text-note,
.annotation-text-editor {
  position: absolute;
  transform: translate(-6px, -50%);
  border-radius: 8px;
  font-weight: 850;
  line-height: 1.18;
  box-shadow: 0 8px 18px rgba(32, 35, 31, 0.12);
}

.annotation-text-note {
  max-width: min(230px, 42%);
  padding: 5px 8px;
  border: 1px solid rgba(255, 253, 250, 0.72);
  background: rgba(255, 253, 250, 0.82);
  color: var(--active-ink);
  font-size: 13px;
  white-space: pre-wrap;
  pointer-events: auto;
}

body.annotation-global-mode .annotation-text-note,
body.annotation-global-mode .annotation-stamp,
body.annotation-global-mode .annotation-shape {
  box-shadow: 0 0 0 3px rgba(40, 93, 69, 0.12), 0 8px 18px rgba(32, 35, 31, 0.12);
}

.annotation-stamp {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--active-ink);
  font: 700 17px/1 Georgia, "Times New Roman", serif;
  text-align: center;
  filter: drop-shadow(0 3px 3px rgba(15, 36, 65, 0.18));
  pointer-events: auto;
}

.annotation-stamp.text-small {
  font-size: 11px;
  font-style: italic;
}

.annotation-stamp.legacy {
  width: auto;
  min-width: 54px;
  height: auto;
  padding: 6px 10px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.88);
  font: 950 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  filter: none;
}

.annotation-selected {
  outline: 3px solid rgba(255, 181, 55, 0.9);
  outline-offset: 3px;
}

body.lasso-mode .annotation-text-note,
body.lasso-mode .annotation-stamp,
body.lasso-mode .annotation-shape {
  pointer-events: none;
}

/* Safari must not have to infer a pass-through target beneath rendered text
   and stamps. In selector mode this layer is the explicit gesture surface and
   app.js routes its Pencil/touch stream through the same lasso engine. */
body.lasso-mode .annotation-text-layer {
  pointer-events: auto;
  touch-action: pinch-zoom;
}

.annotation-shape {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 42px;
  border: 3px solid currentColor;
  color: var(--active-ink);
  background: rgba(255, 253, 250, 0.08);
  box-shadow: 0 8px 18px rgba(32, 35, 31, 0.1);
  pointer-events: auto;
}

.annotation-shape.circle {
  width: 64px;
  height: 52px;
  border-radius: 999px;
}

.annotation-shape.arrow,
.annotation-shape.bracket {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
}

.annotation-shape.bracket {
  font-size: 52px;
}

.annotation-text-editor {
  z-index: 8;
  width: min(240px, 46%);
  min-height: 42px;
  padding: 7px 9px;
  border: 2px solid currentColor;
  background: rgba(255, 253, 250, 0.96);
  color: var(--active-ink);
  font: 850 14px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  resize: none;
  pointer-events: auto;
}

/* Closed-palette performance ownership: rendered annotation objects and the
   lasso selection affordances deliberately use pointer-events:auto while the
   annotation engine is open. A saved lasso selection can remain mounted after
   Save, though, and its real delete <button> used to steal a corner pointerdown
   before mode-2 curl could own it. Closed annotations are display-only; make
   their whole object subtrees hit-test transparent. Annotation mode keeps the
   existing text/stamp/shape/lasso ownership unchanged. */
body:not(.annotation-mode) .annotation-text-layer *,
body:not(.annotation-mode) .annotation-lasso-layer * {
  pointer-events: none;
}

.score-link-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

body.link-editing .score-link-layer {
  cursor: crosshair;
  pointer-events: auto;
}

.score-link-source {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  border: 1px solid var(--roadmap-border, rgba(40, 93, 69, 0.22));
  background: var(--roadmap-bg, rgba(149, 231, 119, 0.88));
  color: var(--roadmap-ink, var(--terracotta-text));
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(32, 35, 31, 0.14);
  opacity: 0.72;
  pointer-events: auto;
  transform: translate(-8%, -50%);
  cursor: pointer;
}

body.link-mode .score-link-source {
  opacity: 1;
  box-shadow: 0 0 0 5px var(--roadmap-ring, rgba(149, 231, 119, 0.24)), 0 12px 24px rgba(32, 35, 31, 0.18);
}

.score-link-source.pending {
  background: rgba(255, 181, 55, 0.88);
  border-color: rgba(178, 123, 42, 0.52);
  color: var(--ink);
  pointer-events: none;
}

.score-link-source.draft {
  background: rgba(197, 227, 255, 0.9);
  border-color: rgba(53, 92, 140, 0.32);
  color: var(--sky-text);
}

.score-link-source span {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.74);
  color: var(--roadmap-ink, var(--terracotta-text));
  font-size: 11px;
}

.score-link-destination {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  border: 1px dashed var(--roadmap-border, rgba(178, 123, 42, 0.52));
  background: color-mix(in srgb, var(--roadmap-bg, rgba(255, 181, 55, 0.86)) 62%, white);
  color: var(--roadmap-ink, var(--ink));
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 4px var(--roadmap-ring, rgba(255, 181, 55, 0.2)), 0 8px 18px rgba(32, 35, 31, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.score-link-destination span {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.72);
  color: var(--roadmap-ink, var(--ink));
  font-size: 10px;
}

body.link-mode .score-link-destination {
  opacity: 1;
  visibility: visible;
}

.score-link-target-flash {
  position: absolute;
  z-index: 6;
  min-width: 92px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid var(--roadmap-border, rgba(178, 123, 42, 0.92));
  background: color-mix(in srgb, var(--roadmap-bg, rgba(255, 181, 55, 0.34)) 58%, transparent);
  color: var(--roadmap-ink, var(--ink));
  font-size: 12px;
  font-weight: 950;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 var(--roadmap-ring, rgba(255, 181, 55, 0.72)), 0 14px 28px rgba(32, 35, 31, 0.18);
  animation: score-link-flash 720ms ease-out 2;
}

body.annotation-mode .score-link-source {
  pointer-events: none;
}

body.reader-focus:not(.link-mode):not(.annotation-mode) .score-link-source,
body.reader-focus:not(.link-mode):not(.annotation-mode) .score-link-destination {
  display: none !important;
}

.jump-rail {
  display: none;
}

body.reader-focus .jump-rail {
  position: fixed;
  top: max(92px, calc(env(safe-area-inset-top) + 84px));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(210px, calc(env(safe-area-inset-bottom) + 198px));
  z-index: var(--gn-layer-chrome);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  width: 56px;
  pointer-events: none;
}

body.reader-focus.annotation-mode .jump-rail {
  display: none;
}

.jump-rail-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  pointer-events: none;
}

body.reader-focus .jump-rail button {
  pointer-events: auto;
  width: 56px;
  min-height: 44px;
  margin: 0;
  padding: 8px 4px;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  background: var(--cue-bg);
  color: var(--canvas-ink);
  box-shadow: var(--shadow);
  font: 800 12px/1.05 var(--font-sans);
}

body.reader-focus .jump-rail button[aria-disabled="true"] {
  opacity: 0.45;
}

body.reader-focus .jump-rail button.jump-rail-pulse {
  border-color: var(--toolbar-anchor);
  box-shadow: 0 0 0 4px rgba(196, 154, 69, 0.22), var(--shadow);
}

body.reader-focus .jump-rail-catch-up {
  margin-top: auto;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.link-mode-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.link-mode-close {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--chrome-border);
  border-radius: 50%;
  background: var(--button-bg);
  color: var(--toolbar-ink);
  font: 700 16px/1 var(--font-sans);
}

.link-mode-header .link-mode-tabs {
  grid-column: 1 / -1;
}

.link-mode-panel {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: var(--gn-layer-floating);
  display: none;
  min-width: 220px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(53, 92, 140, 0.22);
  background: rgba(255, 253, 250, 0.92);
  color: var(--sky-text);
  box-shadow: 0 12px 24px rgba(32, 35, 31, 0.14);
}

.link-mode-summary {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.link-mode-summary strong {
  font-size: 12px;
  font-weight: 900;
}

.link-mode-summary > #linkModeCount {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-primary);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 950;
}

.link-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(53, 92, 140, 0.08);
}

.link-mode-tabs button {
  min-height: 30px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.link-mode-tabs button.active,
.link-mode-tabs button[aria-pressed="true"] {
  background: var(--accent-primary);
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(53, 92, 140, 0.18);
}

.link-mode-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.link-mode-actions button {
  min-height: 30px;
  border-radius: 8px;
  background: rgba(53, 92, 140, 0.1);
  color: var(--sky-text);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.link-mode-actions button:disabled {
  opacity: 0.42;
  cursor: default;
}

body.link-editing #addScoreLink {
  background: var(--accent-primary);
  color: #FFFFFF;
}

body.link-read-mode .link-mode-actions,
body.link-read-mode #linkTargetPresets,
body.link-read-mode .link-mode-json {
  display: none;
}

body.link-read-mode .link-mode-panel {
  min-width: 208px;
}

body.link-read-mode .link-mode-status {
  margin-bottom: 4px;
}

.page-order-panel {
  position: absolute;
  left: 50%;
  top: 92px;
  z-index: var(--gn-layer-floating);
  display: grid;
  width: min(430px, calc(100vw - 36px));
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(217, 208, 191, 0.94);
  background: rgba(255, 253, 250, 0.94);
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(32, 35, 31, 0.18);
  transform: translateX(-50%);
}

.page-order-panel[hidden] {
  display: none;
}

.page-order-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-order-summary strong {
  font-size: 13px;
  font-weight: 950;
}

.page-order-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.page-order-summary #closePageOrderPanel {
  margin-left: auto;
  border: 1px solid rgba(36, 39, 32, 0.3);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.page-order-actions,
.page-order-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.page-order-actions button,
.page-order-list button {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(171, 121, 41, 0.11);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.page-order-actions button:disabled {
  opacity: 0.42;
  cursor: default;
}

.page-order-list button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(241, 238, 230, 0.92);
  color: var(--ink);
  border: 1px solid var(--line);
}

.page-order-list button.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #FFFFFF;
}

.page-order-list button strong,
.page-order-list button span {
  line-height: 1;
}

.turner-popover {
  position: absolute;
  right: 18px;
  top: 92px;
  z-index: var(--gn-layer-floating);
  display: grid;
  width: min(360px, calc(100vw - 36px));
  max-height: min(660px, calc(100vh - 116px));
  gap: 8px;
  padding: 10px;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(217, 208, 191, 0.94);
  background: rgba(255, 253, 250, 0.96);
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(32, 35, 31, 0.18);
  backdrop-filter: blur(14px);
}

.turner-popover[hidden] {
  display: none;
}

.turner-popover-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.turner-popover-summary strong {
  display: block;
  font-size: var(--gn-app-headline-size);
  font-weight: 950;
  line-height: var(--gn-app-headline-leading);
}

.turner-popover-summary span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.turner-popover-summary button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(241, 238, 230, 0.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.turner-grid.compact {
  padding: 7px;
}

.turner-popover select,
.turner-popover .select-label,
.turner-popover .nav-visibility-toggle button,
.turner-popover .tap-zone-toggle button,
.turner-actions.compact .ghost-action {
  font-size: var(--gn-app-headline-size);
  line-height: var(--gn-app-headline-leading);
}

.turner-popover .hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.25;
}

.turner-popover .turner-grid span,
.turner-popover .turner-grid strong,
.turner-popover .turner-midi-summary strong,
.turner-popover .turner-midi-summary span {
  font-size: var(--gn-app-headline-size);
  line-height: var(--gn-app-headline-leading);
}

.turner-grid.midi.compact {
  gap: 6px 8px;
  padding: 7px;
}

.turner-actions.compact {
  margin-top: 0;
}

.turner-actions.compact .ghost-action {
  min-height: 34px;
}

.turner-popover .turner-midi.compact {
  margin-top: 8px;
  padding-top: 8px;
}

.reader-dashboard-panel {
  position: absolute;
  right: 18px;
  top: 92px;
  z-index: var(--gn-layer-floating);
  display: grid;
  width: min(380px, calc(100vw - 36px));
  max-height: min(640px, calc(100vh - 116px));
  gap: 10px;
  padding: 12px;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(217, 208, 191, 0.94);
  background: rgba(255, 253, 250, 0.96);
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(32, 35, 31, 0.18);
  backdrop-filter: blur(14px);
}

.reader-dashboard-panel[hidden] {
  display: none;
}

.score-info-panel {
  position: absolute;
  top: 92px;
  left: 50%;
  z-index: var(--gn-layer-floating);
  display: grid;
  width: min(420px, calc(100vw - 36px));
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(217, 208, 191, 0.94);
  background: rgba(255, 253, 250, 0.97);
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(32, 35, 31, 0.18);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

.score-info-panel[hidden] {
  display: none;
}

.services-panel {
  position: absolute;
  top: 92px;
  left: 50%;
  z-index: var(--gn-layer-floating);
  display: grid;
  width: min(470px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - 116px));
  gap: 10px;
  padding: 12px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(74, 59, 50, 0.28);
  background: #FBF3E4;
  color: #4A3B32;
  box-shadow: 0 12px 28px rgba(74, 59, 50, 0.14);
  transform: translateX(-50%);
  backdrop-filter: none;
}

.library-search-panel {
  position: absolute;
  top: 92px;
  right: 18px;
  z-index: var(--gn-layer-floating);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  width: min(460px, calc(100vw - 36px));
  max-height: min(660px, calc(100vh - 116px));
  gap: 8px;
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border-radius: 18px;
  border: 1px solid var(--chrome-border);
  background: color-mix(in srgb, var(--toolbar-bg) 94%, white);
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(58, 40, 32, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.reader-backup-panel {
  position: absolute;
  top: 92px;
  right: 18px;
  z-index: var(--gn-layer-floating);
  display: grid;
  width: min(430px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - 116px));
  gap: 6px;
  padding: 8px;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(217, 208, 191, 0.94);
  background: rgba(255, 253, 250, 0.97);
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(32, 35, 31, 0.18);
  backdrop-filter: blur(14px);
}

.reader-settings-panel {
  position: absolute;
  top: 92px;
  right: 18px;
  z-index: var(--gn-layer-floating);
  display: grid;
  width: min(440px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - 116px));
  gap: 6px;
  padding: 8px;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(217, 208, 191, 0.94);
  background: rgba(255, 253, 250, 0.97);
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(32, 35, 31, 0.18);
  backdrop-filter: blur(14px);
}

/* Reader-child panels own vertical gestures while open. The companion JS
   contract releases the curl root pin and stops panel pointer starts before
   they can arm the score reader's annotation hold. Library keeps its existing
   inner results scroller and joins the same panel/open ownership contract. */
.reader-panel-scroll-owner {
  max-height: min(660px, calc(100vh - 116px));
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.reader-panel-scroll-owner * {
  touch-action: pan-y;
}

.link-mode-panel,
.page-order-panel,
.turner-popover,
.reader-dashboard-panel,
.score-info-panel,
.library-search-panel,
.reader-backup-panel,
.reader-settings-panel,
.reader-cue-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.services-panel {
  border: 1px solid rgba(74, 59, 50, 0.28);
  background: #FBF3E4;
  color: #4A3B32;
  box-shadow: 0 12px 28px rgba(74, 59, 50, 0.14);
}

.services-panel[hidden] {
  display: none;
}

.library-search-panel[hidden] {
  display: none;
}

.library-surface-toggle {
  display: grid;
  grid-template-columns: minmax(102px, .82fr) 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--accent-soft);
}

.library-surface-toggle button,
.library-search-sort button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.library-surface-toggle .library-all-binders {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--toolbar-anchor) 40%, transparent);
  background: color-mix(in srgb, var(--panel) 44%, transparent);
  color: var(--accent);
}

.library-all-binders svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.library-all-binders:hover,
.library-all-binders:focus-visible {
  border-color: var(--toolbar-anchor);
  background: var(--hover-bg);
  outline: none;
}

.library-surface-toggle button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2px 7px rgba(58, 40, 32, 0.12);
}

.reader-backup-panel[hidden] {
  display: none;
}

.reader-settings-panel[hidden] {
  display: none;
}

.score-info-summary,
.services-summary,
.library-search-summary,
.reader-backup-summary,
.reader-settings-summary,
.reader-dashboard-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.score-info-summary strong,
.services-summary strong,
.library-search-summary strong,
.reader-backup-summary strong,
.reader-settings-summary strong,
.reader-dashboard-summary strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
}

.score-info-summary span,
.services-summary span,
.library-search-summary span,
.reader-backup-summary span,
.reader-settings-summary span,
.reader-dashboard-summary span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.library-search-summary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.library-search-summary-actions .library-search-count {
  margin: 0;
  color: var(--accent);
  font-size: 11px;
  white-space: nowrap;
}

#libraryImportButton,
#libraryPieceAudio {
  border: 1px solid #C49A45;
  border-radius: 999px;
  padding: 0 12px;
  background: #FBF3E4;
  color: #3A2820;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

#libraryImportButton {
  min-height: 44px;
}

#libraryPieceAudio {
  min-height: 30px;
}

#libraryAdmitFiles {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.score-info-summary button,
.services-summary button,
.library-search-summary button,
.reader-backup-summary button,
.reader-settings-summary button,
.reader-dashboard-summary button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(241, 238, 230, 0.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.score-info-body {
  display: grid;
  gap: 8px;
}

.services-body {
  display: grid;
  gap: 10px;
}

.reader-backup-body {
  display: grid;
  gap: 6px;
}

.reader-settings-body {
  display: grid;
  gap: 6px;
}

.library-search-summary strong,
.reader-backup-summary strong,
.reader-settings-summary strong {
  font-size: var(--gn-app-headline-size);
  line-height: var(--gn-app-headline-leading);
}

.library-search-box {
  display: grid;
  gap: 5px;
}

.library-search-sort {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: var(--well-bg);
}

.library-search-sort[hidden] {
  display: none;
}

.library-search-sort button {
  min-height: 30px;
  font-size: 11px;
}

.library-search-sort button[aria-pressed="true"] {
  background: var(--hover-bg);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--toolbar-anchor) 48%, transparent);
}

.library-search-box span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.library-search-box input {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--canvas-bg);
  color: var(--ink);
  padding: 0 12px;
  font-size: var(--gn-app-headline-size);
  font-weight: 750;
  line-height: var(--gn-app-headline-leading);
}

.library-search-box input:focus {
  border-color: #9A7F43;
  outline: none;
  box-shadow: 0 0 0 3px rgba(154, 127, 67, 0.28);
}

.library-search-box input:focus-visible {
  outline: 2px solid #9A7F43;
  outline-offset: 2px;
}

.library-search-results {
  display: grid;
  min-width: 0;
  min-height: 56px;
  gap: 5px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--toolbar-anchor) transparent;
}

.library-search-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: var(--gn-app-row-height);
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: color-mix(in srgb, var(--canvas-bg) 76%, transparent);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  transform: translateX(var(--library-swipe-x, 0));
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.library-search-result:hover,
.library-search-result:focus-visible {
  border-color: color-mix(in srgb, var(--toolbar-anchor) 56%, transparent);
  background: var(--hover-bg);
  outline: none;
}

.library-search-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--well-bg);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.library-search-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.library-search-result.active {
  border-color: var(--toolbar-anchor);
  background: var(--hover-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--toolbar-anchor) 24%, transparent);
}

.library-search-result.active .library-search-number {
  border-color: var(--toolbar-anchor);
  background: var(--toolbar-anchor);
  color: var(--accent-ink);
}

.library-search-role,
.library-search-title,
.library-search-composer,
.library-search-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-search-role {
  color: var(--accent);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.library-search-title {
  display: block;
  font-family: var(--font-serif-display);
  font-size: var(--gn-app-headline-size);
  font-weight: 750;
  line-height: var(--gn-app-headline-leading);
}

.library-search-composer,
.library-search-note {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
}

.library-search-note {
  margin-top: 2px;
  color: var(--accent);
  font-style: italic;
}

.library-search-row-action {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--toolbar-anchor) 70%, transparent);
  border-radius: 9px;
  background: var(--panel);
  color: var(--accent);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}

.library-search-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.library-search-drag {
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--ink-muted) 64%, transparent);
  touch-action: none;
  cursor: grab;
}

.library-search-drag svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.library-search-result.dragging,
.library-search-result.drag-target {
  border-color: var(--toolbar-anchor);
  background: var(--hover-bg);
}

.library-search-result.personal-hidden {
  opacity: .56;
  border-style: dashed;
}

.library-search-restore {
  width: auto;
  padding: 0 9px;
  font-size: 10px;
}

.library-search-hide:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.library-search-hide:focus {
  width: auto;
  padding: 0 9px;
  font-size: 10px;
}

.library-hidden-toggle {
  min-height: 34px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.library-hidden-toggle:hover,
.library-hidden-toggle:focus-visible {
  background: color-mix(in srgb, var(--hover-bg) 58%, transparent);
  outline: none;
}

.library-hidden-toggle[hidden] {
  display: none;
}

.library-swipe-hint {
  margin: 0;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.library-search-empty {
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(217, 208, 191, 0.9);
  background: rgba(250, 247, 240, 0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.local-intake-panel {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-modal);
  display: grid;
  place-items: center;
  padding: 24px;
}

.local-intake-panel[hidden] {
  display: none;
}

.local-intake-backdrop {
  position: absolute;
  inset: 0;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: rgba(74, 59, 50, 0.34);
}

.local-intake-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 12px;
  width: min(720px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--chrome-border);
  border-radius: 24px;
  background: #fffdfa;
  color: var(--ink);
  box-shadow: 0 26px 70px rgba(74, 59, 50, 0.28);
}

.local-intake-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.local-intake-heading h2 {
  margin: 2px 0 0;
  font-family: var(--font-serif-display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
}

.local-intake-heading button,
.local-intake-drop-zone button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  padding: 0 18px;
  background: var(--accent);
  color: #fffdfa;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.local-intake-heading button {
  background: var(--well-bg);
  color: var(--accent);
}

.local-intake-intro {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.local-intake-drop-zone {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 178px;
  padding: 22px;
  border: 2px dashed rgba(154, 94, 67, 0.42);
  border-radius: 20px;
  background: #fbf3e4;
  text-align: center;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.local-intake-drop-zone.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.01);
}

.local-intake-drop-zone.is-busy {
  opacity: 0.72;
}

.local-intake-drop-zone strong {
  font-family: var(--font-serif-display);
  font-size: 20px;
}

.local-intake-drop-zone span,
.local-intake-drop-zone small {
  color: var(--ink-muted);
}

.local-intake-status {
  margin: 0;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 850;
}

.local-intake-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.local-intake-status-bar > button {
  min-width: 88px;
  min-height: 44px;
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  background: var(--well-bg);
  color: var(--accent-strong);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.local-intake-list {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 74px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.local-intake-empty,
.local-intake-row {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.local-intake-empty {
  padding: 18px;
  color: var(--ink-muted);
  text-align: center;
}

.local-intake-row {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
}

.local-intake-row.is-error {
  border-color: rgba(169, 76, 57, 0.42);
  background: #fff6f0;
}

.local-intake-row.is-duplicate {
  border-color: rgba(154, 94, 67, 0.38);
  background: #fff9ef;
}

.local-intake-row-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.local-intake-row-title {
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-intake-row-kind {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.local-intake-row-meta,
.local-intake-row-next {
  color: var(--ink-muted);
  font-size: 12px;
}

.local-intake-row-status {
  font-size: 13px;
  font-weight: 800;
}

.local-intake-row-duplicate {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.local-intake-row-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 5px;
}

.local-intake-row-actions button,
.local-intake-destination-field select {
  min-height: 44px;
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.local-intake-row-actions button {
  background: var(--accent);
  color: #fffdfa;
  cursor: pointer;
}

.local-intake-row-actions button[data-local-intake-review],
.local-intake-row-actions button[data-local-intake-remove],
.local-intake-row-actions button[data-local-intake-transient-remove] {
  background: var(--well-bg);
  color: var(--accent);
}

.local-intake-row-actions button:disabled,
.local-intake-destination-field select:disabled {
  cursor: default;
  opacity: 0.58;
}

.local-intake-review-actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
}

.local-intake-destination-field {
  display: grid;
  gap: 4px;
}

.local-intake-destination-label {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 900;
}

.local-intake-destination-field select {
  width: 100%;
  background: #fffdfa;
  color: var(--ink);
}

@media (max-width: 640px) {
  .local-intake-panel {
    padding: 12px;
  }

  .local-intake-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 16px;
  }

  .local-intake-drop-zone {
    min-height: 150px;
  }

  .local-intake-review-actions {
    grid-template-columns: 1fr;
  }
}

/* Touch library geometry stays confined to narrow or short reader viewports. */
@media (max-width: 1023px), (max-height: 599px) {
  .library-search-panel {
    grid-template-rows: auto auto auto auto minmax(56px, 1fr) auto auto;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .library-surface-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .library-surface-toggle button,
  .library-search-sort button,
  .library-search-summary button,
  #libraryPieceAudio {
    min-width: 44px;
    min-height: 44px;
  }

  .library-search-summary,
  .library-search-summary-actions {
    flex-wrap: wrap;
  }

  .library-search-panel > * {
    min-width: 0;
  }

  .library-search-box input {
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
  }

  .library-search-row-action {
    width: 44px;
    height: 44px;
  }
}

.library-add-popover {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-modal);
  display: grid;
  place-items: center;
  padding: 18px;
}

.library-add-popover[hidden] {
  display: none;
}

.library-add-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(58, 40, 32, .30);
}

.library-add-card {
  position: relative;
  width: min(330px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--chrome-border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 54px rgba(58, 40, 32, .26);
}

.library-add-card header {
  flex-shrink: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.library-add-card header strong {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-serif-display);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#libraryAddBack {
  grid-column: 1;
}

#libraryAddClose {
  grid-column: 3;
}

.library-add-card header button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--well-bg);
  color: var(--accent);
  padding: 0 10px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.library-add-body {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  padding: 6px 0;
}

.library-add-option,
.library-add-binder-option {
  min-height: 52px;
  display: grid;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.library-add-option:last-child,
.library-add-binder-option:last-child {
  border-bottom: 0;
}

.library-add-option:hover,
.library-add-binder-option:hover {
  background: var(--hover-bg);
}

.library-add-option strong,
.library-add-binder-option strong {
  font-size: 13px;
}

.library-add-option span,
.library-add-binder-option span {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 750;
}

.library-add-binder-option:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.library-create-form {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.library-create-form label {
  display: grid;
  gap: 5px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.library-create-form input {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--canvas-bg);
  color: var(--ink);
  padding: 0 11px;
  font-size: 15px;
  text-transform: none;
}

.library-create-form button {
  min-height: 40px;
  border: 1px solid var(--toolbar-anchor);
  border-radius: 10px;
  background: var(--toolbar-anchor);
  color: var(--accent-ink);
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 820px), (max-height: 500px) {
  .library-add-card header button,
  .library-create-form input,
  .library-create-form button {
    min-height: 44px;
  }

  .library-create-form input {
    font-size: 16px;
  }
}

.services-current,
.services-note {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(40, 93, 69, 0.16);
  background: rgba(40, 93, 69, 0.08);
}

.services-current strong,
.services-note strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
}

.services-current span,
.services-note span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.services-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
}

.services-provider {
  min-height: 108px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 52px auto auto;
  gap: 6px;
  justify-items: center;
  align-content: start;
  padding: 10px 8px 12px;
  border: 1px solid rgba(74, 59, 50, 0.22);
  border-radius: 8px;
  background: #FAF1E0;
  color: #4A3B32;
  text-align: center;
  cursor: pointer;
}

.services-provider.active {
  border-color: #4A3B32;
  background: #F3E9D0;
  box-shadow: none;
}

.services-app-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: #FBF3E4;
  box-shadow: none;
}

.services-app-icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

.services-provider strong,
.services-provider em {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.services-provider strong {
  display: block;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.services-provider em {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.15;
}

.services-research-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.services-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.services-actions button {
  min-height: 42px;
  border-radius: 12px;
  background: rgba(241, 238, 230, 0.92);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.services-actions button.primary {
  background: #4A3B32;
  color: #FBF3E4;
}

.services-actions button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.reader-backup-hero,
.reader-backup-note {
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(40, 93, 69, 0.16);
  background: rgba(40, 93, 69, 0.08);
}

.reader-backup-hero strong,
.reader-backup-note strong {
  display: block;
  font-size: var(--gn-app-headline-size);
  font-weight: 950;
  line-height: var(--gn-app-headline-leading);
}

.reader-backup-hero span,
.reader-backup-note span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

.reader-backup-grid {
  display: grid;
  gap: 4px;
}

.reader-backup-row {
  display: grid;
  grid-template-columns: 10px minmax(74px, auto) 1fr;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid rgba(217, 208, 191, 0.78);
  border-radius: 14px;
  background: rgba(250, 247, 240, 0.82);
}

.reader-backup-row strong {
  color: var(--muted);
  font-size: var(--gn-app-supporting-size);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reader-backup-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 10px;
  font-weight: 820;
  line-height: 1.15;
}

.reader-backup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.reader-backup-actions button {
  min-height: 32px;
  border-radius: 12px;
  background: rgba(241, 238, 230, 0.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  line-height: var(--gn-app-headline-leading);
  cursor: pointer;
}

.reader-backup-actions button.primary {
  background: var(--accent-primary);
  color: #FFFFFF;
}

.reader-settings-section {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(217, 208, 191, 0.78);
  border-radius: 14px;
  background: rgba(250, 247, 240, 0.82);
}

.reader-settings-section > strong {
  color: var(--muted);
  font-size: var(--gn-app-supporting-size);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reader-settings-options,
.reader-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reader-settings-options button,
.reader-settings-actions button {
  min-height: 30px;
  border-radius: 999px;
  background: rgba(241, 238, 230, 0.92);
  color: var(--ink);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 950;
  line-height: var(--gn-app-headline-leading);
  cursor: pointer;
}

.reader-settings-options button.active,
.reader-settings-actions button.primary {
  background: var(--accent-primary);
  color: #FFFFFF;
}

.reader-settings-options button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.reader-settings-section span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .reader-settings-panel {
    gap: 4px;
    padding: 6px;
  }

  .reader-settings-body {
    gap: 4px;
  }

  .reader-settings-section {
    gap: 3px;
    padding: 4px 6px;
  }

  .reader-settings-options,
  .reader-settings-actions {
    gap: 3px;
  }

  .reader-settings-options button,
  .reader-settings-actions button {
    min-height: 28px;
    padding: 0 6px;
  }

  .reader-settings-section span {
    font-size: var(--gn-app-supporting-size);
    line-height: 1.15;
  }
}

.score-info-hero {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(40, 93, 69, 0.16);
  background: rgba(40, 93, 69, 0.08);
}

.score-info-hero strong {
  display: block;
  font-size: 17px;
  line-height: 1.15;
}

.score-info-hero span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.score-info-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 208, 191, 0.74);
  border-radius: 12px;
  background: rgba(250, 247, 240, 0.82);
}

.score-info-row strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.score-info-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 800;
}

.score-info-rights {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(190, 133, 36, 0.24);
  background: rgba(190, 133, 36, 0.1);
}

.score-info-rights.synced {
  border-color: rgba(196, 154, 69, 0.32);
  background: var(--accent-secondary-soft);
}

.score-info-rights.offline {
  border-color: rgba(156, 57, 45, 0.22);
  background: rgba(156, 57, 45, 0.08);
}

.score-info-rights .status-dot {
  margin-top: 3px;
}

.score-info-rights strong {
  display: block;
  font-size: 13px;
  font-weight: 950;
}

.score-info-rights span:not(.status-dot) {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.22;
}

.reader-dashboard-grid {
  display: grid;
  gap: 8px;
}

.reader-dashboard-row {
  display: grid;
  grid-template-columns: 12px minmax(74px, auto) 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 208, 191, 0.78);
  border-radius: 12px;
  background: rgba(250, 247, 240, 0.82);
}

.reader-dashboard-row strong,
.reader-dashboard-row span {
  min-width: 0;
  line-height: 1.15;
}

.reader-dashboard-row strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.reader-dashboard-row span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.reader-dashboard-row .status-dot {
  width: 10px;
  height: 10px;
}

.reader-dashboard-log {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.reader-dashboard-log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 0;
}

.reader-dashboard-log-head strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.reader-dashboard-log-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.reader-dashboard-log-row,
.reader-dashboard-log-empty {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 3px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 208, 191, 0.72);
  border-radius: 12px;
  background: rgba(250, 247, 240, 0.72);
}

.reader-dashboard-log-empty {
  grid-template-columns: 1fr;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.reader-dashboard-log-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
}

.reader-dashboard-log-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.reader-dashboard-log-row em {
  grid-column: 2;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.reader-cue-panel {
  position: absolute;
  right: 18px;
  top: 92px;
  z-index: var(--gn-layer-floating);
  display: grid;
  width: min(420px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 116px));
  gap: 11px;
  padding: 12px;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.reader-cue-panel[hidden] {
  display: none;
}

.reader-cue-panel:has(.seasonal-program-card) {
  max-height: calc(100vh - 104px);
}

.reader-slide-maker {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(74, 59, 50, 0.28);
  border-radius: 8px;
  background: #FBF3E4;
  color: #4A3B32;
}

.slide-maker-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 800;
}

.slide-maker-head small {
  font-weight: 600;
  color: #6B5B46;
}

.mass-setting-card {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(74, 59, 50, 0.22);
  border-radius: 6px;
  background: #FAF1E0;
}

.mass-setting-head,
.mass-setting-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mass-setting-head span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B5B46;
}

.mass-setting-head small,
.mass-setting-save-row small {
  color: #6B5B46;
  font-size: 10px;
  font-weight: 650;
}

.mass-setting-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mass-setting-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.mass-setting-preview p {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 7px;
  border-radius: 5px;
  background: rgba(253, 252, 249, 0.74);
  color: #4A3B32;
}

.mass-setting-preview strong {
  font-size: 10px;
}

.mass-setting-preview span {
  font-size: 11px;
  line-height: 1.25;
}

.mass-setting-pill,
.mass-setting-save-row button {
  min-height: 32px;
  border: 1px solid rgba(74, 59, 50, 0.32);
  border-radius: 999px;
  background: #FDFCF9;
  color: #4A3B32;
  font-weight: 750;
}

.mass-setting-pill.active,
.mass-setting-pill[aria-pressed="true"],
.mass-setting-save-row button {
  border-color: #4A3B32;
  background: #4A3B32;
  color: #FBF3E4;
}

.seasonal-program-card {
  gap: 6px;
}

.program-slot-list,
.program-field {
  display: grid;
  gap: 4px;
}

.program-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 6px;
  padding: 5px 6px;
  border: 1px solid rgba(74, 59, 50, 0.18);
  border-radius: 6px;
  background: rgba(253, 252, 249, 0.7);
}

.program-slot-main {
  display: grid;
  gap: 2px;
}

.program-slot-main strong,
.program-field > span {
  color: #6B5B46;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.program-slot-main span {
  color: #3A2820;
  font-family: var(--font-serif-display);
  font-size: 15px;
  font-weight: 700;
}

.program-slot-main small,
.program-rights,
.program-field small {
  color: #6B5B46;
  font-size: 10px;
  font-weight: 650;
}

.program-slot-actions,
.program-announcement-add,
.program-announcement-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.program-slot-actions {
  justify-content: flex-end;
}

.program-slot-row > .program-rights,
.program-slot-row > .program-slot-search {
  grid-column: 1 / -1;
}

.program-slot-search {
  display: grid;
  gap: 6px;
}

.program-slot-results {
  display: grid;
  gap: 5px;
}

.program-slot-results button {
  display: grid;
  gap: 2px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(74, 59, 50, 0.22);
  border-radius: 5px;
  background: #FDFCF9;
  color: #4A3B32;
  text-align: left;
}

.program-slot-results span {
  color: #6B5B46;
  font-size: 10px;
}

.program-field textarea,
.program-field input,
.program-slot-search input {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(74, 59, 50, 0.28);
  border-radius: 4px;
  background: #FDFCF9;
  color: #4A3B32;
  font-family: var(--font-sans);
  font-size: 12px;
}

.program-psalm-field textarea {
  resize: vertical;
  white-space: pre-wrap;
}

.program-announcement-row input,
.program-announcement-add input {
  flex: 1 1 150px;
}

.program-announcement-row button,
.program-announcement-add button {
  min-height: 32px;
  border: 1px solid rgba(74, 59, 50, 0.32);
  border-radius: 999px;
  background: #FDFCF9;
  color: #4A3B32;
  font-weight: 750;
}

.intercessions-card {
  border-color: rgba(74, 59, 50, 0.34);
}

.intercessions-honesty {
  margin: 0;
  color: #6B5B46;
  font-size: 10px;
  font-weight: 700;
}

.intercessions-bins,
.intercessions-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.intercessions-bin,
.intercessions-name-slide,
.intercessions-print-preview {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(74, 59, 50, 0.18);
  border-radius: 6px;
  background: rgba(253, 252, 249, 0.74);
}

.intercessions-bin header,
.intercessions-name-slide header,
.intercessions-print-preview header,
.intercessions-page-controls,
.intercessions-entry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.intercessions-entry-row textarea {
  flex: 1 1 170px;
}

.intercessions-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 210px;
  overflow: auto;
}

.intercessions-pill {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) auto auto;
  gap: 4px;
  align-items: center;
  max-width: 100%;
  padding: 4px;
  border: 1px solid rgba(74, 59, 50, 0.2);
  border-radius: 999px;
  background: #FDFCF9;
}

.intercessions-pill.has-break {
  border-color: #4A3B32;
  box-shadow: inset 0 -3px 0 rgba(74, 59, 50, 0.24);
}

.intercessions-pill input {
  min-height: 28px;
  border: 0;
  background: transparent;
}

.intercessions-pill small,
.intercessions-bin small,
.intercessions-name-slide span,
.intercessions-print-preview span {
  color: #6B5B46;
  font-size: 10px;
  font-weight: 700;
}

.intercessions-pill button {
  min-height: 28px;
  border: 1px solid rgba(74, 59, 50, 0.22);
  border-radius: 999px;
  background: #FAF1E0;
  color: #4A3B32;
  font-size: 10px;
  font-weight: 750;
}

.intercessions-name-slide {
  min-height: 180px;
  background: #2B211C;
  color: #FDFCF9;
}

.intercessions-name-slide ol {
  columns: 2;
  margin: 0;
  padding-left: 24px;
  font-family: var(--font-serif-display);
  font-size: 15px;
  line-height: 1.35;
}

.intercessions-print-preview pre {
  max-height: 190px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  font-size: 11px;
}

.intercessions-print-root {
  display: grid;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding: 8px;
  border: 1px dashed rgba(74, 59, 50, 0.34);
  background: #FDFCF9;
}

.intercessions-print-page {
  break-inside: avoid;
  page-break-inside: avoid;
}

.intercessions-print-notes {
  padding: 6px;
  border-top: 1px solid rgba(74, 59, 50, 0.22);
}

@media (max-width: 520px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .mass-setting-preview,
  .program-slot-row {
    grid-template-columns: 1fr;
  }

  .program-slot-actions,
  .program-announcement-add,
  .program-announcement-row,
  .intercessions-entry-row {
    justify-content: flex-start;
  }

  .program-announcement-row input,
  .program-announcement-add input,
  .intercessions-entry-row textarea,
  .program-slot-search input,
  .program-field input,
  .program-field textarea,
  .slide-maker-paste textarea,
  .slide-maker-card textarea {
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
  }

  .mass-setting-pill,
  .mass-setting-save-row button,
  .program-slot-results button,
  .program-announcement-row button,
  .program-announcement-add button,
  .slide-maker-split,
  .slide-maker-save,
  .slide-maker-card-actions button {
    min-height: 44px;
  }

  .slide-maker-actions,
  .slide-maker-card-actions {
    grid-template-columns: 1fr;
  }

  .intercessions-bins,
  .intercessions-preview-grid {
    grid-template-columns: 1fr;
  }

  .intercessions-pill {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 14px;
  }

  .intercessions-pill input,
  .intercessions-pill button {
    width: 100%;
    min-height: 44px;
  }
}

/* Standalone B.2: local Library/Order, direct slide authoring, and one-job workspace. */
body.playback-operator-mode .playback-operator-panel {
  min-height: 0 !important;
  overflow: visible;
}

body.playback-operator-mode .operator-grid {
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  overflow: visible;
}

body.playback-operator-mode .operator-list-chrome {
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 0 0 7px;
}

body.playback-operator-mode #operatorRoomBadge,
body.playback-operator-mode #operatorSongModeBadge {
  display: none !important;
}

.operator-pane-toggle,
.operator-monitor-toggle,
.operator-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.operator-pane-toggle button,
.operator-monitor-toggle button,
.operator-workspace-tabs button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #5A4638;
  padding: 0 12px;
  font: 750 12px/1 var(--font-sans);
}

.operator-pane-toggle button.active,
.operator-monitor-toggle button.active,
.operator-workspace-tabs button.active {
  border-color: #4A3B32;
  background: #FBF3E4;
  color: #2B211C;
}

.operator-monitor-toggle {
  display: none;
}

body.playback-operator-mode .operator-card.operator-authoring-card {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: 10px;
  max-height: 286px;
  padding: 10px;
  border: 1px solid rgba(74, 59, 50, 0.16);
  border-radius: 10px;
  background: #FDFCF9;
}

.operator-authoring-library,
.operator-authoring-editor {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

body.playback-operator-mode .operator-authoring-library .operator-piece-list {
  max-height: 236px;
  padding: 0;
  overflow: auto;
  background: transparent;
}

body.playback-operator-mode .operator-authoring-library .operator-piece-list button.operator-timeline-row {
  min-height: 42px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  padding: 5px 7px;
  border-radius: 6px;
}

body.playback-operator-mode .operator-authoring-library .operator-piece-list .timeline-chip,
body.playback-operator-mode .operator-authoring-library .operator-piece-list .timeline-owner,
body.playback-operator-mode .operator-authoring-library .operator-piece-list .timeline-action {
  display: none;
}

body.playback-operator-mode .operator-authoring-library .operator-piece-list .timeline-ready {
  display: block;
  grid-column: 2 / 4;
  color: #6B5B46;
  font-size: 10px;
}

body.playback-operator-mode .operator-authoring-library .operator-piece-list button.active {
  background: #F3E9D0;
  box-shadow: inset 3px 0 #9A7F43;
}

.operator-slide-rail-head,
.operator-editor-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.operator-slide-rail-head > div:first-child {
  display: grid;
  min-width: 0;
}

.operator-slide-rail-head small,
.operator-slide-editor label > span {
  color: #6B5B46;
  font: 750 10px/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.operator-slide-rail-head strong {
  overflow: hidden;
  color: #2B211C;
  font: 750 14px/1.2 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-slide-actions {
  display: flex;
  gap: 4px;
}

.operator-slide-actions button,
#operatorResetPreview,
.operator-workspace-panel > button,
.operator-workspace-choices button {
  min-height: 36px;
  border: 1px solid rgba(74, 59, 50, 0.28);
  border-radius: 7px;
  background: #FDFCF9;
  color: #4A3B32;
  padding: 0 10px;
  font: 750 11px/1.1 var(--font-sans);
}

.operator-slide-rail {
  display: flex;
  gap: 6px;
  min-height: 62px;
  margin: 7px 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.operator-slide-rail button {
  display: grid;
  flex: 0 0 128px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-content: center;
  gap: 2px 5px;
  min-height: 58px;
  border: 1px solid rgba(74, 59, 50, 0.2);
  border-radius: 7px;
  background: #FBF3E4;
  color: #4A3B32;
  padding: 6px;
  text-align: left;
}

.operator-slide-rail button.active {
  border-color: #770007;
  box-shadow: inset 0 0 0 1px #770007;
}

.operator-slide-rail button small {
  grid-row: 1 / 3;
  color: #770007;
  font-weight: 850;
}

.operator-slide-rail button strong,
.operator-slide-rail button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-slide-rail button strong {
  font-size: 11px;
}

.operator-slide-rail button span {
  color: #6B5B46;
  font-size: 9px;
}

.operator-slide-editor {
  display: grid;
  grid-template-columns: minmax(100px, 0.5fr) minmax(160px, 1fr);
  gap: 6px;
}

.operator-slide-editor label {
  display: grid;
  gap: 3px;
}

.operator-slide-editor label:nth-child(3),
.operator-editor-status-row {
  grid-column: 1 / -1;
}

.operator-slide-editor input,
.operator-slide-editor textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(74, 59, 50, 0.25);
  border-radius: 6px;
  background: #FFFFFF;
  color: #2B211C;
  padding: 6px 8px;
  font: 650 13px/1.25 var(--font-sans);
}

.operator-slide-editor input {
  min-height: 34px;
}

.operator-slide-editor textarea {
  min-height: 58px;
  max-height: 72px;
  resize: vertical;
}

.operator-editor-status-row small {
  color: #6B5B46;
  font-size: 10px;
}

body.playback-operator-mode .operator-authoring-editor #operatorCueGrid,
body.playback-operator-mode .operator-authoring-editor #operatorCueHint {
  display: none !important;
}

.operator-workspace {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  border: 1px solid rgba(74, 59, 50, 0.16);
  border-radius: 10px;
  background: #FDFCF9;
  padding: 8px 10px;
}

.operator-workspace-tabs {
  overflow-x: auto;
}

.operator-workspace-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

.operator-workspace-panel strong {
  color: #2B211C;
  font-size: 13px;
}

.operator-workspace-panel p {
  margin: 3px 0 0;
  color: #6B5B46;
  font-size: 11px;
}

.operator-workspace-choices {
  display: flex;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
}

.operator-workspace-choices button {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  min-width: 120px;
  min-height: 48px;
  text-align: left;
}

.operator-workspace-choices button span {
  color: #6B5B46;
  font-size: 9px;
}

@media (max-width: 760px) {
  body.playback-operator-mode .playback-operator-panel {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }

  body.playback-operator-mode .operator-console-strip {
    margin-bottom: 6px;
  }

  body.playback-operator-mode .operator-cockpit-strip {
    position: fixed;
    right: 8px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    left: 8px;
    z-index: 460;
    margin: 0;
    border-color: rgba(119, 0, 7, 0.28);
    box-shadow: 0 8px 28px rgba(43, 33, 28, 0.24);
  }

  body.playback-operator-mode .operator-cockpit-row:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body.playback-operator-mode .operator-cockpit-piece,
  body.playback-operator-mode .operator-cockpit-actions {
    display: none !important;
  }

  body.playback-operator-mode #operatorCockpitGo,
  body.playback-operator-mode #operatorCockpitClear {
    display: block;
    min-height: 44px;
  }

  .operator-monitor-toggle {
    display: flex;
    margin-bottom: 7px;
  }

  .operator-monitor-toggle button {
    flex: 1 1 50%;
    min-height: 44px;
  }

  body.playback-operator-mode .operator-monitor-grid {
    display: block;
    overflow: visible;
  }

  body.playback-operator-mode .operator-monitor {
    min-width: 0;
  }

  body.playback-operator-mode .operator-monitor-frame {
    width: 100%;
    min-width: 320px;
    min-height: 180px;
  }

  body.playback-operator-mode .playback-operator-panel[data-mobile-monitor="preview"] .operator-live-monitor-card,
  body.playback-operator-mode .playback-operator-panel[data-mobile-monitor="live"] .operator-preview-monitor-card {
    display: none;
  }

  body.playback-operator-mode .operator-card.operator-authoring-card {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  body.playback-operator-mode .operator-authoring-library .operator-piece-list {
    max-height: 220px;
  }

  .operator-slide-actions button,
  #operatorResetPreview,
  .operator-workspace-tabs button,
  .operator-workspace-panel > button,
  .operator-workspace-choices button {
    min-height: 44px;
  }

  .operator-slide-editor {
    grid-template-columns: 1fr;
  }

  .operator-slide-editor label:nth-child(3),
  .operator-editor-status-row {
    grid-column: auto;
  }

  .operator-workspace-panel {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Standalone B.1: explicit Preview and verified read-only Live consequence. */
body.playback-operator-mode .operator-cockpit-row {
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 132px 82px;
}

body.playback-operator-mode .operator-cockpit-piece,
body.playback-operator-mode .operator-cockpit-go,
body.playback-operator-mode .operator-cockpit-soft,
body.playback-operator-mode .operator-cockpit-message-name,
body.playback-operator-mode .operator-cockpit-arrangement {
  min-height: 44px;
}

body.playback-operator-mode .operator-grid {
  position: relative;
  grid-template-columns: minmax(230px, 0.7fr) minmax(660px, 2.3fr);
}

body.playback-operator-mode .operator-consequence-card {
  min-width: 0;
  padding: 10px;
}

.operator-monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 12px;
}

.operator-monitor {
  display: grid;
  gap: 6px;
  min-width: 320px;
}

.operator-monitor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #3A2820;
  font: 900 13px/1.2 var(--font-sans);
}

.operator-monitor > header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.operator-monitor-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 320px;
  min-height: 180px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid rgba(58, 40, 32, 0.18);
  border-radius: 10px;
  background: linear-gradient(145deg, #FDFCF9, #FAF1E0);
  color: #3A2820;
  padding: 22px;
  text-align: center;
}

.operator-preview-monitor-card .operator-monitor-frame {
  border-color: rgba(27, 119, 132, 0.5);
}

.operator-live-monitor-card .operator-monitor-frame {
  border-color: rgba(160, 74, 44, 0.46);
}

.operator-live-monitor-card .operator-monitor-frame.is-uncertain {
  border-color: #9B5C16;
  background: #FFF5DD;
}

.operator-monitor-frame > span {
  color: #770007;
  font: 800 12px/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.operator-monitor-frame > strong {
  margin-top: 8px;
  font: 700 clamp(22px, 2.2vw, 32px)/1.05 var(--font-serif-display, "Crimson Pro", serif);
}

.operator-monitor-frame > p {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: #59483D;
  font: 700 clamp(15px, 1.45vw, 21px)/1.2 var(--font-serif-display, "Crimson Pro", serif);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body.playback-operator-mode .operator-audience-root-card {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 320px;
  height: 180px;
  overflow: hidden;
  pointer-events: none;
}

body.playback-operator-mode .operator-audience-root-card .operator-slide-preview,
body.playback-operator-mode .operator-audience-root-card .operator-preview-stack {
  width: 320px;
  height: 180px;
}

body.playback-operator-mode .operator-cockpit-go[aria-busy="true"] {
  cursor: progress;
  filter: saturate(0.6);
}

@media (max-width: 760px) {
  body.playback-operator-mode .operator-cockpit-row,
  body.playback-operator-mode .operator-cockpit-actions,
  body.playback-operator-mode .operator-grid {
    grid-template-columns: 1fr;
  }

  body.playback-operator-mode .operator-monitor-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  body.playback-operator-mode .operator-monitor {
    scroll-snap-align: start;
  }
}

.slide-maker-paste,
.slide-maker-card {
  display: grid;
  gap: 6px;
}

.slide-maker-paste span,
.slide-maker-card header span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B5B46;
}

.slide-maker-paste textarea,
.slide-maker-card textarea {
  width: 100%;
  border: 1px solid rgba(74, 59, 50, 0.28);
  border-radius: 4px;
  background: #FDFCF9;
  color: #4A3B32;
  font-family: var(--font-sans);
  font-size: 12px;
}

.slide-maker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.slide-maker-split,
.slide-maker-save,
.slide-maker-card-actions button {
  min-height: 36px;
  border: 1px solid #4A3B32;
  border-radius: 4px;
  background: #4A3B32;
  color: #FBF3E4;
  font-weight: 750;
}

.slide-maker-card-actions button {
  background: #FAF1E0;
  color: #4A3B32;
}

.slide-maker-cards {
  display: grid;
  gap: 10px;
}

.slide-maker-card {
  padding: 8px;
  border: 1px solid rgba(74, 59, 50, 0.22);
  border-radius: 6px;
  background: #FAF1E0;
}

.slide-maker-card.active {
  border-color: #4A3B32;
  border-left-width: 3px;
}

.slide-maker-card header strong {
  font-family: var(--font-serif-display);
  font-size: 16px;
  color: #4A3B32;
}

.slide-maker-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 10px 12px;
  border: 1px solid rgba(74, 59, 50, 0.2);
  border-radius: 2px;
  background: #FDFCF9;
  color: #3A2820;
  text-align: center;
}

.slide-maker-thumb em {
  font-family: var(--font-serif-display);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  white-space: pre-wrap;
}

.slide-maker-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.maker-slide-stage {
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  border: 1px solid rgba(196, 154, 69, 0.45);
  border-radius: 6px;
  background: #FDFCF9;
}

.maker-slide-canvas {
  width: 1920px;
  height: 1080px;
  position: relative;
  transform-origin: top left;
  background: #FDFCF9;
  color: #3A2820;
  overflow: hidden;
}

.maker-slide-text-box {
  position: absolute;
  left: 12%;
  top: 22%;
  width: 76%;
  text-align: left;
  z-index: 1;
}

.maker-slide-label {
  display: block;
  margin-bottom: 18px;
  color: #770007;
  font-family: var(--font-serif-display, "Crimson Pro", serif);
  font-size: 54px;
  font-weight: 700;
}

.maker-slide-lyrics {
  margin: 0;
  color: #3A2820;
  font-family: var(--font-serif-display, "Crimson Pro", serif);
  font-size: 72px;
  font-weight: 600;
  line-height: 1.2;
  white-space: pre-wrap;
}

.reader-cue-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.reader-cue-summary strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
}

.reader-cue-summary span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.reader-cue-summary button,
.reader-quick-slide button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(241, 238, 230, 0.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.reader-cue-group {
  display: grid;
  gap: 7px;
}

.reader-cue-group > span,
.reader-quick-slide label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reader-cue-mode-toggle {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(217, 208, 191, 0.92);
  border-radius: 8px;
  background: rgba(250, 247, 240, 0.9);
}

.reader-cue-mode-toggle[hidden],
.reader-cue-hint[hidden] {
  display: none;
}

.reader-cue-mode-toggle button {
  min-height: 28px;
  border-radius: 6px;
  padding: 0 9px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.reader-cue-mode-toggle button.active,
.reader-cue-mode-toggle button[aria-pressed="true"] {
  background: #fffdfa;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(32, 35, 31, 0.12);
}

.reader-cue-hint {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.reader-cue-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.reader-cue-grid button {
  min-height: 36px;
  border: 1px solid rgba(217, 208, 191, 0.92);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(250, 247, 240, 0.9);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.reader-cue-grid button.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #FFFFFF;
}

.reader-cue-grid button.nav-only {
  border-color: rgba(27, 119, 132, 0.54);
  background: transparent;
  color: var(--teal);
}

.reader-cue-grid button.read-only,
.cue-dock button.read-only {
  color: var(--muted);
}

.reader-cue-grid.deck button.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #FFFFFF;
}

.reader-cue-grid.screen button {
  min-width: 78px;
}

.reader-cue-grid.screen button.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #FFFFFF;
}

.reader-cue-grid.screen button[data-reader-projection-mode="blackout"] {
  background: rgba(32, 35, 31, 0.92);
  border-color: rgba(32, 35, 31, 0.92);
  color: #fffdfa;
}

.reader-section-editor {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(217, 208, 191, 0.92);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.74);
}

.reader-section-editor-head,
.reader-section-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reader-section-editor-head span {
  color: var(--accent-secondary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.reader-section-editor-head button,
.reader-section-editor-actions button,
.reader-section-editor-picks button {
  min-height: 36px;
  border: 1px solid rgba(217, 208, 191, 0.92);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(250, 247, 240, 0.9);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.reader-section-editor-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reader-section-editor-picks button.active,
.reader-section-editor-actions button[data-section-editor-save] {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #FFFFFF;
}

.reader-section-editor label {
  display: grid;
  gap: 4px;
}

.reader-section-editor label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.reader-section-editor input,
.reader-section-editor textarea {
  width: 100%;
  border: 1px solid rgba(217, 208, 191, 0.95);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--paper-bg);
  color: var(--ink);
  font: inherit;
}

.reader-section-editor textarea {
  resize: vertical;
}

.reader-section-editor.read-only {
  opacity: 0.72;
}

.reader-quick-slide {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.reader-quick-slide label {
  display: grid;
  gap: 5px;
}

.reader-quick-slide input,
.reader-quick-slide textarea {
  width: 100%;
  border: 1px solid rgba(217, 208, 191, 0.92);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255, 253, 250, 0.94);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.reader-quick-slide textarea {
  resize: vertical;
}

.turner-actions.compact .ghost-action {
  min-width: 96px;
}

.turner-actions.compact.midi-actions {
  gap: 6px;
}

.turner-actions.compact.midi-actions .ghost-action {
  min-width: 0;
  flex: 1 1 calc(50% - 6px);
  min-height: 32px;
  padding: 0 8px;
  font-size: 11px;
}

.link-mode-status {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.link-target-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.link-target-presets[hidden] {
  display: none;
}

.link-target-presets button {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255, 181, 55, 0.18);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-slide-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.projection-slide-picker button {
  position: relative;
  min-height: 36px;
  border-radius: 999px;
  background: rgba(27, 119, 132, 0.1);
  color: var(--teal);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-slide-picker button::after {
  content: attr(data-badge);
  position: absolute;
  top: -5px;
  right: -3px;
  min-width: 24px;
  padding: 2px 4px;
  border-radius: 99px;
  background: var(--accent-secondary);
  color: var(--ink);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0;
}

.projection-slide-picker button[data-confidence="text"]::after {
  background: var(--accent-secondary);
  color: var(--ink);
}

.projection-slide-picker button[data-confidence="missing"]::after {
  background: var(--accent-danger);
  color: #FFFFFF;
}

.projection-slide-picker button[data-confidence="missing"] {
  border-color: rgba(123, 43, 43, 0.28);
}

.projection-slide-picker button.missing-attempt {
  border-color: rgba(164, 62, 50, 0.72);
  background: var(--accent-danger-soft);
  color: var(--accent-danger);
  box-shadow: 0 0 0 3px rgba(164, 62, 50, 0.12);
}

.projection-slide-picker button.previewing {
  border-color: rgba(196, 154, 69, 0.72);
  background: var(--accent-secondary-soft);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(196, 154, 69, 0.16);
}

.projection-slide-picker button.active {
  background: var(--accent-primary);
  color: #FFFFFF;
}

.projection-slide-picker button:disabled {
  opacity: 0.42;
  cursor: default;
}

.projection-lock {
  min-height: 32px;
  border-radius: 999px;
  background: rgba(27, 119, 132, 0.1);
  color: var(--teal);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-lock.locked {
  background: var(--accent-danger);
  color: #FFFFFF;
}

.projection-lock:disabled {
  opacity: 0.55;
  cursor: default;
}

.projection-audience {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  margin-top: 10px;
  border-radius: 10px;
  background: rgba(27, 119, 132, 0.08);
  padding: 10px;
}

.projection-audience.online {
  background: var(--accent-secondary-soft);
}

.projection-audience.stale {
  background: rgba(171, 121, 41, 0.12);
}

.projection-audience.offline {
  background: rgba(128, 53, 53, 0.08);
}

.projection-audience span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.projection-audience strong {
  min-width: 0;
  overflow: hidden;
  color: var(--teal);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-audience.online strong {
  color: var(--accent-secondary);
}

.projection-audience.stale strong {
  color: var(--ink);
}

.projection-audience.offline strong {
  color: var(--accent-danger);
}

.projection-recovery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  border-radius: 10px;
  background: rgba(171, 121, 41, 0.12);
  padding: 8px 10px;
}

.projection-recovery[hidden] {
  display: none;
}

.projection-recovery span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-recovery button {
  min-height: 32px;
  border-radius: 999px;
  background: var(--accent-primary);
  color: #FFFFFF;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-transition-control {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.projection-transition-control select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(32, 35, 31, 0.14);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 0 9px;
}

.projection-mode-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.projection-mode-controls button {
  min-height: 34px;
  border: 1px solid rgba(27, 119, 132, 0.2);
  border-radius: 10px;
  background: rgba(27, 119, 132, 0.08);
  color: var(--teal);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-mode-controls #projectionBlackout {
  border-color: rgba(32, 35, 31, 0.34);
  background: #23231f;
  color: #fffefa;
}

.projection-mode-controls #projectionLogo {
  border-color: rgba(196, 154, 69, 0.44);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.projection-preview-controls {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.projection-preview-controls button {
  min-height: 32px;
  border: 1px solid rgba(32, 35, 31, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-preview-controls button.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #FFFFFF;
}

.projection-preview-controls button:disabled {
  opacity: 0.45;
  cursor: default;
}

.projection-preview-controls span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-deck {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  background: rgba(255, 255, 255, 0.58);
  padding: 9px;
}

.projection-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.projection-deck-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.projection-deck-header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--teal);
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-deck-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.projection-deck-grid button {
  min-height: 34px;
  border: 1px solid rgba(27, 119, 132, 0.18);
  border-radius: 9px;
  background: rgba(27, 119, 132, 0.08);
  color: var(--teal);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-deck-grid button[data-deck-type="response"] {
  border-color: rgba(39, 126, 90, 0.22);
  background: rgba(39, 126, 90, 0.1);
  color: var(--ink);
}

.projection-deck-grid button[data-deck-type="announcement"] {
  border-color: rgba(196, 154, 69, 0.35);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.projection-deck-grid button[data-deck-type="media"] {
  border-color: rgba(53, 92, 140, 0.24);
  background: rgba(53, 92, 140, 0.1);
  color: var(--sky-text);
}

.projection-deck-grid button.active {
  background: var(--teal);
  color: #FFFFFF;
}

.projection-deck-grid button:disabled {
  opacity: 0.42;
  cursor: default;
}

.projection-deck-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.projection-deck-controls button {
  min-height: 34px;
  border: 1px solid rgba(90, 138, 174, 0.34);
  border-radius: 9px;
  background: var(--well-bg);
  color: var(--sky-text);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-deck-controls button:hover:not(:disabled),
.projection-deck-controls button:focus-visible {
  border-color: var(--accent-sky);
  background: var(--accent-sky-soft);
  color: var(--ink);
}

.projection-deck-controls button:disabled {
  opacity: 0.42;
  cursor: default;
}

.projection-quick-slide {
  display: grid;
  gap: 7px;
}

.projection-quick-slide label {
  display: grid;
  gap: 4px;
}

.projection-quick-slide span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.projection-quick-slide input,
.projection-quick-slide textarea {
  width: 100%;
  border: 1px solid rgba(32, 35, 31, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 800 12px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  padding: 8px 9px;
}

.projection-quick-slide textarea {
  min-height: 66px;
  resize: vertical;
}

.projection-quick-slide button {
  min-height: 36px;
  border-radius: 999px;
  background: var(--teal);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.projection-quick-slide button:disabled {
  opacity: 0.42;
  cursor: default;
}

.link-mode-list {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}

.link-mode-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px 30px;
  gap: 6px;
  align-items: center;
}

.link-mode-list button {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--roadmap-border, rgba(53, 92, 140, 0.14));
  background: color-mix(in srgb, var(--roadmap-bg, var(--blue-soft)) 28%, white);
  color: var(--roadmap-ink, var(--sky-text));
  cursor: pointer;
}

.link-mode-delete {
  width: 30px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  background: rgba(128, 53, 53, 0.1);
  color: var(--accent-danger);
}

.link-mode-move {
  width: 34px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  background: rgba(53, 92, 140, 0.08);
  color: var(--sky-text);
  font-size: 10px;
}

.link-mode-list button strong,
.link-mode-list button span,
.link-mode-list p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.link-mode-list p {
  margin: 0;
  padding: 5px 2px 2px;
  color: var(--muted);
  font-weight: 750;
}

.link-mode-json {
  display: none;
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid rgba(53, 92, 140, 0.18);
  background: rgba(244, 248, 252, 0.94);
  color: var(--sky-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  line-height: 1.35;
  resize: none;
}

.link-mode-json.visible {
  display: block;
}

body.link-mode .link-mode-panel {
  z-index: var(--gn-layer-floating);
  display: block;
}

body.reader-focus.link-mode .link-mode-panel {
  top: 108px;
  right: 24px;
}

@keyframes score-link-flash {
  0% {
    opacity: 0.6;
    box-shadow: 0 0 0 0 var(--roadmap-ring, rgba(255, 181, 55, 0.72)), 0 14px 28px rgba(32, 35, 31, 0.18);
  }

  45% {
    opacity: 1;
    box-shadow: 0 0 0 18px var(--roadmap-ring, rgba(255, 181, 55, 0.18)), 0 14px 28px rgba(32, 35, 31, 0.18);
  }

  100% {
    opacity: 0.78;
    box-shadow: 0 0 0 28px var(--roadmap-ring, rgba(255, 181, 55, 0)), 0 14px 28px rgba(32, 35, 31, 0.18);
  }
}

.ink {
  position: absolute;
  color: var(--sky-text);
  font-family: "Bradley Hand", "Segoe Print", cursive;
  font-size: 18px;
  transform: rotate(-4deg);
}

.ink-one {
  top: 172px;
  left: 154px;
}

.ink-two {
  top: 570px;
  left: 44px;
  color: var(--accent-danger);
}

.highlight {
  position: absolute;
  top: 246px;
  left: 92px;
  width: 310px;
  height: 24px;
  background: rgba(247, 203, 83, 0.34);
  transform: rotate(-1deg);
}

.score-marker {
  position: absolute;
  z-index: 3;
  pointer-events: auto;
  min-width: 42px;
  min-height: 32px;
  border-radius: 99px;
  border: 1px solid rgba(32, 35, 31, 0.2);
  background: #fff8e9;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(32, 35, 31, 0.12);
  cursor: pointer;
}

.score-marker.jump {
  top: 486px;
  right: 48px;
}

.score-marker.pitch {
  top: 702px;
  left: 180px;
  color: var(--sky-text);
  background: var(--blue-soft);
}

body.empty-library-boot .annotation-layer .ink,
body.empty-library-boot .annotation-layer .highlight,
body.empty-library-boot .annotation-layer .score-marker,
body.empty-library-boot #readerShepherdRow,
body.empty-library-boot #readerSectionShepherdRow,
body.empty-library-boot #bakedPageBadge,
body.empty-library-boot #chartPills,
body.empty-library-boot .score-page-meta {
  display: none;
}

.cue-dock {
  min-height: 48px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  flex-wrap: nowrap;
}

.side-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  overflow: auto;
}

.playback-operator-panel {
  display: none;
}

.stage-eighth-notes-icon {
  width: 22px;
  height: 22px;
  display: none;
}

body.playback-operator-mode .stage-slides-glyph {
  display: none;
}

body.playback-operator-mode .stage-eighth-notes-icon,
.stage-circle-slides.lease-open .stage-eighth-notes-icon {
  display: block;
}

.stage-circle-slides.lease-green .gnw-slides-live-dot,
.gnw-slides-live-dot.lease-green {
  background: #2f7a4b;
  opacity: 1;
}

.stage-circle-slides .gnw-slides-live-dot {
  background: transparent;
  opacity: 0;
}

body.playback-operator-mode #operatorReturnMusic,
body.playback-operator-mode .operator-return-music {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto;
}

.operator-return-music {
  position: static;
  z-index: auto;
  width: auto;
  height: auto;
  min-height: 28px;
  padding: 4px 10px;
  margin-right: 12px;
  border: 1px solid var(--chrome-border, #C49A45);
  border-radius: 999px;
  background: #FBF3E4;
  color: #4A3B32;
  box-shadow: none;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
}

.operator-return-music img {
  width: 22px;
  height: 22px;
}

.operator-lease-toast {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--gn-layer-chrome-raised, 310);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 24px));
  padding: 10px 14px;
  border: 1px solid rgba(74, 59, 50, 0.34);
  border-radius: 8px;
  background: #FBF3E4;
  color: #4A3B32;
  box-shadow: 0 8px 20px rgba(58, 40, 32, 0.16);
}

.operator-lease-toast[hidden] {
  display: none !important;
}

.operator-lease-toast p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.operator-lease-toast-actions {
  display: flex;
  gap: 8px;
}

.operator-lease-toast-actions button {
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid #C49A45;
  border-radius: 6px;
  background: #FDFCF9;
  color: #3A2820;
  font-weight: 700;
  cursor: pointer;
}

.operator-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.44fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

.operator-hero > div,
.operator-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.operator-hero > div:first-child {
  display: grid;
  align-content: center;
  padding: 22px;
}

.operator-hero h2 {
  margin: 2px 0 6px;
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.operator-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.operator-source-card {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 16px;
}

.operator-source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operator-source-header > span,
.operator-card-header span,
.operator-subheader span,
.operator-hint,
.operator-quick-slide span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

#operatorLockoutToggle {
  min-height: 30px;
  border-radius: 999px;
  background: var(--accent-primary-soft);
  color: var(--terracotta-text);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

#operatorLockoutToggle.active {
  background: #23231f;
  color: #fffefa;
}

.operator-source-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.operator-source-toggle button,
.operator-output-actions button,
.operator-quick-slide button {
  min-height: 40px;
  border-radius: 999px;
  background: rgba(27, 119, 132, 0.1);
  color: var(--teal);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.operator-source-toggle button.active,
.operator-quick-slide button {
  background: var(--accent-primary);
  color: #FFFFFF;
}

.operator-cockpit-strip {
  display: grid;
  gap: 7px;
  margin: 0 0 10px;
  border: 1px solid rgba(196, 154, 69, 0.36);
  border-radius: 10px;
  background: rgba(253, 252, 249, 0.78);
  padding: 8px;
  box-shadow: 0 8px 18px rgba(58, 40, 32, 0.08);
}

.operator-cockpit-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(160px, 1.1fr) 74px 82px;
  gap: 7px;
  align-items: stretch;
}

.operator-cockpit-actions {
  grid-template-columns: 94px minmax(124px, 0.8fr) 88px 76px minmax(118px, 0.75fr);
}

.operator-cockpit-piece,
.operator-cockpit-go,
.operator-cockpit-soft,
.operator-cockpit-message-name,
.operator-cockpit-arrangement {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(32, 35, 31, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 850 12px/1.15 var(--font-sans);
}

.operator-cockpit-piece,
.operator-cockpit-go,
.operator-cockpit-soft {
  cursor: pointer;
}

.operator-cockpit-piece {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  text-align: left;
}

.operator-cockpit-piece span,
.operator-cockpit-message-name span,
.operator-cockpit-arrangement span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.operator-cockpit-piece strong {
  min-width: 0;
  overflow: hidden;
  color: var(--teal);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-cockpit-go {
  border-color: rgba(160, 74, 44, 0.34);
  background: var(--accent-primary);
  color: #FFFFFF;
  font-size: 14px;
}

.operator-cockpit-soft {
  background: rgba(27, 119, 132, 0.09);
  color: var(--teal);
}

.operator-cockpit-message-name,
.operator-cockpit-arrangement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 4px 8px;
}

.operator-cockpit-message-name input,
.operator-cockpit-arrangement select {
  min-width: 0;
  width: 100%;
  height: 28px;
  border: 1px solid rgba(32, 35, 31, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 850 12px/1.15 var(--font-sans);
  padding: 0 8px;
}

@media (max-width: 520px) {
  .operator-cockpit-row,
  .operator-cockpit-actions {
    grid-template-columns: 1fr;
  }

  .operator-cockpit-piece,
  .operator-cockpit-go,
  .operator-cockpit-soft,
  .operator-cockpit-message-name,
  .operator-cockpit-arrangement {
    min-height: 44px;
  }

  .operator-cockpit-piece {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .operator-cockpit-message-name,
  .operator-cockpit-arrangement {
    grid-template-columns: 1fr;
  }

  .operator-cockpit-message-name input,
  .operator-cockpit-arrangement select {
    height: 44px;
    font-size: 16px;
  }
}

.operator-cockpit-strip button:disabled,
.operator-cockpit-arrangement select:disabled,
.operator-cockpit-message-name input:disabled {
  opacity: 0.52;
  cursor: default;
}

.operator-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1fr) minmax(300px, 1.05fr) minmax(300px, 1.05fr);
  gap: 14px;
  align-items: start;
}

.operator-card {
  min-width: 0;
  padding: 14px;
}

.operator-card-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.operator-card-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
}

.operator-card-header p {
  margin: 0 0 3px;
}

.operator-card-header > span {
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(27, 119, 132, 0.08);
  color: var(--teal);
  padding: 5px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
}

.operator-subheader p {
  margin: 0 0 3px;
}

.operator-subheader h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
}

.operator-subheader > span {
  max-width: 130px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(53, 92, 140, 0.1);
  color: var(--sky-text);
  padding: 5px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-piece-list,
.operator-cue-grid,
.operator-deck-grid,
.operator-media-bin,
.operator-output-actions {
  display: grid;
  gap: 8px;
}

.operator-piece-list {
  max-height: min(58vh, 560px);
  overflow: auto;
}

.operator-piece-list::before {
  content: "No.  Moment        Type     Out     Owner        Readiness";
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  border-radius: 8px;
  background: rgba(255, 253, 250, 0.96);
  color: var(--muted);
  padding: 4px 8px 7px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

.operator-piece-list button,
.operator-cue-grid button,
.operator-deck-grid button {
  min-height: 48px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.operator-piece-list button.operator-timeline-row {
  display: grid;
  grid-template-columns: 24px minmax(120px, 1.25fr) 54px 48px minmax(80px, 0.75fr) minmax(118px, 1fr) 54px;
  align-items: center;
  gap: 8px;
  min-height: 66px;
}

.operator-timeline-row .timeline-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(32, 35, 31, 0.08);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.operator-timeline-row .timeline-main {
  min-width: 0;
}

.operator-timeline-row .timeline-main strong,
.operator-timeline-row .timeline-main em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-timeline-row .timeline-main em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.operator-timeline-row .timeline-chip,
.operator-timeline-row .timeline-owner,
.operator-timeline-row .timeline-ready,
.operator-timeline-row .timeline-action {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.operator-timeline-row .timeline-chip,
.operator-timeline-row .timeline-action {
  border-radius: 999px;
  background: rgba(27, 119, 132, 0.1);
  color: var(--teal);
  padding: 5px 7px;
  text-align: center;
}

.operator-timeline-row .timeline-action {
  background: var(--accent-primary-soft);
  color: var(--terracotta-text);
}

.operator-piece-list button strong,
.operator-cue-grid button strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-piece-list button span,
.operator-cue-grid button span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-piece-list button.active,
.operator-cue-grid button.active {
  border-color: rgba(27, 119, 132, 0.34);
  background: rgba(27, 119, 132, 0.12);
  color: var(--teal);
}

.operator-piece-list button:disabled,
.operator-cue-grid button:disabled,
.operator-deck-grid button:disabled,
.operator-media-bin button:disabled,
.operator-output-actions button:disabled,
.operator-quick-slide button:disabled {
  opacity: 0.55;
  cursor: default;
}

.operator-cue-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operator-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.operator-section-actions button {
  min-height: 34px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.operator-section-actions button.active {
  border-color: rgba(27, 119, 132, 0.32);
  background: rgba(27, 119, 132, 0.12);
  color: var(--teal);
}

.operator-easy-view {
  display: grid;
  gap: 8px;
  max-height: 360px;
  margin-top: 8px;
  overflow: auto;
}

.operator-easy-view[hidden] {
  display: none;
}

.operator-easy-view button {
  min-height: 92px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.operator-easy-view button.active {
  border-color: rgba(27, 119, 132, 0.34);
  background: rgba(27, 119, 132, 0.1);
}

.operator-easy-view button:disabled {
  opacity: 0.55;
  cursor: default;
}

.operator-easy-view span,
.operator-easy-view strong,
.operator-easy-view p {
  display: block;
}

.operator-easy-view span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 950;
}

.operator-easy-view strong {
  margin: 3px 0 5px;
  font-size: 13px;
  font-weight: 950;
}

.operator-easy-view p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--muted);
  white-space: pre-line;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
}

.operator-deck-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operator-deck-grid button {
  min-height: 44px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.operator-deck-grid button[data-deck-type="response"] {
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.operator-deck-grid button[data-deck-type="announcement"] {
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.operator-deck-grid button[data-deck-type="media"] {
  background: rgba(53, 92, 140, 0.1);
  color: var(--sky-text);
}

.operator-media-panel {
  margin-top: 12px;
  border-top: 1px solid rgba(32, 35, 31, 0.1);
  padding-top: 2px;
}

.operator-storage-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.operator-storage-tabs button {
  min-height: 34px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.operator-storage-tabs button.active {
  border-color: rgba(53, 92, 140, 0.28);
  background: rgba(53, 92, 140, 0.12);
  color: var(--sky-text);
}

.source-provider-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 10px;
}

.source-provider-tabs button {
  min-height: 34px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.source-provider-tabs button.active {
  border-color: rgba(160, 74, 44, 0.34);
  background: var(--accent-primary-soft);
  color: var(--terracotta-text);
}

.source-provider-hint {
  margin-top: -2px;
}

.operator-media-bin {
  grid-template-columns: 1fr;
}

.operator-media-bin button {
  min-height: 64px;
  border: 1px solid var(--chrome-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(253, 252, 249, 0.08), rgba(196, 154, 69, 0.08)),
    var(--focus-bg);
  color: var(--focus-ink);
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.operator-media-bin button.active {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 0 2px rgba(196, 154, 69, 0.28);
}

.operator-media-bin button strong,
.operator-media-bin button span,
.operator-media-bin button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-media-bin button strong {
  font-size: 13px;
  font-weight: 950;
}

.operator-media-bin button span {
  color: rgba(255, 254, 250, 0.76);
  font-size: 11px;
  font-weight: 850;
}

.operator-media-bin button small {
  color: var(--accent-secondary);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.operator-quick-slide {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.operator-quick-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.operator-quick-presets button {
  min-height: 34px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.operator-quick-presets button:hover,
.operator-quick-presets button:focus-visible {
  border-color: rgba(27, 119, 132, 0.3);
  color: var(--teal);
}

.operator-quick-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.operator-load-program {
  min-height: 38px;
  border: 1px solid rgba(53, 92, 140, 0.22);
  border-radius: 999px;
  background: rgba(53, 92, 140, 0.1);
  color: var(--sky-text);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.operator-reflow-quick {
  min-width: 92px;
  min-height: 38px;
  border: 1px solid rgba(160, 74, 44, 0.28);
  border-radius: 999px;
  background: var(--accent-primary-soft);
  color: var(--terracotta-text);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.operator-quick-slide label {
  display: grid;
  gap: 4px;
}

.operator-quick-slide input,
.operator-quick-slide textarea {
  width: 100%;
  border: 1px solid rgba(32, 35, 31, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 800 13px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  padding: 9px 10px;
}

.operator-quick-slide textarea {
  min-height: 92px;
  resize: vertical;
}

.operator-quick-slide.message-mode [data-quick-title-label]::after {
  content: " (short name)";
  color: var(--teal);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.operator-quick-slide.message-mode #operatorQuickTitle {
  max-width: 18ch;
  border-color: rgba(27, 119, 132, 0.32);
  background: rgba(255, 255, 255, 0.92);
}

.operator-quick-slide.message-mode #operatorQuickText {
  min-height: 58px;
  color: rgba(58, 40, 32, 0.62);
}

.operator-reflow-list {
  display: grid;
  gap: 7px;
}

.operator-reflow-list[hidden] {
  display: none;
}

.operator-reflow-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  padding: 7px;
}

.operator-reflow-row strong,
.operator-reflow-row p {
  margin: 0;
}

.operator-reflow-row strong {
  color: var(--sky-text);
  font-size: 12px;
  font-weight: 950;
}

.operator-reflow-row p {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-reflow-row button {
  min-height: 34px;
  border-color: rgba(160, 74, 44, 0.28);
  background: var(--accent-primary-soft);
  color: var(--terracotta-text);
}

.operator-slide-preview {
  min-height: 190px;
  border-radius: 8px;
  background: #FDFCF9;
  color: #3A2820;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.slide-stage {
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  border: 1px solid rgba(196, 154, 69, 0.45);
  border-radius: 6px;
  background: #FDFCF9;
}

.slide-canvas {
  width: 1920px;
  height: 1080px;
  position: relative;
  transform-origin: top left;
  background: #FDFCF9;
  color: #3A2820;
  overflow: hidden;
}

.slide-text-box {
  position: absolute;
  left: 12%;
  top: 28%;
  width: 76%;
  cursor: grab;
  text-align: left;
  z-index: 1;
}

.slide-label {
  display: block;
  margin-bottom: 18px;
  color: #770007;
  font-family: var(--font-serif-display, "Crimson Pro", serif);
  font-size: 54px;
  font-weight: 700;
}

.slide-lyrics {
  margin: 0;
  color: #3A2820;
  font-family: var(--font-serif-display, "Crimson Pro", serif);
  font-size: 72px;
  font-weight: 600;
  line-height: 1.2;
}

.slide-canvas.theme-photo {
  background: #251813 center/cover no-repeat;
}
.maker-slide-canvas.theme-photo {
  background: #251813 center/cover no-repeat;
}
.program-background-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.slide-canvas.theme-photo .slide-text-box,
.maker-slide-canvas.theme-photo .maker-slide-text-box {
  width: 76%;
  min-height: 0;
  padding: 42px 52px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(244, 249, 247, 0.82));
  box-shadow: 0 28px 72px rgba(37, 24, 19, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px) saturate(0.82);
  -webkit-backdrop-filter: blur(14px) saturate(0.82);
}
.slide-canvas.theme-photo .slide-label,
.slide-canvas.theme-photo .slide-lyrics {
  color: #3A2820;
}
.slide-canvas.projection-reset-clear .slide-text-box {
  display: none;
}
.used-subset-language {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.used-subset-template-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.used-subset-template-buttons .mass-setting-pill {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 58px;
  padding: 8px 10px;
  text-align: left;
}
.used-subset-template-buttons .mass-setting-pill strong,
.used-subset-template-buttons .mass-setting-pill small {
  display: block;
}
.used-subset-template-buttons .mass-setting-pill small {
  margin-top: 3px;
  color: var(--muted, #75685f);
  font-size: 11px;
  line-height: 1.2;
}
@media (max-width: 760px) {
  .used-subset-template-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.maker-slide-canvas.theme-photo .maker-slide-label,
.maker-slide-canvas.theme-photo .maker-slide-lyrics {
  color: #3A2820;
}

.ordinary-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ordinary-order button {
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid #C49A45;
  border-radius: 6px;
  background: #FBF3E4;
  color: #3A2820;
  font-weight: 700;
  cursor: pointer;
}

.operator-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.operator-output-route {
  min-height: 70px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.operator-output-route small,
.operator-output-route strong,
.operator-output-route span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-output-route small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.operator-output-route strong {
  margin: 3px 0;
  font-size: 13px;
  font-weight: 950;
}

.operator-output-route span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.operator-output-route.active {
  border-color: rgba(27, 119, 132, 0.34);
  background: rgba(27, 119, 132, 0.11);
  color: var(--teal);
}

.operator-output-route.synced span {
  color: var(--accent-secondary);
}

.operator-output-route.warn span {
  color: var(--ink);
}

.operator-output-route.offline span {
  color: var(--accent-danger);
}

.operator-stage-composer {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 8px;
  background: var(--well-bg);
  padding: 10px;
}

.operator-stage-presets,
.operator-stage-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.operator-stage-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}

.operator-stage-presets button,
.operator-stage-actions button {
  min-height: 34px;
  border: 1px solid rgba(53, 92, 140, 0.18);
  border-radius: 999px;
  background: rgba(53, 92, 140, 0.08);
  color: var(--sky-text);
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.operator-stage-actions #operatorStageSend {
  background: var(--accent-primary);
  color: #FFFFFF;
}

.operator-stage-actions #operatorStageClear {
  min-width: 72px;
  background: rgba(32, 35, 31, 0.06);
  color: var(--muted);
}

.operator-stage-composer label {
  display: grid;
  gap: 4px;
}

.operator-stage-composer input {
  width: 100%;
  border: 1px solid rgba(32, 35, 31, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 800 13px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  padding: 9px 10px;
}

.operator-prop-composer {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  border: 1px solid rgba(191, 127, 32, 0.18);
  border-radius: 8px;
  background: rgba(255, 249, 237, 0.82);
  padding: 10px;
}

.operator-prop-presets,
.operator-prop-routes,
.operator-prop-actions {
  display: grid;
  gap: 6px;
}

.operator-prop-presets {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.operator-prop-routes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operator-prop-routes label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  padding: 0 9px;
}

.operator-prop-routes input {
  width: 12px;
  height: 12px;
  accent-color: var(--accent-primary);
}

.operator-prop-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(84px, 0.35fr);
  gap: 8px;
}

.operator-prop-fields label {
  display: grid;
  gap: 4px;
}

.operator-prop-fields input {
  width: 100%;
  border: 1px solid rgba(32, 35, 31, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 800 12px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  padding: 9px 10px;
}

.operator-hymnal-edition-field input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.operator-prop-presets button,
.operator-prop-actions button {
  min-height: 32px;
  border: 1px solid rgba(191, 127, 32, 0.22);
  border-radius: 999px;
  background: rgba(191, 127, 32, 0.1);
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.operator-prop-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}

.operator-prop-actions #operatorPropSend {
  background: var(--accent-primary);
  color: #FFFFFF;
}

.operator-prop-actions #operatorPropClear {
  min-width: 88px;
  background: rgba(32, 35, 31, 0.06);
  color: var(--muted);
}

.operator-comms-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  border: 1px solid rgba(62, 104, 140, 0.22);
  border-radius: 8px;
  background: var(--accent-info-soft);
  padding: 10px;
}

.operator-comms-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--sky-text);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.operator-comms-header small {
  color: var(--muted);
  font-size: 9px;
}

.operator-musician-presets,
.operator-musician-actions,
.operator-booth-chat {
  display: grid;
  gap: 6px;
}

.operator-musician-presets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operator-musician-actions {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.operator-booth-chat {
  grid-template-columns: minmax(0, 1fr) auto;
}

.operator-musician-presets button,
.operator-musician-actions button,
.operator-booth-chat button,
.operator-booth-chat-row button {
  min-height: 32px;
  border: 1px solid rgba(20, 94, 103, 0.2);
  border-radius: 999px;
  background: rgba(20, 94, 103, 0.1);
  color: var(--teal);
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.operator-musician-actions input,
.operator-booth-chat input {
  min-width: 0;
  border: 1px solid rgba(32, 35, 31, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 800 12px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  padding: 9px 10px;
}

.operator-booth-chat-log {
  display: grid;
  gap: 6px;
  min-height: 28px;
}

.operator-booth-chat-log > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.operator-booth-chat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(32, 35, 31, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  padding: 8px;
}

.operator-booth-chat-row strong,
.operator-booth-chat-row span {
  display: block;
}

.operator-booth-chat-row strong {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.2;
}

.operator-booth-chat-row span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.operator-preview-stack {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1fr);
  gap: 10px;
}

.operator-preview-pane {
  min-height: 190px;
  border: 1px solid rgba(32, 35, 31, 0.1);
  border-radius: 8px;
  background: rgba(246, 243, 235, 0.9);
  color: var(--ink);
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
}

.operator-preview-pane > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.operator-preview-pane strong {
  color: var(--sky-text);
  font-size: 20px;
  line-height: 1;
}

.operator-preview-pane p {
  margin: 0;
  white-space: pre-line;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.operator-preview-pane.media-preview {
  background: rgba(6, 31, 36, 0.08);
}

.operator-slide-preview.media-preview {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(42, 28, 21, 0.36), rgba(42, 28, 21, 0.72)),
    var(--operator-preview-image, linear-gradient(135deg, var(--focus-bg), var(--accent-primary)));
  background-position: center;
  background-size: cover;
}

.operator-slide-preview.media-preview::after {
  content: "MEDIA";
  position: absolute;
  right: 12px;
  bottom: 10px;
  border-radius: 999px;
  background: rgba(255, 254, 250, 0.18);
  color: rgba(255, 254, 250, 0.9);
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.operator-slide-preview span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.operator-slide-preview strong {
  font-size: 30px;
  line-height: 1;
}

.operator-slide-preview p {
  margin: 0;
  white-space: pre-line;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.35;
}

.operator-output-actions {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 10px;
}

.operator-output-actions #operatorUndo {
  border-color: rgba(53, 92, 140, 0.22);
  background: rgba(53, 92, 140, 0.1);
  color: var(--sky-text);
}

.operator-output-actions #operatorBlackout {
  background: #23231f;
  color: #fffefa;
}

.operator-output-actions #operatorLogo {
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.operator-output-actions #operatorProjectionReset {
  border-color: rgba(164, 62, 50, 0.22);
  background: rgba(164, 62, 50, 0.08);
  color: var(--terracotta-text);
}

.operator-undo-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

body.playback-operator-mode .rail,
body.playback-operator-mode .live-strip,
body.playback-operator-mode .stage-grid {
  display: none;
}

body.playback-operator-mode .app-shell {
  grid-template-columns: 1fr;
}

body.playback-operator-mode .playback-operator-panel {
  display: block;
}

body.operator-lockout .playback-operator-panel {
  outline: 3px solid rgba(35, 35, 31, 0.12);
  outline-offset: 3px;
}

/* ==========================================================================
   Playback Operator. Same house as hamburger: cream, Mission Wood, Inter.
   Not IBM Plex. Not white paper. Not black ink. Gilt is a hairline only.
   ========================================================================== */

body.playback-operator-mode {
  --operator-paper: #FBF3E4;
  --operator-paper-deep: #FAF1E0;
  --operator-paper-key: #FBF3E4;
  --operator-ink: #4A3B32;
  --operator-ink-deep: #4A3B32;
  --operator-muted: #6B5B46;
  --operator-gilt: #4A3B32;
  --operator-gilt-deep: #4A3B32;
  --operator-line: rgba(74, 59, 50, 0.22);
  --operator-line-strong: rgba(74, 59, 50, 0.34);
  --operator-key-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 0 rgba(58, 40, 32, 0.09),
    0 2px 4px rgba(36, 22, 16, 0.13);
  background: var(--operator-paper-deep);
  color: var(--operator-ink);
}

body.playback-operator-mode .home-escape-button,
body.playback-operator-mode .topbar {
  display: none;
}

body.playback-operator-mode .workspace {
  min-height: 100vh;
  padding: 20px 24px 32px;
  background:
    linear-gradient(rgba(58, 40, 32, 0.025) 1px, transparent 1px),
    var(--operator-paper-deep);
  background-size: 100% 24px;
}

body.playback-operator-mode .playback-operator-panel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px 24px;
  border: 1px solid var(--operator-line-strong);
  border-radius: 2px;
  background: #FBF3E4;
  box-shadow: none;
}

.operator-console-strip {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -24px 30px;
  padding: 0 16px;
  border-bottom: 1px solid var(--operator-line);
  color: var(--operator-muted);
  background: #FAF1E0;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operator-console-strip strong {
  color: var(--operator-ink);
  font-weight: 700;
}

.operator-console-strip i {
  margin: 0 5px;
  color: var(--operator-muted);
  font-style: normal;
}

body.playback-operator-mode .operator-hero {
  grid-template-columns: minmax(300px, 0.72fr) minmax(620px, 1.28fr);
  gap: 28px;
  align-items: center;
  margin: 0 0 22px;
  padding: 10px 12px 26px;
  border-bottom: 1px solid var(--operator-line);
}

body.playback-operator-mode .operator-hero > div,
body.playback-operator-mode .operator-card {
  border: 1px solid var(--operator-line);
  border-radius: 1px;
  background: #FBF3E4;
  box-shadow: none;
}

body.playback-operator-mode .operator-hero > div:first-child {
  border: 0;
  background: transparent;
  padding: 10px 0;
}

body.playback-operator-mode .operator-hero .eyebrow,
body.playback-operator-mode .operator-card .eyebrow {
  color: var(--operator-muted);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body.playback-operator-mode .operator-hero h2 {
  margin: 5px 0 2px;
  color: var(--operator-ink-deep);
  font-family: var(--font-serif-display);
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

body.playback-operator-mode .operator-hero > div:first-child > p:last-child {
  color: var(--operator-muted);
  font-family: var(--font-serif-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 560;
}

body.playback-operator-mode .operator-source-card {
  gap: 12px;
  padding: 14px;
  min-width: 0;
  overflow: hidden;
}

body.playback-operator-mode .operator-source-header {
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 0;
}

body.playback-operator-mode .operator-source-header > span {
  flex: 0 0 auto;
  color: var(--operator-ink-deep);
  font-family: var(--font-serif-display);
  font-size: 15px;
  font-weight: 680;
}

body.playback-operator-mode .operator-source-header p {
  margin: 0;
  color: var(--operator-muted);
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}

body.playback-operator-mode .operator-source-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.playback-operator-mode .operator-safety-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.72fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--operator-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.playback-operator-mode .playback-operator-panel button,
body.playback-operator-mode .playback-operator-panel .display-link {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--operator-line-strong);
  border-radius: 2px;
  background: #FBF3E4;
  color: var(--operator-ink);
  box-shadow: none;
  font-family: var(--font-sans);
  font-weight: 700;
}

body.playback-operator-mode .playback-operator-panel button:hover:not(:disabled),
body.playback-operator-mode .playback-operator-panel button:focus-visible,
body.playback-operator-mode .playback-operator-panel .display-link:focus-visible {
  border-color: var(--operator-ink);
  color: var(--operator-ink-deep);
  outline: 2px solid var(--operator-ink-deep);
  outline-offset: 2px;
}

body.playback-operator-mode .playback-operator-panel button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 3px rgba(58, 40, 32, 0.14),
    0 1px 2px rgba(36, 22, 16, 0.1);
}

body.playback-operator-mode .playback-operator-panel button.active,
body.playback-operator-mode .operator-output-route.active {
  border-color: #4A3B32;
  border-left: 3px solid #4A3B32;
  background: #F3E9D0;
  color: var(--operator-ink-deep);
}

body.playback-operator-mode .operator-source-toggle button,
body.playback-operator-mode #operatorLockoutToggle {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-radius: 2px;
  color: var(--operator-ink);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.playback-operator-mode #operatorLockoutToggle {
  background: linear-gradient(145deg, var(--operator-paper-key), #f3ecdd);
  color: var(--operator-ink);
}

.operator-switch-track {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 17px;
  border: 1px solid rgba(58, 40, 32, 0.42);
  border-radius: 12px;
  background: #eee5d6;
  box-shadow: inset 0 2px 4px rgba(36, 22, 16, 0.14);
}

.operator-switch-track > span {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--operator-ink-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 160ms ease;
}

body.playback-operator-mode .operator-source-toggle button.active .operator-switch-track > span {
  transform: translateX(16px);
}

body.playback-operator-mode .operator-grid {
  grid-template-columns: minmax(300px, 0.95fr) minmax(280px, 0.82fr) minmax(420px, 1.23fr);
  gap: 14px;
}

body.playback-operator-mode .operator-card {
  padding: 18px;
}

body.playback-operator-mode .operator-card-output {
  grid-column: 1 / -1;
}

body.playback-operator-mode .operator-card-header,
body.playback-operator-mode .operator-subheader {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--operator-line);
}

body.playback-operator-mode .operator-card-header h3,
body.playback-operator-mode .operator-subheader h4 {
  color: var(--operator-ink-deep);
  font-family: var(--font-serif-display);
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
}

body.playback-operator-mode .operator-subheader h4 {
  font-size: 19px;
}

body.playback-operator-mode .operator-card-header > span,
body.playback-operator-mode .operator-subheader > span {
  border: 1px solid var(--operator-line);
  border-radius: 1px;
  background: transparent;
  color: var(--operator-muted);
  padding: 5px 8px;
  font-family: var(--font-sans);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.playback-operator-mode .operator-piece-list {
  max-height: 590px;
}

body.playback-operator-mode .operator-piece-list::before {
  content: "";
  display: none;
}

body.playback-operator-mode .operator-piece-list button.operator-timeline-row {
  grid-template-columns: 26px minmax(120px, 1fr) minmax(80px, 0.55fr);
  grid-template-rows: repeat(4, auto);
  gap: 2px 10px;
  min-height: 76px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--operator-line);
  background: transparent;
  box-shadow: none;
}

body.playback-operator-mode .operator-timeline-row .timeline-num {
  grid-column: 1;
  grid-row: 1 / -1;
  place-self: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--operator-muted);
  font-family: var(--font-sans);
  font-size: 9px;
}

body.playback-operator-mode .operator-timeline-row .timeline-main {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}

body.playback-operator-mode .operator-timeline-row .timeline-main strong {
  color: var(--operator-ink-deep);
  font-family: var(--font-serif-display);
  font-size: 15px;
}

body.playback-operator-mode .operator-timeline-row .timeline-main em,
body.playback-operator-mode .operator-timeline-row .timeline-owner,
body.playback-operator-mode .operator-timeline-row .timeline-ready {
  color: var(--operator-muted);
  font-size: 11px;
  white-space: normal;
}

body.playback-operator-mode .operator-timeline-row .timeline-chip,
body.playback-operator-mode .operator-timeline-row .timeline-owner,
body.playback-operator-mode .operator-timeline-row .timeline-ready,
body.playback-operator-mode .operator-timeline-row .timeline-action {
  grid-column: 3;
  border-radius: 0;
  background: transparent;
  color: var(--operator-muted);
  padding: 0;
  font-family: var(--font-sans);
  font-size: 8px;
  text-align: right;
  text-transform: uppercase;
}

body.playback-operator-mode .operator-timeline-row .timeline-chip:nth-child(3) { grid-row: 1; }
body.playback-operator-mode .operator-timeline-row .timeline-chip:nth-child(4) { grid-row: 2; }
body.playback-operator-mode .operator-timeline-row .timeline-owner { grid-row: 3; }
body.playback-operator-mode .operator-timeline-row .timeline-ready { display: none; }
body.playback-operator-mode .operator-timeline-row .timeline-action { grid-row: 4; color: var(--operator-muted); }

body.playback-operator-mode .operator-piece-list button.active {
  border-left: 2px solid var(--operator-gilt-deep);
  background: rgba(243, 236, 221, 0.72);
}

body.playback-operator-mode .operator-cue-grid button,
body.playback-operator-mode .operator-section-actions button,
body.playback-operator-mode .operator-storage-tabs button,
body.playback-operator-mode .operator-quick-presets button,
body.playback-operator-mode .operator-output-actions button,
body.playback-operator-mode .operator-stage-presets button,
body.playback-operator-mode .operator-stage-actions button,
body.playback-operator-mode .operator-prop-presets button,
body.playback-operator-mode .operator-prop-actions button,
body.playback-operator-mode .operator-musician-presets button,
body.playback-operator-mode .operator-musician-actions button,
body.playback-operator-mode .operator-booth-chat button {
  border-radius: 2px;
  background: linear-gradient(145deg, var(--operator-paper-key), #f3ecdd);
  color: var(--operator-ink);
}

body.playback-operator-mode .operator-cue-grid button {
  min-height: 64px;
}

body.playback-operator-mode .operator-cue-grid button strong,
body.playback-operator-mode .operator-cue-grid button span {
  color: var(--operator-ink);
}

body.playback-operator-mode .operator-deck-grid button {
  min-height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid var(--operator-line-strong);
  border-radius: 2px;
  background: linear-gradient(145deg, var(--operator-paper-key), #f3ecdd);
  color: var(--operator-ink-deep);
  box-shadow: var(--operator-key-shadow);
  font-family: var(--font-serif-display);
  font-size: 14px;
}

body.playback-operator-mode .operator-deck-grid button.active {
  border-left: 2px solid var(--operator-gilt-deep);
  background: linear-gradient(145deg, var(--operator-paper-key), #f3ecdd);
  color: var(--operator-ink-deep);
}

body.playback-operator-mode .projection-deck-controls {
  gap: 6px;
  margin-top: 8px;
  padding: 6px;
  background: var(--operator-ink-deep);
}

body.playback-operator-mode .projection-deck-controls button {
  border-color: var(--operator-line-strong);
  border-radius: 1px;
  background: linear-gradient(145deg, var(--operator-paper-key), #f3ecdd);
  color: var(--operator-ink);
}

body.playback-operator-mode .operator-media-panel {
  margin-top: 20px;
  border-top-color: var(--operator-line);
}

body.playback-operator-mode .operator-prop-routes input[type="checkbox"]:checked {
  border-color: var(--operator-ink-deep);
  background: var(--operator-ink-deep);
  box-shadow: inset 0 0 0 3px var(--operator-paper-key);
  accent-color: var(--operator-ink-deep);
}

body.playback-operator-mode .operator-media-bin {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.playback-operator-mode .operator-media-bin button {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 78px 8px 9px;
  border-radius: 1px;
  background:
    linear-gradient(to bottom, var(--operator-ink-deep) 0 68px, transparent 68px),
    linear-gradient(145deg, var(--operator-paper-key), #f3ecdd);
  color: var(--operator-ink);
  text-align: left;
}

body.playback-operator-mode .operator-media-bin button::before {
  content: "";
  position: absolute;
  inset: 8px 8px auto;
  height: 58px;
  opacity: 0.48;
  background: linear-gradient(130deg, transparent 0 32%, rgba(250, 248, 243, 0.38) 33% 34%, transparent 35% 62%, rgba(250, 248, 243, 0.28) 63% 64%, transparent 65%);
}

body.playback-operator-mode .operator-media-bin button {
  position: relative;
}

body.playback-operator-mode .operator-media-bin button strong,
body.playback-operator-mode .operator-media-bin button span {
  color: var(--operator-ink);
}

body.playback-operator-mode .operator-media-bin button small {
  color: var(--operator-muted);
}

body.playback-operator-mode .operator-quick-slide,
body.playback-operator-mode .operator-stage-composer,
body.playback-operator-mode .operator-prop-composer,
body.playback-operator-mode .operator-comms-panel {
  border-color: var(--operator-line);
  border-radius: 1px;
  background: rgba(243, 236, 221, 0.45);
}

body.playback-operator-mode .operator-quick-slide input,
body.playback-operator-mode .operator-quick-slide textarea,
body.playback-operator-mode .operator-stage-composer input,
body.playback-operator-mode .operator-prop-fields input,
body.playback-operator-mode .operator-musician-actions input,
body.playback-operator-mode .operator-booth-chat input {
  border-color: var(--operator-line);
  border-radius: 1px;
  background: var(--operator-paper-key);
  color: var(--operator-ink);
  font-family: var(--font-sans);
  font-weight: 600;
}

body.playback-operator-mode .operator-output-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.playback-operator-mode .operator-output-route {
  border-radius: 1px;
  background: linear-gradient(145deg, var(--operator-paper-key), #f3ecdd);
  color: var(--operator-ink);
  box-shadow: var(--operator-key-shadow);
}

body.playback-operator-mode .operator-output-route small,
body.playback-operator-mode .operator-output-route span,
body.playback-operator-mode .operator-output-route.synced span,
body.playback-operator-mode .operator-output-route.warn span {
  color: var(--operator-muted);
}

body.playback-operator-mode .operator-output-route.offline span {
  color: var(--accent-danger);
}

body.playback-operator-mode .operator-preview-pane {
  border-color: var(--operator-line);
  border-radius: 1px;
  background: var(--operator-paper-deep);
  color: var(--operator-ink);
}

body.playback-operator-mode .operator-preview-pane strong {
  color: var(--operator-ink-deep);
  font-family: var(--font-serif-display);
}

body.playback-operator-mode .operator-slide-preview {
  border: 1px solid var(--operator-line-strong);
  border-radius: 2px;
  background: #FBF3E4;
  color: #4A3B32;
}

body.playback-operator-mode .operator-output-actions #operatorUndo,
body.playback-operator-mode .operator-output-actions #operatorBlackout,
body.playback-operator-mode .operator-output-actions #operatorLogo,
body.playback-operator-mode .operator-stage-actions #operatorStageSend,
body.playback-operator-mode .operator-prop-actions #operatorPropSend {
  border-color: var(--operator-line-strong);
  background: linear-gradient(145deg, var(--operator-paper-key), #f3ecdd);
  color: var(--operator-ink);
}

body.playback-operator-mode .operator-comms-header,
body.playback-operator-mode .operator-reflow-row strong {
  color: var(--operator-ink);
}

body.playback-operator-mode .playback-operator-panel .display-link {
  min-height: 38px;
  display: grid;
  place-items: center;
  margin-top: 10px;
  padding: 0 14px;
  text-decoration: none;
}

body.playback-operator-mode.operator-lockout .playback-operator-panel {
  outline-color: rgba(58, 40, 32, 0.25);
}

.control-block {
  padding: 16px;
}

.side-panel .control-block,
.gn-floating-layer > .metronome-block {
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.block-header h3 {
  font-size: 18px;
}

.block-header.compact {
  margin-bottom: 12px;
}

.metronome-display {
  min-height: 126px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--well-bg);
  box-shadow: var(--shadow-inset);
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
}

.metronome-icon {
  width: 88px;
  height: 104px;
  margin: auto;
  position: relative;
  display: grid;
  place-items: end center;
  filter: drop-shadow(0 10px 16px rgba(58, 40, 32, 0.16));
}

.metronome-icon::before {
  content: "";
  position: absolute;
  bottom: 12px;
  width: 54px;
  height: 82px;
  background: linear-gradient(140deg, var(--canvas) 0%, var(--well-bg) 56%, var(--accent-secondary) 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 1px solid rgba(58, 40, 32, 0.16);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.32);
}

.metronome-icon::after {
  content: "";
  position: absolute;
  bottom: 16px;
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--ink);
  z-index: 4;
}

.metronome-base {
  width: 68px;
  height: 14px;
  border-radius: 3px 3px 6px 6px;
  background: linear-gradient(180deg, var(--accent-terracotta), var(--chrome-bg));
  position: relative;
  z-index: 2;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.metronome-arm {
  position: absolute;
  bottom: 17px;
  width: 3px;
  height: 72px;
  background: var(--ink);
  transform-origin: bottom center;
  transform: rotate(-22deg);
  z-index: 3;
  transition: transform 120ms cubic-bezier(0.25, 0.95, 0.45, 1.2);
}

.metronome-arm::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 16px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--accent-secondary);
  border: 1px solid rgba(32, 20, 15, 0.18);
  border-radius: 2px;
  transition: background 0.12s ease, transform 0.12s ease;
}

.metronome-icon.tick .metronome-base {
  transform: scaleX(1.07);
  box-shadow: 0 4px 10px rgba(86, 59, 29, 0.18);
}

.metronome-icon.tick::after {
  animation: pivot-pop 0.18s ease;
}

@keyframes pivot-pop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .count-in-progress-cell {
    transition: opacity 90ms ease, box-shadow 90ms ease;
  }

  .count-in-progress-cell[data-active="true"] {
    transform: none;
  }
}

.beat-dots {
  display: grid;
  grid-template-columns: repeat(4, minmax(22px, 1fr));
  gap: 7px;
  justify-content: center;
  align-items: start;
}

.beat-cluster {
  display: grid;
  gap: 5px;
  justify-items: center;
}

.beat-dot {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: #fff;
}

.beat-dot.active {
  background: var(--accent-terracotta);
  border-color: var(--accent-terracotta);
}

.bpm-row {
  justify-content: center;
  margin: 14px 0;
}

.bpm-row div {
  min-width: 98px;
  text-align: center;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bpm-row span {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 850;
}

.bpm-row small {
  color: var(--muted);
  font-weight: 750;
}

.metronome-mode {
  margin: 8px 0 0;
  color: var(--terracotta-text);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.metronome-count-in-control {
  display: grid;
  gap: 8px;
  margin: 2px 0 14px;
}

.metronome-count-in-control .secondary-action {
  width: 100%;
}

.metronome-count-in-control .count-in-action {
  border-color: var(--accent-secondary);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.metronome-count-in-control .count-in-action[aria-disabled="true"] {
  opacity: 0.58;
}

.metronome-count-in-control .hint {
  margin: -2px 0 2px;
  text-align: center;
}

.secondary-action.locked {
  border-color: var(--accent-secondary);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.stepper {
  width: 42px;
  padding: 0;
  font-size: 22px;
}

.metronome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.metronome-grid label,
.range-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.range-label {
  margin-top: 12px;
}

.range-label strong {
  color: var(--ink);
}

input[type="range"] {
  width: 100%;
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.toggle-grid label {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--well-bg);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.turner-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--well-bg);
}

.turner-grid.midi {
  gap: 4px 6px;
}

.turner-grid.midi span,
.turner-grid.midi strong {
  min-height: 30px;
  display: flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 6px 8px;
}

.turner-grid.midi span {
  border-radius: 6px 0 0 6px;
}

.turner-grid.midi strong {
  justify-content: flex-end;
  border-radius: 0 6px 6px 0;
}

.turner-grid.midi.compact span,
.turner-grid.midi.compact strong {
  min-height: 28px;
  padding: 5px 7px;
}

.turner-grid span {
  color: var(--muted);
  font-size: 12px;
}

.turner-grid strong {
  font-size: 12px;
  text-align: right;
}

.turner-settings {
  margin-top: 10px;
}

.nav-visibility-toggle,
.tap-zone-toggle {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 250, 0.72);
}

.nav-visibility-toggle span,
.tap-zone-toggle span {
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-visibility-toggle button,
.tap-zone-toggle button {
  min-height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}

.nav-visibility-toggle button.active,
.tap-zone-toggle button.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #FFFFFF;
}

.turner-midi {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.turner-midi-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.turner-midi-summary strong {
  font-size: 12px;
}

.turner-midi-summary span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.turner-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.turner-actions .ghost-action {
  flex: 1;
  min-width: 120px;
}

.select-label.light {
  color: var(--muted);
}

.chart-resolution {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--well-bg);
}

.chart-resolution span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.chart-resolution strong {
  font-size: 13px;
  line-height: 1.25;
}

.chart-map-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.chart-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdfa;
}

.chart-map-row strong,
.chart-map-row span {
  display: block;
}

.chart-map-row strong {
  font-size: 12px;
}

.chart-map-row span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.chart-map-row em {
  color: var(--terracotta-text);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.role-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--well-bg);
}

.role-segment button {
  min-height: 34px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.role-segment button.active {
  background: var(--accent-primary);
  color: #FFFFFF;
}

.room-device-name {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
}

.room-device-name input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdfa;
  color: var(--ink);
  padding: 0 10px;
  font-weight: 750;
}

.local-room-toggle {
  margin-top: 8px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdfa;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.local-room-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
}

.room-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdfa;
}

.room-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.room-grid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  text-align: right;
}

.room-grid strong.warn {
  color: var(--accent-secondary);
}

.room-roster {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.room-roster-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdfa;
}

.room-roster-row.has-actions {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.room-roster-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.room-roster-action {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.room-roster-action.grant {
  border-color: var(--accent-secondary);
  background: var(--gold-soft);
  color: var(--ink);
}

.room-roster-action:disabled {
  opacity: 0.55;
}

.room-roster-row strong,
.room-roster-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-roster-row strong {
  display: block;
  font-size: 12px;
}

.room-roster-row span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.network-recovery {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--accent-secondary);
  border-radius: 6px;
  background: var(--gold-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.network-recovery[hidden] {
  display: none;
}

.network-recovery button {
  min-height: 30px;
  border-radius: 6px;
  background: var(--accent-secondary);
  color: #FFFFFF;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.song-shepherd-action {
  width: 100%;
  min-height: 38px;
  margin: 8px 0 0;
}

.share-grid .display-link {
  margin-top: 10px;
}

/* R70: joining stays inside the room panel, with the short code as the
   primary path and camera scanning as the quiet fallback. */
.room-join-card {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 34%, var(--line));
  border-radius: 14px;
  background: linear-gradient(145deg, var(--gold-soft), var(--panel) 58%);
  box-shadow: 0 8px 24px rgba(55, 43, 32, 0.08);
}

.room-join-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.room-join-heading .eyebrow,
.room-join-heading h4 {
  margin: 0;
}

.room-join-heading h4 {
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--font-serif-display);
  font-size: 20px;
  line-height: 1.1;
}

.room-join-heading > span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.room-code-form label {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.room-code-form > p {
  margin: 3px 0 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.room-code-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.room-code-form input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 2px solid color-mix(in srgb, var(--accent-secondary) 62%, var(--line));
  border-radius: 9px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 11px;
  font: 900 18px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.room-code-form input::placeholder {
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}

.room-code-form input[aria-invalid="true"] {
  border-color: var(--danger);
}

.room-code-form button {
  min-height: 46px;
  border-radius: 9px;
  background: var(--accent-secondary);
  color: #ffffff;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.room-join-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room-join-divider::before,
.room-join-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.room-scan-start {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.room-scan-start svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.room-scan-start[aria-pressed="true"] {
  border-color: var(--accent-secondary);
  color: var(--accent-secondary);
}

.room-scanner {
  position: relative;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 11px;
  background: #161616;
  aspect-ratio: 4 / 3;
}

.room-scanner[hidden] {
  display: none;
}

.room-scanner video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.room-scanner-frame {
  position: absolute;
  inset: 15%;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.room-scanner button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.78);
  color: #ffffff;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.room-join-status {
  min-height: 17px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.room-join-status[data-tone="ok"] {
  color: var(--green-deep);
}

.room-join-status[data-tone="warn"] {
  color: var(--mustard-text);
}

.room-join-status[data-tone="error"] {
  color: var(--danger);
}

/* C7 F3: Live Room panel "Join by QR" card + enlarged modal. Reveal-flow-only
   UI; the QR canvas paints dark modules in the token ink on white. */
.room-qr-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.room-qr-card canvas {
  width: min(232px, 100%);
  height: auto;
  cursor: zoom-in;
  image-rendering: pixelated;
  background: #ffffff;
  border-radius: 8px;
}

.room-qr-room-name {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.room-qr-code {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.room-qr-code > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlay.room-qr-overlay {
  z-index: var(--gn-layer-modal-raised);
}

.room-qr-overlay .overlay-backdrop {
  background: rgba(23, 25, 22, 0.72);
}

.room-qr-overlay .room-qr-overlay-panel {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  max-height: min(94vh, 820px);
  overflow: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: var(--shadow);
  cursor: default;
}

.room-qr-overlay-panel > .eyebrow {
  margin: 0;
}

.room-qr-overlay-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(48, 38, 30, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(48, 38, 30, 0.12);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

/* Live Room cleanup: one panel, two plain-English paths, and no overlapping
   account/operator cards. Transport details remain in hidden semantic state. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.live-room-block {
  --room-card-bg: color-mix(in srgb, var(--panel) 94%, var(--gold-soft));
}

.live-room-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.live-room-header .device-badge {
  justify-self: end;
  background: var(--gold-soft);
  color: var(--ink);
}

.live-room-block .role-segment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  padding: 3px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--well-bg) 82%, var(--panel));
}

.live-room-block .role-segment button {
  min-height: 40px;
  border-radius: 8px;
  font-size: 12px;
}

.live-room-block .role-segment button.active {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(48, 38, 30, 0.16);
}

.live-room-role-summary {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.live-room-view[hidden],
.room-qr-card[hidden],
.room-qr-card canvas[hidden],
.room-qr-loading[hidden],
.room-technical-state[hidden] {
  display: none;
}

.room-code-card,
.live-room-block .room-join-card,
.room-people,
.live-room-block .room-qr-card {
  margin: 12px 0 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--room-card-bg);
  box-shadow: none;
}

.room-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.room-section-heading .eyebrow,
.room-section-heading h4 {
  margin: 0;
}

.room-section-heading h4 {
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--font-serif-display);
  font-size: 18px;
  line-height: 1.12;
}

.room-section-heading > span,
.room-section-heading > strong {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.leader-room-code-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.leader-room-code-form input,
.live-room-block .room-code-form input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 2px solid color-mix(in srgb, var(--accent-secondary) 54%, var(--line));
  border-radius: 9px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 11px;
  font: 900 20px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}

.leader-room-code-form input[aria-invalid="true"] {
  border-color: var(--danger);
}

.leader-room-code-form button,
.live-room-block .room-code-form button {
  min-height: 46px;
  border-radius: 9px;
  background: var(--accent-secondary);
  color: #ffffff;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

#leaderRoomCodeHelp,
.live-room-block .room-code-form > p {
  margin: 7px 1px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.live-room-block .room-qr-card {
  display: block;
  justify-items: initial;
  text-align: left;
}

.room-qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 174px) minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.live-room-block .room-qr-card canvas {
  width: 100%;
  max-width: 174px;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 9px;
  background: #ffffff;
}

.room-qr-copy {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 7px;
}

.room-qr-copy .room-qr-code {
  justify-items: start;
}

.room-qr-copy .room-qr-room-name {
  font-size: 25px;
  letter-spacing: 0.03em;
}

.room-qr-copy .hint,
.room-qr-loading {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.room-qr-enlarge {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.live-room-block .room-code-form > div {
  margin-top: 8px;
}

.live-room-block .room-join-divider {
  margin: 10px 0 8px;
}

.room-people-heading {
  align-items: center;
}

.room-people-heading > strong {
  min-width: 34px;
  text-align: center;
  background: var(--ink);
  color: #ffffff;
}

.room-people .room-device-name {
  margin-top: 0;
}

.room-people .room-roster {
  margin-top: 9px;
}

.room-people .room-roster-row {
  border-radius: 9px;
  background: #ffffff;
}

.room-people .catch-up-action {
  width: 100%;
  min-height: 38px;
  margin-top: 9px;
}

@media (max-width: 420px) {
  .room-qr-layout {
    grid-template-columns: 1fr;
  }

  .live-room-block .room-qr-card canvas {
    max-width: 210px;
  }

  .room-qr-copy,
  .room-qr-copy .room-qr-code {
    justify-items: center;
    text-align: center;
  }

  .leader-room-code-form {
    grid-template-columns: 1fr;
  }
}

.browser-join-tip {
  position: fixed;
  z-index: var(--gn-layer-system);
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  width: min(680px, calc(100vw - 24px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 45%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 12px 34px rgba(42, 31, 24, 0.22);
  backdrop-filter: blur(14px);
}

.browser-join-tip[hidden] {
  display: none;
}

.browser-join-tip > span {
  padding: 5px 7px;
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--mustard-text);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.browser-join-tip p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.browser-join-tip button {
  min-height: 34px;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 520px) {
  .room-code-form > div {
    grid-template-columns: 1fr;
  }

  .browser-join-tip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .browser-join-tip > span {
    display: none;
  }
}

/* share-1: reveal-flow sharing; never adds persistent chrome over the score. */
body.share-open { overflow: hidden; }

.share-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-modal);
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.share-overlay[hidden] { display: none; }

.share-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(38, 28, 23, 0.58);
}

.share-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: min(780px, 100%);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 26px 70px rgba(38, 28, 23, 0.3);
}

.share-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.share-heading h2 { margin: 2px 0 0; font: 700 2rem/1 var(--font-display); }
.share-heading .icon-button { flex: 0 0 auto; font-size: 24px; }

.share-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
  padding: 5px;
  border-radius: 14px;
  background: var(--well-bg);
}

.share-scope button,
.share-actions button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.share-scope button.active { border-color: var(--accent-secondary); background: var(--panel); box-shadow: var(--shadow-soft); }
.share-summary { margin: 18px 0 8px; font-weight: 900; }

.share-url {
  display: block;
  max-height: 82px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--well-bg);
  color: var(--ink-muted);
  font: 700 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.share-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.share-actions button { border-color: var(--accent-primary); background: var(--button-bg); }
.share-actions button:first-child { background: var(--accent-primary); color: #fff; }

.share-qr { margin-top: 18px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.share-qr[hidden] { display: none; }
.share-qr canvas { width: min(320px, 100%); height: auto; border-radius: 10px; background: #fff; image-rendering: pixelated; }
.share-qr p { margin: 0; color: var(--ink-muted); font-size: 12px; font-weight: 800; }

@media (max-width: 600px) {
  .share-actions { grid-template-columns: 1fr; }
}

.room-qr-overlay-panel canvas {
  width: min(68vmin, 560px, calc(100vw - 72px));
  height: auto;
  image-rendering: pixelated;
  background: #ffffff;
}


body.pedal-turn .score-page {
  box-shadow: 0 0 0 4px rgba(53, 92, 140, 0.22), 0 22px 38px rgba(32, 35, 31, 0.18);
}

body.tap-turn .score-page {
  box-shadow: 0 0 0 4px rgba(178, 123, 42, 0.22), 0 22px 38px rgba(32, 35, 31, 0.18);
}

.switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch span {
  width: 46px;
  height: 26px;
  border-radius: 99px;
  background: var(--disabled-bg);
  position: relative;
  transition: background 160ms ease;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 99px;
  background: #fff;
  transition: transform 160ms ease;
}

.switch input:checked + span {
  background: var(--accent-primary);
}

.switch input:checked + span::after {
  transform: translateX(20px);
}

.slide-preview {
  min-height: 154px;
  background: var(--focus-bg);
  color: var(--focus-ink);
  border: 1px solid var(--chrome-bg);
  padding: 18px;
  display: grid;
  align-content: center;
  text-align: center;
}

.slide-preview.text-slide {
  aspect-ratio: 16 / 9;
  min-height: 0;
  align-content: center;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(253, 252, 249, 0.08), rgba(253, 252, 249, 0)),
    var(--focus-bg);
}

.slide-preview.text-slide[data-density="medium"] {
  padding: 16px;
}

.slide-preview.text-slide[data-density="dense"] {
  padding: 14px;
}

.slide-preview.real-slide {
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  background-color: #FFFFFF;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-color: var(--line);
}

.slide-preview.real-slide span,
.slide-preview.real-slide strong,
.slide-preview.real-slide p {
  display: none;
}

.slide-preview span {
  color: var(--accent-secondary);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 850;
}

.slide-preview strong {
  font-size: 22px;
  margin: 4px 0 8px;
}

.slide-preview p {
  margin: 0;
  line-height: 1.35;
}

.slide-preview.text-slide[data-density="medium"] p {
  font-size: 13px;
  line-height: 1.25;
}

.slide-preview.text-slide[data-density="dense"] p {
  font-size: 12px;
  line-height: 1.18;
}

.hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 10px 0 0;
}

.device-list {
  display: grid;
  gap: 8px;
}

.device-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--well-bg);
}

.device-row strong,
.device-row span {
  display: block;
}

.device-row strong {
  font-size: 13px;
}

.device-row span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.device-badge {
  color: var(--mustard-text);
  background: var(--accent-secondary-soft);
  border: 1px solid var(--accent-secondary);
  font-size: 11px;
  font-weight: 850;
  padding: 4px 7px;
  border-radius: 99px;
}

.device-badge.disengaged {
  color: var(--accent-danger);
  background: var(--accent-danger-soft);
  border-color: var(--accent-danger);
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .rail {
    position: static;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .piece-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .stage-grid {
    grid-template-columns: 1fr;
  }

  .side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-hero,
  .operator-grid {
    grid-template-columns: 1fr 1fr;
  }

  .operator-card-output {
    grid-column: span 2;
  }

  body.playback-operator-mode .operator-hero,
  body.playback-operator-mode .operator-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.playback-operator-mode .operator-card-output {
    grid-column: 1 / -1;
  }

  body.playback-operator-mode .operator-output-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .workspace {
    padding: 12px;
  }

  .topbar,
  .score-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: space-between;
  }

  .reader-left,
  .reader-right {
    min-width: 0;
  }

  .live-strip {
    grid-template-columns: 1fr 1fr;
  }

  .piece-list,
  .side-panel,
  .metronome-grid {
    grid-template-columns: 1fr;
  }

  .score-reader {
    padding: 16px;
  }

  .score-page {
    min-height: 520px;
    padding: 24px;
  }

  .metronome-display {
    grid-template-columns: 1fr;
  }

  .operator-hero,
  .operator-grid,
  .operator-source-toggle,
  .operator-cue-grid,
  .operator-deck-grid,
  .operator-storage-tabs,
  .operator-output-grid,
  .operator-preview-stack,
  .operator-output-actions {
    grid-template-columns: 1fr;
  }

  .operator-card-output {
    grid-column: auto;
  }

  .operator-piece-list::before {
    content: "Music List";
  }

  .operator-piece-list button.operator-timeline-row {
    grid-template-columns: 24px minmax(0, 1fr) 54px;
  }

  .operator-timeline-row .timeline-owner,
  .operator-timeline-row .timeline-ready,
  .operator-timeline-row .timeline-action {
    grid-column: 2 / -1;
  }

  .operator-quick-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-quick-actions,
  .operator-reflow-row,
  .operator-stage-presets,
  .operator-stage-actions,
  .operator-prop-presets,
  .operator-prop-routes,
  .operator-prop-fields,
  .operator-prop-actions,
  .operator-musician-presets,
  .operator-musician-actions,
  .operator-booth-chat {
    grid-template-columns: 1fr;
  }

  .operator-hero h2 {
    font-size: 27px;
  }

  .operator-slide-preview {
    min-height: 170px;
    padding: 20px;
  }

  .operator-slide-preview strong {
    font-size: 25px;
  }

  .operator-console-strip {
    align-items: flex-start;
    flex-direction: column;
    padding: 9px 12px;
  }

  body.playback-operator-mode .playback-operator-panel {
    padding-right: 14px;
    padding-left: 14px;
  }

  body.playback-operator-mode .operator-console-strip {
    margin-right: -14px;
    margin-left: -14px;
  }

  body.playback-operator-mode .operator-hero,
  body.playback-operator-mode .operator-grid,
  body.playback-operator-mode .operator-source-toggle,
  body.playback-operator-mode .operator-safety-toggle,
  body.playback-operator-mode .operator-output-grid,
  body.playback-operator-mode .operator-media-bin {
    grid-template-columns: 1fr;
  }
}

body.reader-focus {
  background: var(--focus-bg);
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.reader-focus .app-shell {
  min-height: 100vh;
  grid-template-columns: 1fr;
}

body.reader-focus .rail,
body.reader-focus .topbar,
body.reader-focus .live-strip {
  display: none;
}

body.reader-focus .workspace {
  min-height: 100vh;
  padding: 0;
  display: block;
}

body.reader-focus .stage-grid {
  min-height: 100vh;
  display: block;
  position: relative;
}

body.reader-focus.playback-operator-mode .stage-grid,
body.reader-focus.playback-operator-mode .live-strip,
body.reader-focus.playback-operator-mode .rail {
  display: none !important;
}

body.reader-focus.playback-operator-mode .workspace {
  width: 100%;
  max-width: none;
  overflow: auto;
  background: var(--operator-paper-deep, #f3ecdd);
}

body.reader-focus.playback-operator-mode .playback-operator-panel {
  display: block !important;
  position: relative;
  z-index: 2;
}

body.reader-focus .score-panel {
  min-height: 100vh;
  border: 0;
  box-shadow: none;
  grid-template-rows: 1fr;
  overflow: hidden;
}

body.reader-focus .score-toolbar,
body.reader-focus .cue-dock {
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: var(--gn-layer-chrome);
  border: 1px solid var(--chrome-border);
  box-shadow: var(--shadow);
  transition: opacity 160ms ease, transform 160ms ease;
}

body.reader-focus .score-toolbar {
  top: 14px;
  left: var(--home-escape-enclave-width);
  align-items: center;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.reader-focus.annotation-mode .score-toolbar {
  right: 80px;
}

body.reader-focus.annotation-mode.edit-rail-left .score-toolbar,
body.reader-focus.annotation-mode .score-reader.edit-rail-left .score-toolbar {
  left: 80px;
  right: 16px;
}

body.reader-focus .reader-left,
body.reader-focus .reader-right,
body.reader-focus .reader-title {
  min-height: 56px;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  background: var(--toolbar-bg);
  color: var(--toolbar-ink);
  box-shadow: var(--shadow);
}

body.reader-focus .reader-left,
body.reader-focus .reader-right {
  padding: 6px;
}

body.reader-focus .reader-title {
  display: grid;
  align-content: center;
  padding: 6px 18px;
}

body.reader-focus .reader-title span {
  color: var(--accent);
  font-size: 12px;
}

body.reader-focus .reader-title strong {
  color: var(--toolbar-ink);
  font-size: 16px;
}

body.reader-focus .cache-action {
  width: 42px;
  min-height: 42px;
  justify-content: center;
  padding: 0;
}

body.reader-focus .cache-action span {
  display: none;
}

body.reader-focus .score-tool-drawer {
  top: max(84px, calc(env(safe-area-inset-top) + 76px));
  right: max(18px, env(safe-area-inset-right));
}

body.reader-focus .annotation-rail {
  border-color: var(--rail-anchor);
  background: var(--rail-bg);
  box-shadow: none;
}

body.reader-focus .cue-dock {
  left: max(116px, calc(env(safe-area-inset-left) + 108px));
  right: max(116px, calc(env(safe-area-inset-right) + 108px));
  top: auto;
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px));
  justify-content: center;
  align-items: center;
  background: var(--cue-bg);
  color: var(--canvas-ink);
  border-color: var(--chrome-border);
  border-radius: 999px;
  transform: none;
  max-width: none;
  min-height: 48px;
  padding: 7px 8px;
  overflow-x: auto;
  z-index: var(--gn-layer-chrome);
}

body.reader-focus:not(.controls-revealed) .score-toolbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

body.reader-focus.annotation-mode .cue-dock {
  opacity: 0;
  pointer-events: none;
}

body.reader-focus.section-nav-hidden .cue-dock {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

body.reader-focus.annotation-mode .chart-pills {
  opacity: 0;
  pointer-events: none;
}

body.reader-focus .score-reader {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 18px 18px 76px;
  background: var(--canvas-bg);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

body.reader-focus .score-page {
  width: 100%;
  max-width: 100vw;
  max-height: calc(100vh - 94px);
  min-height: unset;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  padding: 0;
  box-shadow: none;
  border: 0;
  background: transparent;
}

body.reader-focus.score-crop-tight .score-page {
  width: min(98vw, calc(100vh * 0.82));
  max-height: calc(100vh - 76px);
  padding: 4px;
}

body.reader-focus.score-crop-tight .chart-viewer {
  overflow: hidden;
}

body.reader-focus.score-crop-tight .score-image {
  transform: scale(1.06);
  transform-origin: top center;
}

/* === GlowNotes immersive reading fix (2026-06-28): the screen IS the music; chrome only on center-tap === */
body.reader-focus:not(.controls-revealed) .reader-chrome,
body.reader-focus:not(.controls-revealed) .reader-chrome *,
body.reader-focus:not(.controls-revealed) .score-toolbar,
body.reader-focus:not(.controls-revealed) .score-toolbar *,
body.reader-focus:not(.controls-revealed) .chart-source-badge,
body.reader-focus:not(.controls-revealed) .center-reveal,
body.reader-focus:not(.controls-revealed) .reader-title,
body.reader-focus:not(.controls-revealed) #titleMenu,
body.reader-focus:not(.controls-revealed) .score-tool-drawer,
body.reader-focus:not(.controls-revealed) .turner-popover,
body.reader-focus:not(.controls-revealed) .link-mode-panel,
body.reader-focus:not(.controls-revealed) .page-order-panel,
body.reader-focus:not(.controls-revealed) .reader-dashboard-panel,
body.reader-focus:not(.controls-revealed) .reader-cue-panel,
body.reader-focus:not(.controls-revealed) .score-info-panel,
body.reader-focus:not(.controls-revealed) .order-panel,
body.reader-focus:not(.controls-revealed) .services-panel,
body.reader-focus:not(.controls-revealed) .library-search-panel,
body.reader-focus:not(.controls-revealed) .reader-backup-panel,
body.reader-focus:not(.controls-revealed) .reader-settings-panel,
body.reader-focus:not(.controls-revealed) .app-update-banner,
body.reader-focus:not(.controls-revealed) .pg-drop-banner,
body.reader-focus:not(.controls-revealed) .shepherd-set-banner {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* The score always owns the whole viewport. Reader chrome overlays it and
   never reserves layout space, regardless of which palette or menu is open. */
body.reader-focus .score-reader,
body.reader-focus.reader-portrait .score-reader {
  padding: max(4px, env(safe-area-inset-top)) 0 max(78px, calc(env(safe-area-inset-bottom) + 72px)) !important;
}

body.reader-focus .score-page,
body.reader-focus.reader-portrait .score-page,
body.reader-focus.reader-portrait.score-crop-tight .score-page,
body.reader-focus.reader-portrait.score-fit-wide .score-page,
body.reader-focus.reader-portrait.score-half-page .score-page,
body.reader-focus.reader-portrait.score-two-up .score-page {
  width: 100% !important;
  max-width: 100vw !important;
  max-height: calc(100vh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
}

body.reader-focus.score-fit-wide .score-page {
  width: min(98vw, 1140px);
  max-height: calc(100vh - 76px);
  padding: 8px;
}

body.reader-focus.score-fit-wide .chart-viewer {
  overflow: hidden;
}

body.reader-focus.score-half-page .score-page {
  width: min(98vw, calc(100vh * 1.16));
  max-height: calc(100vh - 76px);
  padding: 8px;
}

body.reader-focus.score-half-page .chart-viewer {
  overflow: hidden;
}

body.reader-focus.score-half-page .annotation-layer,
body.reader-focus.score-half-page .score-link-layer {
  display: none;
}

body.reader-focus.score-half-page .score-heading {
  display: flex;
  padding: 4px 4px 8px;
  margin-bottom: 8px;
  font-size: 11px;
}

body.reader-focus.score-two-up .score-page {
  width: min(98vw, calc(100vh * 1.38));
  max-height: calc(100vh - 76px);
  padding: 8px;
}

body.reader-focus.score-two-up .chart-viewer {
  overflow: hidden;
}

body.reader-focus.score-two-up .annotation-layer {
  display: none;
}

body.reader-focus.score-two-up .score-heading {
  display: flex;
  padding: 4px 4px 8px;
  margin-bottom: 8px;
  font-size: 11px;
}

body.reader-focus.reader-landscape.score-two-up .score-page {
  width: min(99.5vw, 100%);
  max-width: 100vw;
  max-height: calc(100vh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
  padding: 6px;
}

body.reader-focus.reader-landscape.score-two-up .score-two-up-spread {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  width: 100%;
  height: 100%;
}

body.reader-focus.reader-landscape.score-two-up .score-spread-image {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 28px);
  object-fit: contain;
  display: block;
}

body.reader-focus .cue-dock-label {
  display: none;
}

body.reader-focus .cue-dock button {
  min-width: 46px;
  min-height: 44px;
  padding: 0 10px;
}

body.reader-focus .cue-dock .cue-dock-edit {
  min-width: 44px;
  color: var(--accent-ink);
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

body.reader-focus .cue-dock button.follower-glow,
body.reader-focus .cue-dock button.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-secondary) 55%, transparent);
}

body.reader-focus .score-heading {
  display: none;
}

body.reader-focus .chart-pills {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  right: auto;
  top: max(84px, calc(env(safe-area-inset-top) + 76px));
  bottom: auto;
  transform: none;
  z-index: var(--gn-layer-chrome);
  flex-direction: row;
  justify-content: center;
  margin: 0;
  padding: 6px;
  border-radius: 999px;
  background: var(--toolbar-bg);
  border-color: var(--chrome-border);
  box-shadow: var(--shadow);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 160ms ease;
}

body.annotation-mode.edit-rail-left .chart-pills,
body.annotation-mode .score-reader.edit-rail-left .chart-pills,
body.annotation-mode .annotation-rail.edit-rail-left ~ .chart-pills {
  left: max(82px, calc(env(safe-area-inset-left) + 82px));
}

body.reader-focus.controls-revealed .chart-pills {
  top: max(84px, calc(env(safe-area-inset-top) + 76px));
}

body.reader-focus .chart-pills-label {
  display: none;
  justify-content: center;
  min-height: 18px;
  color: var(--accent-secondary);
}

body.reader-focus .chart-pills .chart-pill {
  min-width: 50px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--button-bg);
}

body.reader-focus .chart-pills .chart-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

body.reader-focus .chart-pills .chart-pill.active .status-dot {
  background: var(--paper-bg);
}


body.reader-focus .chart-viewer {
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

body.reader-focus .chart-frame,
body.reader-focus .lyrics-view {
  height: calc(100vh - 36px);
  min-height: calc(100vh - 36px);
}

/* Legacy/non-corner text readers keep their existing scroll behavior. Curl
   Perform mode is overridden by the root-pinning contract at the end of this
   file, before text fitting measures the page. */
body.reader-focus.reader-text-chart .score-reader {
  align-items: start;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y pinch-zoom;
}

body.reader-focus.reader-text-chart .score-page {
  max-height: none;
  overflow: visible;
}

body.reader-focus.reader-text-chart .chart-viewer {
  overflow: visible;
}

body.reader-focus.reader-text-chart .lyrics-view {
  height: auto;
  overflow: visible;
}

/* Perform-mode text charts use the same fixed-page gesture contract as PDF
   canvases. JS chooses the largest font that keeps the complete chart inside
   this surface. Charts that need less than 12px remain fixed and are marked
   data-gn-text-fit="scaled-min" for the pagination fast-follow. */
body.reader-focus.reader-text-chart.reader-text-fit .score-reader {
  align-items: center;
  border: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.reader-focus.reader-text-chart.reader-text-fit .score-page {
  box-sizing: border-box;
  height: calc(100dvh - max(4px, env(safe-area-inset-top)) - max(78px, calc(env(safe-area-inset-bottom) + 72px)));
  max-height: calc(100dvh - max(4px, env(safe-area-inset-top)) - max(78px, calc(env(safe-area-inset-bottom) + 72px)));
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.reader-focus.reader-text-chart.reader-text-fit .chart-viewer {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.reader-focus.reader-text-chart.reader-text-fit .lyrics-view {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(12px, 2vmin, 24px);
  overflow: hidden;
  overscroll-behavior: none;
  font-size: var(--gn-text-fit-font-size, 12px);
  line-height: 1.28;
  touch-action: none;
}

body.reader-focus.reader-portrait .score-toolbar {
  top: max(10px, calc(env(safe-area-inset-top) + 8px));
  left: var(--home-escape-enclave-width);
  right: max(10px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding-left: 0;
}

body.reader-focus.reader-portrait .reader-title {
  grid-column: 1 / -1;
  order: -1;
  min-height: 44px;
  padding: 5px 14px;
}

body.reader-focus.reader-portrait .reader-title span:not(:first-child) {
  display: none;
}

body.reader-focus.reader-portrait .reader-title strong {
  font-size: 15px;
}

body.reader-focus.reader-portrait .reader-left,
body.reader-focus.reader-portrait .reader-right {
  min-height: 48px;
}

body.reader-focus.reader-portrait #sheepButtonText {
  display: none;
}

body.reader-focus.reader-portrait .score-reader {
  padding: max(124px, calc(env(safe-area-inset-top) + 116px)) 10px max(92px, calc(env(safe-area-inset-bottom) + 84px));
}

body.reader-focus.reader-portrait .score-page {
  width: min(97vw, calc((100vh - 170px) * 0.72));
  max-height: calc(100vh - 156px);
  padding: 10px;
}

body.reader-focus.reader-portrait.score-crop-tight .score-page,
body.reader-focus.reader-portrait.score-fit-wide .score-page,
body.reader-focus.reader-portrait.score-half-page .score-page,
body.reader-focus.reader-portrait.score-two-up .score-page {
  width: min(97vw, calc((100vh - 156px) * 0.72));
  max-height: calc(100vh - 148px);
}

body.reader-focus.reader-portrait .chart-pills,
body.reader-focus.reader-portrait.controls-revealed .chart-pills {
  top: max(112px, calc(env(safe-area-inset-top) + 104px));
  left: max(10px, env(safe-area-inset-left));
  max-width: min(58vw, 430px);
  flex-wrap: wrap;
  justify-content: flex-start;
}

body.reader-focus.reader-portrait .cue-dock {
  top: auto;
  left: max(80px, calc(env(safe-area-inset-left) + 72px));
  right: max(80px, calc(env(safe-area-inset-right) + 72px));
  bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px));
  max-width: none;
  transform: none;
}

body.reader-focus.reader-portrait.section-nav-hidden .cue-dock {
  transform: translateY(8px);
}

body.reader-focus.reader-portrait .score-tool-drawer,
body.reader-focus.reader-portrait .turner-popover,
body.reader-focus.reader-portrait .reader-dashboard-panel,
body.reader-focus.reader-portrait .reader-cue-panel,
body.reader-focus.reader-portrait .score-info-panel,
body.reader-focus.reader-portrait .services-panel,
body.reader-focus.reader-portrait .library-search-panel,
body.reader-focus.reader-portrait .reader-backup-panel,
body.reader-focus.reader-portrait .reader-settings-panel,
body.reader-focus.reader-portrait .page-order-panel {
  top: max(134px, calc(env(safe-area-inset-top) + 126px));
  max-height: min(560px, calc(100vh - 164px));
}

body.reader-focus.reader-portrait.link-mode .link-mode-panel {
  top: max(134px, calc(env(safe-area-inset-top) + 126px));
  right: max(10px, env(safe-area-inset-right));
  max-width: min(330px, calc(100vw - 20px));
}

@media (orientation: portrait) {
  body.reader-focus.score-half-page .score-page,
  body.reader-focus.score-two-up .score-page {
    width: min(94vw, calc(100vh * 0.72));
  }

  body.reader-focus.score-two-up .score-two-up-spread {
    grid-template-columns: 1fr;
  }
}

body.reader-focus .center-reveal {
  display: grid;
}

body.reader-focus.controls-revealed .center-reveal,
body.reader-focus.annotation-mode .center-reveal {
  opacity: 0.18;
}

body.reader-focus .main-shell {
  max-width: none;
}

@media print {
  body * {
    visibility: hidden !important;
  }

  .intercessions-print-root,
  .intercessions-print-root * {
    visibility: visible !important;
  }

  .intercessions-print-root {
    display: block !important;
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    max-height: none;
    overflow: visible;
    border: 0;
    padding: 0.35in;
    background: #fff;
    color: #111;
  }

  .intercessions-print-page {
    page-break-after: always;
    margin-bottom: 0.25in;
  }

  .intercessions-print-page ol {
    columns: 2;
    font-size: 14pt;
    line-height: 1.45;
  }

  .intercessions-print-notes {
    page-break-before: auto;
    border-top: 1px solid #999;
  }
}

body.reader-focus .side-panel .control-block {
  display: none;
}

body.reader-focus.room-panel-open .side-panel {
  position: fixed;
  top: max(92px, calc(env(safe-area-inset-top) + 82px));
  right: max(18px, env(safe-area-inset-right));
  z-index: var(--gn-layer-floating);
  width: min(440px, calc(100vw - 36px));
  max-height: min(720px, calc(100vh - 130px));
  display: block;
  overflow: auto;
}

body.reader-focus.room-panel-open .side-panel .live-room-block {
  display: block;
  max-height: min(710px, calc(100vh - 140px));
  overflow: auto;
  box-shadow: 0 18px 44px rgba(32, 35, 31, 0.28);
}

/* The main reader's circular tools sit on a higher stage layer. Suppress them
   while the room drawer is open so they cannot float through this panel. */
body.reader-focus.room-panel-open .stage-circle-glyph,
body.reader-focus.room-panel-open .stage-circle-label {
  visibility: hidden;
}

body.reader-focus.room-panel-open .live-room-block .room-roster {
  max-height: 180px;
  overflow: auto;
}

.live-room-close {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(241, 238, 230, 0.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

body.reader-focus.annotation-mode .side-panel {
  display: none;
}

/* QW3 (UX quick-win batch, 2026-07-04): float the metronome block as a
   dismissible overlay in reader-focus, mirroring room-panel-open. */
.metronome-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metronome-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metronome-panel-grip {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8B7C64;
  cursor: grab;
  touch-action: none;
}

.metronome-panel-grip span {
  width: 16px;
  height: 10px;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 6px 5px;
}

.metronome-panel-grip.gnw-dragging { cursor: grabbing; }

.metronome-close {
  display: none;
}

body.reader-focus.metronome-open .side-panel {
  position: fixed;
  top: max(92px, calc(env(safe-area-inset-top) + 82px));
  right: max(18px, env(safe-area-inset-right));
  z-index: var(--gn-layer-floating);
  width: min(220px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 130px));
  display: block;
  overflow: auto;
  pointer-events: none;
}

body.reader-focus.metronome-open .side-panel .control-block.metronome-block,
body.reader-focus.metronome-open .gn-floating-layer > .metronome-block {
  display: block;
  max-height: min(550px, calc(100vh - 140px));
  overflow: auto;
  box-shadow: 0 18px 44px rgba(32, 35, 31, 0.28);
  pointer-events: auto;
}

body.reader-focus .side-panel .control-block.metronome-block.gnw-stage-panel,
body.reader-focus .gn-floating-layer > .metronome-block.gnw-stage-panel {
  width: min(220px, calc(100vw - 36px));
  box-sizing: border-box;
}

body.reader-focus .side-panel .control-block.metronome-block,
body.reader-focus .gn-floating-layer > .metronome-block {
  padding: 13px;
}

body.reader-focus .side-panel .control-block.metronome-block .block-header,
body.reader-focus .gn-floating-layer > .metronome-block .block-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 11px;
}

body.reader-focus .side-panel .control-block.metronome-block .metronome-header-actions,
body.reader-focus .gn-floating-layer > .metronome-block .metronome-header-actions {
  justify-content: flex-end;
}

body.reader-focus .side-panel .control-block.metronome-block .metronome-display,
body.reader-focus .gn-floating-layer > .metronome-block .metronome-display {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

body.reader-focus .side-panel .control-block.metronome-block .bpm-row,
body.reader-focus .gn-floating-layer > .metronome-block .bpm-row {
  gap: 8px;
}

body.reader-focus .side-panel .control-block.metronome-block .bpm-row div,
body.reader-focus .gn-floating-layer > .metronome-block .bpm-row div {
  min-width: 78px;
  padding-inline: 6px;
}

body.reader-focus .side-panel .control-block.metronome-block .toggle-grid,
body.reader-focus .gn-floating-layer > .metronome-block .toggle-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

body.reader-focus.metronome-open .metronome-close {
  display: inline-flex;
  align-items: center;
}

body.reader-focus .gn-floating-layer > .metronome-block {
  display: none;
}

/* QW2: one-time reader-focus coach mark. Quiet toast, not a modal wall —
   pointer-events stay off so the first tap still reaches the page. */
.reader-coach-mark {
  position: fixed;
  left: 50%;
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 26px));
  transform: translateX(-50%);
  z-index: var(--gn-layer-floating);
  max-width: min(480px, calc(100vw - 48px));
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(35, 39, 33, 0.88);
  color: #fffdfa;
  box-shadow: 0 16px 34px rgba(32, 35, 31, 0.3);
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease;
}

.reader-coach-mark p {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}

.reader-coach-mark.dismissed {
  opacity: 0;
}

/* QW7: revealed reader-focus controls meet the 44px touch-target floor
   (drawer rows at 48px are the reference standard). Scoped to reader-focus
   only — base .icon-button stays 38px for the desktop layout. min-* keeps
   flex-shrink from silently compressing the tap area below 44px (Codex
   pdf-canvas-30 review: computed 44 was rendering at 37 on 1024px iPad). */
body.reader-focus .icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 1180px), (pointer: coarse) {
  body:not(.desktop-layout) .app-shell {
    grid-template-columns: 1fr;
  }
}

.overlay.hidden {
  display: none;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-modal);
  display: grid;
  place-items: center;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 28, 21, 0.72);
  backdrop-filter: blur(7px);
}

.overlay-panel {
  position: relative;
  width: min(980px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.overlay-panel:focus {
  outline: none;
}

.overlay-panel *:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.overlay-header {
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.overlay-header h3 {
  margin: 0;
  font-family: var(--font-serif-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.overlay-header h3::before {
  content: "GLOWNOTES";
  display: block;
  margin-bottom: 2px;
  color: var(--mustard-text);
  font-family: var(--font-serif-display);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.overlay-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.overlay-body {
  padding: 18px;
  overflow: auto;
}

.binder-editor-quicknav {
  position: sticky;
  top: -18px;
  z-index: 3;
  display: flex;
  gap: 8px;
  margin: -18px -18px 14px;
  padding: 12px 18px;
  overflow-x: auto;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.binder-editor-quicknav button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.binder-editor-quicknav button:hover,
.binder-editor-quicknav button:focus-visible {
  border-color: var(--accent-terracotta);
  background: var(--accent-terracotta-soft);
  color: var(--terracotta-text);
}

.binder-editor-quicknav button.active,
.binder-editor-quicknav button[aria-current="true"] {
  border-color: var(--accent-terracotta);
  background: var(--accent-terracotta);
  color: #FFFFFF;
}

.binder-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 12px;
  align-items: end;
}

.binder-field span,
.binder-default span {
  display: block;
  font-size: 12px;
  color: var(--mustard-text);
  margin-bottom: 6px;
  font-weight: 750;
  text-transform: uppercase;
}

.binder-field input,
.binder-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  background: var(--well-bg);
  color: var(--ink);
  padding: 0 10px;
  border-radius: 8px;
  box-shadow: var(--shadow-inset);
}

.binder-field input[type="checkbox"] {
  width: 42px;
  min-height: 32px;
  accent-color: var(--accent-primary);
}

.binder-default {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  user-select: none;
}

.binder-default input {
  width: 18px;
  height: 18px;
}

.binder-editor-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.ghost-action.danger {
  border-color: rgba(164, 62, 50, 0.38);
  background: rgba(164, 62, 50, 0.08);
  color: var(--accent-danger);
}

.ghost-action.warn {
  border-color: rgba(196, 154, 69, 0.36);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.binder-editor-section {
  margin-top: 18px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.binder-editor-section-head strong {
  color: var(--ink);
  font-family: var(--font-serif-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.binder-editor-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.offline-meter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.offline-meter progress {
  flex: 1;
  height: 10px;
}

.offline-meter-label {
  font-size: 12px;
  color: var(--ink-muted);
  min-width: 52px;
  text-align: right;
}

.offline-meter progress {
  accent-color: var(--accent-primary);
}

.auto-offline-panel-status {
  margin-top: 8px;
}

.import-preflight {
  width: min(720px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
}

.bake-export {
  width: min(980px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
}

/* The baked score is a modal preview, so it must sit above the reader's
   independently layered pills, count-in, and toolbar. Hide those controls
   while the preview owns the viewport so they cannot occlude or intercept it. */
#bakeOverlay {
  z-index: var(--gn-layer-modal);
}

body.bake-preview-open #chartPills,
body.bake-preview-open #countInBand,
body.bake-preview-open #readerToolbar,
body.bake-preview-open .reader-build-stamp {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#bakeOverlay .overlay-header {
  position: sticky;
  top: 0;
  z-index: 2;
}

#bakeOverlay .overlay-header > div {
  min-width: 0;
}

#closeBake {
  position: relative;
  z-index: 1;
  flex: 0 0 44px;
}

.bake-preview {
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--well-bg);
  padding: 12px;
}

.bake-preview img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  background: white;
}

.preflight-body {
  display: grid;
  gap: 14px;
}

.preflight-group strong {
  display: block;
  color: var(--accent-secondary);
  font-size: 13px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.preflight-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.preflight-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.preflight-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.preflight-actions .ghost-action,
.preflight-actions .primary-action {
  min-width: 120px;
}

.binder-import-file {
  display: block;
  margin-bottom: 10px;
}

.binder-import-file span {
  display: block;
  font-size: 12px;
  color: var(--accent-secondary);
  margin-bottom: 6px;
  font-weight: 750;
  text-transform: uppercase;
}

.binder-import-file input[type="file"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: var(--shadow-inset);
}

.binder-import-text {
  min-height: 150px;
}

.source-import-report {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.source-import-divider {
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}

.source-import-empty,
.source-import-summary,
.source-import-warnings {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
}

.source-import-card {
  display: grid;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
}

.source-import-card.ok {
  border-color: rgba(196, 154, 69, 0.46);
}

.source-import-card.warn {
  border-color: rgba(196, 154, 69, 0.46);
}

.source-import-card.error {
  border-color: rgba(164, 62, 50, 0.42);
}

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

.source-import-card-head strong {
  font-size: 14px;
}

.source-import-card-head span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.source-import-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.source-import-resource {
  display: grid;
  grid-template-columns: minmax(72px, 0.8fr) auto;
  gap: 4px 8px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 8px;
}

.source-import-resource strong {
  font-size: 12px;
}

.source-import-resource span {
  justify-self: end;
  min-width: 24px;
  border-radius: 999px;
  background: rgba(32, 35, 31, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
  text-align: center;
}

.source-import-resource.detected span {
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.source-import-resource em {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-import-theme {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgba(196, 154, 69, 0.32);
  background: var(--accent-secondary-soft);
  color: var(--ink);
  font-size: 12px;
  padding: 8px 10px;
}

.source-import-theme strong {
  font-size: 12px;
}

.source-import-theme span {
  color: var(--accent-secondary);
  font-weight: 800;
  text-align: right;
}

.source-import-theme.medium {
  border-color: rgba(62, 104, 140, 0.28);
  background: var(--accent-info-soft);
  color: var(--sky-text);
}

.source-import-theme.medium span {
  color: var(--sky-text);
}

.source-import-theme.low {
  border-color: rgba(196, 154, 69, 0.28);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.source-import-theme.low span {
  color: var(--ink);
}

.source-import-projection-health {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgba(196, 154, 69, 0.32);
  background: var(--accent-secondary-soft);
  color: var(--ink);
  padding: 8px 10px;
}

.source-import-projection-health strong {
  font-size: 12px;
}

.source-import-projection-health span {
  justify-self: end;
  border-radius: 999px;
  background: rgba(196, 154, 69, 0.2);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  padding: 4px 8px;
}

.source-import-projection-health em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.source-import-projection-health.warn {
  border-color: rgba(196, 154, 69, 0.36);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.source-import-projection-health.warn span {
  background: rgba(196, 154, 69, 0.2);
  color: var(--ink);
}

.source-import-projection-health.error {
  border-color: rgba(164, 62, 50, 0.34);
  background: var(--accent-danger-soft);
  color: var(--accent-danger);
}

.source-import-projection-health.error span {
  background: rgba(164, 62, 50, 0.14);
  color: var(--accent-danger);
}

.source-import-missing {
  border-radius: 8px;
  background: var(--accent-secondary-soft);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
}

.source-import-actions {
  display: flex;
  justify-content: flex-end;
}

.source-import-actions .ghost-action {
  min-height: 38px;
}

.binder-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.binder-add-row select {
  width: min(360px, 46vw);
}

.binder-piece-editor-list {
  display: grid;
  gap: 12px;
}

.library-list {
  display: grid;
  gap: 12px;
}

.library-row {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
}

.library-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.library-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.library-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--well-bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.library-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.library-thumb span {
  font-weight: 950;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.library-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--well-bg);
}

.library-pill {
  font-size: 11px;
  font-weight: 850;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  white-space: nowrap;
}

.library-pill.local {
  border-color: rgba(196, 154, 69, 0.36);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.library-pill.missing {
  border-color: rgba(164, 62, 50, 0.38);
  background: rgba(164, 62, 50, 0.08);
  color: var(--accent-danger);
}

.thumb-queue-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.thumb-queue-pill.pending {
  border-color: rgba(196, 154, 69, 0.44);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.thumb-queue-pill.ready {
  border-color: rgba(196, 154, 69, 0.36);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.thumb-queue-pill.busy {
  border-color: rgba(62, 104, 140, 0.36);
  background: var(--accent-info-soft);
  color: var(--sky-text);
}

.thumb-queue-pill.blocked {
  border-color: rgba(164, 62, 50, 0.38);
  background: rgba(164, 62, 50, 0.08);
  color: var(--accent-danger);
}

.thumb-queue-pill.error {
  border-color: rgba(164, 62, 50, 0.38);
  background: rgba(164, 62, 50, 0.08);
  color: var(--accent-danger);
}

.thumb-queue-pill.done {
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
}

#thumbQueueStatus {
  cursor: pointer;
  user-select: none;
}

.thumb-queue-overlay {
  width: min(860px, calc(100vw - 32px));
  max-height: min(82vh, 700px);
}

.thumb-queue-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.thumb-queue-row {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
}

.thumb-queue-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.thumb-queue-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.thumb-queue-row-title strong {
  font-size: 14px;
}

.thumb-queue-row-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-word;
}

.thumb-queue-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.thumb-queue-blocked-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.thumb-queue-blocked-list li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.library-meta {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: 10px;
}

.library-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.library-actions .ghost-action,
.library-actions .primary-action {
  min-height: 34px;
}

.binder-piece-row {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
}

.binder-piece-row.dragging {
  border-color: rgba(196, 154, 69, 0.55);
  box-shadow: 0 0 0 4px rgba(196, 154, 69, 0.18);
}

.binder-piece-row.drop-target {
  border-color: rgba(196, 154, 69, 0.55);
}

.binder-piece-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.binder-drag-handle {
  width: 44px;
  min-height: 34px;
  border-radius: 8px;
  background: var(--well-bg);
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
  cursor: grab;
  touch-action: none;
}

.binder-drag-handle:active {
  cursor: grabbing;
}

.binder-piece-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.binder-piece-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.binder-piece-oow-role,
.binder-piece-shepherd {
  border: 1px solid rgba(196, 154, 69, 0.34);
  border-radius: 999px;
  background: var(--accent-secondary-soft);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
}

.binder-piece-shepherd {
  border-color: rgba(62, 104, 140, 0.32);
  background: var(--accent-info-soft);
  color: var(--sky-text);
}

.binder-piece-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--well-bg);
}

.binder-piece-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.binder-mini {
  min-height: 32px;
  border-radius: 8px;
  padding: 0 10px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--well-bg);
  color: var(--ink);
  font-weight: 850;
  font-size: 12px;
}

.binder-piece-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.binder-chart-choice-group {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--well-bg);
}

.binder-chart-choice-group > strong {
  font-size: 13px;
  color: var(--ink);
}

.binder-chart-choice-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.binder-export-text {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  background: var(--well-bg);
  color: var(--ink);
  resize: vertical;
}

@media (max-width: 1180px), (pointer: coarse) {
  .overlay {
    place-items: stretch;
  }

  .overlay-panel.binder-editor {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .overlay-header {
    padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  }

  .overlay-body {
    padding: 14px;
  }

  .binder-editor-quicknav {
    top: -14px;
    margin: -14px -14px 14px;
    padding: 10px 14px;
    scroll-snap-type: x proximity;
  }

  .binder-editor-quicknav button {
    min-height: 42px;
    scroll-snap-align: start;
  }

  .binder-editor-grid {
    grid-template-columns: 1fr;
  }

  .source-import-resource-grid {
    grid-template-columns: 1fr;
  }

  .binder-piece-grid {
    grid-template-columns: 1fr;
  }

  .binder-chart-choice-fields {
    grid-template-columns: 1fr;
  }

  .binder-field input,
  .binder-field select,
  .binder-import-file input[type="file"],
  .binder-add-row select {
    min-height: 44px;
    font-size: 16px;
  }

  .binder-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .binder-editor-actions .ghost-action,
  .binder-editor-actions .primary-action,
  .binder-add-row .ghost-action,
  .binder-mini {
    min-height: 44px;
  }

  .binder-editor-section {
    padding: 12px;
    border-radius: 10px;
  }

  .binder-editor-section-head,
  .binder-piece-row-head,
  .library-row-head {
    align-items: stretch;
    flex-direction: column;
  }

  .binder-piece-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .binder-drag-handle {
    width: 44px;
    min-height: 44px;
    align-self: flex-start;
  }

  .binder-piece-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .binder-add-row {
    flex-direction: column;
    align-items: stretch;
  }

  .binder-add-row select {
    width: 100%;
  }
}

.piece-not-found {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(32, 35, 31, 0.55);
}

.piece-not-found-card {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  background: #fffdfa;
  border: 1px solid var(--score-paper-border);
  border-radius: 14px;
  box-shadow: 0 22px 38px rgba(32, 35, 31, 0.28);
  padding: 22px 24px;
}

.piece-not-found-card h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.piece-not-found-card p {
  margin: 0 0 10px;
  line-height: 1.45;
}

.piece-not-found-current {
  font-size: 0.82rem;
  opacity: 0.75;
}

.piece-not-found-requested {
  font-size: 0.8rem;
  opacity: 0.75;
}

.piece-not-found-requested code {
  word-break: break-all;
  font-size: 0.82rem;
}

.piece-not-found-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  max-height: min(42vh, 420px);
  overflow-y: auto;
}

.piece-not-found-piece {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--score-paper-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.piece-not-found-piece span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.piece-not-found-piece:hover,
.piece-not-found-piece:focus-visible {
  border-color: #8a7a55;
  background: #faf6ec;
}

.piece-not-found-dismiss {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--score-paper-border);
  border-radius: 10px;
  background: #f4efe4;
  cursor: pointer;
  font: inherit;
}

/* === GlowNotes section anchors (anchors-1) === */
body.section-anchor-pick-mode .score-link-layer,
body.prep-orb-placing .score-link-layer {
  cursor: crosshair;
  pointer-events: auto;
}

/* Spot capture needs the whole chart. Collapse the editor into a small,
   explicit cancel control in the top chrome until the chart tap completes. */
body.reader-focus.section-anchor-pick-mode .reader-cue-panel {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: auto;
  max-width: none;
  max-height: none;
  gap: 0;
  padding: 6px;
  overflow: visible;
}

body.section-anchor-pick-mode .reader-chrome,
body.section-anchor-pick-mode .chart-pills,
body.section-anchor-pick-mode .cue-dock,
body.section-anchor-pick-mode .page-tap-zone,
body.section-anchor-pick-mode .center-reveal,
body.section-anchor-pick-mode .home-escape-button {
  opacity: 0.14;
  pointer-events: none;
}

body.section-anchor-pick-mode .reader-cue-panel > .reader-cue-group,
body.section-anchor-pick-mode .reader-cue-panel > .reader-quick-slide,
body.section-anchor-pick-mode .reader-cue-summary > div {
  display: none;
}

body.section-anchor-pick-mode .reader-cue-summary {
  display: block;
}

body.section-anchor-pick-mode #closeReaderCuePanel {
  min-width: 96px;
  min-height: 44px;
  border-color: var(--accent-terracotta);
  background: var(--accent-terracotta-soft);
  color: var(--terracotta-text);
}

.section-anchor-pulse[data-section-anchor-glow][data-section-id] {
  position: absolute;
  z-index: 7;
  width: 0;
  height: 0;
  isolation: isolate;
  pointer-events: none;
}

.section-anchor-pulse-ring,
.section-anchor-pulse-dot,
.section-anchor-pulse-label {
  position: absolute;
  pointer-events: none;
}

.section-anchor-pulse-ring {
  left: 0;
  top: 0;
  border-radius: 999px;
  opacity: 0;
}

.section-anchor-pulse-ring-honey {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(196, 154, 69, 0.94);
  animation: section-anchor-ring-honey 1800ms ease-out forwards;
}

.section-anchor-pulse-ring-terracotta {
  width: 46px;
  height: 46px;
  border: 2px solid rgba(160, 74, 44, 0.78);
  animation: section-anchor-ring-terracotta 1800ms ease-out forwards;
}

.section-anchor-pulse-dot {
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(253, 252, 249, 0.98);
  border-radius: 999px;
  background: var(--accent-terracotta);
  box-shadow: 0 0 0 1px rgba(58, 40, 32, 0.54), 0 2px 6px rgba(58, 40, 32, 0.2);
  opacity: 0;
  animation: section-anchor-dot 1800ms ease-out forwards;
}

.section-anchor-pulse-label {
  left: 14px;
  top: 0;
  max-width: min(152px, calc(100vw - max(48px, env(safe-area-inset-left)) - max(48px, env(safe-area-inset-right))));
  overflow: hidden;
  padding: 4px 8px;
  border: 1px solid rgba(196, 154, 69, 0.76);
  border-left: 3px solid var(--accent-terracotta);
  border-radius: 7px;
  background: rgba(253, 252, 249, 0.96);
  color: var(--ink-secondary);
  box-shadow: 0 4px 12px rgba(58, 40, 32, 0.14);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  animation: section-anchor-label 1800ms ease-out forwards;
}

.section-anchor-pulse[data-label-side="left"] .section-anchor-pulse-label {
  right: 14px;
  left: auto;
  border-right: 3px solid var(--accent-terracotta);
  border-left-width: 1px;
}

@keyframes section-anchor-ring-honey {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.46);
  }

  10% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes section-anchor-ring-terracotta {
  0%, 14% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.38);
  }

  26% {
    opacity: 0.76;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes section-anchor-dot {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  10%, 68% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@keyframes section-anchor-label {
  0% {
    opacity: 0;
    transform: translate(-4px, -50%);
  }

  12%, 68% {
    opacity: 1;
    transform: translate(0, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(2px, -50%);
  }
}

.reader-section-anchor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(196, 154, 69, 0.44);
  border-radius: 9px;
  background: var(--accent-secondary-soft);
}

.reader-section-anchor-status {
  position: relative;
  min-width: 0;
  padding-left: 16px;
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reader-section-anchor-status::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.18em;
  width: 8px;
  height: 8px;
  border: 2px solid var(--paper-bg);
  border-radius: 999px;
  background: var(--accent-terracotta);
  box-shadow: 0 0 0 1px rgba(58, 40, 32, 0.26);
}

.reader-section-anchor-button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--accent-secondary);
  border-radius: 999px;
  background: var(--paper-bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
}

.reader-section-anchor-button:hover,
.reader-section-anchor-button:focus-visible,
.reader-section-anchor-button[aria-pressed="true"] {
  border-color: var(--accent-terracotta);
  background: var(--accent-terracotta-soft);
  color: var(--terracotta-text);
}

.reader-section-anchor-button:disabled,
.reader-section-anchor-button[aria-disabled="true"] {
  border-color: var(--line-strong);
  background: var(--disabled-bg);
  color: var(--ink-muted);
  cursor: default;
}

.cue-dock button.read-only,
.cue-dock button[aria-disabled="true"],
body.reader-focus .cue-dock button.read-only,
body.reader-focus .cue-dock button[aria-disabled="true"] {
  border-color: rgba(196, 154, 69, 0.5);
  background: var(--accent-secondary-soft);
  color: var(--ink-secondary);
  opacity: 1;
  cursor: default;
}

.cue-dock button.read-only.active,
.cue-dock button[aria-disabled="true"].active,
.cue-dock button.read-only.follower-glow,
.cue-dock button[aria-disabled="true"].follower-glow,
body.reader-focus .cue-dock button.read-only.active,
body.reader-focus .cue-dock button[aria-disabled="true"].active,
body.reader-focus .cue-dock button.read-only.follower-glow,
body.reader-focus .cue-dock button[aria-disabled="true"].follower-glow {
  border-color: var(--accent-terracotta);
  background: var(--accent-terracotta-soft);
  color: var(--terracotta-text);
  box-shadow: 0 0 0 2px rgba(196, 154, 69, 0.42);
}

@media (max-width: 560px) {
  .reader-section-anchor-row {
    grid-template-columns: 1fr;
  }

  .reader-section-anchor-button {
    width: 100%;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-anchor-pulse-ring-honey {
    opacity: 0.86;
    transform: translate(-50%, -50%);
    animation: none;
  }

  .section-anchor-pulse-ring-terracotta {
    opacity: 0.62;
    transform: translate(-50%, -50%);
    animation: none;
  }

  .section-anchor-pulse-dot {
    opacity: 1;
    transform: translate(-50%, -50%);
    animation: none;
  }

  .section-anchor-pulse-label {
    opacity: 1;
    transform: translateY(-50%);
    animation: none;
  }
}

/* ============================================================================
   M12 Instrument Panel widgets (widgets-1) — pitch keyboard + tempo cluster.
   Ported from LAB-m12-pitch-tempo.html v9. Tokens scoped --gnw-* on .gnw-root
   so the shipped app palette is untouched (app-wide reskin = M14, not here).
   Shown only in reader-focus; pitch tools hidden until revealed.
   ========================================================================== */
.gnw-root {
  /* IBM Champagne tokens, scoped to the widgets only */
  --gnw-parchment: #EFE8D8;
  --gnw-parchment-border: #D8CEB9;
  --gnw-taupe: #C8BCA7;
  --gnw-taupe-border: #B2A48C;
  --gnw-navy: #4A3B32;
  --gnw-gold-cool: #C2B391;
  --gnw-line: rgba(15, 36, 65, 0.15);
  --gnw-btn-bg: var(--gnw-parchment);
  --gnw-btn-border: var(--gnw-parchment-border);
  --gnw-btn-text: var(--gnw-navy);
  --gnw-btn-active-bg: var(--gnw-parchment-border);
  --gnw-btn-dark-bg: var(--gnw-taupe);
  --gnw-btn-dark-border: var(--gnw-taupe-border);
  --gnw-btn-shadow: inset 1px 1px 2px rgba(255,255,255,0.8),
                    inset -1px -1px 2px rgba(0,0,0,0.05),
                    0 2px 4px rgba(15,36,65,0.15);
  --gnw-btn-active-shadow: inset 1px 1px 3px rgba(0,0,0,0.15);
  /* Position insets — proven clear of the FORWARD (right) tap zone + bottom-right
     curl corner at both orientations; see receipts. */
  --gnw-pitch-inset-x: 20px;
  --gnw-pitch-inset-y: 20px;
  /* top:180 clears the reader-focus Home chip (b60) + chart-pills row
     (b142 landscape / b170 portrait); left gutter beside the centered score. */
  --gnw-tempo-inset-x: 18px;
  --gnw-tempo-inset-y: 180px;
  display: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.reader-focus .gnw-root { display: block; }
/* Review B2 (widgets-1): widgets sit at z 45/50, above the ink canvas (z 2),
   and would swallow ink strokes in annotation mode (the curl already bails via
   gnCurlDragBlocked). Hide the whole widget root while annotating. Reveal
   state is persisted JS state; display:none does not touch it, so the widgets
   return exactly as-was on exit. Equal specificity with the reader-focus rule
   above — this rule MUST stay after it (source order wins). */
body.annotation-mode .gnw-root { display: none; }

.gnw-root button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gnw-btn {
  background: var(--gnw-btn-bg);
  border: 1px solid var(--gnw-btn-border);
  color: var(--gnw-btn-text);
  font-weight: 700;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: var(--gnw-btn-shadow);
  transition: transform 0.05s, background 0.05s, box-shadow 0.05s;
}
.gnw-btn:active,
.gnw-btn.gnw-active,
.gnw-btn.gnw-pulse {
  background: var(--gnw-btn-active-bg);
  box-shadow: var(--gnw-btn-active-shadow);
  transform: translateY(1px);
}
.gnw-btn.gnw-dark {
  background: var(--gnw-btn-dark-bg);
  border-color: var(--gnw-btn-dark-border);
}
.gnw-btn.gnw-dark:active,
.gnw-btn.gnw-dark.gnw-active { background: var(--gnw-taupe-border); }

/* A. Pitch tools — bottom-left, reveal-on-demand */
.gnw-bottom-toolbar {
  position: absolute;
  bottom: var(--gnw-pitch-inset-y);
  left: var(--gnw-pitch-inset-x);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--gn-layer-floating-popover);
}
.gnw-reveal-tools-btn {
  align-self: flex-start;
  padding: 10px 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 2px solid var(--gnw-gold-cool);
  border-radius: 8px;
}
.gnw-pitch-panel {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(327px, calc(100vw - 16px));
  padding: 6px 2.5px 8px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--gnw-gold-cool);
  border-radius: 14px;
  background: rgba(239, 232, 216, 0.97);
  box-shadow: 6px 8px 22px rgba(15, 36, 65, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.gnw-pitch-panel.gnw-visible { display: flex; }

/* Mission M7 / approved LAB-m14-pitch-v2-thumb.html, variant A; cites
   DESIGN-CONSTRAINTS-jeff-rulings.md (Thumb Law §6, SELECTED ≠ SOLID). The panel is
   deliberately content-hugging; the sacred key rail below remains byte-for-
   byte unchanged from main. */
.gnw-pitch-header {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gnw-pitch-grip,
.gnw-pitch-header .gnw-pitch-close {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  color: #8B7C64;
  background: transparent;
}

.gnw-pitch-grip {
  width: 26px;
  height: 22px;
  border-radius: 6px;
  cursor: grab;
  touch-action: none;
}

.gnw-pitch-grip.gnw-dragging { cursor: grabbing; }

.gnw-pitch-grip span {
  width: 14px;
  height: 10px;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 6px 5px;
}

.gnw-pitch-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6B5B46;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.gnw-pitch-header .gnw-pitch-close {
  width: 26px;
  height: 26px;
  margin-left: auto;
  border: 1px solid var(--gnw-parchment-border);
  border-radius: 50%;
  background: #F7F1E4;
  color: var(--gnw-navy);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.gnw-pitch-control-row {
  position: relative;
  z-index: 2;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gnw-octave-controls {
  min-height: 40px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  margin: 5px 5px 3px;
}

.gnw-octave-button {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  min-height: 40px;
  border: 1px solid var(--gnw-gold-cool);
  border-radius: 10px;
  background: #F7F1E4;
  color: var(--gnw-navy);
  box-shadow: var(--gnw-btn-shadow);
  cursor: pointer;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.gnw-octave-button:active:not(:disabled) { transform: translateY(1px); }

.gnw-octave-button:disabled {
  cursor: default;
  opacity: 0.38;
  box-shadow: none;
}

.gnw-octave-readout {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--gnw-parchment-border);
  border-radius: 9px;
  background: rgba(253, 252, 249, 0.7);
  color: #6B5B46;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gnw-octave-readout strong {
  color: var(--gnw-navy);
  font-size: 16px;
}

.gnw-pitch-segments {
  min-width: 0;
  height: 26px;
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--gnw-parchment-border);
  border-radius: 9px;
}

.gnw-pitch-segments button {
  min-width: 0;
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--gnw-navy);
  cursor: pointer;
  font-size: 12px;
}

.gnw-pitch-segments button + button {
  border-left: 1px solid var(--gnw-parchment-border);
}

.gnw-pitch-segments button.gnw-selected {
  background: rgba(194, 179, 145, 0.22);
  box-shadow: inset 0 0 0 1px var(--gnw-gold-cool);
  font-weight: 800;
}

.gnw-switch-track.gnw-pitch-accidental {
  width: 44px;
  height: 22px;
  flex: 0 0 44px;
  padding: 0;
}

.gnw-switch-track.gnw-pitch-accidental .gnw-dot {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}

.gnw-switch-track.gnw-pitch-accidental.gnw-is-flat .gnw-dot {
  transform: translateX(22px);
}

.gnw-acc-symbol {
  position: absolute;
  top: 1px;
  right: 7px;
  color: #6B5B46;
  font-size: 13px;
  line-height: 18px;
}

.gnw-pitch-accidental.gnw-is-flat .gnw-acc-symbol {
  right: auto;
  left: 8px;
}

.gnw-pitch-slots {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 4px;
  box-sizing: border-box;
}

.gnw-pitch-slot-list {
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.gnw-pitch-slot-item {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.gnw-pitch-slot {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0 8px 0 4px;
  border: 1px solid var(--gnw-taupe-border);
  border-radius: 9px;
  background: var(--gnw-parchment);
  box-shadow: var(--gnw-btn-shadow);
  color: var(--gnw-navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.gnw-pitch-slot.gnw-empty {
  border-style: dashed;
  background: rgba(239, 232, 216, 0.5);
  box-shadow: none;
  color: #A8997E;
  font-weight: 500;
}

.gnw-pitch-slot.gnw-armed {
  border-color: var(--gnw-gold-cool);
  background: rgba(194, 179, 145, 0.16);
  box-shadow: 0 0 0 1.5px var(--gnw-gold-cool);
  color: #6B5B46;
  font-size: 9px;
  letter-spacing: 0.04em;
  animation: gnw-pitch-slot-armed-pulse 1.35s ease-in-out infinite;
}

@keyframes gnw-pitch-slot-armed-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--gnw-gold-cool); }
  50% { box-shadow: 0 0 0 3px rgba(194, 179, 145, 0.42); }
}

.gnw-pitch-slot-remove {
  position: absolute;
  z-index: 1;
  top: 2px;
  right: 2px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(139, 124, 100, 0.45);
  border-radius: 50%;
  background: rgba(247, 241, 228, 0.94);
  color: #6B5B46;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.gnw-pitch-slot-remove:hover,
.gnw-pitch-slot-remove:focus-visible {
  border-color: var(--gnw-gold-cool);
  box-shadow: 0 0 0 1px rgba(194, 179, 145, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .gnw-pitch-slot.gnw-armed { animation: none; }
}

.gnw-pitch-mini {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--gnw-parchment-border);
  border-radius: 8px;
  background: #F7F1E4;
  color: #6B5B46;
  cursor: pointer;
  font-size: 15px;
}

.gnw-pitch-back-full {
  display: none;
}

.gnw-pitch-slot-grip {
  width: 24px;
  height: 44px;
  flex: 0 0 24px;
  display: none;
  place-items: center;
  border: 1px solid var(--gnw-parchment-border);
  border-radius: 8px;
  background: #F7F1E4;
  box-shadow: var(--gnw-btn-shadow);
  color: #6B5B46;
  cursor: grab;
  touch-action: none;
}

.gnw-pitch-slot-grip.gnw-dragging {
  cursor: grabbing;
}

.gnw-pitch-slot-grip span {
  width: 12px;
  height: 18px;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 6px 6px;
}

/* Ruling 37: Slots is a tiny performance surface, not an editing mode. It
   shows only the notes already picked on the full keyboard and one route back. */
#gnwPitchPanel[data-gnw-pitch-mode="slots"] {
  width: min(
    calc((var(--gnw-pitch-slot-columns, 0) * 51px) + 75px),
    calc(100vw - 16px)
  );
  min-width: 54px;
  padding: 6px;
}

#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-header,
#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-control-row,
#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-octave-controls,
#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-slot-item:not(.gnw-has-pitch),
#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-slot-remove,
#gnwPitchPanel[data-gnw-pitch-mode="slots"] #gnwPitchAddSlot,
#gnwPitchPanel[data-gnw-pitch-mode="slots"] #gnwPitchResetSlots {
  display: none;
}

#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-slots {
  height: auto;
  min-height: 34px;
  align-items: center;
  gap: 3px;
  padding: 0;
}

#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-slot-grip {
  display: grid;
}

#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-slot-list {
  width: calc(var(--gnw-pitch-slot-columns, 0) * 44px + max(0px, (var(--gnw-pitch-slot-columns, 0) - 1) * 7px));
  flex: 0 0 auto;
}

#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-slot-list[data-gnw-filled-count="0"] {
  display: none;
}

#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-slot {
  padding: 0 4px;
}

#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-pitch-back-full {
  width: 40px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid var(--gnw-parchment-border);
  border-radius: 8px;
  background: #F7F1E4;
  box-shadow: var(--gnw-btn-shadow);
  color: #6B5B46;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

#gnwPitchPanel[data-gnw-pitch-mode="keys"] .gnw-pitch-slots,
#gnwPitchPanel[data-gnw-pitch-mode="slots"] .gnw-rail {
  display: none;
}

.gnw-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#gnwPitchReveal.gnw-active,
#gnwPitchReveal[aria-pressed="true"] {
  border-color: var(--gnw-gold-cool);
  background: rgba(194, 179, 145, 0.22);
  color: var(--gnw-navy);
  box-shadow: inset 0 0 0 1px var(--gnw-gold-cool), var(--gnw-btn-shadow);
}

.gnw-pitch-deck,
.gnw-recent-tray,
.gnw-tuning-summary,
.gnw-tuning-bay {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.gnw-pitch-deck {
  min-height: 60px;
  display: grid;
  grid-template-columns: 72px 72px minmax(0, 1fr);
  gap: 8px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--gnw-line);
}

.gnw-pitch-deck .gnw-btn {
  min-height: 48px;
}

.gnw-hold-key[aria-pressed="true"] {
  border: 2px solid var(--gnw-gold-cool);
  background: var(--gnw-btn-active-bg);
  box-shadow: var(--gnw-btn-active-shadow);
}

.gnw-stop-key {
  border-left: 4px solid #A04A2C;
}

.gnw-stop-key:disabled {
  opacity: 0.42;
  cursor: default;
}

.gnw-pitch-status-well {
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 2px solid #000;
  border-radius: 4px;
  background: #3A2820;
  color: #FFF3B8;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.8);
  font: 900 10px/1.2 "Courier New", monospace;
  text-transform: uppercase;
}

.gnw-pitch-status-well span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gnw-pitch-jewel {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1px solid #000;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #786A45, #3A2820);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(255, 255, 255, 0.8);
}

.gnw-pitch-jewel.gnw-on {
  background: radial-gradient(circle at center, #FFFDF8 0, #D5A83F 30%, #B9792E 100%);
  box-shadow: 0 0 12px 4px rgba(213, 168, 63, 0.72);
}

.gnw-recent-tray {
  min-height: 59px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gnw-line);
}

.gnw-recent-pitches {
  min-height: 46px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  color: rgba(15, 36, 65, 0.68);
  font-size: 11px;
  text-align: center;
}

.gnw-recent-pitches:empty {
  display: flex;
  justify-content: center;
}

.gnw-recent-pitches .gnw-btn {
  min-width: 0;
  min-height: 46px;
  padding: 4px;
  font-size: 10px;
}

.gnw-tuning-summary {
  min-height: 48px;
  justify-content: flex-start;
  margin: 12px 0;
  padding: 0 12px;
  border: 1px solid rgba(15, 36, 65, 0.1);
  border-radius: 6px;
  background: rgba(15, 36, 65, 0.05);
  box-shadow: inset 0 1px 2px rgba(15, 36, 65, 0.08);
}

.gnw-tuning-bay {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--gnw-line);
}

.gnw-tuning-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gnw-tuning-head h2 {
  margin: 0;
  color: var(--gnw-navy);
  font-size: 15px;
}

.gnw-reference-key {
  min-width: 132px;
  min-height: 48px;
}

.gnw-tuning-bay p {
  margin: 8px 0 0;
  color: rgba(15, 36, 65, 0.72);
  font-size: 10px;
  line-height: 1.35;
}

.gnw-choice-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.gnw-choice-row .gnw-btn {
  min-height: 48px;
  padding: 3px;
  font-size: 10px;
}

.gnw-choice-row .gnw-btn[aria-pressed="true"] {
  background: var(--gnw-btn-active-bg);
  box-shadow: var(--gnw-btn-active-shadow);
}

.gnw-key.gnw-sounding {
  background: var(--gnw-btn-active-bg);
  box-shadow: var(--gnw-btn-active-shadow), 0 0 12px 4px rgba(213, 168, 63, 0.64);
}

.gnw-arm {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  padding: 12px 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--gnw-line);
  height: 56px;
  box-shadow: none;
  align-self: stretch;
}
.gnw-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  padding: 8px 0 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.gnw-keyboard { position: relative; width: 304px; height: 84px; margin: 4px 8px; }
.gnw-white-keys { position: absolute; bottom: 0; left: 0; display: flex; gap: 4px; }
.gnw-black-keys { position: absolute; top: 0; left: 0; width: 100%; height: 40px; }
.gnw-key { flex: 0 0 auto; width: 40px; height: 40px; font-size: 11px; }
.gnw-key.gnw-black-key { position: absolute; }
.gnw-key.gnw-dual { font-size: 9px; line-height: 1.1; text-align: center; }
.gnw-key.gnw-glow {
  box-shadow: 0 0 0 2px var(--gnw-gold-cool),
              0 0 10px 2px rgba(194, 179, 145, 0.9),
              var(--gnw-btn-shadow);
}
.gnw-register-chip { padding: 0 12px; height: 32px; }
.gnw-octave-toggle { display: flex; gap: 4px; align-items: center; }
.gnw-octave-display { font-size: 13px; font-weight: bold; color: var(--gnw-navy); width: 24px; text-align: center; }
.gnw-divider { width: 1px; height: 24px; background: var(--gnw-line); margin: 0 4px; }
.gnw-switch { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.gnw-engraved-label { font-size: 11px; font-weight: bold; opacity: 0.7; color: var(--gnw-navy); }
.gnw-switch-track {
  width: 32px;
  height: 16px;
  background: var(--gnw-btn-bg);
  border-radius: 12px;
  border: 1px solid var(--gnw-gold-cool);
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(15,36,65,0.1);
}
.gnw-switch-track .gnw-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--gnw-navy);
  border-radius: 50%;
  top: 1px;
  left: 1px;
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.gnw-switch-track.gnw-is-flat .gnw-dot { transform: translateX(16px); }

/* B. Tempo cluster — top-left: readout / jewel LED / TAP */
.gnw-tempo-module {
  position: absolute;
  top: var(--gnw-tempo-inset-y);
  left: var(--gnw-tempo-inset-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: var(--gn-layer-floating-popover);
  width: 80px;
  padding: 6px 5px 7px;
  background: rgba(239, 232, 216, 0.85);
  border-radius: 9px;
  border: 1px solid var(--gnw-gold-cool);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(74, 59, 50, 0.12);
}
.gnw-tempo-readout {
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 900;
  font-size: 21px;
  color: #FFF3B8;
  background: #3A2820;
  padding: 4px 6px;
  border-radius: 4px;
  border: 2px solid #6B5B46;
  box-shadow: inset 0 4px 8px rgba(58, 40, 32, 0.82), 0 1px 0 rgba(253, 252, 249, 0.28);
  text-align: center;
  min-width: 56px;
  letter-spacing: 3px;
  text-shadow: 0 0 6px rgba(213, 168, 63, 0.78), 0 0 12px rgba(185, 121, 46, 0.52);
}
.gnw-tempo-led {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #786A45, #3A2820);
  border: 1px solid #6B5B46;
  transition: none;
  box-shadow:
    inset 0 -2px 4px rgba(58,40,32,0.72),
    inset 0 2px 2px rgba(253,252,249,0.38),
    0 1px 2px rgba(253,252,249,0.72);
  position: relative;
  display: block;
}
.gnw-tempo-led::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  filter: blur(1px);
}
.gnw-tempo-led.gnw-on {
  background: radial-gradient(circle at center, #FFFDF8 0%, #D5A83F 30%, #B9792E 100%);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 0 12px 4px rgba(213, 168, 63, 0.72),
    0 0 24px 8px rgba(185, 121, 46, 0.52);
}
.gnw-tempo-icon {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #C49A45;
  border-radius: 50%;
  background: #FBF3E4;
  color: #C49A45;
  cursor: pointer;
  flex: 0 0 auto;
}
.gnw-tempo-icon svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gnw-tempo-play svg {
  stroke: none;
}
.gnw-tempo-sound .gnw-sound-wave {
  fill: none;
}
.gnw-tempo-icon[aria-pressed="true"] {
  background: #C49A45;
  color: #FDFCF9;
  box-shadow: 0 0 8px 1px rgba(196, 154, 69, 0.45);
}
.gnw-tempo-sound.gnw-muted .gnw-sound-wave {
  opacity: 0.22;
}
.gnw-tempo-sound.gnw-muted::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1.5px;
  background: #3A2820;
  transform: rotate(-32deg);
  pointer-events: none;
}
.gnw-tap-btn { width: 40px; height: 36px; border: 2px solid var(--gnw-gold-cool); font-size: 10px; }

/* IBM keypad popover — no display; the readout is the display */
.gnw-numpad {
  position: absolute;
  background: var(--gnw-btn-bg);
  border: 2px solid var(--gnw-gold-cool);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 24px rgba(15,36,65,0.3);
  display: none;
  z-index: var(--gn-layer-floating-popover);
  flex-direction: column;
  gap: 4px;
}
.gnw-numpad.gnw-visible { display: flex; }
.gnw-root > .gnw-numpad,
.gn-floating-layer > .gnw-numpad {
  pointer-events: auto;
  z-index: 20;
}
.gnw-numpad-grid { display: grid; grid-template-columns: repeat(4, 48px); grid-auto-rows: 48px; gap: 4px; }
.gnw-np-key { font-size: 18px; }
.gnw-np-key.gnw-tall { grid-row: span 2; }
.gnw-np-key.gnw-wide { grid-column: span 2; }
/* polish note (Jeff, final): ESC label smaller than digits, navy, reads as a modifier */
.gnw-np-key.gnw-esc { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; }

@media (prefers-reduced-motion: reduce) {
  .gnw-tempo-led, .gnw-tempo-led.gnw-on, .gnw-switch-track .gnw-dot, .gnw-btn { transition: none; }
}

/* ============================================================================
   M14 de-jam performance chrome (dejam-1)
   The reader owns a centered iPad-width stage. Its dense toolbar and chart row
   are reveal-on-demand; pitch/tempo tools remain independent tactile tabs.
   ========================================================================== */
body.reader-focus {
  --gn-reader-stage-width: min(100vw, 820px);
}

body.reader-focus .app-shell,
body.reader-focus .workspace,
body.reader-focus .stage-grid,
body.reader-focus .score-panel {
  width: var(--gn-reader-stage-width);
  max-width: var(--gn-reader-stage-width);
  height: 100dvh;
  min-height: 100dvh;
  margin-inline: auto;
}

body.reader-focus .score-reader {
  width: 100%;
  height: 100dvh;
}

/* A single small tab replaces the permanent toolbar + chart row. The earlier
   immersive rule intentionally hides all reader chrome, so this one affordance
   explicitly opts back in. */
body.reader-focus .center-reveal,
body.reader-focus:not(.controls-revealed) .center-reveal {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute;
  top: max(7px, env(safe-area-inset-top));
  left: 50%;
  z-index: var(--gn-layer-chrome);
  width: auto;
  min-width: 84px;
  height: 34px;
  padding: 0 11px;
  gap: 6px;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  border-color: var(--toolbar-anchor);
  background: var(--well-bg);
  color: var(--ink);
  box-shadow: 0 5px 14px rgba(32, 35, 31, 0.16);
}

body.reader-focus .center-reveal svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
  transition: transform 140ms ease;
}

body.reader-focus .center-reveal span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.reader-focus.controls-revealed .center-reveal {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

body.reader-focus.controls-revealed .center-reveal svg {
  transform: rotate(45deg);
}

/* The revealed toolbar is one horizontally-contained row. Removing the
   separate title chrome row is what keeps the controls off the music. */
body.reader-focus .score-toolbar,
body.reader-focus.reader-portrait .score-toolbar {
  position: fixed !important;
  top: max(48px, calc(env(safe-area-inset-top) + 42px));
  left: var(--home-escape-enclave-width);
  right: max(10px, env(safe-area-inset-right));
  min-height: 54px;
  height: 54px;
  display: flex;
  grid-template-columns: none;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 0;
}

/* Center the score-tools rail while it fits. On overflow, auto margins resolve
   to zero so scrollLeft 0 remains the true leading edge instead of clipping it. */
body.reader-focus .score-toolbar > .reader-left {
  margin-left: auto;
}

body.reader-focus .score-toolbar > .reader-right {
  margin-right: auto;
}

body.reader-focus .reader-title,
body.reader-focus.reader-portrait .reader-title {
  display: none;
}

body.reader-focus .reader-left,
body.reader-focus .reader-right,
body.reader-focus.reader-portrait .reader-left,
body.reader-focus.reader-portrait .reader-right {
  flex: 0 0 auto;
  min-height: 50px;
  height: 50px;
  overflow: visible;
  padding: 3px;
  gap: 4px;
}

body.reader-focus:not(.controls-revealed) .chart-pills {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.reader-focus.controls-revealed .chart-pills,
body.reader-focus.reader-portrait.controls-revealed .chart-pills {
  top: max(108px, calc(env(safe-area-inset-top) + 102px));
  left: max(calc((100vw - var(--gn-reader-stage-width)) / 2 + 72px), calc(env(safe-area-inset-left) + 72px));
  right: auto;
  max-width: min(430px, calc(var(--gn-reader-stage-width) - 88px));
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Chrome is overlay-only: the full-size score geometry is invariant while
   menus, palettes, and reader controls open or close. */
body.reader-focus .score-page,
body.reader-focus.reader-portrait .score-page,
body.reader-focus.reader-portrait.score-crop-tight .score-page,
body.reader-focus.reader-portrait.score-fit-wide .score-page,
body.reader-focus.reader-portrait.score-half-page .score-page,
body.reader-focus.reader-portrait.score-two-up .score-page {
  width: 100% !important;
  max-width: 100vw !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

body.reader-focus .pdf-canvas-frame {
  padding: 6px;
}

/* Keep the rendered page's physical bottom corner inside its score-page host.
   Curl qualification starts on that real canvas corner; an oversized canvas
   clipped below the stage would make the gesture unreachable. */
body.reader-focus .pdf-page-canvas {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: calc(100dvh - 108px);
}

/* Stage-relative fixed furniture. At wide viewports these offsets resolve to
   the centered 820px stage rather than the browser edge. */
body.reader-focus .home-escape-button,
body.reader-focus:not(.controls-revealed) .home-escape-button,
body.reader-focus.controls-revealed .home-escape-button,
body.reader-focus.annotation-mode .home-escape-button {
  left: max(var(--home-escape-left), calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
}

/* Toggle-highlight-to-exit: every mode control reflects the body state, and
   clicking the highlighted control follows the existing close/toggle path. */
#annotateModeToggle[aria-pressed="true"],
#linkModeToggle[aria-pressed="true"],
#toggleKeyboard[aria-pressed="true"],
#toggleRoomPanel[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(253, 252, 249, 0.18);
}

/* Tempo mirrors the pitch reveal/persist contract. */
.gnw-tempo-dock {
  position: absolute;
  top: 76px;
  left: var(--gnw-tempo-inset-x);
  z-index: var(--gn-layer-floating-popover);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

body.reader-focus.controls-revealed .gnw-tempo-dock {
  top: 166px;
}

.gnw-tempo-module {
  position: relative;
  top: auto;
  left: auto;
  display: none;
}

.gnw-tempo-module.gnw-visible {
  display: flex;
}

.gnw-reveal-tools-btn.gnw-active,
.gnw-reveal-tools-btn[aria-pressed="true"] {
  background: var(--gnw-navy);
  border-color: var(--gnw-navy);
  color: var(--gnw-parchment);
  box-shadow: var(--gnw-btn-active-shadow);
  transform: translateY(1px);
}

/* Bottom furniture is a stack: panel, highlighted reveal tab, then cueDock.
   Nothing in the pitch tool can occupy the cueDock's hit rectangle. */
.gnw-bottom-toolbar {
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 72px));
}

.gnw-pitch-panel {
  order: -1;
}

/* The shipped panel is wider than the left page-turn gutter, especially in
   landscape. Keep its reveal tab in the ruled bottom-left position, but center
   the OPEN panel over the non-navigation middle of the stage. This restores
   both real canvas corners and the left tap zone without changing curl/turn
   handling. */
body.reader-focus .gnw-pitch-panel.gnw-visible {
  position: fixed;
  left: 50%;
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 72px));
  transform: translateX(-50%);
}

body.reader-focus.section-nav-hidden .gnw-bottom-toolbar {
  bottom: var(--gnw-pitch-inset-y);
}

/* M14 Slides quick preview. The dock spans only the protected center corridor:
   its left/right insets mirror the page-turn zone width plus a 20px air gap.
   The reveal sits at that corridor's right edge; the strip opens above it and
   keeps Blank fixed while the song thumbnails scroll horizontally. */
.gnw-slides-dock {
  position: absolute;
  left: calc(var(--tap-zone-width, 30%) + 20px);
  right: calc(var(--tap-zone-width, 30%) + 20px);
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 72px));
  z-index: var(--gn-layer-floating-popover);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.gnw-slides-dock > * {
  pointer-events: auto;
}

.gnw-slides-reveal {
  align-self: flex-end;
  gap: 8px;
}

.gnw-slides-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 1px solid rgba(15, 36, 65, 0.38);
  border-radius: 50%;
  background: #9C9A94;
  box-shadow: inset 0 1px 2px rgba(15, 36, 65, 0.3);
}

.gnw-slides-live-dot.gnw-live {
  border-color: #7E361F;
  background: #A04A2C;
  box-shadow: 0 0 7px rgba(160, 74, 44, 0.72);
}

.gnw-slides-strip {
  order: -1;
  width: min(288px, 100%);
  min-height: 92px;
  display: none;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--gnw-gold-cool);
  border-radius: 12px;
  background: rgba(239, 232, 216, 0.95);
  box-shadow: 0 12px 32px rgba(74, 59, 50, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gnw-slides-strip.gnw-visible {
  display: grid;
}

.gnw-slides-thumbnails {
  min-width: 0;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-color: #9A7F43 transparent;
}

.gnw-slide-thumb {
  position: relative;
  width: 108px;
  min-width: 108px;
  height: 68px;
  padding: 5px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 2px solid #D8CEB9;
  border-radius: 6px;
  background: #F7F1E4;
  color: #4A3B32;
  box-shadow: 0 2px 5px rgba(74, 59, 50, 0.09);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
}

.gnw-slide-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gnw-slide-thumb-label {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  z-index: 1;
  overflow: hidden;
  padding: 2px 3px;
  border-radius: 3px;
  background: rgba(74, 59, 50, 0.88);
  color: #FDFCF9;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gnw-slide-thumb.gnw-live {
  border-color: #A04A2C;
  box-shadow: 0 0 0 1px rgba(253, 252, 249, 0.88), 0 0 8px rgba(160, 74, 44, 0.7);
}

.gnw-slide-thumb:disabled,
.gnw-slides-blank:disabled {
  cursor: default;
  opacity: 0.62;
  filter: none;
}

.gnw-slides-blank {
  min-width: 0;
  min-height: 68px;
  padding: 5px;
  border-color: #786A45;
  background: #4A3B32;
  color: #FDFCF9;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
}

.gnw-slides-blank[aria-pressed="true"] {
  border-color: #7E361F;
  background: #A04A2C;
  box-shadow: var(--gnw-btn-active-shadow), 0 0 8px rgba(160, 74, 44, 0.55);
}

body.reader-focus.section-nav-hidden .gnw-slides-dock {
  bottom: var(--gnw-pitch-inset-y);
}

/* ============================================================================
   M14 reader toolbar + score-tools drawer (Jeff pre-showcase GO, 2026-07-13)
   Presentation-only Champagne pass. The separate .gnw-* hardware surfaces are
   intentionally outside this scope: their sacred keycap treatment and geometry
   remain owned by the widget contracts.
   ========================================================================== */
:root {
  --color-parchment: #EFE8D8;
  --color-parchment-border: #D8CEB9;
  --color-taupe: #C8BCA7;
  --color-taupe-border: #B2A48C;
  --color-navy: #4A3B32;
  --color-gold-cool: #C2B391;
  --anchor-offwhite: #FDFCF9;
  --anchor-plaster: #FAF8F3;
  --anchor-sky: #5A8AAE;
  --m14-toolbar-surface: rgba(239, 232, 216, 0.95);
  --m14-toolbar-hover: rgba(194, 179, 145, 0.22);
  --m14-toolbar-shadow: 0 8px 24px rgba(15, 36, 65, 0.14);
}

body.reader-focus .score-toolbar,
body.reader-focus.reader-portrait .score-toolbar {
  justify-content: flex-start;
  padding: 4px 6px;
  border: 1px solid var(--color-gold-cool);
  border-bottom-width: 2px;
  border-radius: 10px;
  background: var(--m14-toolbar-surface);
  color: var(--color-navy);
  box-shadow: var(--m14-toolbar-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* PR #21 reachability semantic, isolated from its expected gate-time lines:
   overflow starts at the first control; auto margins center only when it fits. */
body.reader-focus .reader-toolbar-group-start {
  margin-inline-start: auto;
}

body.reader-focus .reader-toolbar-group-end {
  margin-inline-end: auto;
}

body.reader-focus .reader-toolbar-group,
body.reader-focus.reader-portrait .reader-toolbar-group {
  flex: 0 0 auto;
  min-height: 44px;
  height: 44px;
  padding: 0;
  gap: 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-navy);
  box-shadow: none;
}

body.reader-focus .score-toolbar .icon-button,
body.reader-focus .score-toolbar .cache-action {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--color-navy);
  box-shadow: none;
}

body.reader-focus .score-toolbar .icon-button:hover,
body.reader-focus .score-toolbar .icon-button:focus-visible,
body.reader-focus .score-toolbar .cache-action:hover,
body.reader-focus .score-toolbar .cache-action:focus-visible {
  border-color: transparent;
  background: var(--m14-toolbar-hover);
  color: var(--color-navy);
}

body.reader-focus .score-toolbar .icon-button:focus-visible,
body.reader-focus .score-toolbar .cache-action:focus-visible,
body.reader-focus .score-toolbar .sheep-button:focus-visible,
body.reader-focus .score-toolbar .catch-up-button:focus-visible {
  outline: 2px solid var(--anchor-sky);
  outline-offset: -2px;
}

body.reader-focus .score-toolbar .sheep-button,
body.reader-focus .score-toolbar .catch-up-button {
  min-height: 44px;
  height: 44px;
  border-color: transparent;
  background: rgba(15, 36, 65, 0.07);
  color: var(--color-navy);
  box-shadow: none;
}

body.reader-focus .score-toolbar .sheep-button.disengaged {
  background: var(--accent-danger-soft);
  color: var(--accent-danger);
}

body.reader-focus .score-toolbar .toolbar-drawer-toggle,
body.reader-focus .score-toolbar .toolbar-drawer-toggle:hover,
body.reader-focus .score-toolbar .toolbar-drawer-toggle:focus-visible {
  border-color: var(--color-gold-cool);
  background: var(--color-parchment);
  color: var(--color-navy);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8),
              inset -1px -1px 2px rgba(0, 0, 0, 0.05),
              0 2px 4px rgba(15, 36, 65, 0.15);
}

body.reader-focus .score-toolbar .toolbar-drawer-toggle.active,
body.reader-focus .score-toolbar .toolbar-drawer-toggle[aria-expanded="true"] {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--anchor-offwhite);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
}

body.reader-focus .home-escape-button {
  border-color: var(--color-gold-cool);
  background: var(--m14-toolbar-surface);
  color: var(--color-navy);
  box-shadow: 0 6px 18px rgba(15, 36, 65, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.reader-focus .home-escape-button:hover,
body.reader-focus .home-escape-button:focus-visible {
  background: var(--color-parchment);
  color: var(--color-navy);
  outline-color: var(--anchor-sky);
}

body.reader-focus .reader-controls-chip,
body.reader-focus:not(.controls-revealed) .reader-controls-chip {
  border-color: var(--color-gold-cool);
  background: var(--anchor-offwhite);
  color: var(--color-navy);
  box-shadow: 0 5px 14px rgba(15, 36, 65, 0.14);
}

body.reader-focus.controls-revealed .reader-controls-chip {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--anchor-offwhite);
}

body.reader-focus.controls-revealed .reader-chart-row,
body.reader-focus.reader-portrait.controls-revealed .reader-chart-row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 5px;
  border-color: var(--color-gold-cool);
  background: var(--m14-toolbar-surface);
  box-shadow: 0 6px 18px rgba(15, 36, 65, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.reader-focus .reader-chart-row .chart-pill {
  min-width: 48px;
  border-color: transparent;
  background: transparent;
  color: var(--color-navy);
}

body.reader-focus .reader-chart-row .chart-pill:hover,
body.reader-focus .reader-chart-row .chart-pill:focus-visible {
  background: var(--m14-toolbar-hover);
}

body.reader-focus .reader-chart-row .chart-pill.active {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--anchor-offwhite);
}

body.reader-focus .score-tool-drawer,
body.reader-focus.reader-portrait .score-tool-drawer {
  top: max(170px, calc(env(safe-area-inset-top) + 164px));
  left: 288px;
  right: 10px;
  width: auto;
  height: 158px;
  max-height: none;
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--toolbar-anchor);
  border-radius: 0 0 12px 12px;
  background: var(--toolbar-bg);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(58, 40, 32, 0.18);
}

body.reader-focus .score-tool-drawer[hidden],
body.reader-focus.reader-portrait .score-tool-drawer[hidden] {
  display: none;
}

body.reader-focus .score-tool-drawer-scroll {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 12px 30px 10px;
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section {
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: 18px repeat(2, 44px);
  grid-auto-flow: column;
  grid-auto-columns: 124px;
  gap: 7px 8px;
  padding: 0 18px 0 0;
  border: 0;
  border-right: 1px solid var(--color-parchment-border);
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section:nth-child(1),
body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section:nth-child(3) {
  grid-template-columns: repeat(6, 124px);
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section:nth-child(2) {
  grid-template-columns: repeat(2, 124px);
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section:last-child {
  padding-right: 0;
  border-right: 0;
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > span {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  color: rgba(15, 36, 65, 0.58);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button {
  min-width: 0;
  min-height: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--color-parchment-border);
  border-radius: 8px;
  background: var(--color-parchment);
  color: var(--color-navy);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.72),
              inset -1px -1px 2px rgba(0, 0, 0, 0.04);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button:hover,
body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button:focus-visible {
  border-color: var(--color-taupe-border);
  background: var(--color-parchment-border);
  color: var(--color-navy);
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button.active,
body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button[aria-pressed="true"] {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--anchor-offwhite);
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button[hidden] {
  display: none;
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke-width: 2;
}

body.reader-focus .score-tool-drawer-edge {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
}

body.reader-focus .score-tool-drawer-edge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-navy);
  border-right: 2px solid var(--color-navy);
  opacity: 0.72;
}

body.reader-focus .score-tool-drawer-edge-start {
  left: 0;
  background: linear-gradient(to right, var(--anchor-offwhite) 30%, transparent);
}

body.reader-focus .score-tool-drawer-edge-start::after {
  left: 9px;
  transform: translateY(-50%) rotate(-135deg);
}

body.reader-focus .score-tool-drawer-edge-end {
  right: 0;
  background: linear-gradient(to left, var(--anchor-offwhite) 30%, transparent);
}

body.reader-focus .score-tool-drawer-edge-end::after {
  right: 9px;
  transform: translateY(-50%) rotate(45deg);
}

/* ============================================================================
   Mission M8 — DESIGN-CONSTRAINTS-jeff-rulings.md, rulings 1–12.
   Evergreen circle glyphs, toolbar cross-axis drag, and movable
   annotation sub-panels. Sacred .gnw-key/.gnw-np-key rules stay untouched.
   ========================================================================== */

/* Home is the pinned bottom-corner member of the evergreen circle set. */
body.reader-focus .home-escape-button,
body.reader-focus:not(.controls-revealed) .home-escape-button,
body.reader-focus.controls-revealed .home-escape-button,
body.reader-focus.annotation-mode .home-escape-button {
  top: auto;
  right: auto;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  left: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
  width: 48px;
  height: 48px;
  transform: none;
  border-color: rgba(58, 40, 32, 0.16);
  background: var(--anchor-offwhite);
  color: var(--color-navy);
  box-shadow: 0 4px 12px rgba(58, 40, 32, 0.12);
}

.stage-tool-circles {
  display: none;
}

body.reader-focus .stage-tool-circles {
  display: contents;
}

body.reader-focus.annotation-mode .stage-tool-circles {
  display: none;
}

.stage-circle-glyph {
  appearance: none;
  -webkit-appearance: none;
  position: fixed;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: var(--gn-layer-chrome);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(58, 40, 32, 0.16);
  border-radius: 50%;
  background: var(--anchor-offwhite);
  color: var(--color-navy);
  box-shadow: 0 4px 12px rgba(58, 40, 32, 0.12);
  cursor: pointer;
  touch-action: manipulation;
}

.stage-circle-glyph svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage-circle-glyph .stage-piano-glyph,
.stage-circle-glyph .stage-metronome-glyph {
  width: 25px;
  height: 25px;
}

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

.stage-circle-glyph:hover,
.stage-circle-glyph:focus-visible,
.stage-circle-glyph[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(196, 154, 69, 0.34), 0 4px 12px rgba(58, 40, 32, 0.12);
}

.stage-circle-pitch {
  bottom: max(100px, calc(env(safe-area-inset-bottom) + 94px));
  left: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
}

.stage-circle-tempo {
  bottom: max(166px, calc(env(safe-area-inset-bottom) + 160px));
  left: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
}

.stage-circle-flashlight {
  bottom: max(232px, calc(env(safe-area-inset-bottom) + 226px));
  left: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
}

.stage-circle-flashlight[hidden] {
  display: none !important;
}

.stage-circle-flashlight .stage-flashlight-glyph {
  width: 26px;
  height: 26px;
  color: var(--flashlight-ink);
}

.stage-circle-flashlight .stage-flashlight-rays {
  opacity: 0.52;
}

body.reader-focus .stage-circle-flashlight[aria-pressed="true"] {
  border-color: var(--flashlight-gilt) !important;
  color: var(--flashlight-ink) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 243, 184, 0.72),
    0 0 0 4px rgba(213, 168, 63, 0.18),
    0 0 18px rgba(213, 168, 63, 0.42) !important;
}

body.reader-focus .stage-circle-flashlight[aria-pressed="true"] .stage-flashlight-rays {
  color: var(--flashlight-warm);
  opacity: 1;
}

.stage-circle-slides {
  right: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-right) + 12px));
}

.stage-circle-annotation {
  right: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-right) + 12px));
  bottom: max(100px, calc(env(safe-area-inset-bottom) + 94px));
}

.stage-circle-shepherd {
  right: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-right) + 12px));
  bottom: max(166px, calc(env(safe-area-inset-bottom) + 160px));
}

.stage-circle-glyph .stage-shepherd-glyph {
  width: 29px;
  height: 29px;
  stroke-width: 1.8;
}

.stage-circle-shepherd,
.stage-circle-shepherd[aria-pressed="true"],
.stage-circle-shepherd.disengaged {
  border-color: rgba(58, 40, 32, 0.16);
  background: var(--anchor-offwhite);
  color: var(--color-navy);
  box-shadow: 0 4px 12px rgba(58, 40, 32, 0.12);
}

body.reader-focus .stage-circle-shepherd.quiet-active,
.stage-circle-shepherd.quiet-active {
  border-color: var(--accent-secondary);
  background: var(--gold-soft);
  color: var(--ink);
  box-shadow:
    0 0 0 4px rgba(213, 168, 63, 0.2),
    0 6px 18px rgba(58, 40, 32, 0.18);
}

.stage-circle-shepherd.quiet-active::before {
  content: "Quiet Mode Active";
  position: absolute;
  right: calc(100% + 10px);
  width: max-content;
  padding: 7px 10px;
  border: 1px solid var(--accent-secondary);
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 5px 14px rgba(58, 40, 32, 0.14);
}

.leadership-request-card {
  position: fixed;
  z-index: 1300;
  top: max(18px, calc(env(safe-area-inset-top) + 14px));
  left: 50%;
  width: min(520px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  transform: translateX(-50%);
  border: 1px solid var(--accent-secondary);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 18px 46px rgba(31, 42, 51, 0.25);
}

.leadership-request-card[hidden] {
  display: none;
}

.leadership-request-card h3,
.leadership-request-card p {
  margin: 0;
}

.leadership-request-card small {
  color: var(--muted);
  font-weight: 800;
}

.leadership-request-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-soft);
  font-size: 25px;
}

.leadership-request-actions {
  display: flex;
  gap: 8px;
}

.leadership-request-actions button {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
}

.leadership-request-actions .approve {
  border-color: #3e7e5b;
  background: rgba(62, 126, 91, 0.12);
}

.leadership-request-actions .deny {
  border-color: var(--accent-danger);
  background: var(--accent-danger-soft);
}

.operator-request-slides {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  max-width: 100%;
  flex: 0 1 auto;
  border: 1px solid var(--operator-line-strong);
  background: var(--operator-paper-key);
  color: var(--operator-ink);
  font-weight: 800;
}

.operator-request-slides svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.operator-request-slides.granted {
  border-color: #3e7e5b;
  background: rgba(62, 126, 91, 0.12);
}

.quiet-mode-badge {
  position: fixed;
  z-index: var(--gn-layer-floating);
  right: max(70px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 70px), calc(env(safe-area-inset-right) + 70px));
  bottom: max(148px, calc(env(safe-area-inset-bottom) + 142px));
  padding: 8px 12px;
  border: 1px solid #9a7f43;
  border-radius: 999px;
  background: #fbf1d2;
  color: #4a3b32;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(58, 40, 32, 0.18);
  pointer-events: none;
}

.quiet-mode-badge[hidden] {
  display: none;
}

body.reader-focus .stage-circle-shepherd.quiet-active {
  border-color: #9a7f43 !important;
  background: #fbf1d2 !important;
  box-shadow: 0 0 0 4px rgba(213, 168, 63, 0.24), 0 6px 18px rgba(58, 40, 32, 0.18) !important;
}

.stage-circle-slides .gnw-slides-live-dot {
  position: absolute;
  top: 5px;
  right: 4px;
}

/* Horizontal toolbar: the grip may only move it vertically (ruling 9). */
.reader-toolbar-drag-handle {
  display: none;
}

body.reader-focus .reader-toolbar-drag-handle {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  min-width: 28px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(15, 36, 65, 0.58);
  cursor: ns-resize;
  touch-action: none;
}

.reader-toolbar-drag-handle:hover,
.reader-toolbar-drag-handle:focus-visible,
.reader-toolbar-drag-handle.gnw-dragging {
  background: var(--m14-toolbar-hover);
  color: var(--color-navy);
  outline: none;
}

/* Once the shared drag mechanic makes the toolbar fixed-positioned, retain
   the same stage-relative span it had while absolutely docked. */
body.reader-focus #readerToolbar.gnw-stage-panel {
  width: calc(var(--gn-reader-stage-width) - var(--home-escape-enclave-width) - max(10px, env(safe-area-inset-right)));
  max-width: calc(100vw - var(--home-escape-enclave-width) - max(10px, env(safe-area-inset-right)));
  box-sizing: border-box;
}

.reader-toolbar-drag-handle span,
.annotation-stage-panel-grip span,
.gnw-slides-grip span {
  width: 16px;
  height: 10px;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 6px 5px;
}

/* The two panel docks no longer own word pills; the fixed circles summon the
   shared-mechanic panels directly. */
body.reader-focus .gnw-bottom-toolbar,
body.reader-focus .gnw-slides-dock {
  display: contents;
}

body.reader-focus .gnw-pitch-panel.gnw-visible {
  bottom: auto;
}

/* Ruling 11: only the wide preset changes, and only while Pitch is open. */
body.tap-zone-wide.pitch-panel-open {
  --tap-zone-width: 30%;
}

/* Tuning has no permanent trigger chrome; it appears only after a long-press
   on the existing Pitch header (ruling 12). */
.gnw-pitch-panel .gnw-tuning-bay {
  width: auto;
  margin: 4px 5px 8px;
  padding: 9px;
  border: 1px solid var(--gnw-parchment-border);
  border-radius: 9px;
  background: rgba(253, 252, 249, 0.78);
}

.gnw-pitch-panel .gnw-tuning-head h2 {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gnw-pitch-panel .gnw-reference-key,
.gnw-pitch-panel .gnw-choice-row .gnw-btn {
  min-height: 36px;
}

.gnw-pitch-panel .gnw-reference-key {
  min-width: 84px;
  padding: 0 8px;
  font-size: 10px;
}

.gnw-pitch-panel .gnw-choice-row {
  gap: 4px;
  margin-top: 5px;
}

/* Slides joins gnMakeStagePanel with a compact functional header. */
.gnw-slides-strip {
  width: min(300px, calc(100vw - 16px));
  grid-template-rows: 24px 68px;
}

.gnw-slides-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6B5B46;
  font-size: 10px;
  letter-spacing: 0.07em;
}

.gnw-slides-grip,
.gnw-slides-close {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8B7C64;
}

.gnw-slides-grip {
  width: 28px;
  height: 22px;
  cursor: grab;
  touch-action: none;
}

.gnw-slides-close {
  width: 24px;
  height: 24px;
  margin-left: auto;
  border: 1px solid var(--gnw-parchment-border);
  border-radius: 50%;
  background: #F7F1E4;
  cursor: pointer;
}

/* One shared visual/header grammar for stamps, palettes, and range controls. */
.annotation-stage-panel-header {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6B5B46;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stamp-palette > .annotation-stage-panel-header,
.shape-palette > .annotation-stage-panel-header,
.lasso-palette > .annotation-stage-panel-header,
.layer-palette > .annotation-stage-panel-header,
.history-palette > .annotation-stage-panel-header {
  grid-column: 1 / -1;
}

.annotation-stage-panel-header .annotation-stage-panel-grip,
.annotation-stage-panel-header .annotation-stage-panel-close {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8B7C64;
  box-shadow: none;
}

.annotation-stage-panel-grip {
  width: 28px;
  height: 24px;
  cursor: grab;
  touch-action: none;
}

.annotation-stage-panel-close {
  width: 24px;
  height: 24px;
  margin-left: auto !important;
  border: 1px solid #D8CEB9 !important;
  border-radius: 50% !important;
  background: #F7F1E4 !important;
  cursor: pointer;
}

.gnw-stage-panel-dragging,
.gnw-stage-panel-dragging * {
  cursor: grabbing !important;
}

.gn-floating-layer {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-floating);
  pointer-events: none;
}

.gn-floating-layer-item {
  pointer-events: none;
}

.gn-floating-layer .gn-floating-tool-surface {
  pointer-events: auto;
}

.gn-floating-layer [data-stage-panel-grip] > * {
  pointer-events: none;
}

.gnw-stage-panel {
  z-index: var(--gn-layer-floating-popover);
}

#historyPaletteContent {
  display: grid;
  gap: 8px;
}

/* Shared-clamped annotation panels own their fixed coordinates after first
   reveal. Keep content dimensions bounded for both iPad orientations. */
.ink-subtool-row,
.stamp-palette,
.shape-palette,
.lasso-palette,
.layer-palette,
.history-palette {
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
}

/* M9 P2 — the annotation surface is one free-floating, no-scroll palette. */
body.reader-focus.annotation-mode .annotation-rail,
body.annotation-mode .annotation-rail {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(610px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  max-height: none;
  display: grid;
  grid-template-columns: minmax(315px, 1.12fr) minmax(245px, 0.88fr);
  grid-template-rows: 42px auto 48px;
  gap: 8px 12px;
  align-items: start;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #C2B391;
  border-radius: 14px;
  background: rgba(239, 232, 216, 0.97);
  color: #4A3B32;
  box-shadow: 0 18px 44px rgba(15, 36, 65, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: none;
  overflow: visible;
}

body.annotation-mode .score-page,
body.annotation-mode.edit-rail-left .score-page,
body.annotation-mode .score-reader.edit-rail-left .score-page,
body.annotation-mode .annotation-rail.edit-rail-left ~ .score-page {
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.annotation-palette-title {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #6B5B46;
  letter-spacing: 0.08em;
}

.annotation-palette-title strong { font-size: 12px; }
.annotation-palette-title span { font-size: 8px; font-weight: 900; }

.annotation-rail .annotation-session-actions {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  flex-direction: row;
  justify-self: start;
  z-index: 1;
}

.annotation-rail .annotation-session-actions .tool-button,
.annotation-rail .annotation-utilities .tool-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
}

.annotation-rail .annotation-scope-stack {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  flex-direction: row;
  justify-self: end;
  margin-right: 42px;
}

.annotation-rail .annotation-scope-toggle {
  width: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 4px;
  border-radius: 9px;
}

.annotation-rail .annotation-scope-toggle button {
  width: auto;
  min-height: 27px;
  padding: 0 7px;
  white-space: nowrap;
}

.annotation-rail .annotation-scope-stack > .tool-button { display: none; }

.annotation-rail .annotation-drag-handle {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 36px;
  min-width: 36px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
  box-shadow: none;
}

.annotation-rail .annotation-drag-handle span {
  width: 16px;
  height: 10px;
  display: block;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 6px 5px;
  opacity: 0.68;
}

.annotation-rail .annotation-drag-handle span::before { content: none; }

.annotation-tool-grid {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  display: grid;
  gap: 6px;
}

.annotation-category-tabs,
.annotation-category-row,
.annotation-singletons {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.annotation-category-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.annotation-category-tabs > button {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(194, 179, 145, 0.72);
  border-radius: 8px;
  background: rgba(253, 252, 249, 0.72);
  color: #6B5B46;
  font: 850 9px/1 "IBM Plex Sans", system-ui, sans-serif;
}

.annotation-category-tabs > button.active,
.annotation-category-tabs > button[aria-selected="true"] {
  border-color: rgba(154, 127, 67, 0.55);
  background: rgba(216, 206, 185, 0.48);
  box-shadow: inset 3px 0 0 #9A7F43;
}

.annotation-category-tabs svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.annotation-category-row[hidden] { display: none !important; }

.annotation-tool-grid .tool-button {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  place-items: center start;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid rgba(194, 179, 145, 0.72);
  border-radius: 8px;
  background: rgba(253, 252, 249, 0.72);
  color: #4A3B32;
  box-shadow: 0 2px 5px rgba(15, 36, 65, 0.08);
}

.annotation-tool-grid .tool-button::after {
  content: attr(aria-label);
  min-width: 0;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.05;
  text-align: left;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.annotation-tool-grid .tool-button.active,
.annotation-tool-grid .tool-button.active:hover,
.annotation-tool-grid .tool-button.active:focus-visible {
  outline: none;
  border-color: #C49A45;
  background: rgba(216, 206, 185, 0.48);
  color: #4A3B32;
  box-shadow: inset 3px 0 0 #C49A45, 0 2px 5px rgba(15, 36, 65, 0.08);
}

.annotation-behavior-tabs button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.annotation-rail .ink-subtool-row {
  position: static;
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  max-height: none;
  display: grid !important;
  gap: 7px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(194, 179, 145, 0.72);
  border-radius: 10px;
  background: rgba(253, 252, 249, 0.7);
  box-shadow: none;
  transform: none;
  overflow: visible;
}

.annotation-rail .tool-settings {
  display: grid;
  gap: 6px;
}

.annotation-rail .tool-settings[hidden] { display: none !important; }
.annotation-rail .pen-ink-controls { padding-bottom: 0; border-bottom: 0; }
.annotation-rail .swatch-cluster { flex-direction: row; justify-content: flex-start; gap: 6px; }
.annotation-rail .swatch { width: 25px; height: 25px; flex-basis: 25px; }

.annotation-rail .annotation-range-control {
  grid-template-columns: 68px minmax(0, 1fr) 34px;
  min-height: 27px;
  gap: 5px;
  font-size: 9px;
}

.annotation-rail .highlighter-axis-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.annotation-rail .highlighter-axis-grid button {
  min-height: 29px;
  padding: 2px 3px;
  font-size: 8px;
}

.annotation-rail .highlighter-swatches {
  grid-template-columns: repeat(4, 31px);
  justify-content: center;
  gap: 5px;
}

.annotation-rail .highlighter-swatch {
  grid-column: auto;
  width: 31px;
  height: 31px;
  padding: 0;
  font-size: 0;
}

.annotation-rail .annotation-led-readout { padding: 5px 7px; font-size: 8px; }

.annotation-rail .annotation-utilities {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-self: end;
  padding-top: 6px;
  border-top: 1px solid rgba(194, 179, 145, 0.72);
}

.annotation-rail .stamp-palette,
.annotation-rail .lasso-palette,
.annotation-rail .layer-palette,
.annotation-rail .history-palette {
  position: static;
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  padding: 8px;
  border-color: rgba(194, 179, 145, 0.72);
  border-radius: 10px;
  background: rgba(253, 252, 249, 0.78);
  box-shadow: none;
  overflow: visible;
}

.annotation-rail .shape-palette { display: none !important; }
.annotation-rail .annotation-stage-panel-header button { display: none; }

body.stamps-mode .annotation-rail .ink-subtool-row,
body.lasso-mode .annotation-rail .ink-subtool-row,
body.layers-mode .annotation-rail .ink-subtool-row,
body.history-mode .annotation-rail .ink-subtool-row { display: none !important; }

body.stamps-mode .annotation-rail .stamp-palette,
body.lasso-mode .annotation-rail .lasso-palette,
body.layers-mode .annotation-rail .layer-palette,
body.history-mode .annotation-rail .history-palette { display: grid !important; }

/* Shape geometry is drawn from pointer-down to pointer-up. */
.annotation-shape.rectangle-x::before,
.annotation-shape.rectangle-x::after {
  content: none;
}

.annotation-shape.rectangle-x {
  overflow: hidden;
}

.annotation-shape.rectangle-x > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.annotation-shape.rectangle-x > svg line {
  stroke: currentColor;
  stroke-width: var(--annotation-shape-thickness, 3px);
  stroke-linecap: butt;
}

/* Keep old saved line annotations renderable; there is no Line tool or line-creation state. */
.annotation-shape.line,
.annotation-shape.arrow {
  height: 0;
  border: 0;
  border-top: var(--annotation-shape-thickness, 3px) solid currentColor;
  background: transparent;
  box-shadow: none;
  transform-origin: 0 50%;
}

.annotation-shape.arrow::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-top: var(--annotation-shape-thickness, 3px) solid currentColor;
  border-right: var(--annotation-shape-thickness, 3px) solid currentColor;
  transform: rotate(45deg);
}

.annotation-shape.bracket {
  box-sizing: border-box;
  width: 18px;
  min-width: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: 0 0;
}

.annotation-shape.bracket::before,
.annotation-shape.bracket::after {
  content: none;
}

.annotation-shape.bracket-left {
  border-top: var(--annotation-shape-thickness, 3px) solid currentColor;
  border-bottom: var(--annotation-shape-thickness, 3px) solid currentColor;
  border-left: var(--annotation-shape-thickness, 3px) solid currentColor;
}

.annotation-shape.bracket-right {
  border-top: var(--annotation-shape-thickness, 3px) solid currentColor;
  border-right: var(--annotation-shape-thickness, 3px) solid currentColor;
  border-bottom: var(--annotation-shape-thickness, 3px) solid currentColor;
}

/* M9 P4C — one compact settings block follows the selected annotation tool. */
.tool-settings-title {
  color: #6B5B46;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.annotation-color-control {
  display: grid;
  grid-template-columns: 68px 46px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #4A3B32;
  font-size: 9px;
  font-weight: 850;
}

.annotation-color-control output {
  font: 900 9px/1 "Courier New", monospace;
  text-align: right;
}

.annotation-color-wheel {
  --picker-color: #4A7A9E;
  position: relative;
  width: 42px;
  height: 42px;
  display: block;
  overflow: hidden;
  border: 2px solid #FDFCF9;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--picker-color) 0 24%, #FDFCF9 26% 31%, transparent 33%),
    conic-gradient(#f33, #ff3, #3f3, #3ff, #33f, #f3f, #f33);
  box-shadow: 0 0 0 1px #C2B391, 0 3px 8px rgba(15, 36, 65, 0.16);
  cursor: pointer;
}

.annotation-color-wheel input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.annotation-color-wheel:focus-within {
  outline: 2px solid #C49A45;
  outline-offset: 2px;
}

.annotation-behavior-tabs,
.annotation-toggle-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.annotation-toggle-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.annotation-behavior-tabs button,
.annotation-toggle-tabs button {
  min-height: 29px;
  padding: 2px 3px;
  border: 1px solid #D8CEB9;
  border-radius: 6px;
  background: #EFE8D8;
  color: #4A3B32;
  font-size: 8px;
  font-weight: 900;
  cursor: pointer;
}

.annotation-behavior-tabs button[aria-pressed="true"],
.annotation-toggle-tabs button[aria-pressed="true"] {
  border-color: #C49A45;
  background: rgba(216, 206, 185, 0.72);
  box-shadow: inset 3px 0 0 #C49A45;
}

.annotation-check-control {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #4A3B32;
  font-size: 9px;
  font-weight: 850;
}

.annotation-check-control input { accent-color: #C49A45; }

.stamp-settings-row {
  display: grid;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid #D8CEB9;
}

.annotation-rail .stamp-settings-row .annotation-range-control {
  grid-template-columns: 68px minmax(0, 1fr) 34px;
}

.annotation-shape {
  border-width: var(--annotation-shape-thickness, 3px);
}

/* Tempo now owns a real drag surface; the sacred numpad remains attached. */
.gnw-tempo-dock { z-index: var(--gn-layer-floating-popover); }

/* The stage metronome button opens this Tempo module directly. Its body state
   never includes metronome-open and it is not a .side-panel descendant, so
   width rules for .side-panel .metronome-block cannot affect what users see. */
body.reader-focus .gnw-tempo-module.gnw-visible {
  width: min(80px, calc(100vw - 16px));
  padding: 6px 5px 7px;
  box-sizing: border-box;
  overflow: visible;
}

.gnw-tempo-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1px;
  color: #6B5B46;
  font-size: 9px;
  letter-spacing: 0.07em;
  box-sizing: border-box;
}

.gnw-tempo-grip,
.gnw-tempo-close {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8B7C64;
  cursor: grab;
  touch-action: none;
}

.gnw-tempo-grip span {
  width: 14px;
  height: 10px;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 6px 5px;
}

.gnw-tempo-close {
  margin-left: 0;
  border: 1px solid #D8CEB9;
  border-radius: 50%;
  background: #F7F1E4;
  cursor: pointer;
}

.stage-circle-glyph .stage-metronome-glyph {
  width: 23px;
  height: 23px;
  stroke-width: 2;
}

.gnw-stage-panel-dragging { will-change: transform; transition: none !important; }

/* M9 P2: the score action drawer obeys the same no-discovery-scroll rule.
   Its three groups share the available width and wrap every action into a
   visible compact grid. */
body.reader-focus .score-tool-drawer,
body.reader-focus.reader-portrait .score-tool-drawer {
  left: 8px;
  right: 8px;
  height: 184px;
  overflow: visible;
}

body.reader-focus .score-tool-drawer-scroll {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(126px, 0.48fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  overflow: visible;
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section,
body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section:nth-child(1),
body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section:nth-child(2),
body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section:nth-child(3) {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 16px repeat(3, 42px);
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 5px;
  padding: 0 10px 0 0;
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section:nth-child(2) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 16px repeat(2, 42px);
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: 42px;
  gap: 4px;
  padding: 0 5px;
  font-size: 9px;
  white-space: normal;
}

body.reader-focus .score-tool-drawer-scroll .score-tool-drawer-section > button svg {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

body.reader-focus .score-tool-drawer-edge { display: none; }

/* Showcase nav — approved cleared-top mockup + rulings 39, 51, and 52. */
body.reader-focus .score-toolbar,
body.reader-focus.reader-portrait .score-toolbar {
  left: auto !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  top: max(10px, calc(env(safe-area-inset-top) + 8px)) !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.reader-focus .reader-toolbar-drag-handle,
body.reader-focus .score-toolbar > .reader-left,
body.reader-focus .score-toolbar > .reader-title,
body.reader-focus .score-toolbar > .reader-right > :not(#toolDrawerToggle) {
  display: none !important;
}

body.reader-focus .score-toolbar > .reader-right,
body.reader-focus.reader-portrait .score-toolbar > .reader-right {
  display: block !important;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0 !important;
  padding: 0 !important;
}

body.reader-focus .score-toolbar #toolDrawerToggle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid #D8CEB9;
  border-bottom-width: 3px;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%);
  color: #4A3B32;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.82), inset -1px -1px 2px rgba(0, 0, 0, 0.05), 0 3px 7px rgba(74, 59, 50, 0.14);
}

body.reader-focus .score-toolbar #toolDrawerToggle.active,
body.reader-focus .score-toolbar #toolDrawerToggle[aria-expanded="true"] {
  border-color: #9A7F43;
  background: rgba(216, 206, 185, 0.72);
  color: #4A3B32;
  box-shadow: inset 3px 0 0 #9A7F43, inset 1px 1px 3px rgba(74, 59, 50, 0.12);
}

body.reader-focus .chart-pills,
body.reader-focus:not(.controls-revealed) .chart-pills,
body.reader-focus.controls-revealed .chart-pills,
body.reader-focus.reader-portrait.controls-revealed .chart-pills {
  top: max(66px, calc(env(safe-area-inset-top) + 64px)) !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(72px, calc(env(safe-area-inset-right) + 72px)) !important;
  width: fit-content;
  max-width: calc(100vw - 96px) !important;
  min-height: 48px;
  box-sizing: border-box;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.reader-focus .score-tool-drawer,
body.reader-focus.reader-portrait .score-tool-drawer {
  position: fixed;
  z-index: var(--gn-layer-floating);
  top: max(66px, calc(env(safe-area-inset-top) + 64px));
  right: max(10px, env(safe-area-inset-right));
  left: auto;
  width: min(306px, calc(100vw - 20px));
  height: auto;
  max-height: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  /* Vision pass (icon-picks): right inset read marginally tighter than the
     left; +2px on the right balances the popover's internal padding. */
  padding: 8px 10px 8px 8px;
  overflow: visible;
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  background: var(--toolbar-bg);
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(58, 40, 32, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.reader-focus .score-tool-drawer[hidden],
body.reader-focus.reader-portrait .score-tool-drawer[hidden] {
  display: none !important;
}

body.reader-focus .score-tool-drawer > button {
  min-height: var(--gn-app-row-height);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 2px 5px rgba(58, 40, 32, 0.07);
}

body.reader-focus .score-tool-drawer > button[hidden] {
  display: none !important;
}

body.reader-focus .score-tool-drawer > button[data-tool-drawer-action] {
  grid-template-rows: 1fr;
}

body.reader-focus .score-tool-drawer > button[data-tool-drawer-action] > svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Peer parity in reader focus: sibling stroke icons paint at --accent, so the
   masked DIN mark takes the same token. 22px against their 20px is the
   deliberate size bump: the closed ring carries more optical mass. */
body.reader-focus .score-tool-drawer > button[data-tool-drawer-action] > .score-tool-drawer-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

body.reader-focus .score-tool-drawer > button > span {
  grid-row: 1 / 3;
  color: var(--ink-muted);
  font: 800 9px/1 var(--font-sans);
}

body.reader-focus .score-tool-drawer > button strong {
  font-family: var(--font-sans);
  font-size: var(--gn-app-headline-size);
  font-weight: 800;
  line-height: var(--gn-app-headline-leading);
}

body.reader-focus .score-tool-drawer > button[data-tool-drawer-action] > strong {
  grid-column: 2;
  grid-row: 1;
}

body.reader-focus .score-tool-drawer > button small {
  color: var(--ink-muted);
  font-size: var(--gn-app-supporting-size);
}

body.reader-focus .score-tool-drawer > button.active,
body.reader-focus .score-tool-drawer > button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--toolbar-anchor) 45%, transparent);
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 4px 0 0 var(--toolbar-anchor), 0 2px 5px rgba(58, 40, 32, 0.07);
}

body.reader-focus .score-tool-drawer > hr.score-tool-drawer-divider {
  margin: 2px 4px;
  border-top-color: var(--chrome-border);
}

body.reader-focus .score-tool-drawer > button.score-tool-drawer-danger {
  border-color: rgba(164, 62, 50, 0.38);
  background: rgba(164, 62, 50, 0.08);
  color: var(--accent-danger);
}

body.reader-focus .score-tool-drawer > button.score-tool-drawer-danger > svg {
  color: var(--accent-danger);
}

/* Showcase chart variants — ruling 50.
   Keep every pill in the IBM/champagne family and reserve gilt for the
   selected variant using the same MTHQ left-bar + soft-tint language. */
.chart-pill,
body.reader-focus .chart-pills .chart-pill,
body.reader-focus .reader-chart-row .chart-pill {
  border-color: #D8CEB9;
  background: #FFFDF8;
  color: #4A3B32;
  box-shadow: 0 1px 2px rgba(74, 59, 50, 0.08);
}

.chart-pill:hover,
.chart-pill:focus-visible,
body.reader-focus .chart-pills .chart-pill:hover,
body.reader-focus .chart-pills .chart-pill:focus-visible,
body.reader-focus .reader-chart-row .chart-pill:hover,
body.reader-focus .reader-chart-row .chart-pill:focus-visible {
  border-color: #C2B391;
  background: rgba(216, 206, 185, 0.32);
  color: #4A3B32;
}

.chart-pill.active,
body.reader-focus .chart-pills .chart-pill.active,
body.reader-focus .reader-chart-row .chart-pill.active {
  border-color: rgba(154, 127, 67, 0.45);
  background: rgba(216, 206, 185, 0.58);
  color: #4A3B32;
  box-shadow: inset 3px 0 0 #9A7F43, 0 1px 2px rgba(74, 59, 50, 0.08);
}

.chart-pill.active .status-dot,
body.reader-focus .chart-pills .chart-pill.active .status-dot {
  background: #9A7F43;
}

.score-tool-palettes {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-floating);
  pointer-events: none;
}

.score-tool-palette {
  width: min(294px, calc(100vw - 16px));
  display: grid;
  grid-template-rows: 38px auto;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #C2B391;
  border-radius: 12px;
  background: rgba(242, 235, 225, 0.96);
  color: #4A3B32;
  box-shadow: 0 16px 38px rgba(74, 59, 50, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}

.score-tool-palette[hidden] { display: none !important; }
.score-tool-palette-live { width: min(326px, calc(100vw - 16px)); }

.score-tool-palette-header {
  display: grid;
  grid-template-columns: 34px 1fr 30px;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(194, 179, 145, 0.72);
  color: #6B5B46;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.score-tool-palette-header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #D8CEB9;
  border-radius: 7px;
  background: #F7F1E4;
  color: #6B5B46;
}

.score-tool-palette-header [data-stage-panel-grip] { cursor: grab; touch-action: none; }
.score-tool-palette-header [data-stage-panel-grip] span {
  width: 16px;
  height: 10px;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 6px 5px;
  opacity: 0.68;
}

.score-tool-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.score-tool-palette-grid > button {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid #D8CEB9;
  border-bottom-width: 2px;
  border-radius: 7px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%);
  color: #4A3B32;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.82), inset -1px -1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(74, 59, 50, 0.1);
  font: 750 9px/1.1 "IBM Plex Sans", system-ui, sans-serif;
  text-align: center;
}

.score-tool-palette-grid > button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.annotation-color-control .annotation-color-presets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px repeat(4, 28px) minmax(42px, 1fr);
  gap: 5px;
  align-items: center;
  margin-top: 2px;
}

.annotation-color-control .annotation-color-quick-presets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px repeat(3, minmax(44px, 1fr));
  gap: 5px;
  align-items: center;
  margin-top: 2px;
}

.annotation-color-quick-presets > span {
  color: #6B5B46;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.annotation-color-quick-presets button {
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  border: 1px solid #C2B391;
  border-bottom-width: 2px;
  border-radius: 6px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%);
  color: #4A3B32;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(74, 59, 50, 0.1);
  font: 800 8px/1 "IBM Plex Sans", system-ui, sans-serif;
  text-transform: uppercase;
}

.annotation-color-quick-presets button::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 1px solid rgba(58, 40, 32, 0.25);
  border-radius: 50%;
  background: var(--quick-color);
}

.annotation-color-quick-presets button.active {
  outline: 2px solid #9A7F43;
  outline-offset: 1px;
}

.annotation-color-presets > span {
  color: #6B5B46;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.annotation-color-presets button {
  min-width: 0;
  height: 27px;
  padding: 0;
  border: 1px solid #C2B391;
  border-radius: 6px;
  background: var(--preset-color, transparent);
  color: transparent;
  box-shadow: inset 0 0 0 2px rgba(253, 252, 249, 0.75);
  font-size: 0;
}

.annotation-color-presets button.empty {
  background: repeating-linear-gradient(135deg, #F7F1E4 0 5px, #E3D9C5 5px 10px);
}

.annotation-color-presets button.active {
  outline: 2px solid #9A7F43;
  outline-offset: 1px;
}

.annotation-color-presets .annotation-color-preset-save {
  padding: 0 6px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%);
  color: #4A3B32;
  font-size: 8px;
  font-weight: 850;
}

body.reader-focus:not(.controls-revealed) .score-toolbar,
body.reader-focus:not(.controls-revealed) .score-toolbar *,
body.reader-focus.reader-portrait:not(.controls-revealed) .score-toolbar,
body.reader-focus.reader-portrait:not(.controls-revealed) .score-toolbar * {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.reader-focus .score-panel {
  overflow: visible;
}

/* The hamburger owns this overlay directly; its visibility no longer depends
   on the retired controls-revealed reader-chrome state. */
body.reader-focus:not(.controls-revealed) .score-tool-drawer:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* R64 / BUG-B: a compact pinned performance header. The count-in occupies a
   bounded center lane; chart variants, search/refresh, and the hamburger own
   separate fixed lanes and therefore cannot occlude one another. */
body.reader-focus .score-toolbar,
body.reader-focus.reader-portrait .score-toolbar {
  position: fixed !important;
  top: max(10px, calc(env(safe-area-inset-top) + 8px)) !important;
  left: auto !important;
  right: max(72px, calc(env(safe-area-inset-right) + 72px)) !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: var(--gn-layer-chrome) !important;
}

body.reader-focus .score-toolbar > .reader-right,
body.reader-focus.reader-portrait .score-toolbar > .reader-right {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  display: block !important;
  overflow: visible;
}

body.reader-focus #readerToolbar.score-toolbar > .reader-right > #openLibrarySearch,
body.reader-focus #openLibrarySearch {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.reader-focus .score-toolbar #toolDrawerToggle {
  position: fixed;
  top: max(10px, calc(env(safe-area-inset-top) + 8px));
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  z-index: var(--gn-layer-chrome-raised);
}

body.reader-focus .chart-pills,
body.reader-focus:not(.controls-revealed) .chart-pills,
body.reader-focus.controls-revealed .chart-pills,
body.reader-focus.reader-portrait .chart-pills,
body.reader-focus.reader-portrait.controls-revealed .chart-pills {
  position: fixed;
  top: max(66px, calc(env(safe-area-inset-top) + 64px)) !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 80px !important;
  min-height: 0;
  display: flex;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  z-index: var(--gn-layer-chrome);
}

body.reader-focus .chart-pills .chart-pill,
body.reader-focus .reader-chart-row .chart-pill {
  width: auto;
  min-width: 56px;
  height: 44px;
  min-height: 44px;
  padding: 0 9px;
}

body.reader-focus .count-in-band {
  position: fixed;
  top: max(10px, calc(env(safe-area-inset-top) + 8px));
  left: max(200px, calc(env(safe-area-inset-left) + 200px));
  right: max(184px, calc(env(safe-area-inset-right) + 184px));
  width: auto;
  max-width: 640px;
  height: 48px;
  margin-inline: auto;
  align-items: stretch;
  transform: none;
  z-index: var(--gn-layer-chrome);
}

body.reader-focus .count-in-bar-content {
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  flex-wrap: nowrap;
  padding: 4px 5px;
}

body.reader-focus .count-in-gear {
  flex-basis: 40px;
  width: 40px;
  height: 38px;
}

body.reader-focus .count-in-leader-badge {
  top: -4px;
  right: -3px;
}

@media (max-width: 900px) {
  body.reader-focus .count-in-progress {
    gap: 1px;
  }

  body.reader-focus .count-in-progress-cell {
    min-width: 12px;
    font-size: 9px;
  }
}

body.reader-focus .count-in-tab {
  position: fixed;
  top: var(--count-in-collapsed-top, max(10px, calc(env(safe-area-inset-top) + 8px)));
  left: var(--count-in-collapsed-left, max(12px, env(safe-area-inset-left)));
  height: 48px;
  margin: 0;
  z-index: var(--gn-layer-chrome-raised);
}

body.reader-focus .count-in-reveal {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #D8CEB9;
  border-bottom-width: 3px;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%);
  color: #4A3B32;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.82), inset -1px -1px 2px rgba(0, 0, 0, 0.05), 0 3px 7px rgba(74, 59, 50, 0.14);
}

body.reader-focus .count-in-reveal[aria-expanded="true"] {
  border-color: var(--toolbar-anchor);
  background: var(--accent-secondary-soft);
  color: var(--terracotta-text);
}

body.reader-focus .count-in-play-stop {
  flex-basis: 40px;
  width: 40px;
  height: 38px;
  min-height: 38px;
}

/* Play/Prepare header slots are gone (L2.1). Keep the rule as display:none so
   leftover markup cannot reopen the gap above PDF. */
.reader-mode-toggle,
body.reader-focus .reader-mode-toggle {
  display: none !important;
}

body.reader-focus #readerToolbar.score-toolbar > .reader-right,
body.reader-focus #readerToolbar.score-toolbar #toolDrawerToggle {
  box-sizing: border-box;
  flex-shrink: 0;
}

body.prepare-mode #readerModeToggle,
body.prepare-mode #chartPills,
body.prepare-mode #countInBand,
body.prepare-mode #readerToolbar,
body.prepare-mode .reader-build-stamp {
  display: none !important;
}

body.reader-focus .reader-build-stamp {
  position: fixed;
  top: max(68px, calc(env(safe-area-inset-top) + 66px));
  right: max(12px, env(safe-area-inset-right));
  z-index: var(--gn-layer-chrome);
}

body.reader-focus.count-in-gear-open .count-in-band {
  z-index: var(--gn-layer-floating);
}

/* Rulings 59 + 67: floating performance controls share the IBM keycap
   palette. Their glyph geometry stays unchanged; only the pitch accidentals
   gain the explicitly requested solid fill. */
body.reader-focus .home-escape-button,
body.reader-focus:not(.controls-revealed) .home-escape-button,
body.reader-focus.controls-revealed .home-escape-button,
body.reader-focus.annotation-mode .home-escape-button,
body.reader-focus .stage-circle-glyph,
body.reader-focus .stage-circle-shepherd,
body.reader-focus .stage-circle-shepherd.disengaged {
  border-color: #D8CEB9 !important;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%) !important;
  color: #4A3B32 !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.82), inset -1px -1px 2px rgba(0, 0, 0, 0.05), 0 3px 7px rgba(74, 59, 50, 0.14) !important;
}

body.reader-focus .home-escape-button:hover,
body.reader-focus .home-escape-button:focus-visible,
body.reader-focus .stage-circle-glyph:hover,
body.reader-focus .stage-circle-glyph:focus-visible,
body.reader-focus .stage-circle-glyph[aria-pressed="true"] {
  border-color: #9A7F43 !important;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%) !important;
  color: #4A3B32 !important;
  box-shadow: inset 0 0 0 1px rgba(154, 127, 67, 0.34), inset 1px 1px 2px rgba(255, 255, 255, 0.82), 0 3px 7px rgba(74, 59, 50, 0.14) !important;
}

.stage-circle-glyph .stage-piano-glyph {
  stroke-width: 1.65;
}

.stage-circle-glyph .stage-piano-glyph .stage-piano-black-keys {
  fill: #111;
  stroke: #111;
  stroke-width: 0.8;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* Prepare mode: Jeff-approved four-tab card surface (2026-07-18). */
.binder-editor .prepare-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 9px;
}

.binder-editor .prepare-header-actions > * {
  flex: 0 0 auto;
}

.binder-editor .prepare-header-actions .primary-action {
  min-height: 42px;
  border-color: rgba(196, 154, 69, 0.46);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.binder-editor #saveBinderEditor {
  border-color: rgba(196, 154, 69, 0.46);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.binder-editor [data-prepare-pane][hidden],
.binder-editor .prepare-add-picker[hidden] {
  display: none !important;
}

.binder-editor .binder-editor-quicknav {
  gap: 7px;
  padding-block: 10px;
}

.binder-editor .binder-editor-quicknav button {
  min-height: 36px;
  border-color: var(--line-strong);
  background: var(--well-bg);
  color: var(--ink-muted);
}

.binder-editor .binder-editor-quicknav button:hover,
.binder-editor .binder-editor-quicknav button:focus-visible {
  border-color: rgba(196, 154, 69, 0.55);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.binder-editor .binder-editor-quicknav button.active,
.binder-editor .binder-editor-quicknav button[aria-selected="true"] {
  border-color: var(--accent-secondary);
  background: var(--accent-secondary);
  color: #FFFFFF;
}

.binder-editor .prepare-songs-pane,
.binder-editor .prepare-share-pane {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.binder-editor .binder-piece-editor-list {
  gap: 8px;
}

.binder-editor .binder-piece-row {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel);
}

.binder-editor .binder-piece-row-head,
.binder-editor .binder-piece-row-head:hover,
.binder-editor .binder-piece-row-head:focus-visible {
  min-height: 64px;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  cursor: pointer;
  outline: none;
}

.binder-editor .binder-piece-row-head:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus-outline);
}

.binder-piece-number,
.prepare-library-number {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--well-bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.binder-editor .binder-piece-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  align-items: start;
  gap: 2px;
}

.binder-editor .binder-piece-oow-role {
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-secondary);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.binder-piece-song-title {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-serif-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-piece-summary {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-editor .binder-drag-handle {
  width: 34px;
  min-height: 40px;
  flex: 0 0 34px;
  align-self: center;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #B7AA91;
}

.binder-editor .binder-drag-handle svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.binder-piece-chevron {
  width: 30px;
  min-height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease;
}

.binder-piece-row.open .binder-piece-chevron {
  transform: rotate(90deg);
}

.binder-piece-detail {
  display: none;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--canvas);
}

.binder-piece-row.open .binder-piece-detail {
  display: block;
}

.binder-editor .binder-piece-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.binder-editor .binder-piece-grid .wide {
  grid-column: 1 / -1;
}

.binder-editor .binder-piece-actions {
  width: 100%;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.binder-editor .binder-mini {
  min-height: 38px;
}

.binder-editor .binder-mini.danger {
  border-color: rgba(164, 62, 50, 0.32);
  color: var(--accent-danger);
}

.prepare-add-picker {
  margin: 10px 10px 0;
}

.prepare-add-song {
  width: calc(100% - 20px);
  min-height: 48px;
  margin: 12px 10px 2px;
  border: 1.5px dashed var(--accent-secondary);
  border-radius: 12px;
  background: var(--accent-secondary-soft);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.prepare-section-card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.prepare-wide-action {
  width: 100%;
  min-height: 46px;
  margin: 8px 0;
  justify-content: center;
  text-align: center;
}

.binder-editor .prepare-share-pane .primary-action,
.binder-editor .prepare-markings-pane .primary-action {
  border-color: var(--accent-secondary);
  background: var(--accent-secondary-soft);
  color: var(--ink);
}

.prepare-file-button {
  position: relative;
  min-height: 46px;
  margin: 8px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--accent-secondary-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.prepare-file-button.ghost {
  background: var(--well-bg);
}

.prepare-file-button input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.prepare-check {
  display: flex;
  margin: 8px 0;
  padding: 0;
}

.prepare-check span {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  text-transform: none;
}

.prepare-offline-pane,
.prepare-library-pane,
.prepare-markings-pane {
  margin-top: 0;
  margin-bottom: 12px;
  border-radius: 14px;
}

.prepare-offline-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.prepare-offline-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-secondary);
}

.prepare-offline-toggle small {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
}

.prepare-storage-line {
  margin: 8px 0 12px;
  color: var(--ink-muted);
}

.binder-editor .prepare-library-pane .library-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 9px 10px;
}

.binder-editor .prepare-library-pane .library-row-head {
  min-width: 0;
  margin: 0;
  align-items: center;
  flex-direction: row;
}

.binder-editor .prepare-library-pane .library-meta {
  grid-column: 1;
  margin: -14px 0 0 45px;
  font-size: 11px;
}

.binder-editor .prepare-library-pane .library-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.binder-editor .prepare-markings-pane .prepare-wide-action {
  display: block;
}

@media (max-width: 680px) {
  .binder-editor .binder-piece-grid {
    grid-template-columns: 1fr;
  }

  .binder-editor .binder-piece-grid .wide {
    grid-column: auto;
  }

}

/* Standalone B.1 final cascade: keep both consequence monitors fully visible
   inside the inherited Reader-width operator stage. */
body.playback-operator-mode .operator-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px !important;
  overflow: hidden;
}

body.playback-operator-mode .operator-consequence-card {
  grid-row: 1;
}

body.playback-operator-mode .operator-card-run {
  grid-row: 2;
}

body.playback-operator-mode .operator-monitor-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

@media (max-width: 760px) {
  body.playback-operator-mode .operator-monitor-grid {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
}

/* M15 reader triple: package audio, live MusicXML reflow, and chart kind. */
#readerPieceAudio[hidden],
#readerPlaybackPalette[hidden],
#playbackPalette[hidden],
#readerReflowControls[hidden],
.chart-format-badge[hidden] {
  display: none !important;
}

.stage-circle-playback {
  bottom: max(298px, calc(env(safe-area-inset-bottom) + 292px));
  left: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
}

.stage-circle-playback .stage-playback-glyph {
  width: 25px;
  height: 25px;
}

.stage-circle-audio {
  bottom: max(364px, calc(env(safe-area-inset-bottom) + 358px));
  left: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
}

.stage-circle-audio .stage-audio-glyph {
  width: 25px;
  height: 25px;
}

.stage-circle-audio .stage-audio-pause {
  display: none;
}

.stage-circle-audio[data-audio-state="playing"] .stage-audio-wave {
  display: none;
}

.stage-circle-audio[data-audio-state="playing"] .stage-audio-pause {
  display: initial;
}

body.reader-focus .stage-circle-audio.audio-error,
#libraryPieceAudio.audio-error {
  border-color: #A43E32 !important;
  background: linear-gradient(180deg, #FFF8F3 0%, #F5E3D8 100%) !important;
  color: #8B3028 !important;
  box-shadow: inset 0 0 0 1px rgba(164, 62, 50, 0.2), 0 3px 7px rgba(74, 59, 50, 0.14) !important;
}

.stage-circle-audio.audio-error::after {
  content: "!";
  position: absolute;
  top: -5px;
  right: -4px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid #A43E32;
  border-radius: 50%;
  background: #FFF8F3;
  color: #8B3028;
  font: 900 11px/1 Inter, system-ui, sans-serif;
}

.reader-reflow-controls {
  display: contents;
}

.stage-circle-reflow {
  left: max(12px, calc((100vw - var(--gn-reader-stage-width)) / 2 + 12px), calc(env(safe-area-inset-left) + 12px));
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
}

.reader-reflow-smaller {
  bottom: max(430px, calc(env(safe-area-inset-bottom) + 424px));
}

.reader-reflow-bigger {
  bottom: max(496px, calc(env(safe-area-inset-bottom) + 490px));
}

.stage-circle-reflow:disabled {
  opacity: 0.46;
  cursor: default;
}

/* M15 playback palette — measure-aware, deliberately waveform-free. */
.playback-palette {
  position: fixed;
  z-index: var(--gn-layer-floating-popover);
  top: max(116px, calc(env(safe-area-inset-top) + 108px));
  left: max(72px, calc(env(safe-area-inset-left) + 68px));
  width: min(276px, calc(100vw - 84px));
  display: grid;
  gap: 9px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #C2B391;
  border-radius: 12px;
  background: rgba(251, 243, 228, 0.97);
  color: #3A2820;
  box-shadow: 0 16px 38px rgba(74, 59, 50, 0.20);
  font-family: Inter, system-ui, sans-serif;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.playback-palette-header {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #D8CEB9;
}

.playback-palette-header strong {
  color: #58443A;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
}

.playback-palette-header span {
  color: #6B5B46;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.playback-palette button,
.playback-palette input {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #C2B391;
  border-radius: 7px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%);
  color: #3A2820;
  font: 800 12px/1 Inter, system-ui, sans-serif;
}

.playback-palette button {
  cursor: pointer;
  touch-action: manipulation;
}

.playback-palette button:hover,
.playback-palette button:focus-visible,
.playback-palette button[aria-pressed="true"],
.playback-palette input:focus-visible {
  border-color: #9A7F43;
  outline: 2px solid rgba(196, 154, 69, 0.34);
  outline-offset: 1px;
}

.playback-palette-header button {
  width: 44px;
  padding: 0;
  font-size: 15px;
}

.playback-palette-main {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
}

.playback-palette-play {
  display: grid;
  grid-template-columns: 22px 1fr;
  place-items: center;
  gap: 3px;
  padding: 0 7px;
}

.playback-palette-play svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.playback-palette-pause-path,
.playback-palette-play[aria-pressed="true"] .playback-palette-play-path {
  display: none;
}

.playback-palette-play[aria-pressed="true"] .playback-palette-pause-path {
  display: initial;
}

.playback-measure-stepper {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: center;
  gap: 5px;
}

.playback-measure-stepper > span {
  color: #6B5B46;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
}

.playback-measure-stepper input,
.playback-loop-row input {
  width: 100%;
  min-width: 0;
  padding: 0 5px;
  text-align: center;
}

.playback-measure-strip {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  accent-color: #9A7F43;
}

.playback-loop-row {
  display: grid;
  grid-template-columns: 1fr 1fr 68px;
  gap: 7px;
}

.playback-loop-row label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
}

.playback-loop-row label > span {
  color: #6B5B46;
  font-size: 11px;
  font-weight: 900;
}

.playback-loop-row button {
  padding: 0 8px;
}

.playback-palette > p {
  margin: 0;
  color: #6B5B46;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

body.playback-palette-open .page-tap-zone {
  pointer-events: none;
}

body.playback-palette-open #scoreViewer svg g.measure[data-playback-measure-index] {
  cursor: pointer;
  pointer-events: all;
}

#scoreViewer svg g.measure.playback-measure-current {
  filter: drop-shadow(0 0 3px rgba(196, 154, 69, 0.90)) drop-shadow(0 0 7px rgba(239, 220, 169, 0.76));
}

@media (min-width: 960px) {
  body.reader-focus.playback-palette-open:not(.playback-operator-mode) .score-page,
  html.gn-curl-perform body.reader-focus.playback-palette-open:not(.playback-operator-mode) .score-page {
    width: calc(100vw - 368px) !important;
    max-width: calc(100vw - 368px) !important;
    margin-right: 12px !important;
    margin-left: 356px !important;
  }
}

@media (max-width: 959px) {
  .playback-palette {
    top: auto;
    right: 8px;
    bottom: max(78px, calc(env(safe-area-inset-bottom) + 72px));
    left: 8px;
    width: auto;
  }

  body.reader-focus.playback-palette-open .score-page,
  html.gn-curl-perform body.reader-focus.playback-palette-open .score-page {
    height: calc(100% - 270px) !important;
    max-height: calc(100% - 270px) !important;
    margin-bottom: 270px !important;
  }
}

.chart-format-badge {
  min-width: 56px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  padding: 0 7px;
  border: 1px solid #C2B391;
  border-radius: 999px;
  background: rgba(251, 243, 228, 0.94);
  color: #6B5B46;
  box-shadow: 0 1px 2px rgba(74, 59, 50, 0.08);
  font: 850 9px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.035em;
  white-space: nowrap;
  pointer-events: none;
}

.chart-format-badge[data-chart-format="musicxml"]::before {
  content: "↝";
  color: #9A7F43;
  font-size: 13px;
  line-height: 1;
}

body.reader-focus .chart-pills .chart-format-badge {
  width: auto;
  max-width: 80px;
  align-self: stretch;
}

body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .reader-reflow-controls,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .reader-reflow-controls * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* M14 curl ownership: Perform mode is one fixed, non-scrollable viewport.
   app.js applies gn-curl-perform only for corner-curl mode outside annotation
   editing. Root pinning deliberately disables native pan and pinch zoom while
   performing so iOS/WKWebView cannot rubber-band before the curl sees input. */
html.gn-curl-perform,
html.gn-curl-perform body {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html.gn-curl-perform body.reader-focus .app-shell,
html.gn-curl-perform body.reader-focus .workspace,
html.gn-curl-perform body.reader-focus .stage-grid,
html.gn-curl-perform body.reader-focus .score-panel {
  position: relative;
  width: var(--gn-reader-stage-width);
  min-width: 0;
  max-width: var(--gn-reader-stage-width);
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  margin-inline: auto;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html.gn-curl-perform body.reader-focus #scoreReader {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  align-items: center;
  padding:
    max(4px, env(safe-area-inset-top))
    max(4px, env(safe-area-inset-right))
    max(78px, calc(env(safe-area-inset-bottom) + 72px))
    max(4px, env(safe-area-inset-left)) !important;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* Treat the complete reader subtree as one non-scrollable gesture surface.
   PDF.js wrappers/text/annotation layers and future score-reader descendants
   must not become implicit native scroll owners between chart renders. The
   legacy WebKit override explicitly disables momentum scrolling if an inner
   layer acquires -webkit-overflow-scrolling: touch elsewhere. */
html.gn-curl-perform #scoreReader,
html.gn-curl-perform #scoreReader * {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

/* The curl pin intentionally clips score surfaces, but the count-in settings
   are a toolbar popover. Keep the 48px toolbar row fixed while allowing its
   panel to render and receive taps below the row. */
html.gn-curl-perform body.reader-focus #countInBand {
  overflow: visible;
}

html.gn-curl-perform body.reader-focus .score-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  min-width: 0;
  max-width: 100vw !important;
  height: 100%;
  min-height: 0;
  max-height: 100% !important;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html.gn-curl-perform body.reader-focus .chart-viewer,
html.gn-curl-perform body.reader-focus .chart-frame,
html.gn-curl-perform body.reader-focus .lyrics-view,
html.gn-curl-perform body.reader-focus .pdf-canvas-frame,
html.gn-curl-perform body.reader-focus .score-half-page-window,
html.gn-curl-perform body.reader-focus .score-two-up-spread,
html.gn-curl-perform body.reader-focus .score-spread-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html.gn-curl-perform body.reader-focus .page-tap-zone,
html.gn-curl-perform body.reader-focus .gn-curl-overlay {
  overscroll-behavior: none;
  touch-action: none;
}

html.gn-curl-perform body.reader-focus .lyrics-view {
  margin: 0;
  padding: clamp(12px, 2vmin, 24px);
  font-size: var(--gn-text-fit-font-size, 12px);
  line-height: 1.28;
}

html.gn-curl-perform body.reader-focus canvas,
html.gn-curl-perform body.reader-focus .pdf-page-canvas,
html.gn-curl-perform body.reader-focus .score-image {
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html.gn-curl-perform body.reader-focus .score-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Page Jumps — Direction 2 navigation-app card palette. It deliberately
   consumes the same champagne/ink tokens and color-control components as the
   Annotate palette so the two authoring surfaces remain one visual family. */
body.reader-focus.link-mode .link-mode-panel,
body.reader-focus.reader-portrait.link-mode .link-mode-panel,
body.link-mode .link-mode-panel {
  width: min(372px, calc(100vw - 24px));
  min-width: 0;
  max-width: min(372px, calc(100vw - 24px));
  max-height: min(650px, calc(100vh - 132px));
  display: block;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--color-gold-cool);
  border-radius: 14px;
  background: rgba(239, 232, 216, 0.97);
  color: var(--color-navy);
  box-shadow: 0 18px 44px rgba(15, 36, 65, 0.22);
  font-family: var(--font-sans);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.link-mode-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 9px;
  padding: 13px 13px 10px;
  border-bottom: 1px solid var(--color-parchment-border);
  background: rgba(239, 232, 216, 0.97);
}

.link-mode-summary {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 8px;
}

.link-mode-kicker {
  grid-column: 1;
  color: #6B5B46;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.link-mode-summary strong {
  grid-column: 1;
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.link-mode-summary #linkModeCount {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-gold-cool);
  border-radius: 50%;
  background: var(--anchor-offwhite);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 900;
}

.link-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--color-parchment-border);
  border-radius: 10px;
  background: var(--anchor-offwhite);
}

.link-mode-tabs button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #6B5B46;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.link-mode-tabs button.active,
.link-mode-tabs button[aria-pressed="true"] {
  border-color: var(--color-gold-cool);
  background: rgba(216, 206, 185, 0.72);
  color: var(--color-navy);
  box-shadow: inset 3px 0 0 #C49A45;
}

.link-mode-scroll {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
}

.link-author-panel {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--color-parchment-border);
  border-radius: 12px;
  background: rgba(253, 252, 249, 0.7);
}

body.link-read-mode .link-author-panel {
  display: none;
}

.link-author-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #6B5B46;
}

.link-author-route > span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.link-author-route strong {
  overflow: hidden;
  color: var(--color-navy);
  font-size: 10px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-mode-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 6px;
  margin: 0;
}

.link-mode-actions button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--color-gold-cool);
  border-bottom-width: 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%);
  color: var(--color-navy);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.link-mode-actions button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.link-mode-actions button:disabled {
  opacity: 0.4;
}

body.link-editing #addScoreLink {
  border-color: #C49A45;
  background: rgba(216, 206, 185, 0.72);
  color: var(--color-navy);
  box-shadow: inset 3px 0 0 #C49A45;
}

.link-color-control {
  grid-template-columns: 68px 46px minmax(0, 1fr);
  padding-top: 7px;
  border-top: 1px solid var(--color-parchment-border);
  color: var(--color-navy);
}

.link-mode-status {
  min-height: 27px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(194, 179, 145, 0.2);
  color: #6B5B46;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
}

.link-mode-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.link-mode-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.link-mode-list .link-mode-card {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--color-parchment-border);
  border-bottom-width: 2px;
  border-radius: 12px;
  background: var(--anchor-offwhite);
  color: var(--color-navy);
  box-shadow: 0 2px 4px rgba(15, 36, 65, 0.08);
  text-align: left;
}

.link-mode-card:active {
  transform: translateY(1px);
}

.link-mode-card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--roadmap-border, var(--color-gold-cool));
  border-radius: 50%;
  background: var(--roadmap-bg, var(--color-parchment));
  color: var(--roadmap-ink, var(--color-navy));
}

.score-link-turn-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.link-mode-card-details {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.link-mode-card-details strong,
.link-mode-card-details span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-mode-card-details strong {
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 900;
}

.link-mode-card-details span {
  color: #6B5B46;
  font-size: 9px;
  font-weight: 750;
}

.link-mode-kind {
  padding: 4px 6px;
  border: 1px solid var(--color-parchment-border);
  border-radius: 999px;
  background: var(--color-parchment);
  color: #6B5B46;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.link-mode-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  padding: 0 3px;
}

.link-mode-card-actions .link-mode-move,
.link-mode-card-actions .link-mode-delete {
  width: auto;
  min-width: 54px;
  min-height: 31px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border: 1px solid var(--color-parchment-border);
  border-radius: 7px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F3ECDD 100%);
  color: #6B5B46;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.link-mode-card-actions .link-mode-delete {
  border-color: rgba(164, 62, 50, 0.38);
  background: rgba(164, 62, 50, 0.08);
  color: var(--accent-danger);
}

.link-mode-list > p {
  margin: 8px 0;
  color: #6B5B46;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.link-mode-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  padding: 10px 13px 12px;
  border-top: 1px solid var(--color-parchment-border);
  background: rgba(239, 232, 216, 0.98);
}

.link-mode-page-arrow {
  width: 48px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-gold-cool);
  border-bottom-width: 2px;
  border-radius: 10px;
  background: var(--anchor-offwhite);
  color: var(--color-navy);
  font-size: 20px;
}

.link-mode-page-arrow:disabled {
  opacity: 0.32;
}

.link-mode-page-indicator {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.link-mode-page-indicator span {
  color: #6B5B46;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.link-mode-page-indicator strong {
  overflow: hidden;
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-link-source-glyph {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(253, 252, 249, 0.74);
}

.score-link-source-glyph .score-link-turn-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

@media (max-height: 700px) {
  body.reader-focus.link-mode .link-mode-panel,
  body.reader-focus.reader-portrait.link-mode .link-mode-panel {
    max-height: calc(100vh - 110px);
  }
}

/* F2 — a short, stationary center-corridor tap hides performance chrome.
   The class changes presentation only, so every open panel and tool state
   returns exactly as it was on the second tap. Annotation mode temporarily
   suspends the visual hide while retaining the hidden state for Save/Cancel.
   The score, annotation layer, page-jump markers, page-turn zones, and bottom
   cue/page dock are intentionally absent from this selector. */
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .score-toolbar,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .score-toolbar *,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .reader-mode-toggle,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .reader-mode-toggle *,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .reader-build-stamp,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .score-tool-drawer,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .reader-child-panel,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .chart-pills,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .chart-pills *,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .stage-tool-circles,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .stage-circle-glyph,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .stage-circle-label,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .home-escape-button,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .gnw-bottom-toolbar,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .gnw-slides-dock,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .count-in-band,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .count-in-tab,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .navigation-banner,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .page-turn-flash,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .flashlight-page-turn-strip,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .side-panel,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .reader-controls-chip,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .center-reveal,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .app-update-banner,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .pg-drop-banner,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .shepherd-set-banner,
body.reader-focus.reader-chrome-hidden:not(.annotation-mode) .reader-coach-mark {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.prep-rack-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--gn-layer-modal);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.prep-rack-overlay[hidden] {
  display: none !important;
}

.prep-rack-scrim {
  position: absolute;
  inset: 0;
  background: rgba(58, 40, 32, 0.12);
}

.prep-rack {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  padding: 22px 22px 18px;
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  background: var(--toolbar-bg);
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(58, 40, 32, 0.16), inset 0 1px 0 rgba(253, 252, 249, 0.8);
}

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

.prep-rack-title {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}

.prep-rack-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--chrome-border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.iap-sku-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
}

.iap-sku,
.iap-restore,
.iap-cancel {
  min-height: 48px;
  border: 1px solid var(--chrome-border, #C49A45);
  border-radius: 10px;
  background: var(--button-bg, #FBF3E4);
  color: var(--ink, #3A2820);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
}

.iap-sku[aria-pressed="true"] {
  border-color: var(--accent, #C49A45);
  background: #FBF3E4;
  box-shadow: inset 0 0 0 1px var(--accent, #C49A45);
}

.iap-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.prep-rack-modules {
  display: grid;
  gap: 14px;
}

.prep-rack-module {
  padding: 14px;
  border: 1px solid var(--chrome-border);
  border-radius: 8px;
  background: var(--button-bg);
}

.prep-rack-label {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prep-rack-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.prep-orb-rename {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.prep-orb-rename-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prep-orb-rename-row label {
  min-width: 44px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prep-orb-rename-row input {
  flex: 1;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
}

.chart-orb {
  position: absolute;
  z-index: 8;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  padding: 0;
  border: 2px solid #C49A45;
  border-radius: 999px;
  background: #FBF3E4;
  box-shadow: 0 0 0 1px rgba(58, 40, 32, 0.28);
  cursor: pointer;
  pointer-events: auto;
}

body.reader-focus:not(.prep-orb-placing) .chart-orb {
  pointer-events: auto;
  opacity: 0.38;
}

body.prep-orb-placing .chart-orb {
  opacity: 1;
  box-shadow: 0 0 0 6px rgba(196, 154, 69, 0.28);
}

.chart-orb.is-pulse {
  opacity: 1;
  animation: chart-orb-pulse 900ms ease-out;
}

@keyframes chart-orb-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(196, 154, 69, 0.7); }
  40% { transform: scale(1.35); box-shadow: 0 0 0 10px rgba(196, 154, 69, 0.18); }
  100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(58, 40, 32, 0.28); }
}

.section-anchor-pulse[data-orb-quiet="true"] .section-anchor-pulse-label {
  display: none;
}

.prep-rack-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prep-rack-key {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 3px 0 #E3D9C8;
  cursor: pointer;
}

.prep-rack-key[aria-pressed="true"] {
  border-color: var(--toolbar-anchor);
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--toolbar-anchor);
}

/* L115.3 first-screen-fit */
body.playback-operator-mode,
body.playback-operator-mode .app-shell,
body.playback-operator-mode .workspace {
  min-height: 0 !important;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body.playback-operator-mode .workspace {
  padding: 8px 10px;
  background: #FAF1E0;
}
body.playback-operator-mode .playback-operator-panel {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0 8px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #FBF3E4;
  border-color: rgba(74, 59, 50, 0.34);
}
body.playback-operator-mode .operator-console-strip {
  margin: 0 -8px 8px;
  min-height: 40px;
  padding: 4px 8px;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #4A3B32;
  background: #FAF1E0;
}
body.playback-operator-mode .operator-console-strip h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-height: 2.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #4A3B32;
  font-family: var(--font-serif-display);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

body.playback-operator-mode .operator-console-strip .operator-locale-toggle {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}
body.playback-operator-mode .operator-console-strip .operator-locale-toggle button {
  min-height: 28px;
  min-width: 36px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #4A3B32;
  font: 600 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
}
body.playback-operator-mode .operator-console-strip .operator-locale-toggle button[aria-pressed="true"] {
  border-color: #4A3B32;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  grid-template-columns: none;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
}
body.playback-operator-mode .operator-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
body.playback-operator-mode .operator-card {
  padding: 8px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.playback-operator-mode .operator-card-output {
  grid-column: auto;
}
body.playback-operator-mode .operator-card-header {
  margin-bottom: 6px;
  padding-bottom: 6px;
}
body.playback-operator-mode .operator-card-header h3,
body.playback-operator-mode .operator-subheader h4 {
  font-size: 14px;
}
body.playback-operator-mode .operator-hero .eyebrow,
body.playback-operator-mode .operator-card .eyebrow {
  font-size: 12px;
  letter-spacing: 0.04em;
}
body.playback-operator-mode .operator-card-header > span,
body.playback-operator-mode .operator-subheader > span {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
body.playback-operator-mode .operator-piece-list {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}
body.playback-operator-mode .operator-piece-list button.operator-timeline-row {
  min-height: 34px;
  grid-template-rows: auto;
  padding: 4px 6px;
  gap: 2px 8px;
}
body.playback-operator-mode .operator-piece-list button strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}
body.playback-operator-mode .operator-cue-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
body.playback-operator-mode #operatorCueHint {
  display: none;
}
body.playback-operator-mode .operator-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.7fr) minmax(0, 1.75fr);
}
body.playback-operator-mode .operator-preview-stack {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
}
body.playback-operator-mode .operator-slide-preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0;
  background: #FDFCF9;
}
body.playback-operator-mode .slide-stage {
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: size;
}
body.playback-operator-mode .slide-canvas {
  width: 1920px;
  height: 1080px;
  transform: scale(calc(100cqw / 1920));
  transform-origin: top left;
}
body.playback-operator-mode .operator-booth:not([open]) {
  margin: 0 0 8px;
  padding: 0;
  overflow: hidden;
}
body.playback-operator-mode .operator-booth:not([open]) > *:not(summary) {
  display: none;
}
body.playback-operator-mode .operator-booth > summary {
  display: list-item;
  cursor: pointer;
  padding: 8px 12px;
  color: var(--ink, #2a2118);
}

body.playback-operator-mode .slide-lyrics {
  font-size: 72px;
  line-height: 1.2;
  font-weight: 600;
}
body.playback-operator-mode .operator-card-output,
body.playback-operator-mode .operator-preview-stack,
body.playback-operator-mode .operator-slide-preview,
body.playback-operator-mode .slide-stage {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* L115.6 Iris Off — Prep-density Operator + Slides-over-Operator */
body.playback-operator-mode .operator-grid {
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr);
  gap: 10px;
}
body.playback-operator-mode .operator-card-output {
  grid-column: auto;
  background: #FBF3E4;
  justify-content: flex-start;
}
body.playback-operator-mode .operator-list-chrome {
  justify-content: flex-end;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 4px;
}
body.playback-operator-mode .operator-card-run .operator-card-header h3,
body.playback-operator-mode .operator-card-run .eyebrow {
  display: none;
}
body.playback-operator-mode .operator-console-strip h2 {
  max-height: 1.2em;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 2px;
  border: 1px solid rgba(74, 59, 50, 0.34);
  border-radius: 4px;
  background: #FAF1E0;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button {
  min-height: 28px;
  min-width: 72px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #4A3B32;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button .operator-switch-track {
  display: none;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button.active {
  border: 1px solid #C49A45;
  background: #FBF3E4;
  color: #4A3B32;
  border-left-width: 1px;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button:not(.active) {
  border-color: transparent;
  background: transparent;
  color: #6B5B46;
}
body.playback-operator-mode .operator-piece-list {
  min-width: 0;
}
body.playback-operator-mode .operator-piece-list button.operator-timeline-row {
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 32px;
}
body.playback-operator-mode .operator-timeline-row .timeline-chip,
body.playback-operator-mode .operator-timeline-row .timeline-owner,
body.playback-operator-mode .operator-timeline-row .timeline-ready,
body.playback-operator-mode .operator-timeline-row .timeline-action {
  display: none;
}
body.playback-operator-mode .operator-timeline-row .timeline-main {
  min-width: 0;
}
body.playback-operator-mode .operator-timeline-row .timeline-main strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.playback-operator-mode .operator-piece-list > .operator-cue-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px 8px 28px;
  background: #FAF1E0;
}
body.playback-operator-mode .operator-cue-grid button,
body.playback-operator-mode .operator-cue-chip {
  min-height: 26px;
  min-width: 36px;
  padding: 2px 8px;
  border: 1px solid rgba(74, 59, 50, 0.28);
  border-radius: 999px;
  background: #FBF3E4;
  color: #4A3B32;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
}
body.playback-operator-mode .operator-cue-grid button.active,
body.playback-operator-mode .operator-cue-chip.active {
  border: 1px solid #C49A45;
  background: #FBF3E4;
  color: #4A3B32;
  border-left-width: 1px;
}
body.playback-operator-mode .operator-preview-stack,
body.playback-operator-mode .operator-slide-preview {
  flex: 0 0 auto;
  height: auto;
  background: #FBF3E4;
}
body.playback-operator-mode .slide-stage {
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: #FBF3E4;
}
body.playback-operator-mode .operator-booth:not([open]) {
  flex: 0 0 auto;
}

.reader-cue-surface-toggle {
  display: none;
}
body.playback-operator-mode.reader-cue-mode .stage-grid {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 380;
  pointer-events: none;
  background: transparent;
  overflow: visible;
}
body.playback-operator-mode.reader-cue-mode .stage-grid > *:not(.score-panel) {
  display: none !important;
}
body.playback-operator-mode.reader-cue-mode .score-panel {
  display: block !important;
  overflow: visible;
  width: auto;
  height: auto;
  min-height: 0;
}
body.playback-operator-mode.reader-cue-mode .score-reader {
  display: block;
  position: static;
  background: transparent;
  overflow: visible;
}
body.playback-operator-mode.reader-cue-mode .score-reader > *:not(#readerCuePanel) {
  display: none !important;
}
body.playback-operator-mode.reader-cue-mode #readerCuePanel {
  pointer-events: auto;
  position: fixed;
  top: 48px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  width: auto;
  max-width: none;
  max-height: none;
  z-index: 390;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  background: #FBF3E4;
  border: 1px solid rgba(74, 59, 50, 0.34);
  border-radius: 8px;
  color: #4A3B32;
}
body.playback-operator-mode.reader-cue-mode .reader-cue-surface-toggle {
  display: inline-flex;
  width: max-content;
  gap: 0;
  padding: 2px;
  border: 1px solid rgba(74, 59, 50, 0.34);
  border-radius: 4px;
  background: #FAF1E0;
}
body.playback-operator-mode.reader-cue-mode .reader-cue-surface-toggle button {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #6B5B46;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}
body.playback-operator-mode.reader-cue-mode .reader-cue-surface-toggle button.active,
body.playback-operator-mode.reader-cue-mode .reader-cue-surface-toggle button[aria-pressed="true"] {
  border-color: #C49A45;
  background: #FBF3E4;
  color: #4A3B32;
}
body.playback-operator-mode.reader-cue-mode .reader-slide-maker {
  min-height: 0;
  overflow: auto;
}
body.playback-operator-mode.reader-cue-mode .slide-maker-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.playback-operator-mode.reader-cue-mode .slide-maker-card {
  flex: 1 1 220px;
  max-width: 280px;
}
body.playback-operator-mode.reader-cue-mode #scorePageNumber,
body.playback-operator-mode.reader-cue-mode #linkModePageNumber,
body.playback-operator-mode.reader-cue-mode .slide-maker-head small {
  display: none;
}


/* L115.7 Prep feel — same Iris Off laws, song title not OOW cover */
body.playback-operator-mode .operator-console-strip {
  text-transform: none;
  letter-spacing: 0;
  margin: 0 -24px 10px;
  min-height: 44px;
  gap: 12px;
}
body.playback-operator-mode .operator-console-strip h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  max-height: none;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: #4A3B32;
}
body.playback-operator-mode .operator-return-music {
  position: static;
  width: auto;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #C49A45;
  background: #FBF3E4;
  color: #4A3B32;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  z-index: auto;
}
body.playback-operator-mode .operator-return-music img {
  display: none;
}


/* L115.7 Iris nits — do not restamp L115.6 */
body.playback-operator-mode .operator-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(0, 1.05fr);
  gap: 0;
  align-items: start;
  margin: 0;
}
body.playback-operator-mode .operator-card.operator-card-run,
body.playback-operator-mode .operator-card.operator-card-output {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #FBF3E4;
  min-height: 0;
  height: auto;
  padding: 0;
  margin: 0;
}
body.playback-operator-mode .operator-list-chrome,
body.playback-operator-mode #operatorRoomBadge {
  display: none !important;
}
body.playback-operator-mode .operator-piece-list {
  min-height: 0;
  max-height: calc(820px - 72px);
  overflow: auto;
  background: #FBF3E4;
}
body.playback-operator-mode .operator-piece-list button.operator-timeline-row {
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(74, 59, 50, 0.10);
  background: transparent;
  grid-template-columns: 20px minmax(0, 1fr);
}
body.playback-operator-mode .operator-timeline-row .timeline-main em {
  display: none;
}
body.playback-operator-mode .operator-timeline-row .timeline-main strong {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 650;
  color: #4A3B32;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.playback-operator-mode .operator-card-output,
body.playback-operator-mode .operator-preview-stack,
body.playback-operator-mode .operator-slide-preview,
body.playback-operator-mode .slide-stage {
  width: 100%;
  height: auto;
  max-height: none;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: #FBF3E4;
  margin: 0;
  padding: 0;
}
body.playback-operator-mode #slideCanvas {
  width: 100%;
  height: 100%;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle {
  background: transparent;
  border: 1px solid rgba(74, 59, 50, 0.22);
  padding: 1px;
  gap: 0;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button {
  background: transparent;
  border: 1px solid transparent;
  color: #6B5B46;
  min-width: 64px;
  box-shadow: none;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button.active {
  background: #FDFCF9;
  border: 1px solid #C49A45;
  color: #4A3B32;
}
body.playback-operator-mode .operator-booth {
  margin-top: 4px;
}

body.playback-operator-mode.reader-cue-mode .score-panel {
  display: block !important;
}
body.playback-operator-mode.reader-cue-mode .stage-grid {
  display: block !important;
}
body.playback-operator-mode.reader-cue-mode #readerCuePanel {
  display: grid !important;
  position: fixed !important;
  top: 48px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  width: auto !important;
  height: auto !important;
  z-index: 400;
  pointer-events: auto;
}


/* L115.7 Iris nits2 — canvas fill + one maker P1/P2 */
body.playback-operator-mode #slideCanvas {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: top left;
}
body.playback-operator-mode .operator-card.operator-card-run,
body.playback-operator-mode .operator-piece-list {
  height: auto !important;
  max-height: none;
  min-height: 0;
  align-self: start;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button {
  background: transparent !important;
  border-color: transparent !important;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button.active {
  background: #FDFCF9 !important;
  border: 1px solid #C49A45 !important;
}
body.playback-operator-mode.reader-cue-mode .reader-cue-group[data-reader-cue-surface="deck"],
body.playback-operator-mode.reader-cue-mode .reader-cue-group[data-reader-cue-surface="screen"],
body.playback-operator-mode.reader-cue-mode .reader-quick-slide,
body.playback-operator-mode.reader-cue-mode .playback-source-toast,
body.playback-operator-mode.reader-cue-mode #playbackSourceToast,
body.playback-operator-mode.reader-cue-mode .reader-cue-hint,
body.playback-operator-mode.reader-cue-mode #readerCueModeToggle,
body.playback-operator-mode.reader-cue-mode #readerCueSectionGrid,
body.playback-operator-mode.reader-cue-mode #makerSlideLabel {
  display: none !important;
}
body.playback-operator-mode.reader-cue-mode .reader-cue-group[data-reader-cue-surface="song"] {
  display: block !important;
}
body.playback-operator-mode.reader-cue-mode .reader-section-editor-picks {
  display: flex !important;
}
body.playback-operator-mode.reader-cue-mode .slide-maker-head small,
body.playback-operator-mode.reader-cue-mode input[value="Page 1"],
body.playback-operator-mode.reader-cue-mode .slide-maker-page-label {
  display: none !important;
}

body.playback-operator-mode.reader-cue-mode #navigationBanner {
  display: none !important;
}


/* L115.8 Iris nits — do not stamp L115.7 */
body.playback-operator-mode .operator-console-strip {
  align-items: center;
  min-height: 36px;
  margin: 8px 0 8px;
  padding: 0 8px;
  background: transparent;
}
body.playback-operator-mode .operator-console-strip h2,
body.playback-operator-mode #operatorPieceTitle,
body.playback-operator-mode .operator-timeline-row .timeline-main strong {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 650;
  letter-spacing: 0;
}
body.playback-operator-mode .operator-console-strip h2,
body.playback-operator-mode #operatorPieceTitle {
  font-size: 16px !important;
}
body.playback-operator-mode .operator-return-music {
  position: static !important;
  top: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0;
  padding: 0 10px;
}
body.playback-operator-mode #operatorRoomBadge,
body.playback-operator-mode #operatorChromeRoom,
body.playback-operator-mode .operator-chrome-room {
  display: none !important;
}
body.playback-operator-mode .operator-piece-list,
body.playback-operator-mode .operator-card-run {
  background: #FBF3E4 !important;
  box-shadow: none !important;
}
body.playback-operator-mode .operator-timeline-row {
  background: transparent !important;
  box-shadow: none !important;
}
body.playback-operator-mode .operator-timeline-row.active {
  background: #F3E4C4 !important;
  box-shadow: inset 0 0 0 1px #8A6A2A !important;
}
body.playback-operator-mode .operator-timeline-row .timeline-main strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body.playback-operator-mode .operator-timeline-row .timeline-main em {
  display: block !important;
  color: #3D2F28 !important;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle {
  display: inline-flex !important;
  border: 1px solid rgba(74, 59, 50, 0.34);
  border-radius: 4px;
  background: #EFE4CF;
  padding: 2px;
  gap: 0;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button {
  background: transparent !important;
  border: 0 !important;
  color: #3D2F28 !important;
  min-height: 26px;
  box-shadow: none !important;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button.active {
  background: #4A3B32 !important;
  color: #FDFCF9 !important;
  border: 0 !important;
}
body.reader-cue-mode .reader-cue-surface-toggle {
  display: inline-flex !important;
}
body.reader-cue-mode:not(.playback-operator-mode) #readerCuePanel {
  display: grid !important;
}

body.playback-operator-mode .operator-console-strip h2,
body.playback-operator-mode #operatorPieceTitle {
  line-height: 28px !important;
  font-size: 16px !important;
}
body.reader-cue-mode #readerCuePanel {
  position: fixed !important;
  top: 48px !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 400 !important;
  display: grid !important;
}
body.reader-cue-mode #readerCueSectionGrid,
body.reader-cue-mode .slide-maker-head small {
  display: none !important;
}


/* L115.8 recook — same stamp, not 115.7 */
body.playback-operator-mode .playback-operator-panel,
body.playback-operator-mode .operator-grid {
  min-height: calc(100vh - 8px);
  align-items: stretch;
}
body.playback-operator-mode .operator-grid {
  grid-template-columns: minmax(340px, 0.58fr) minmax(0, 1.42fr);
  gap: 0;
}
body.playback-operator-mode .operator-card.operator-card-output,
body.playback-operator-mode .operator-preview-stack,
body.playback-operator-mode .operator-slide-preview,
body.playback-operator-mode .slide-stage {
  height: auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-self: start;
}
body.playback-operator-mode .operator-card.operator-card-run,
body.playback-operator-mode .operator-piece-list {
  max-height: calc(100vh - 56px);
  height: auto;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle {
  border: 0;
  background: transparent;
  gap: 8px;
  padding: 0;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button {
  background: transparent !important;
  border: 0 !important;
  color: #5A4638 !important;
  min-height: 28px;
  box-shadow: none !important;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button.active {
  background: #FBF3E4 !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
  font-weight: 750;
}
body.playback-operator-mode .operator-timeline-row.active .timeline-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.playback-operator-mode .operator-row-cues,
body.playback-operator-mode .operator-timeline-row.active #operatorCueGrid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.playback-operator-mode .operator-cue-grid button,
body.playback-operator-mode .operator-cue-chip {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px rgba(43, 33, 28, 0.35) !important;
  font-size: 13px !important;
}
body.playback-operator-mode .operator-cue-grid button.active,
body.playback-operator-mode .operator-cue-chip.active {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
  color: #2B211C !important;
}
body.reader-cue-mode .reader-section-editor-picks button,
body.reader-cue-mode .reader-section-editor-picks button.active {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px rgba(43, 33, 28, 0.28);
  border: 0 !important;
  min-width: 44px;
  min-height: 44px;
}
body.reader-cue-mode .reader-section-editor-picks button.active {
  box-shadow: inset 0 0 0 1px #2B211C !important;
  font-weight: 750;
}
body.reader-cue-mode .reader-section-editor-actions [data-section-editor-save],
body.reader-cue-mode .slide-maker-card-actions [data-slide-maker-delete] {
  /* keep one Save: the maker Split/Save row. Hide section Save. */
}
body.reader-cue-mode .reader-section-editor-actions [data-section-editor-save] {
  display: none !important;
}
body.reader-cue-mode .reader-section-editor-actions [data-section-editor-delete] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #8A2B2B !important;
  text-decoration: underline;
  min-height: 28px;
  font-weight: 650;
}
body.reader-cue-mode .maker-slide-stage {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  max-height: none;
  background: #FDFCF9;
  overflow: hidden;
}
body.reader-cue-mode #makerSlideCanvas {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
body.reader-cue-mode .slide-maker-head span,
body.reader-cue-mode .reader-section-editor-head span,
body.reader-cue-mode .reader-cue-summary strong,
body.reader-cue-mode .slide-maker-paste span,
body.reader-cue-mode label span {
  color: #2B211C !important;
  font-weight: 700;
}


/* L115.8 maker fail recook */
body.reader-cue-mode #makerSlideLabel,
body.playback-operator-mode #slideLabel,
body.playback-operator-mode #slideMoment,
body.playback-operator-mode #ordinaryNow {
  display: none !important;
}
body.reader-cue-mode .maker-slide-label {
  color: #2B211C !important;
}
body.reader-cue-mode .reader-cue-surface-toggle button.active,
body.reader-cue-mode .reader-cue-surface-toggle button[aria-pressed="true"] {
  background: #FBF3E4 !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
  border-color: transparent !important;
}
body.reader-cue-mode .slide-maker-split {
  background: #FBF3E4 !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
  border: 0 !important;
}
body.reader-cue-mode .slide-maker-save {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: none !important;
  border: 0 !important;
  font-weight: 650;
  text-decoration: underline;
}
body.playback-operator-mode .operator-timeline-row .timeline-main em {
  color: #2B211C !important;
  opacity: 1 !important;
}
body.playback-operator-mode .operator-booth {
  position: relative;
  margin-top: 12px;
  clear: both;
}
body.playback-operator-mode .operator-piece-list {
  padding-bottom: 48px;
}
body.playback-operator-mode .operator-cue-chip,
body.playback-operator-mode .operator-cue-grid button {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
  min-width: 44px !important;
  min-height: 44px !important;
}


/* L115.8 save-primary + xor hairline */
body.reader-cue-mode .slide-maker-save {
  background: #FBF3E4 !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
  border: 0 !important;
  font-weight: 750;
  text-decoration: none !important;
}
body.reader-cue-mode .slide-maker-split {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: none !important;
  border: 0 !important;
  font-weight: 650;
  text-decoration: underline;
}
body.reader-cue-mode .reader-cue-surface-toggle button.active,
body.reader-cue-mode .reader-cue-surface-toggle button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px #2B211C !important;
  background: transparent !important;
  color: #2B211C !important;
  outline: 1px solid #2B211C;
  outline-offset: 0;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button.active {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
  border: 0 !important;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button:not(.active) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: #5A4638 !important;
}
body.playback-operator-mode .operator-cue-chip,
body.playback-operator-mode .operator-cue-grid button {
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  color: #2B211C !important;
}
body.playback-operator-mode .operator-cue-chip.active,
body.playback-operator-mode .operator-cue-grid button.active {
  box-shadow: inset 0 0 0 1px #2B211C !important;
}
body.reader-cue-mode .reader-section-editor-picks button {
  box-shadow: none !important;
  background: transparent !important;
}
body.reader-cue-mode .reader-section-editor-picks button.active {
  box-shadow: inset 0 0 0 1px #2B211C !important;
}
body.reader-cue-mode #makerSlideLabel {
  display: none !important;
  color: #2B211C !important;
  font-size: 14px !important;
}


/* L115.8 two-nit: Save brown brick, P XOR hairline */
body.reader-cue-mode .slide-maker-save {
  background: #4A3B32 !important;
  color: #FBF3E4 !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: none !important;
  font-weight: 750;
}
body.reader-cue-mode .slide-maker-split {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: underline !important;
  font-weight: 650;
}
body.playback-operator-mode .operator-cue-chip,
body.playback-operator-mode .operator-cue-grid button,
body.reader-cue-mode .reader-section-editor-picks button {
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #2B211C !important;
}
body.playback-operator-mode .operator-cue-chip.active,
body.playback-operator-mode .operator-cue-grid button.active,
body.reader-cue-mode .reader-section-editor-picks button.active {
  box-shadow: inset 0 0 0 1px #2B211C !important;
  background: transparent !important;
}


/* L115.8 revert: Iris Yes was hairline Save, not #4A3B32 fill */
body.reader-cue-mode .slide-maker-save {
  background: #FBF3E4 !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
  border: 0 !important;
  text-decoration: none !important;
  font-weight: 750;
}


/* L115.8 Iris: Save Mission Wood fill, not hairline */
body.reader-cue-mode .slide-maker-save {
  background: #4A3B32 !important;
  color: #FDFCF9 !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: none !important;
  font-weight: 750;
}
body.reader-cue-mode .slide-maker-split {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: underline !important;
}


/* L115.8 Iris Off: locale is a setting, not a third FOLLOW peer */
body.playback-operator-mode .operator-console-strip {
  display: flex;
  align-items: center;
}
body.playback-operator-mode .operator-console-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  flex: 0 1 22%;
  min-width: 0;
  max-width: 28%;
}
body.playback-operator-mode .operator-console-strip .operator-return-music {
  max-width: 100%;
  margin-right: 0;
  white-space: normal;
  line-height: 1.15;
  text-align: left;
}
body.playback-operator-mode .operator-console-strip h2 {
  flex: 1 1 auto;
  text-align: center;
}
body.playback-operator-mode .operator-console-strip .operator-locale-toggle {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
body.playback-operator-mode .operator-console-strip .operator-locale-toggle button {
  min-height: 20px;
  min-width: 26px;
  padding: 1px 5px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #5A4638;
  font: 600 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  box-shadow: none !important;
}
body.playback-operator-mode .operator-console-strip .operator-locale-toggle button[aria-pressed="true"] {
  color: #2B211C;
  box-shadow: inset 0 0 0 1px #2B211C !important;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button,
body.playback-operator-mode .operator-console-strip .operator-source-toggle button.active,
body.playback-operator-mode .operator-console-strip .operator-source-toggle button[aria-pressed="true"] {
  background: transparent !important;
  color: #2B211C !important;
  border: 0 !important;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button.active,
body.playback-operator-mode .operator-console-strip .operator-source-toggle button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px #2B211C !important;
}
body.playback-operator-mode .operator-console-strip .operator-source-toggle button:not(.active) {
  box-shadow: none !important;
  color: #5A4638 !important;
}
body.playback-operator-mode .operator-cue-chip,
body.playback-operator-mode .operator-cue-grid button {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.playback-operator-mode .operator-cue-chip.active,
body.playback-operator-mode .operator-cue-grid button.active {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
}


/* L115.8: no alarm-red on Operator glyph unless a lease is actually green */
.stage-circle-slides .gnw-slides-live-dot {
  background: transparent !important;
  opacity: 0 !important;
}
.stage-circle-slides.lease-green .gnw-slides-live-dot,
.gnw-slides-live-dot.lease-green {
  background: #2f7a4b !important;
  opacity: 1 !important;
}


/* L2 Iris Off: play P1 hairline, coach off page number, press names */
.cue-dock button.active,
.cue-dock button[aria-pressed="true"] {
  background: transparent !important;
  color: #2B211C !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
}
.cue-dock button:not(.active) {
  background: transparent !important;
  box-shadow: none !important;
}
.reader-coach-mark {
  top: 12px;
  bottom: auto !important;
}
.prep-rack-close {
  min-width: 52px;
  font: 650 12px/1 Inter, system-ui, sans-serif;
}


/* L2 Iris Off leftover: P2 ghost cannot out-shout P1 ON */
.cue-dock button,
.cue-dock button.nav-only,
.cue-dock button:not(.active) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #5A4638 !important;
}
.cue-dock button.active,
.cue-dock button[aria-pressed="true"] {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
}


/* L3 Iris Off: Intro hairline, + not brick, Back spelled, one KBD page label, rail names visible */
body.reader-focus .cue-dock .cue-dock-edit,
body.reader-focus .cue-dock .cue-dock-edit:not(.active) {
  background: transparent !important;
  color: #2B211C !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.reader-focus .cue-dock button.active,
body.reader-focus .cue-dock button[aria-pressed="true"] {
  background: transparent !important;
  color: #2B211C !important;
  box-shadow: inset 0 0 0 1px #2B211C !important;
}
body.reader-focus.score-two-up .score-spread-page figcaption,
body.reader-focus.score-two-up .score-heading {
  display: none !important;
}
body.playback-operator-mode .operator-return-music {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
  height: auto !important;
  min-width: 52px;
}

body.reader-focus .score-spread-page figcaption,
.score-two-up-spread figcaption,
.score-spread-page figcaption {
  display: none !important;
}


/* L3 leftovers: labeled Back + rail names in pixels */
.stage-circle-glyph {
  overflow: visible !important;
}
.stage-circle-name {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: -13px;
  transform: translateX(-50%);
  font: 650 9px/1 Inter, system-ui, sans-serif;
  color: #2B211C;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  overflow: visible;
}
body:not(.reader-focus) .reader-back-label { display: none; }
body.reader-focus .reader-back-label {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(72px, calc(env(safe-area-inset-left) + 68px));
  z-index: var(--gn-layer-chrome);
  min-height: 44px;
  min-width: 64px;
  padding: 0 12px;
  border: 1px solid #2B211C;
  background: #FBF3E4;
  color: #2B211C;
  font: 650 14px/1 Inter, system-ui, sans-serif;
}
/* L3 leftover: do not flatten circle bottoms; each glyph keeps its own sit */


.home-escape-button { overflow: visible !important; }
.home-escape-name {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: -13px;
  transform: translateX(-50%);
  font: 650 9px/1 Inter, system-ui, sans-serif;
  color: #2B211C;
  pointer-events: none;
  white-space: nowrap;
}

/* L3 under-caption lift: keep Home/Operator names inside the crop */
body.reader-focus .home-escape-button,
body.reader-focus:not(.controls-revealed) .home-escape-button,
body.reader-focus.controls-revealed .home-escape-button,
body.reader-focus.annotation-mode .home-escape-button {
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 28px));
}
.stage-circle-slides {
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 28px));
}

/* L3 leftover: mute right-stack circle is Shepherd — undo sr-only clip */
.stage-circle-shepherd .stage-circle-label.stage-circle-name,
.stage-circle-shepherd .stage-circle-name {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: -13px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  font: 650 9px/1 Inter, system-ui, sans-serif !important;
  color: #2B211C !important;
  pointer-events: none;
  white-space: nowrap !important;
}

/* L116.10 touch floor at both tested iPad widths. These selectors sit last so
   older compact rules cannot shrink the point-of-impact edit path. */
.mass-setting-pill,
.mass-setting-save-row button,
.program-announcement-add input,
.program-announcement-add button,
.program-announcement-row input,
.program-announcement-row button,
.program-field input,
.program-field textarea,
.intercessions-entry-row textarea,
.intercessions-pill input,
.intercessions-pill button,
.slide-maker-save,
#closeReaderCuePanel,
body.playback-operator-mode .operator-console-strip .operator-source-toggle button,
body.playback-operator-mode .operator-return-music,
.operator-cockpit-piece,
.operator-cockpit-go,
.operator-cockpit-soft,
.operator-cockpit-message-name,
.operator-cockpit-arrangement {
  min-height: 44px;
}

#operatorReturnMusic {
  height: 44px !important;
  min-height: 44px !important;
}

/* M15 score furniture: app-rendered package metadata, never baked notation. */
.score-furniture {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 18px;
  padding: clamp(10px, 1.6vw, 18px) clamp(14px, 2.4vw, 28px) 8px;
  color: #3A2820;
  background: #FFFDF8;
  font-family: var(--gn-furniture-face);
}

.score-furniture[hidden],
.score-furniture-composer[hidden],
.score-furniture-attribution[hidden] {
  display: none !important;
}

.score-furniture-title {
  grid-column: 1 / -1;
  margin: 0;
  color: #3A2820;
  font: 400 clamp(24px, 3vw, 38px) / 1.02 var(--gn-furniture-face);
  letter-spacing: 0.01em;
  text-align: center;
}

.score-furniture-composer,
.score-furniture-attribution {
  margin: 0;
  color: #58443A;
  font: 400 clamp(11px, 1.15vw, 14px) / 1.16 var(--gn-furniture-face);
}

.score-furniture-composer {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
}

.score-furniture-attribution {
  grid-column: 1 / -1;
  grid-row: 3;
  color: #7E6E65;
  font-size: clamp(10px, 1vw, 12px);
  text-align: right;
}

/* D2: the chart rail itself is transparent; each choice is one clipped oval. */
body.reader-focus .chart-pills,
body.reader-focus:not(.controls-revealed) .chart-pills,
body.reader-focus.controls-revealed .chart-pills,
body.reader-focus.reader-portrait .chart-pills,
body.reader-focus.reader-portrait.controls-revealed .chart-pills {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.reader-focus .chart-pills .chart-pill,
body.reader-focus .reader-chart-row .chart-pill {
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  border: 1px solid #C2B391 !important;
  border-radius: 999px !important;
  background: #FBF3E4 !important;
  background-clip: padding-box !important;
  color: #4A3B32 !important;
  box-shadow: 0 1px 2px rgba(74, 59, 50, 0.10) !important;
  isolation: isolate;
}

body.reader-focus .chart-pills .chart-pill {
  padding-inline: 6px;
  font-size: 10px;
}

body.reader-focus .chart-pills .chart-pill .pill-label-text {
  overflow: visible;
  text-overflow: clip;
}

body.reader-focus .chart-pills .chart-pill.active,
body.reader-focus .reader-chart-row .chart-pill.active {
  border-color: #9A7F43 !important;
  background: #F3E9D0 !important;
  color: #3A2820 !important;
  box-shadow: 0 1px 2px rgba(74, 59, 50, 0.10) !important;
}

body.reader-focus .chart-pills .chart-pill .status-dot,
body.reader-focus .chart-pills .chart-format-badge::before {
  display: none !important;
}

body.reader-focus .chart-pills .chart-format-badge {
  padding-inline: 5px;
  font-size: 8px;
  letter-spacing: 0;
}

/* D1: at widths that can afford gutters, the paper and every fixed rail use
   the same readable-column geometry. Narrow portrait retains overlay mode. */
@media (min-width: 960px) {
  body.reader-focus:not(.playback-operator-mode) {
    --gn-reader-stage-width: min(100vw, 1264px);
    --gn-reader-score-width: min(1120px, calc(100vw - 144px));
    --gn-reader-rail-inset: max(12px, calc((100vw - var(--gn-reader-score-width)) / 2 - 60px));
  }

  body.reader-focus .score-page,
  body.reader-focus.reader-portrait .score-page,
  html.gn-curl-perform body.reader-focus .score-page {
    width: var(--gn-reader-score-width) !important;
    max-width: var(--gn-reader-score-width) !important;
    margin-inline: auto !important;
  }

  body.reader-focus .chart-pills,
  body.reader-focus:not(.controls-revealed) .chart-pills,
  body.reader-focus.controls-revealed .chart-pills,
  body.reader-focus.reader-portrait .chart-pills,
  body.reader-focus.reader-portrait.controls-revealed .chart-pills {
    left: var(--gn-reader-rail-inset) !important;
    right: auto !important;
    max-width: 56px !important;
  }

  body.reader-focus .score-toolbar #toolDrawerToggle {
    right: var(--gn-reader-rail-inset) !important;
  }

  body.reader-focus .home-escape-button,
  body.reader-focus:not(.controls-revealed) .home-escape-button,
  body.reader-focus.controls-revealed .home-escape-button,
  body.reader-focus.annotation-mode .home-escape-button,
  .stage-circle-pitch,
  .stage-circle-tempo,
  .stage-circle-flashlight,
  .stage-circle-audio,
  .stage-circle-reflow {
    left: var(--gn-reader-rail-inset) !important;
  }

  .stage-circle-slides,
  .stage-circle-annotation,
  .stage-circle-shepherd {
    right: var(--gn-reader-rail-inset) !important;
  }
}

@media (max-width: 959px) {
  .score-furniture {
    gap: 1px 10px;
    padding: 8px 12px 6px;
  }

  .score-furniture-title {
    font-size: clamp(21px, 5.8vw, 30px);
  }

  .score-furniture-composer,
  .score-furniture-attribution {
    font-size: 10px;
  }
}

@media (max-width: 520px) {
  .slide-maker-save,
  #closeReaderCuePanel,
  body.playback-operator-mode .operator-console-strip .operator-source-toggle button,
  body.playback-operator-mode .operator-return-music {
    min-width: 44px;
    min-height: 44px;
  }

}

/* Standalone B.2 terminal cascade. */
body.playback-operator-mode .operator-console-strip {
  min-height: 44px !important;
  height: 44px !important;
  padding-block: 0 !important;
}

body.playback-operator-mode .operator-cockpit-actions {
  display: none !important;
}

body.playback-operator-mode .operator-list-chrome {
  display: flex !important;
}

body.playback-operator-mode .operator-grid {
  min-height: 0 !important;
  overflow: visible !important;
}

body.playback-operator-mode .operator-card.operator-authoring-card {
  display: grid !important;
}

@media (max-width: 760px) {
  body.playback-operator-mode .operator-console-strip {
    height: auto !important;
  }
}

body.playback-operator-mode .operator-authoring-library .timeline-ready {
  display: none !important;
}

body.playback-operator-mode .operator-authoring-library .timeline-main,
body.playback-operator-mode .operator-authoring-library .timeline-main strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (min-width: 761px) {
  body.playback-operator-mode .operator-authoring-editor {
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
  }

  body.playback-operator-mode .operator-slide-rail-head {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.playback-operator-mode .operator-slide-rail {
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    max-height: 196px;
    margin: 7px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.playback-operator-mode .operator-slide-rail button {
    flex: 0 0 58px;
    width: 100%;
  }

  body.playback-operator-mode .operator-slide-editor {
    grid-column: 2;
    grid-row: 2;
    margin-top: 7px;
  }
}

body.playback-operator-mode .operator-pane-toggle button,
body.playback-operator-mode .operator-slide-actions button,
body.playback-operator-mode #operatorResetPreview,
body.playback-operator-mode .operator-workspace-tabs button,
body.playback-operator-mode .operator-workspace-panel > button,
body.playback-operator-mode .operator-workspace-choices button {
  min-height: 44px !important;
}

@media (max-width: 760px) {
  body.playback-operator-mode .playback-operator-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  body.playback-operator-mode .operator-authoring-library {
    padding-bottom: 148px;
  }

  body.playback-operator-mode .operator-authoring-library .operator-piece-list {
    flex: 0 0 200px;
    max-height: 200px !important;
    overflow-y: auto;
  }
}

/* Keep touch tool changes on narrow screens and short landscape windows. */
@media (max-width: 1023px), (max-height: 500px) {
  /* Keep reader tool controls reachable on touch screens without changing chrome. */
  #readerSettingsPanel button,
  #turnerPopover button,
  #turnerPopover select,
  #pageOrderPanel button,
  #prepRack button,
  #prepRack input {
    min-width: 44px;
    min-height: 44px;
  }

  #turnerPopover select,
  #prepRack input {
    font-size: 16px;
  }

  #prepRack .prep-rack-modules {
    grid-template-columns: minmax(0, 1fr);
  }

  #prepRack .prep-rack-module,
  #prepRack .prep-orb-rename-row {
    min-width: 0;
  }

  #prepRack .prep-orb-rename-row input {
    min-width: 0;
    width: 100%;
  }

  /* WebKit's native select needs an explicit height as well as a touch minimum. */
  #turnerPopover select {
    height: 44px;
  }

  body.reader-focus #scoreToolDrawer {
    max-height: calc(100vh - max(66px, calc(env(safe-area-inset-top) + 64px)) - env(safe-area-inset-bottom) - 10px);
    max-height: calc(100dvh - max(66px, calc(env(safe-area-inset-top) + 64px)) - env(safe-area-inset-bottom) - 10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}