/* ============================================================
   THE DESK — Visual Identity
   Warm, tactile, paper-and-surface aesthetic.
   Analog in spirit, digital in function.
   ============================================================ */

/* --- Design Tokens --- */
:root {
  /* Surface palette — warm wood desk */
  --desk-tan:            var(--yd-birch);
  --desk-tan-light:      var(--yd-birch-light);
  --desk-tan-dark:       var(--yd-birch-dark);
  --desk-cream:          var(--yd-chrome);

  /* Dark surfaces — for cards, headers, heavy objects */
  --slab:                var(--yd-slab);
  --slab-light:          var(--yd-slab-light);
  --slab-text:           var(--yd-slab-text);
  --slab-muted:       rgba(240, 235, 225, 0.70);

  /* Text palette */
  --ink:                 var(--yd-ink);
  --ink-light:           var(--yd-light-ink);
  --ink-faint:           var(--yd-muted-ink);
  --ink-secondary:       var(--yd-room-muted);
  --ink-primary:         var(--yd-ink);
  --ink-dim:             var(--yd-muted-ink);

  /* Surfaces */
  --surface:             var(--yd-surface);
  --paper:               var(--yd-paper);
  --paper-tint:          var(--yd-paper-tint);

  /* Material contract. Theme changes the room and its tools; physical paper
     keeps the same readable material in both rooms. New visual work must use
     these roles instead of deciding colours screen by screen. */
  --room-bg:             var(--yd-birch);
  --room-bg-light:       var(--yd-birch-light);
  --room-bg-dark:        var(--yd-birch-dark);
  --room-ink:            var(--yd-ink);
  --room-muted:          var(--yd-room-muted);
  --chrome-bg:           var(--yd-chrome);
  --chrome-bg-raised:    var(--yd-chrome-raised);
  --chrome-ink:          var(--yd-ink);
  --chrome-muted:        var(--yd-muted-ink);
  --chrome-border:       var(--yd-chrome-border);
  --tool-bg:             var(--yd-tool);
  --tool-bg-deep:        var(--yd-tool-deep);
  --tool-ink:            var(--yd-tool-ink);
  --tool-muted:          var(--yd-tool-muted);
  --tool-border:         var(--yd-tool-border);
  --paper-bg:            var(--yd-paper);
  --paper-bg-soft:       var(--yd-paper-soft);
  --paper-ink:           var(--yd-ink);
  --paper-ink-light:  #4A3F30;
  --paper-muted:         var(--yd-muted-ink);
  --paper-border:     rgba(30, 26, 18, 0.12);
  --paper-action:        var(--yd-action);
  --paper-action-hover:  var(--yd-action-warm);

  /* Ink blue handles actions. Amber is reserved for playback/presence;
     clay is the small provenance/brand gesture. */
  --accent:              var(--yd-action);
  --accent-warm:         var(--yd-action-warm);
  --accent-muted:        var(--yd-action-muted);
  --accent-faint:        var(--yd-accent-faint);
  --accent-softer:       var(--yd-accent-softer);
  --amber:            #C68A20;
  --brand:               var(--yd-coral);
  --error:               var(--yd-error);
  --success:          #3F7A53;
  --focus-ring:          var(--yd-object-focus);
  --selection:           var(--yd-selected-fill);
  --note-ink:            var(--yd-note-ink);
  /* Legacy aliases keep the established component vocabulary coherent. */
  --gold:             var(--accent);
  --gold-warm:        var(--accent-warm);
  --gold-muted:       var(--accent-muted);
  --gold-faint:       var(--accent-faint);
  --gold-softer:      var(--accent-softer);

  /* Muted paper family; personal content supplies the livelier colour. */
  --react-yellow:        var(--yd-yellow-note);
  --react-blue:          var(--yd-blue-note);
  --react-pink:          var(--yd-pink-note);
  --react-green:         var(--yd-green-note);

  /* Floating pill — shared by .reaction-toolbar and .pill */
  --pill-bg:          var(--slab);
  --pill-border:      1px solid rgba(255, 255, 255, 0.06);
  --pill-radius:      28px;
  --pill-shadow:      0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --pill-padding:     6px 10px;
  --pill-gap:         4px;
  --pill-text:        rgba(240, 235, 225, 0.7);
  --pill-text-hover:  #F0EBE1;
  --pill-divider:     rgba(255, 255, 255, 0.1);

  /* Layout */
  --left-pane-w:      34%;
  --right-pane-w:     30%;
  --note-gutter-w:    clamp(190px, 13vw, 260px);
  --header-h:         64px;
  --pane-header-h:    42px;

  /* Frame — side pane surfaces (slightly darker for shell/content contrast) */
  --frame:               var(--yd-tool-deep);

  /* Borders */
  --border:           rgba(0, 0, 0, 0.10);
  --border-strong:    rgba(0, 0, 0, 0.18);

  /* Typography */
  --serif:            'Newsreader', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:             'Figtree', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --handwritten:      'Shantell Sans', 'Caveat', cursive;
  --mono:             'JetBrains Mono', 'SF Mono', 'Menlo', Consolas, monospace;

  /* Depth — committed shadows, objects on a surface */
  --shadow-soft:      0 1px 4px rgba(30, 26, 18, 0.10);
  --shadow-card:      0 2px 8px rgba(30, 26, 18, 0.15), 0 1px 2px rgba(30, 26, 18, 0.10);
  --shadow-heavy:     0 4px 16px rgba(30, 26, 18, 0.20), 0 1px 4px rgba(30, 26, 18, 0.12);
  --shadow-pane:      1px 0 0 var(--border);
  --shadow-gold:      0 0 0 1px rgba(154, 79, 63, 0.26), 0 6px 22px rgba(112, 58, 46, 0.15), 0 2px 6px rgba(30, 26, 18, 0.10);
  --shadow-paper:     0 8px 24px rgba(30, 26, 18, 0.18), 0 2px 6px rgba(30, 26, 18, 0.10);
}

/* ── Production media objects: voice memo and podcast ────────────────────
   These are physical desk objects, not themed panels. Their paper and ink
   remain stable on every desk surface and in both application themes. */
:root {
  --media-paper:         var(--yd-media-paper);
  --media-paper-edge:    var(--yd-media-paper-edge);
  --media-ink:           var(--yd-media-ink);
  --media-muted-ink:     var(--yd-media-muted-ink);
  --media-clay:          var(--yd-media-clay);
  --media-amber:         var(--yd-media-amber);
  --media-line: rgba(67, 56, 43, .22);
  --media-contact-shadow: 0 2px 3px rgba(37, 25, 14, .20);
  --media-ambient-shadow: 0 12px 26px rgba(37, 25, 14, .18);
  --media-hover-shadow: 0 4px 5px rgba(37, 25, 14, .19), 0 19px 38px rgba(37, 25, 14, .20);
}

body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item) {
  transform: rotate(var(--media-idle-tilt, 0deg)) !important;
  transform-origin: 50% 60%;
  transition: transform 190ms cubic-bezier(.2, .76, .25, 1), filter 190ms ease;
}
body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item):hover,
body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item):focus-within {
  transform: translateY(-4px) scale(1.012) rotate(var(--media-hover-tilt, 0deg)) !important;
  z-index: 25;
}
body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item).is-open {
  transform: translateY(-4px) scale(1.015) rotate(0deg) !important;
  z-index: 26;
}

.media-audio-memo-card,
.media-podcast-card,
[data-theme="dark"] .media-audio-memo-card,
[data-theme="dark"] .media-podcast-card {
  box-sizing: border-box;
  overflow: visible;
  margin: 0;
  border: 1px solid var(--media-paper-edge);
  border-radius: 2px;
  color: var(--media-ink);
  background: var(--media-paper);
  background-image: linear-gradient(104deg, rgba(255,255,255,.34), transparent 38%, rgba(102,78,49,.018));
  box-shadow: var(--media-contact-shadow), var(--media-ambient-shadow);
  cursor: pointer;
}
body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item):hover > .note-card,
body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item):focus-within > .note-card {
  box-shadow: var(--media-hover-shadow);
}
.media-audio-memo-card::before,
.media-podcast-card::before { display: none !important; }

.media-object-label {
  color: var(--media-clay);
  font-family: var(--sans);
  font-size: 8px;
  font-style: normal;
  font-weight: 760;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
.media-object-duration,
.media-object-date,
.media-audio-meta,
.media-podcast-byline {
  color: var(--media-muted-ink);
  font-family: var(--sans);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.media-object-duration { font-size: 9px; line-height: 1; white-space: nowrap; }

.media-object-play {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  padding: 0;
  border: 1px solid rgba(52, 43, 32, .50);
  border-radius: 50%;
  color: var(--media-ink);
  background: rgba(255,255,255,.22);
  box-shadow: 0 1px 1px rgba(33,25,16,.12), inset 0 0 0 1px rgba(255,255,255,.32);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.media-object-play:hover { transform: scale(1.04); background: rgba(255,255,255,.48); }
.media-object-play:focus-visible {
  outline: 2px solid #315E88;
  outline-offset: 3px;
}
.media-object-play > span {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}
.is-playing > .media-object-play > span,
.is-playing .media-audio-playrow .media-object-play > span {
  width: 7px;
  height: 8px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 7px);
}
.is-playing > .media-object-play,
.is-playing .media-audio-playrow .media-object-play { border-color: var(--media-amber); color: #8A560A; }

.media-object-waveform {
  display: flex;
  align-items: center;
  gap: 1.5px;
  min-width: 0;
  height: 34px;
  overflow: hidden;
}
.media-object-waveform span {
  display: block;
  width: 2px;
  min-width: 2px;
  height: max(3px, calc(31px * var(--media-peak, .25)));
  border-radius: 1px;
  background: #827565;
  opacity: .72;
  transition: background-color 100ms linear, opacity 100ms linear;
}
.media-object-waveform span.is-played { color: var(--media-amber); background: currentColor; opacity: 1; }

/* Voice memo: a 300 × 164 sound slip with the recording itself as its face. */
.media-audio-memo-card,
[data-theme="dark"] .media-audio-memo-card {
  position: relative;
  width: 300px !important;
  height: 164px;
  padding: 16px 17px 14px !important;
}
.media-audio-header { display: flex; align-items: center; gap: 6px; min-height: 12px; }
.media-audio-header .media-object-duration { margin-left: auto; }
.media-audio-mic {
  position: relative;
  width: 6px;
  height: 9px;
  border: 1.2px solid var(--media-clay);
  border-radius: 4px;
}
.media-audio-mic::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 3px;
  width: 10px;
  height: 6px;
  border: 1.2px solid var(--media-clay);
  border-top: 0;
  border-radius: 0 0 7px 7px;
}
.media-audio-memo-card h3 {
  max-width: 254px;
  margin: 12px 0 4px;
  overflow: hidden;
  color: var(--media-ink);
  font-family: var(--serif);
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-audio-meta {
  display: flex;
  gap: 5px;
  min-height: 12px;
  overflow: hidden;
  font-size: 8.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-audio-meta span::before { content: '·'; margin-right: 5px; }
.media-audio-playrow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  margin-top: 8px;
}
.media-audio-playrow .media-object-waveform { flex: 1 1 auto; }
.media-audio-playing {
  position: absolute;
  left: 57px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8B5A13;
  font-family: var(--sans);
  font-size: 7px;
  font-style: normal;
  font-weight: 760;
  letter-spacing: .11em;
  opacity: 0;
}
.media-audio-playing i,
.media-podcast-playing i,
.media-video-now i { width: 5px; height: 5px; border-radius: 50%; background: var(--media-amber); }
.media-audio-memo-card.is-playing .media-audio-playing { opacity: 1; }

/* Podcast: a 326 × 156 episode sleeve with real square artwork. */
.media-podcast-card,
[data-theme="dark"] .media-podcast-card {
  position: relative;
  display: grid;
  grid-template-columns: 156px 170px;
  width: 326px !important;
  height: 156px;
  padding: 0 !important;
}
.media-podcast-cover {
  position: relative;
  z-index: 1;
  width: 156px;
  height: 156px;
  overflow: hidden;
  background: #DED4C5;
  box-shadow: 1px 0 0 rgba(45,35,25,.13);
  transition: transform 180ms cubic-bezier(.2,.76,.25,1), box-shadow 180ms ease;
}
.media-podcast-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-podcast-art-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;
  color: #F8F1E5;
  background: #534B40;
  text-align: center;
}
.media-podcast-art-fallback span {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.08;
}
.media-podcast-copy {
  position: relative;
  min-width: 0;
  padding: 17px 14px 12px 18px;
  box-sizing: border-box;
}
.media-podcast-copy .media-object-label { display: flex; align-items: center; gap: 5px; }
.media-podcast-copy .media-object-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--media-clay); }
.media-podcast-copy h3 {
  display: -webkit-box;
  margin: 9px 0 5px;
  overflow: hidden;
  color: var(--media-ink);
  font-family: var(--serif);
  font-size: 15px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.media-podcast-byline {
  overflow: hidden;
  font-size: 8px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-podcast-copy .media-object-duration { position: absolute; right: 14px; top: 17px; }
.media-podcast-copy .media-object-waveform { position: absolute; left: 18px; right: 14px; bottom: 10px; height: 24px; }
.media-podcast-copy .media-object-waveform span { height: max(2px, calc(20px * var(--media-peak, .25))); width: 1.5px; min-width: 1.5px; }
.media-podcast-card > .media-object-play {
  position: absolute;
  z-index: 3;
  left: 156px;
  top: 78px;
  width: 29px;
  height: 29px;
  transform: translate(-50%, -50%);
  color: var(--media-ink);
  background: var(--media-paper);
}
.media-podcast-card > .media-object-play:hover { transform: translate(-50%, -50%) scale(1.04); }
.media-podcast-playing {
  position: absolute;
  left: 9px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  color: #FFF8E9;
  background: rgba(24,20,16,.72);
  font-family: var(--sans);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}
.media-podcast-card.is-playing .media-podcast-cover {
  transform: translate(-2px, -3px);
  box-shadow: 5px 6px 12px rgba(30,20,12,.24), 1px 0 0 rgba(45,35,25,.13);
}
.media-podcast-card.is-playing .media-podcast-playing { opacity: 1; }

/* Spotify exclusives: the podcast card material, but the play control opens
 * Spotify's embedded player in place — the desk can't reach the raw audio. */
.spotify-episode-card { min-height: 132px; }
.spotify-episode-card.has-inline-player { min-height: 178px; }
.spotify-episode-card.has-inline-player > .media-podcast-cover,
.spotify-episode-card.has-inline-player > .media-podcast-copy,
.spotify-episode-card.has-inline-player > .media-object-play { visibility: hidden; }
.spotify-episode-inline-player {
  position: absolute;
  inset: 8px;
  z-index: 5;
  width: calc(100% - 16px) !important;
  height: calc(100% - 16px) !important;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(33, 25, 16, .26);
}
.spotify-episode-close {
  position: absolute;
  right: 8px;
  top: -14px;
  z-index: 6;
  padding: 3px 9px;
  border: 1px solid rgba(52, 43, 32, .5);
  border-radius: 999px;
  color: var(--media-ink);
  background: var(--media-paper);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(33, 25, 16, .18);
}
.spotify-episode-close:hover { background: rgba(255, 255, 255, .9); }
.spotify-episode-close:focus-visible { outline: 2px solid #315E88; outline-offset: 2px; }
/* An open player must paint above neighboring desk objects (WebKit paints
 * spot layers in stacking order; see the YouTube inline-player note). */
.dv-spot:has(.spotify-episode-card.has-inline-player) { z-index: 60; }

.media-video-fallback { background: #39332C; }

@media (prefers-reduced-motion: reduce) {
  body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item),
  .media-podcast-cover,
  .media-object-play { transition: none !important; }
  body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item):hover,
  body.desk-scope .dv-item:is(.media-audio-memo-item, .media-podcast-item):focus-within {
    transform: rotate(var(--media-hover-tilt, 0deg)) !important;
  }
}

/* ============================================================
   DARK WALNUT THEME — Second material world
   Same room, different wood, different hour.
   Mahogany/walnut instead of bamboo/birch.
   ============================================================ */
[data-theme="dark"] {
  /* The room's colours come from tokens.css (the phone's DeskTheme) and flip
     with the theme by themselves. Only browser-specific values remain here. */
  --slab-muted:       rgba(240, 235, 225, 0.70);
  --amber:            #E8B65C;
  --success:          #79AE8B;
  --gold:             var(--accent);
  --gold-warm:        var(--accent-warm);
  --gold-muted:       var(--accent-muted);
  --gold-faint:       var(--accent-faint);
  --gold-softer:      var(--accent-softer);
  --border:           rgba(58, 46, 39, 0.9);
  --border-strong:    rgba(74, 59, 48, 0.95);
  --shadow-soft:      0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-card:      0 2px 8px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-heavy:     0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--desk-tan);
  -webkit-font-smoothing: antialiased;
}

/* The desk surfaces provide their own material texture. Do not use an SVG
   filter on the full document: WebKit can retain the covered interface in
   its accessibility tree while dropping transformed card layers from paint. */
body { background-image: none; }

/* Theme changes are one atomic material swap. Suppressing transitions for
   two paint frames prevents mixed light/dark chrome while variables update. */
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition: none !important;
}

/* --- Login Screen — premium, dark, centered --- */
/* The actual Your Desk lockup: four recognizable Post-it notes sit behind
   the top of “Desk,” while the wordmark crosses cleanly in front. */


.login-field {
  margin-bottom: 22px;
}

.login-field label {
  display: block;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.login-field input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  background: var(--desk-cream);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-faint), inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.login-field input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.login-btn {
  display: block;
  width: 100%;
  padding: 13px 0;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--slab-text);
  background: var(--slab);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.login-btn:hover {
  background: var(--slab-light);
  box-shadow: var(--shadow-heavy);
  transform: translateY(-1px);
}

.login-error {
  display: none;
  margin-top: 14px;
  padding: 10px 14px;
  font-family: var(--serif);
  font-size: 13px;
  color: #8B3A3A;
  background: rgba(139, 58, 58, 0.08);
  border: 1px solid rgba(139, 58, 58, 0.15);
  border-radius: 4px;
}

.login-error.visible {
  display: block;
}

/* Auth mode toggle */
.auth-mode-toggle {
  margin-top: 20px;
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-faint);
}

.auth-toggle-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}

.auth-toggle-btn:hover {
  text-decoration-color: var(--gold);
}

/* --- Desks Landing Page --- */
.desks-landing {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  background: var(--desk-tan);
}
.desks-landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  flex-shrink: 0;
}
.desks-landing-brand {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--slab);
  letter-spacing: -0.01em;
}
.desks-landing-user {
  position: relative;
}
.landing-user-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  background: none;
  border: 1px solid rgba(26,24,22,0.10);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
}
.landing-user-btn:hover { color: var(--ink-light); border-color: rgba(26,24,22,0.18); }

.desks-landing-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 60px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
.desks-landing-intro {
  text-align: center;
  margin-bottom: 40px;
}
.desks-landing-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.desks-landing-subtitle {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-faint);
  font-style: italic;
  margin: 0;
}
.desks-landing-list {
  width: 100%;
  margin-bottom: 24px;
}
.desks-landing-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 15px;
}
.desks-landing-empty-sub {
  font-size: 13px;
  margin-top: 4px;
}
/* Load-failure variant of the empty state: a retry, not a dead end. */
.desks-landing-retry {
  margin-top: 16px;
  padding: 8px 20px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--gold-muted, #C9AC6E);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.desks-landing-retry:hover {
  background: rgba(201, 172, 110, 0.12);
}

/* Desk cards — tactile objects, not admin tiles */
.desk-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #FFFCF7;
  border: none;
  border-left: 4px solid var(--gold-muted);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  font-family: var(--serif);
}
.desk-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.desk-card-content { flex: 1; min-width: 0; }
.desk-card-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.desk-card-meta {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.desk-card-desc {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-light);
  line-height: 1.5;
}
.desk-card-arrow {
  font-size: 18px;
  color: var(--ink-faint);
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.15s ease;
}
.desk-card:hover .desk-card-arrow {
  transform: translateX(4px);
  color: var(--gold);
}

/* ── Desk card presence states (Phase 3) ──────────────────── */
/* Lightest touch of all. Felt at a glance, not analyzed. */
.desk-card.state-dormant {
  opacity: 0.75;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-left-color: rgba(184,150,74,0.25);
}
.desk-card.state-warm {
  /* Baseline — normal desk card */
}
.desk-card.state-alive {
  box-shadow: 0 2px 10px rgba(0,0,0,0.07), 0 0 0 1px rgba(184,150,74,0.05);
}
.desk-card.state-active {
  box-shadow: 0 3px 14px rgba(0,0,0,0.09), 0 0 0 1px rgba(184,150,74,0.08);
  transform: translateY(-1px);
}
.desk-card.state-cooling {
  opacity: 0.65;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 6px rgba(184,150,74,0.04);
}
[data-theme="dark"] .desk-card.state-dormant {
  opacity: 0.6;
}
[data-theme="dark"] .desk-card.state-alive {
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 0 0 1px rgba(184,150,74,0.08);
}
[data-theme="dark"] .desk-card.state-active {
  box-shadow: 0 3px 14px rgba(0,0,0,0.20), 0 0 0 1px rgba(184,150,74,0.10);
}
[data-theme="dark"] .desk-card.state-cooling {
  opacity: 0.6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 0 6px rgba(184,150,74,0.05);
}

/* New desk button */
.desks-landing-new {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  background: none;
  border: 1px dashed rgba(26,24,22,0.15);
  border-radius: 8px;
  padding: 14px 24px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.desks-landing-new:hover {
  color: var(--ink-light);
  border-color: var(--gold-muted);
  background: rgba(255,255,255,0.3);
}
.desks-landing-new-input {
  font-family: var(--serif);
  font-size: 16px;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--ink);
  outline: none;
  width: 100%;
  text-align: center;
}
.desks-landing-new-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

/* --- App Shell --- */
.app-shell {
  display: none;
  flex-direction: column;
  height: 100vh;
}

.app-shell.active {
  display: flex;
}

/* --- Header Bar --- */
.header-bar {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 20px;
  background: var(--slab);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--slab-text);
  letter-spacing: -0.01em;
  margin-right: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease;
}
.header-brand:hover { opacity: 0.8; }

.desk-switcher {
  position: relative;
}

.desk-switcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--slab-text);
  background: var(--slab-light);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}

.desk-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.desk-switcher-btn .arrow {
  font-size: 12px;
  color: var(--slab-muted);
  transition: transform 0.15s;
}

.desk-switcher-btn.open .arrow {
  transform: rotate(180deg);
}

.desk-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--slab);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  box-shadow: var(--shadow-heavy);
  z-index: 100;
}
.desk-dropdown-section-label {
  padding: 6px 14px 4px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slab-muted);
}
.desk-dropdown-chapter {
  border-left: 3px solid transparent;
  padding-left: 11px;
  position: relative;
}
.desk-dropdown-chapter.state-active { border-left-color: var(--gold); }
.desk-dropdown-chapter.state-alive  { border-left-color: var(--gold-muted); }
.desk-dropdown-chapter.state-warm   { border-left-color: rgba(184,150,74,0.3); }

/* Hover-revealed × on chapter rows. Triggers deleteChapter() from
   delete-actions.js, which shows the standard confirm modal. On touch
   devices we always show it (no hover); desktop reveals on row hover. */
.dropdown-chapter-delete {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--slab-muted);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.desk-dropdown-chapter:hover .dropdown-chapter-delete,
.dropdown-chapter-delete:focus-visible {
  opacity: 0.75;
}
.dropdown-chapter-delete:hover {
  opacity: 1;
  color: #e57373;
  background: rgba(229, 115, 115, 0.12);
}
@media (hover: none) {
  /* Touch devices: always show, since there's no hover affordance. */
  .dropdown-chapter-delete { opacity: 0.6; }
}
.desk-dropdown-add {
  color: var(--gold-muted) !important;
  font-style: italic;
}

.desk-dropdown.open {
  display: block;
}

.desk-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slab-text);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.desk-dropdown-item:last-child {
  border-bottom: none;
}

.desk-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.desk-dropdown-item.selected {
  background: rgba(184, 150, 74, 0.15);
  font-weight: 600;
}

.desk-dropdown-item .desk-meta {
  display: block;
  font-size: 11px;
  color: var(--slab-muted);
  margin-top: 2px;
}

.header-spacer {
  flex: 1;
}


.user-menu {
  position: relative;
}

.header-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--slab-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.header-user:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--slab-text);
}

.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 120px;
  background: var(--desk-cream);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 4px;
}

.user-dropdown.open {
  display: block;
}

.user-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.user-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.user-dropdown-storage-note {
  width: 210px;
  margin: 4px 8px 5px;
  padding: 8px 4px 9px;
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.45;
}

/* --- Photo Step (new user registration) --- */
.photo-step-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(30,26,18,0.5);
  display: flex; align-items: center; justify-content: center;
}
.photo-step-card {
  background: var(--desk-cream); border-radius: 12px;
  padding: 32px 40px; text-align: center;
  box-shadow: var(--shadow-heavy);
  max-width: 320px;
}
.photo-step-circle {
  width: 80px; height: 80px; margin: 0 auto 16px;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.photo-step-circle:hover { transform: scale(1.05); }
.photo-step-status {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-faint); min-height: 18px; margin-bottom: 8px;
}
.photo-step-skip {
  font-family: var(--sans); font-size: 13px;
  color: var(--gold); background: none; border: none;
  cursor: pointer; padding: 4px 12px;
}
.photo-step-skip:hover { text-decoration: underline; }

/* --- Profile Expanded (click brings to foreground) --- */
.profile-expanded-card {
  background: var(--desk-cream);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-heavy);
  max-width: 300px;
}
.profile-expanded-img {
  width: 160px; height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0,0,0,0.08);
  margin-bottom: 16px;
}
.profile-expanded-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 16px;
}
.profile-expanded-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
[data-theme="dark"] .profile-expanded-card {
  background: var(--desk-cream);
}
[data-theme="dark"] .profile-expanded-name {
  color: var(--ink);
}

/* --- Photo Crop Modal --- */
.photo-crop-modal {
  background: var(--desk-cream); border-radius: 12px;
  padding: 24px 32px; text-align: center;
  box-shadow: var(--shadow-heavy);
  max-width: 280px;
}
.photo-crop-viewport {
  width: 200px; height: 200px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  cursor: pointer;
  position: relative;
  background: var(--frame, #E2D9CA);
  display: flex; align-items: center; justify-content: center;
}
.photo-crop-viewport canvas {
  cursor: grab;
  border-radius: 0;
}
.photo-crop-hint {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  padding: 0 20px;
  cursor: pointer;
}
.photo-crop-instructions {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-faint); margin: 0 0 12px;
}
.photo-crop-actions {
  display: flex; gap: 12px; justify-content: center;
}
.photo-crop-save {
  font-family: var(--sans); font-size: 13px;
  background: var(--gold, #B8964A); color: #fff;
  border: none; border-radius: 6px;
  padding: 8px 20px; cursor: pointer;
  font-weight: 600;
  transition: opacity 0.15s;
}
.photo-crop-save:hover { opacity: 0.85; }
.photo-crop-save:disabled { opacity: 0.4; cursor: default; }

/* --- Profile Photo Section in Dropdown --- */
.user-photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.user-photo-change-btn {
  font-size: 12px !important;
  color: var(--gold, #B8964A) !important;
  padding: 4px 8px !important;
  margin-top: 6px;
}

/* --- Three-Pane Layout --- */
.panes {
  display: grid;
  grid-template-columns: var(--left-pane-w) 12px 1fr 12px var(--right-pane-w);
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* --- Pane Resize Handles --- */
.pane-resize-handle {
  width: 12px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 10;
  transition: background 0.2s;
}
.pane-resize-handle:hover,
.pane-resize-handle.dragging {
  background: rgba(184,150,74,0.25);
}
.pane-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 32px;
  background: var(--ink-faint, rgba(107,98,88,0.2));
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.2s;
}
.pane-resize-handle:hover::after,
.pane-resize-handle.dragging::after {
  opacity: 1;
}

/* Individual pane base — each pane is a distinct material surface */
.pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--desk-tan-light);
}

.pane-left {
  background: var(--frame);
  z-index: 1;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04);
}

.pane-center {
  background: var(--desk-tan);
  position: relative;
  z-index: 2;
  box-shadow:
    -6px 0 16px rgba(30, 26, 18, 0.15),
    6px 0 16px rgba(30, 26, 18, 0.15),
    -2px 0 4px rgba(30, 26, 18, 0.08),
    2px 0 4px rgba(30, 26, 18, 0.08);
}

.pane-right {
  background: var(--frame);
  z-index: 1;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.04);
}

/* AI thinking line — ambient gold pulse at pane top when AI is working */
.ai-thinking-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--gold-muted);
  z-index: 10;
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pane.ai-thinking { position: relative; }
.pane.ai-thinking .ai-thinking-line {
  opacity: 1;
  animation: aiThinkPulse 2s ease-in-out infinite;
}
@keyframes aiThinkPulse {
  0%   { width: 20%; left: 0; opacity: 0.6; }
  50%  { width: 60%; left: 20%; opacity: 1; }
  100% { width: 20%; left: 80%; opacity: 0.6; }
}


/* Pane header */
.pane-header {
  display: flex;
  align-items: center;
  height: var(--pane-header-h);
  padding: 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.035);
}

.pane-header h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tiny sticky notes icon next to NOTES label */
.pane-right .pane-header h2::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  vertical-align: middle;
  background: #E8C840;
  border-radius: 1px;
  transform: rotate(-2deg);
  box-shadow:
    10px 1px 0 0 #5B9BD5,
    20px -1px 0 0 #E07098,
    30px 1px 0 0 #5DAE82;
}

/* Pane body — scrollable content area */
.pane-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
}

/* --- Scope Indicator (header) --- */

/* Shared superlabel for DESK / CHAPTER */
.header-scope-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scope-superlabel {
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E39A84;
  line-height: 1;
}

/* Initials sit directly on the accent chip, so their ink is chosen for that
   surface instead of inheriting the surrounding room theme. */
.profile-initials {
  color: #FFFFFF !important;
  background: #9A4F3F !important;
}
[data-theme="dark"] .profile-initials {
  color: #241713 !important;
  background: #E39A84 !important;
}

.scope-indicator {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 16px;
  animation: fadeSlideIn 0.2s ease;
}
.scope-indicator.hidden { display: none; }

.scope-indicator-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scope-back-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--slab-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.scope-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--slab-text);
}

.scope-chapter-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--slab-text);
}

/* Share chapter button — in scope indicator row */
.share-chapter-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--slab-text);
  opacity: 0.45;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 8px;
  border-radius: 4px;
  transition: opacity 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
}

/* Unseen collaborator feedback — quiet gold dot; cleared by viewing it */
.share-chapter-btn.has-feedback {
  opacity: 0.85;
}
.share-chapter-btn.has-feedback::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-muted);
  box-shadow: 0 0 0 2px var(--slab);
}
.share-chapter-btn:hover {
  opacity: 0.8;
  background: rgba(255,255,255,0.08);
}
.share-chapter-btn svg {
  width: 15px;
  height: 15px;
}

/* --- Share Modal --- */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,16,10,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.share-modal {
  background: #FFFCF7;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
  width: 400px;
  max-width: 90vw;
  overflow: hidden;
  border: 1px solid rgba(26,24,22,0.08);
}
.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(26,24,22,0.10);
  background: rgba(26,24,22,0.025);
}
.share-modal-header h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.share-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.share-modal-close:hover {
  color: var(--ink);
  background: rgba(26,24,22,0.06);
}
.share-modal-body {
  padding: 18px 22px 22px;
}
.share-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.share-email-input {
  flex: 1;
  font-family: var(--sans);
  font-size: 13.5px;
  padding: 9px 14px;
  border: 1px solid rgba(26,24,22,0.18);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease;
}
.share-email-input::placeholder {
  color: var(--ink-faint);
  opacity: 0.7;
}
.share-email-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-faint);
}
.share-email-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border: none;
  border-radius: 6px;
  background: var(--slab);
  color: var(--slab-text);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.share-email-btn:hover {
  opacity: 0.85;
}
.share-copy-link-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  background: none;
  border: 1px solid rgba(26,24,22,0.12);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.share-copy-link-btn:hover {
  background: var(--gold-faint);
  border-color: var(--gold-muted);
}
.share-collaborators {
  border-top: 1px solid rgba(26,24,22,0.10);
  padding-top: 14px;
}
.share-status-text {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-faint);
}
.share-collaborator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,24,22,0.06);
}
.share-collaborator-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.share-collaborator-email {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.share-collaborator-status {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.share-collaborator-status.share-status-active {
  color: var(--react-green);
}
.share-revoke-btn {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  background: none;
  border: 1px solid rgba(26,24,22,0.12);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.share-revoke-btn:hover {
  color: #a0452d;
  border-color: #a0452d;
}

/* The share modal is manuscript paper in BOTH rooms — the paper-stays-paper
   block below (search ".share-modal," in the [data-theme="dark"] :is(...)
   family) pins its ink dark; the cream base surface must never be
   overridden to walnut or the title becomes dark-on-dark. */
.share-error {
  font-family: var(--sans);
  font-size: 12px;
  color: #a0452d;
  margin-bottom: 8px;
}
.share-success {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--react-green);
  margin-bottom: 8px;
}

/* --- Collaboration Feedback Toggle + Cards --- */
.collab-feedback-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  background: none;
  border: 1px solid rgba(26,24,22,0.10);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.collab-feedback-toggle:hover {
  color: var(--ink-light);
  border-color: rgba(26,24,22,0.18);
  background: rgba(26,24,22,0.02);
}
.collab-feedback-toggle.active {
  color: var(--gold);
  border-color: var(--gold-muted);
}
.collab-toggle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
/* Passage glow — brief highlight when navigating to text */
@keyframes passageGlow {
  0%   { background-color: rgba(184, 150, 74, 0.25); }
  100% { background-color: transparent; }
}
.passage-glow {
  animation: passageGlow 2.5s ease forwards;
  border-radius: 2px;
}

/* Scrollbar styling */
.pane-body::-webkit-scrollbar {
  width: 6px;
}
.pane-body::-webkit-scrollbar-track {
  background: transparent;
}
.pane-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

/* --- Chapter List (Left Pane) --- */
.chapter-list-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 2px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.chapter-list-item:hover {
  background: var(--gold-faint);
}
.chapter-list-item:focus-visible {
  outline: 2px solid var(--gold-muted);
  outline-offset: -2px;
}

.chapter-list-item.selected {
  background: var(--gold-faint);
  border-left: 3px solid var(--gold);
  padding-left: 9px;
  font-weight: 600;
}

.chapter-list-item .chapter-title {
  display: block;
  line-height: 1.3;
}

.chapter-list-item .chapter-meta {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* ============================================================
   CENTER PANE: WORKSPACE
   The production floor. Vertical stack:
   header → framing → AI bar → toolbar → writing → chapters below
   ============================================================ */

.workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* No single-scroll — writing zone and chapter zone scroll independently */
  /* The composed page object: warm-white manuscript surface */
  background: #FDFBF7;
  margin: 8px 12px;
  border-radius: 5px;
  box-shadow:
    0 1px 3px rgba(30, 20, 10, 0.06),
    0 4px 16px rgba(30, 20, 10, 0.08),
    0 12px 40px rgba(30, 20, 10, 0.05);
}
/* When no chapter section exists (inside a chapter), workspace scrolls normally */
.workspace:not(:has(.ws-chapter-section)) {
  overflow-y: auto;
}

/* 1. Desk header */
/* 0. Pane header — WRITING label + Export */
.ws-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--pane-header-h);
  padding: 0 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  background: transparent;
  border-radius: 5px 5px 0 0;
}

.ws-pane-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ws-export-btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
  opacity: 0.6;
}

.ws-export-btn:hover {
  background: var(--desk-tan-light);
  color: var(--ink);
  opacity: 1;
}

.ws-export-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.ws-pane-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Thinking Timeline ─────────────────────────────────────── */

.ws-timeline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 3px;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s;
  line-height: 1;
  color: var(--ink);
}
.ws-timeline-btn svg {
  display: block;
}
.ws-timeline-btn:hover {
  opacity: 0.85;
  background: var(--desk-tan-light);
}
.ws-timeline-btn.active {
  opacity: 1;
  background: var(--gold-faint);
}

.timeline-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: var(--surface);
  border-left: 3px solid var(--gold);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.timeline-header h3 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 0;
}
.timeline-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.timeline-close:hover { color: var(--ink); }

.timeline-entries {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.timeline-entry {
  padding: 12px 20px;
  border-left: 3px solid transparent;
  margin-left: -3px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.15s;
}
.timeline-entry:hover {
  background: rgba(0, 0, 0, 0.015);
}
.timeline-entry-current {
  border-left-color: var(--gold);
  background: var(--gold-faint);
}

.timeline-time {
  font-family: var(--handwritten);
  font-size: 18px;
  color: var(--ink-light);
  margin-bottom: 4px;
}

.timeline-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.timeline-brief {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-light);
  line-height: 1.5;
  margin-bottom: 6px;
  min-height: 18px;
}

.timeline-wordcount {
  font-family: var(--mono, 'SF Mono', 'Menlo', monospace);
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.timeline-restore-btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-warm);
  background: none;
  border: 1px solid var(--gold-muted);
  border-radius: 3px;
  padding: 3px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.timeline-restore-btn:hover {
  background: var(--gold-faint);
  color: var(--gold);
}

.timeline-current-badge {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

.timeline-loading,
.timeline-empty {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  padding: 40px 20px;
  font-style: italic;
}

.timeline-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 1000;
  pointer-events: none;
}
.timeline-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ws-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 28px 2px;
  flex-shrink: 0;
  background: transparent;
  min-height: 0;
}

/* 2. Thesis / project framing */
.ws-framing {
  padding: 6px 28px 14px;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-light);
  line-height: 1.6;
  border-bottom: none;
  flex-shrink: 0;
  background: transparent;
}

/* Save indicator in toolbar */
.ws-toolbar .editor-save-indicator {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 400;
  color: #2A2520;
  opacity: 0;
  transition: opacity 0.3s;
  margin-left: 4px;
}
.ws-toolbar .editor-save-indicator.visible {
  opacity: 1;
}

/* Cited count in toolbar */
.ws-toolbar .editor-cited-count {
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 400;
  color: #2A2520;
  margin-left: 6px;
}

/* 4. Toolbar — supports the writing surface, doesn't compete */
.ws-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 28px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--frame);
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-light);
}

.ws-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #4A4038;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ws-tool:hover {
  background: rgba(26,24,22,0.08);
  color: #1E1A12;
  border-color: rgba(26,24,22,0.08);
}

.ws-tool.active {
  background: rgba(26,24,22,0.12);
  color: #1E1A12;
}

.ws-tool-italic { font-style: italic; }
.ws-tool-underline { text-decoration: underline; }

.ws-tool-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 10px;
  flex-shrink: 0;
}

.ws-tool-label {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 400;
  color: #4A4038;
  margin-left: auto;
  letter-spacing: 0.01em;
}

/* 4b. Toolbar secondary row — collapsed by default */
.ws-toolbar-secondary {
  padding: 2px 28px 6px;
  border-bottom: none;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  max-height: 50px;
  overflow: visible;
  clip-path: none;
}
.ws-toolbar-secondary .ws-tool {
  opacity: 0.75;
}
.ws-toolbar-secondary .ws-tool:hover {
  opacity: 1;
}
.ws-toolbar-secondary.ws-toolbar-collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* More tools toggle */
.ws-tool-more {
  font-size: 1rem !important;
  letter-spacing: 1px;
  opacity: 0.65;
}
.ws-tool-more.active {
  opacity: 1;
  background: rgba(26,24,22,0.12) !important;
}

/* Word count display in toolbar */
.ws-word-count {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: #2A2520;
  white-space: nowrap;
  padding: 0 6px;
  user-select: none;
  letter-spacing: 0.01em;
}

/* Strikethrough button */
.ws-tool-strike { text-decoration: line-through; }

/* ── Find & Replace Bar ─────────────────────────────── */
.find-bar {
  display: flex;
  flex-direction: column;
  background: rgba(245, 240, 232, 0.97);
  border: 1px solid rgba(26, 24, 22, 0.12);
  border-radius: 8px;
  margin: 0 28px 8px;
  padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: guidanceReveal 0.15s ease-out;
  z-index: 50;
  position: relative;
}
.find-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.find-bar-replace-row {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(26, 24, 22, 0.06);
}
.find-bar-input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(26, 24, 22, 0.12);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  padding: 5px 10px;
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.find-bar-input:focus {
  border-color: rgba(26, 24, 22, 0.25);
}
.find-bar-count {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
  min-width: 55px;
  text-align: center;
}
.find-bar-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 24, 22, 0.04);
  border: 1px solid rgba(26, 24, 22, 0.08);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--ink-dim);
  transition: all 0.15s;
}
.find-bar-btn:hover {
  background: rgba(26, 24, 22, 0.10);
  color: var(--ink);
}
.find-bar-btn:active {
  transform: scale(0.93);
  transition: transform 0.08s;
}
.find-bar-replace-btn {
  width: auto;
  padding: 0 10px;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.find-bar-close {
  font-size: 1rem;
  font-weight: 300;
}

/* Find match highlights */
mark.find-match {
  background: rgba(200, 184, 120, 0.35);
  border-radius: 2px;
  padding: 0 1px;
  color: inherit;
}
mark.find-match-current {
  background: rgba(200, 184, 120, 0.7);
  box-shadow: 0 0 0 2px rgba(200, 184, 120, 0.3);
}

/* ── Export Dropdown ─────────────────────────────── */
.export-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.export-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  background: #2a2520;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 200px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  animation: guidanceReveal 0.12s ease-out;
}
.export-dropdown-menu button[data-format] {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  color: #d0cbc0;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.export-dropdown-menu button[data-format]:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #f0ebe0;
}
.export-dropdown-menu button[data-format] strong {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
}
.export-dropdown-menu button[data-format] span {
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-top: 1px;
}
.export-mode-toggle {
  padding: 6px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
}
.export-mode-toggle label {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toolbar action buttons (text labels like Undo, Clear formatting) */
.toolbar-action-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  font-size: 0.82rem !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  color: #2A2520 !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0 8px !important;
  width: auto !important;
}
.toolbar-action-btn svg {
  flex-shrink: 0;
}

/* Styles dropdown (ported from old app) */
.toolbar-styles-wrap {
  position: relative;
  display: inline-flex;
}
.toolbar-styles-btn {
  height: 30px;
  border: 1px solid transparent;
  background: transparent;
  color: #4A4038;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.82rem;
  font-family: var(--serif);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.toolbar-styles-btn:hover {
  background: rgba(26,24,22,0.10);
  color: #141210;
  border-color: rgba(26,24,22,0.15);
}
.toolbar-styles-arrow {
  font-size: 0.7rem;
  opacity: 0.5;
}
.toolbar-styles-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #2a2520;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 140px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  animation: guidanceReveal 0.12s ease-out;
}
.toolbar-styles-dropdown button {
  display: block;
  width: 100%;
  padding: 7px 16px;
  background: none;
  border: none;
  color: #d0cbc0;
  font-size: 0.82rem;
  font-family: var(--serif);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.toolbar-styles-dropdown button:hover {
  background: rgba(255,255,255,0.10);
  color: #f0ebe0;
}
.toolbar-styles-dropdown button.style-active {
  color: #f0ebe0;
  background: rgba(255,255,255,0.08);
}

/* Text color dropdown — curated ink palette */
.toolbar-color-wrap {
  position: relative;
  display: inline-flex;
}
.toolbar-color-btn {
  height: 30px;
  border: 1px solid transparent;
  background: transparent;
  color: #4A4038;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--serif);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1;
  min-width: 30px;
}
.toolbar-color-btn:hover {
  background: rgba(26,24,22,0.08);
  border-color: rgba(26,24,22,0.08);
}
.toolbar-color-a { font-size: 14px; }
.toolbar-color-bar {
  width: 14px; height: 3px;
  border-radius: 1px;
  background: var(--ink, #1E1A12);
  margin-top: 1px;
}
.toolbar-color-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--desk-cream, #F7F2EA);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 180px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  animation: guidanceReveal 0.12s ease-out;
}
.toolbar-color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.toolbar-color-swatch:hover {
  transform: scale(1.15);
  border-color: var(--gold, #B8964A);
}
.toolbar-color-swatch-white {
  border-color: rgba(0,0,0,0.15);
}
.toolbar-color-clear {
  width: auto; height: auto;
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  background: rgba(0,0,0,0.05);
  flex-basis: 100%;
}
.toolbar-color-clear:hover {
  background: rgba(0,0,0,0.10);
  color: var(--ink);
}

/* Highlight color dropdown */
.toolbar-highlight-wrap {
  position: relative;
  display: inline-flex;
}
.toolbar-highlight-btn {
  height: 30px;
  border: 1px solid transparent;
  background: transparent;
  color: #4A4038;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.88rem;
  font-family: var(--serif);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1;
  min-width: 30px;
}
.toolbar-highlight-btn:hover {
  background: rgba(26,24,22,0.08);
  border-color: rgba(26,24,22,0.08);
}
.toolbar-highlight-btn svg { margin-bottom: 1px; }
.toolbar-highlight-bar {
  width: 14px; height: 3px;
  border-radius: 1px;
  background: #F5E6B8;
  margin-top: 1px;
}
.toolbar-highlight-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--desk-cream, #F7F2EA);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 180px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  animation: guidanceReveal 0.12s ease-out;
}
.toolbar-highlight-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.toolbar-highlight-swatch:hover {
  transform: scale(1.15);
  border-color: var(--gold, #B8964A);
}
.toolbar-highlight-clear {
  width: auto; height: auto;
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  background: rgba(0,0,0,0.05);
  flex-basis: 100%;
}
.toolbar-highlight-clear:hover {
  background: rgba(0,0,0,0.10);
  color: var(--ink);
}

/* Font family dropdown */
.toolbar-font-wrap {
  position: relative;
  display: inline-flex;
}
.toolbar-font-btn {
  height: 30px;
  border: 1px solid transparent;
  background: transparent;
  color: #4A4038;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: var(--serif);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.toolbar-font-btn:hover {
  background: rgba(26,24,22,0.08);
  border-color: rgba(26,24,22,0.08);
}
.toolbar-font-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--desk-cream, #F7F2EA);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  animation: guidanceReveal 0.12s ease-out;
}
.toolbar-font-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.toolbar-font-dropdown button:hover {
  background: rgba(0,0,0,0.06);
}
.toolbar-font-sep {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 4px 10px;
}
.toolbar-font-dropdown {
  max-height: 320px;
  overflow-y: auto;
}

/* Font size dropdown — compact numeric selector */
.toolbar-size-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.toolbar-size-input {
  width: 38px;
  height: 26px;
  border: 1px solid rgba(26,24,22,0.12);
  background: rgba(255,255,255,0.5);
  color: #4A4038;
  border-radius: 4px 0 0 4px;
  font-size: 0.78rem;
  font-family: var(--serif);
  text-align: center;
  padding: 0 2px;
  outline: none;
  -moz-appearance: textfield;
}
.toolbar-size-input::-webkit-inner-spin-button,
.toolbar-size-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.toolbar-size-input:focus {
  border-color: var(--gold, #B8964A);
  background: rgba(255,255,255,0.8);
}
.toolbar-size-toggle {
  height: 26px;
  width: 18px;
  border: 1px solid rgba(26,24,22,0.12);
  border-left: none;
  background: transparent;
  color: #4A4038;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s;
}
.toolbar-size-toggle:hover {
  background: rgba(26,24,22,0.08);
}
.toolbar-size-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--desk-cream, #F7F2EA);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 80px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  animation: guidanceReveal 0.12s ease-out;
}
.toolbar-size-dropdown button {
  display: block;
  width: 100%;
  padding: 6px 14px;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--serif);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.toolbar-size-dropdown button:hover {
  background: rgba(0,0,0,0.06);
}
.toolbar-size-default {
  font-size: 13px !important;
  color: var(--ink-faint) !important;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 8px !important;
}

/* Text alignment buttons — compact icon group */
.toolbar-align-btn {
  width: 30px !important;
}
.toolbar-align-btn svg {
  display: block;
}

/* Line & paragraph spacing dropdown */
.toolbar-spacing-wrap {
  position: relative;
  display: inline-flex;
}
.toolbar-spacing-btn {
  width: 32px;
}
.toolbar-spacing-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--desk-cream, #F7F2EA);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 200px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  animation: guidanceReveal 0.12s ease-out;
}
.toolbar-spacing-dropdown button {
  display: block;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.toolbar-spacing-dropdown button:hover {
  background: rgba(0,0,0,0.06);
}
.toolbar-spacing-label {
  padding: 6px 14px 2px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.toolbar-spacing-sep {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 4px 10px;
}

/* Format painter active cursor */
.editor-body.format-painter-active {
  cursor: crosshair !important;
}
.editor-body.format-painter-active * {
  cursor: crosshair !important;
}

/* Code blocks in editor */
.editor-body .code-block {
  background: #1E1A12;
  color: #E8E0D4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 16px 20px;
  border-radius: 8px;
  margin: 16px 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  tab-size: 2;
}
.editor-body .code-block code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}

/* Callout / admonition blocks in editor */
.editor-body .callout {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  margin: 16px 0;
  border-left: 4px solid;
}
.editor-body .callout-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.4;
}
.editor-body .callout-content {
  flex: 1;
  outline: none;
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.6;
  min-height: 1em;
}
.editor-body .callout-info {
  border-color: #2C5F7C;
  background: rgba(44, 95, 124, 0.08);
}
.editor-body .callout-warning {
  border-color: #B8860B;
  background: rgba(184, 134, 11, 0.08);
}
.editor-body .callout-tip {
  border-color: #3A5F3A;
  background: rgba(58, 95, 58, 0.08);
}
.editor-body .callout-note {
  border-color: #6B6B6B;
  background: rgba(107, 107, 107, 0.08);
}

/* Dark theme overrides for color/font/size dropdowns */
[data-theme="dark"] .toolbar-color-btn,
[data-theme="dark"] .toolbar-font-btn,
[data-theme="dark"] .toolbar-size-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: var(--slab-text);
}
[data-theme="dark"] .toolbar-color-btn:hover,
[data-theme="dark"] .toolbar-font-btn:hover {
  background: rgba(255,255,255,0.12);
}
[data-theme="dark"] .toolbar-color-dropdown {
  background: #2a2520;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
}
[data-theme="dark"] .toolbar-color-clear {
  color: #d0cbc0;
  background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .toolbar-font-dropdown {
  background: #2a2520;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
}
[data-theme="dark"] .toolbar-font-dropdown button {
  color: #d0cbc0;
}
[data-theme="dark"] .toolbar-font-dropdown button:hover {
  background: rgba(255,255,255,0.10);
  color: #f0ebe0;
}
[data-theme="dark"] .toolbar-size-dropdown {
  background: #2a2520;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
}
[data-theme="dark"] .toolbar-size-dropdown button {
  color: #d0cbc0;
}
[data-theme="dark"] .toolbar-size-dropdown button:hover {
  background: rgba(255,255,255,0.10);
  color: #f0ebe0;
}
[data-theme="dark"] .toolbar-size-default {
  border-top-color: rgba(255,255,255,0.08);
}

/* Editable thesis input — roman, not italic (the point, not decoration) */
.editor-thesis-input {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(26,24,22,0.10);
  border-radius: 0;
  color: #3D3328;
  padding: 10px 28px 10px;
  font-size: 0.95rem;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  transition: border-color 0.3s;
  letter-spacing: -0.01em;
  outline: none;
  box-sizing: border-box;
}
.editor-thesis-input.thesis-filled {
  border-bottom-color: rgba(26,24,22,0.15);
}
.editor-thesis-input:focus {
  border-bottom-color: rgba(26,24,22,0.35);
  box-shadow: none;
}
.editor-thesis-input::placeholder {
  color: #5A5348;
  font-style: italic;
}

/* 5. Writing surface — the primary area of the workspace */
.ws-writing-surface {
  flex: 1;
  min-height: 28vh;
  background: transparent;
}

/* Writing-ready state (no chapter focused) — cozy, centered */
.ws-writing-ready {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;
  text-align: center;
}

.ws-writing-ready p {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.7;
}

/* The writing surface grows to fill available space and scrolls independently */
.workspace:has(.ws-chapter-section) .ws-writing-surface {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* 6. Chapter section — pinned at bottom, own scroll zone */
.ws-chapter-section {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 80px;
  max-height: 35vh;
  background: rgba(0, 0, 0, 0.012);
  border-radius: 0 0 5px 5px;
}

.ws-chapter-label {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  padding: 14px 12px 8px;
}

.ws-chapter-list {
  padding-bottom: 8px;
}

.ws-chapter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 14px 24px;
  margin: 0 8px 6px;
  width: calc(100% - 16px);
  background: var(--slab);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  box-shadow: var(--shadow-card);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.ws-chapter-row:hover {
  background: var(--slab-light);
  box-shadow: var(--shadow-heavy);
  transform: translateY(-1px);
}

.ws-chapter-row.active {
  background: var(--slab-light);
  border-left: 3px solid var(--gold);
}

.ws-ch-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--slab-text);
  line-height: 1.3;
}

.ws-chapter-row.active .ws-ch-title {
  font-weight: 700;
}

.ws-ch-meta {
  font-size: 11px;
  color: var(--slab-muted);
  flex-shrink: 0;
  margin-left: 12px;
}

/* Navigation arrow */
.ws-chapter-row::after {
  content: '→';
  color: var(--slab-muted);
  font-size: 14px;
  margin-left: 12px;
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}
.ws-chapter-row:hover::after {
  transform: translateX(3px);
  color: var(--slab-text);
}

/* ── Chapter presence states (Phase 3) ────────────────────── */
.ws-chapter-row.state-dormant {
  opacity: 0.65;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.06);
  border-left: 2px solid transparent;
}
.ws-chapter-row.state-dormant .ws-ch-title {
  color: var(--slab-muted);
}
.ws-chapter-row.state-warm {
  /* Baseline — normal chapter card appearance */
}
.ws-chapter-row.state-alive {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.12),
    0 4px 14px rgba(0,0,0,0.06),
    0 0 0 1px rgba(184,150,74,0.06);
  border-left: 2px solid rgba(184,150,74,0.15);
}
.ws-chapter-row.state-active {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.15),
    0 6px 20px rgba(0,0,0,0.10),
    0 0 0 1px rgba(184,150,74,0.10);
  border-left: 3px solid var(--gold-muted);
}
.ws-chapter-row.state-active .ws-ch-title {
  font-weight: 600;
}
/* Cooling: was once alive/active, now dormant — faint gold memory */
.ws-chapter-row.state-cooling {
  opacity: 0.65;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.06),
              0 0 6px rgba(184,150,74,0.03);
  border-left: 2px solid transparent;
}
.ws-chapter-row.state-cooling .ws-ch-title {
  color: var(--slab-muted);
}
/* Dark theme overrides for chapter presence */
[data-theme="dark"] .ws-chapter-row.state-cooling {
  opacity: 0.55;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.12),
              0 0 6px rgba(184,150,74,0.04);
}
[data-theme="dark"] .ws-chapter-row.state-dormant {
  opacity: 0.55;
}
[data-theme="dark"] .ws-chapter-row.state-alive {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.25),
    0 4px 14px rgba(0,0,0,0.15),
    0 0 0 1px rgba(184,150,74,0.08);
}
[data-theme="dark"] .ws-chapter-row.state-active {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.30),
    0 6px 20px rgba(0,0,0,0.20),
    0 0 0 1px rgba(184,150,74,0.12);
}

.ws-chapter-empty {
  padding: 10px 32px;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}

.ws-chapter-add {
  color: var(--gold);
  font-weight: 600;
  opacity: 0.7;
  justify-content: center;
  border-style: dashed;
}

.ws-chapter-add:hover {
  opacity: 1;
  background: var(--gold-faint);
}

.ws-chapter-new-form {
  padding: 6px 12px;
}

/* Lives inside the desk dropdown — a dark walnut slab in BOTH themes,
   so colors here are slab colors, never theme-gated ink/cream. */
.ws-chapter-new-input {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slab-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  outline: none;
}

.ws-chapter-new-input::placeholder {
  color: rgba(240, 235, 225, 0.5);
}

.ws-chapter-new-input:focus {
  border-color: var(--gold-muted);
  box-shadow: 0 0 0 2px var(--gold-faint);
}

/* --- Center Pane: Chapter View Placeholder --- */
.chapter-surface {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 28px;
}

.chapter-surface h1 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.chapter-surface .chapter-thesis {
  font-size: 14px;
  color: var(--ink-light);
  font-style: italic;
  margin-bottom: 24px;
  line-height: 1.6;
}

.chapter-surface .chapter-content-placeholder {
  padding: 24px;
  background: var(--desk-tan-light);
  border: 1px dashed var(--border-strong);
  color: var(--ink-faint);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

.chapter-surface .back-to-desk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}

.chapter-surface .back-to-desk:hover {
  color: var(--ink);
}

/* --- Center Pane: Editor / Writing Surface --- */
.editor-surface {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.editor-surface .back-to-desk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s;
  flex-shrink: 0;
}

.editor-surface .back-to-desk:hover {
  color: var(--ink);
}

.editor-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #141210;
  letter-spacing: -0.01em;
  padding: 14px 28px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 0;
  flex-shrink: 0;
}

.editor-thesis {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-light);
  line-height: 1.6;
  padding: 6px 28px 8px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.editor-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 28px;
  margin-bottom: 0;
  border-bottom: none;
  flex-shrink: 0;
}

.editor-word-count {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.editor-save-indicator {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.3s;
}

.editor-save-indicator.visible {
  opacity: 1;
}
.editor-save-indicator.persistent {
  opacity: 0.5;
  transition: opacity 0.8s ease 0.5s;
}

.editor-body {
  flex: 1;
  width: 100%;
  min-height: 200px;
  padding: 44px 52px 50vh;
  background: transparent;
  /* Theme variable, not a hardcoded ink — dark mode flows automatically */
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.85;
  outline: none;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  caret-color: #B8964A;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.editor-body:empty::before {
  content: attr(data-placeholder);
  color: #6A6358;
  font-style: italic;
  pointer-events: none;
}

.editor-body:focus {
  outline: none;
}

/* Editor heading & text size styles */
.editor-body h1 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0.8em 0 0.4em;
  color: var(--ink);
}
.editor-body h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.7em 0 0.35em;
}
.editor-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0.6em 0 0.3em;
  color: var(--ink-dim);
}
.text-small { font-size: 0.85em; }
.text-large { font-size: 1.2em; }

/* ── Editor gravity: focused-paragraph candlelight (Phase 3) ──────
   "If the user can point to it and say 'that's presence,' it's too strong."
   Barely there. Felt, not seen. */
.editor-body .editor-paragraph-focused {
  background: transparent;
  border-left: 1px solid rgba(184, 150, 74, 0.06);
  margin-left: -8px;
  padding-left: 7px;
  border-radius: 2px;
  transition: background 0.4s ease, border-left-color 0.4s ease;
}

/* Keep focus paint out of editable backgrounds in the dark room too. */
[data-theme="dark"] .editor-body .editor-paragraph-focused {
  background: transparent;
  border-left: 1px solid rgba(184, 150, 74, 0.08);
}

/* Desk-level brief editor — constrained height (ported from old app) */
.desk-brief-body {
  min-height: 120px;
  max-height: 35vh;
  flex: 0 1 auto;
  height: auto;
}

/* Scrollbar for editor */
.editor-body::-webkit-scrollbar {
  width: 6px;
}
.editor-body::-webkit-scrollbar-track {
  background: transparent;
}
.editor-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

/* --- Drag & Drop Citations --- */

/* Drag handle in reaction toolbar */
.htb-divider {
  width: 1px;
  height: 20px;
  background: rgba(240, 235, 225, 0.15);
  margin: auto 4px;
  flex-shrink: 0;
}

.htb-drag-handle {
  width: 42px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  border: none;
  border-radius: 12px;
  background: transparent;
  transition: all 0.15s ease;
  color: var(--slab-muted);
}

.htb-drag-handle:active { cursor: grabbing; }

.htb-drag-handle svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  transition: all 0.15s ease;
}

.htb-drag-handle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.htb-drag-handle:hover svg {
  stroke: rgba(240, 235, 225, 0.7);
}

/* Reader passage drag ghost */
.reader-chunk.drag-ghost {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

/* Editor drop zone */
.editor-body.drop-active {
  background: #F7F2EA;
  animation: dropZoneBreathe 1.5s ease-in-out infinite;
  border-radius: 2px;
  transition: background 0.25s ease;
}

@keyframes dropZoneBreathe {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(60, 50, 35, 0.08); }
  50%      { box-shadow: inset 0 0 0 2px rgba(60, 50, 35, 0.18); }
}

/* Drop cursor line */
.drop-cursor-line {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 3px;
  background: rgba(60, 50, 35, 0.25);
  border-radius: 1px;
  pointer-events: none;
  z-index: 10;
  transition: top 0.1s ease-out;
  animation: dropCursorPulse 1s ease-in-out infinite;
}

@keyframes dropCursorPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

/* Table grid picker in toolbar */
.toolbar-table-wrap {
  position: relative;
  display: inline-flex;
}
.toolbar-table-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--desk-cream, #F7F2EA);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  animation: guidanceReveal 0.12s ease-out;
}
.toolbar-table-grid {
  display: grid;
  grid-template-columns: repeat(6, 24px);
  grid-template-rows: repeat(6, 24px);
  gap: 2px;
}
.toolbar-table-cell {
  border: 1px solid rgba(26,24,22,0.15);
  border-radius: 2px;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.08s, border-color 0.08s;
}
.toolbar-table-cell.highlight {
  background: rgba(184, 150, 74, 0.3);
  border-color: var(--gold, #B8964A);
}
.toolbar-table-size {
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 6px;
}

/* Tables in editor */
.editor-body .editor-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-family: inherit;
  font-size: inherit;
}
.editor-body .editor-table td,
.editor-body .editor-table th {
  border: 1px solid rgba(26,24,22,0.15);
  padding: 8px 12px;
  min-width: 60px;
  vertical-align: top;
  outline: none;
}
.editor-body .editor-table td:focus,
.editor-body .editor-table th:focus {
  outline: 2px solid var(--gold, #B8964A);
  outline-offset: -2px;
}
.editor-body .editor-table tr:first-child td {
  font-weight: 600;
  background: rgba(184, 150, 74, 0.08);
}

/* Slash command menu */
.slash-menu {
  position: absolute;
  z-index: 200;
  background: var(--desk-cream, #F7F2EA);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  animation: guidanceReveal 0.12s ease-out;
}
.slash-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.08s;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.slash-menu-item:hover,
.slash-menu-item.active {
  background: rgba(184, 150, 74, 0.12);
}
.slash-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(26,24,22,0.06);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  flex-shrink: 0;
}
.slash-menu-label {
  flex: 1;
}

/* Page break in editor */
.editor-body .page-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint, #999);
  cursor: default;
  user-select: none;
}
.editor-body .page-break::before,
.editor-body .page-break::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(26,24,22,0.12);
}

/* Snapshot / version history panel */
.snapshot-panel {
  position: fixed;
  top: 40px;
  right: 8px;
  bottom: 8px;
  width: 300px;
  background: var(--desk-cream, #F7F2EA);
  border: 1px solid var(--border, rgba(26,24,22,0.10));
  border-radius: 10px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  animation: guidanceReveal 0.15s ease-out;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}
.snapshot-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.snapshot-panel-header h3 {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.snapshot-panel-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.snapshot-panel-close:hover {
  color: var(--ink);
}
.snapshot-panel-actions {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}
.snapshot-save-btn {
  width: 100%;
  padding: 8px 12px;
  background: rgba(184, 150, 74, 0.12);
  border: 1px solid rgba(184, 150, 74, 0.25);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s;
}
.snapshot-save-btn:hover {
  background: rgba(184, 150, 74, 0.22);
}
.snapshot-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.snapshot-loading,
.snapshot-empty {
  padding: 24px 18px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.6;
}
.snapshot-item {
  padding: 10px 18px;
  border-bottom: 1px solid rgba(26,24,22,0.04);
  transition: background 0.1s;
}
.snapshot-item:hover {
  background: rgba(26,24,22,0.03);
}
.snapshot-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.snapshot-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.snapshot-words {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
}
.snapshot-time {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.snapshot-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.12s;
}
.snapshot-item:hover .snapshot-actions {
  opacity: 1;
}
.snapshot-restore-btn {
  padding: 3px 10px;
  background: rgba(184, 150, 74, 0.15);
  border: 1px solid rgba(184, 150, 74, 0.25);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s;
}
.snapshot-restore-btn:hover {
  background: rgba(184, 150, 74, 0.3);
}
.snapshot-delete-btn {
  padding: 3px 8px;
  background: none;
  border: 1px solid rgba(26,24,22,0.08);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.snapshot-delete-btn:hover {
  background: rgba(200,60,60,0.08);
  color: #C83C3C;
  border-color: rgba(200,60,60,0.15);
}

/* Checklist blocks — warm to-do items */
.editor-body .checklist {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.editor-body .checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  min-height: 28px;
}
.editor-body .checklist-item label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 3px;
}
.editor-body .checklist-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold, #B8964A);
  cursor: pointer;
  margin: 0;
  border-radius: 3px;
}
.editor-body .checklist-item .checklist-text {
  flex: 1;
  outline: none;
  min-height: 1em;
}
.editor-body .checklist-item:has(input:checked) .checklist-text {
  text-decoration: line-through;
  opacity: 0.5;
}

/* The writing pill creates ordinary editable blockquotes. Keep them visible
   without changing source cards or WebKit's borderless indentation wrappers. */
.editor-body blockquote:not(.cited-block):not(.visual-citation):not([style*="border: none"]):not([style*="border-style: none"]) {
  border-left: 3px solid var(--accent);
  margin: 1em 0;
  padding: 0 0 0 1.1em;
}

/* Cited blockquote in editor — warm quoted-card feel */
.editor-body blockquote.cited-block {
  border-left: 3px solid var(--gold);
  padding: 20px 28px;
  margin: 28px 0 28px 4px;
  background: rgba(184, 150, 74, 0.06);
  border-radius: 0 6px 6px 0;
  color: var(--ink-light);
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.85;
  font-size: 1.1rem;
  box-shadow: var(--shadow-card);
  position: relative;
}

.editor-body blockquote.cited-block .citation {
  color: #9A4F3F;
  font-weight: 700;
  font-style: normal;
  font-size: 0.78rem;
  font-family: var(--sans);
}

/* Citation landing animation */
@keyframes blockquoteLand {
  0%  { opacity: 0; transform: translateY(-12px) scale(0.97); }
  55% { opacity: 1; transform: translateY(3px) scale(1.003); }
  75% { transform: translateY(-1px) scale(1); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}

.editor-body blockquote.just-landed {
  animation: blockquoteLand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Editor furniture stays quiet until the card is hovered or focused. */
.editor-body blockquote.cited-block { position: relative; }
.cited-block-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-light);
  font: 500 15px/1 var(--sans);
  font-style: normal;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.editor-body blockquote:hover > .cited-block-remove,
.editor-body blockquote:focus-within > .cited-block-remove {
  opacity: .55;
  pointer-events: auto;
}
.cited-block-remove:hover,
.cited-block-remove:focus-visible {
  color: var(--ink);
  background: transparent;
  opacity: 1;
  pointer-events: auto;
  outline: none;
}
.cited-block-remove:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* Clickable citation number */
.editor-body blockquote.cited-block .citation[style*="cursor"] {
  text-decoration: none;
}
.editor-body blockquote.cited-block .citation:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 2px;
}

/* Draggable block quotes — reorder within editor */
.editor-body blockquote.cited-block[draggable="true"] {
  cursor: grab;
}
.editor-body blockquote.cited-block[draggable="true"]:active {
  cursor: grabbing;
}
.editor-body blockquote.cited-block.dragging {
  opacity: 0.35;
}

/* References section (below editor, above status bar) */
.editor-references {
  border-top: 1px solid rgba(26,24,22,0.06);
  padding: 12px 28px 8px;
  max-height: 200px;
  overflow-y: auto;
}
.editor-references-header {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  margin-bottom: 8px;
}
.editor-references-toggle {
  font-size: 9px;
  margin-left: 4px;
}
.editor-references-list {
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--ink-light);
  line-height: 1.8;
}
.editor-reference-entry {
  margin-bottom: 16px;
  padding: 0;
  text-indent: 0;
}
.editor-reference-num {
  color: var(--ink-faint);
  font-weight: 600;
  font-family: var(--sans);
  font-size: 10px;
}

/* "Sources used" — the functional map back to the material. The source's
   name opens it at the cited passage; each cited moment is its own click
   back to that exact instant of the video/audio. */
.editor-reference-title {
  cursor: pointer;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 15px/1.45 var(--serif);
  text-align: left;
}
.editor-reference-title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.editor-reference-identity {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-light);
}
.editor-reference-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 5px;
}
.editor-reference-title { overflow-wrap: anywhere; }
.editor-reference-missing .editor-reference-title { cursor: default; opacity: .8; }
.editor-reference-missing .editor-reference-title:hover { text-decoration: none; }
.editor-reference-moment {
  cursor: pointer;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-style: normal;
  line-height: 1.5;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--gold-muted, #a8823c);
  font-weight: 500;
}
.editor-reference-moment:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.editor-reference-title:focus-visible,
.editor-reference-moment:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Transcription states in the library rows */
.lib-transcribe-state {
  color: var(--ink-faint);
  font-style: italic;
}
.lib-transcribe-retry {
  border: none;
  background: none;
  padding: 0 0 0 6px;
  font: inherit;
  font-size: 0.95em;
  color: #a05252;
  cursor: pointer;
}
.lib-transcribe-retry:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Cited count in status bar */
.editor-cited-count {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Note-derived blocks (from sticky note insertion) --- */
.editor-body blockquote.note-derived {
  border-left: 3px solid var(--gold-muted);
  background: rgba(184, 150, 74, 0.05);
}
.editor-body blockquote.note-derived em {
  font-style: italic;
}
.editor-body blockquote.note-derived .note-origin {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  font-style: normal;
  color: #9A4F3F;
  font-family: var(--sans);
}
.editor-body blockquote.note-derived .note-origin[style*="cursor"] {
  text-decoration: none;
}
.editor-body blockquote.note-derived .note-origin[style*="cursor"]:hover {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-muted);
  text-underline-offset: 2px;
}

/* Note-derived color variants — color-matched left border */
.editor-body blockquote.note-derived-yellow { border-left-color: #D4C26A; }
.editor-body blockquote.note-derived-pink   { border-left-color: #C88A9C; }
.editor-body blockquote.note-derived-blue   { border-left-color: #7EA8C4; }
.editor-body blockquote.note-derived-green  { border-left-color: #8AB87E; }

/* Note landing animation */
.editor-body blockquote.note-just-landed {
  animation: blockquoteLand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Dark walnut overrides for cited blocks */
/* Paper stays cream in dark mode, so text must stay dark (inherits --ink
   from .editor-body). A --slab-text color here would collide with the
   still-light paper and make quoted text nearly invisible. */
[data-theme="dark"] .editor-body blockquote.cited-block {
  border-left-color: var(--gold-muted);
  background: rgba(184, 150, 74, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .editor-body blockquote.cited-block .citation {
  color: var(--gold-warm);
}
[data-theme="dark"] .cited-block-remove {
  color: var(--ink-light);
  background: transparent;
}
[data-theme="dark"] .cited-block-remove:hover,
[data-theme="dark"] .cited-block-remove:focus-visible {
  color: var(--ink);
  background: transparent;
}
[data-theme="dark"] .editor-body blockquote.note-derived {
  background: rgba(184, 150, 74, 0.06);
  border-left-color: var(--gold-muted);
}
[data-theme="dark"] .editor-body blockquote.note-derived .note-origin {
  color: var(--gold-muted);
}
[data-theme="dark"] .editor-body blockquote.note-derived .note-origin[style*="cursor"]:hover {
  color: var(--gold-warm);
}
[data-theme="dark"] .editor-body blockquote.note-derived-yellow { border-left-color: #D4C26A; }
[data-theme="dark"] .editor-body blockquote.note-derived-pink   { border-left-color: #C88A9C; }
[data-theme="dark"] .editor-body blockquote.note-derived-blue   { border-left-color: #7EA8C4; }
[data-theme="dark"] .editor-body blockquote.note-derived-green  { border-left-color: #8AB87E; }

/* --- Glow highlight for reader chunk navigation --- */
@keyframes glowPulse {
  0%   { background: rgba(184,150,74,0.18); }
  50%  { background: rgba(184,150,74,0.10); }
  100% { background: transparent; }
}
.reader-chunk.glow-highlight {
  animation: glowPulse 1.5s ease-out forwards;
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
}

/* --- Note card drag state --- */
.note-card.note-dragging {
  opacity: 0.5;
  transform: scale(0.95) !important;
  cursor: grabbing;
}

/* --- Note expanded overlay: action button variants --- */
.note-loop-actions {
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.note-action-outline {
  background: transparent !important;
  border: 1.5px solid var(--slab) !important;
  color: var(--slab) !important;
}
.note-action-outline:hover {
  background: rgba(0,0,0,0.06) !important;
}
.note-action-save {
  background: var(--slab) !important;
  color: var(--slab-text) !important;
}

/* --- Note expanded: trash icon (top-right) --- */
.note-expanded-trash {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(42, 37, 32, 0.30);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.note-expanded-trash:hover {
  color: rgba(180, 60, 60, 0.7);
  background: rgba(180, 60, 60, 0.08);
}

/* --- Love/pin heart toggle (expanded note, top-left) --- */
.note-expanded-love {
  position: absolute;
  top: 10px;
  left: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  color: inherit;
  opacity: 0.25;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.note-expanded-love:hover {
  opacity: 0.5;
}
.note-expanded-love.loved {
  opacity: 1;
  color: #A0452D;
}
.note-expanded-love.loved:hover {
  opacity: 0.8;
}
.note-expanded-love.heart-pop {
  animation: heartPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* --- Note card at-rest delete × --- */
.note-card-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: rgba(42, 37, 32, 0.25);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.note-card:hover .note-card-delete {
  opacity: 1;
}
.note-card-delete:hover {
  color: rgba(180, 60, 60, 0.7);
  background: rgba(180, 60, 60, 0.08);
}

/* --- Toast notifications --- */
.desk-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--slab);
  color: var(--slab-text);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: var(--shadow-heavy);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  pointer-events: none;
}
.desk-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.desk-toast[data-state="error"] { background: #7D2E2A; color: #FFFFFF; }
.desk-toast[data-state="loading"] { background: #3D3429; color: #FFF4D6; }
.desk-toast[data-state="success"] { background: #294936; color: #FFFFFF; }

/* --- Right Pane: Placeholder --- */
.notes-placeholder {
  padding: 20px 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
}

/* Sticky note hint — reaction color dots */
.reaction-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.reaction-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.reaction-dot.blue   { background: var(--react-blue); }
.reaction-dot.yellow { background: var(--react-yellow); }
.reaction-dot.pink   { background: var(--react-pink); }
.reaction-dot.green  { background: var(--react-green); }

/* --- Empty States --- */
.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.6;
}

.empty-state .empty-icon {
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* --- Loading State --- */
.loading-indicator {
  padding: 24px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
}

/* ============================================================
   SLICE 2 — Library / Search / Source List / Reader
   ============================================================ */

/* --- Left Pane: Search Input --- */
.library-search {
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.library-search-form {
  display: flex;
  gap: 6px;
}

.library-search-input {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--serif);
  font-size: 18px;
  color: #1E1A12;
  background: var(--desk-cream);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.library-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-faint), inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.library-search-input::placeholder {
  color: #1E1A12;
  opacity: 1;
  font-style: normal;
}

.library-search-btn {
  padding: 8px 16px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--desk-cream);
  background: var(--gold-muted);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background 0.15s, box-shadow 0.15s;
}

.library-search-btn:hover {
  background: var(--gold-warm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Search active bar — shows query with clear action */
.search-active-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: var(--gold-faint);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-light);
  flex-shrink: 0;
}

.search-active-bar .search-query-label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.search-clear-btn {
  padding: 2px 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-left: 8px;
  transition: color 0.15s, border-color 0.15s;
}

.search-clear-btn:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}

/* --- Left Pane: Library Entrance --- */

.library-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 6px 8px 0;
  padding: 12px 14px;
  border: 1.5px dashed rgba(0, 0, 0, 0.10);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.library-upload-area:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: var(--gold-muted);
}

.library-upload-label {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.library-upload-hint {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  margin-top: 3px;
  opacity: 0.6;
}

.library-browse-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px;
  padding: 8px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.library-browse-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: var(--gold-muted);
  color: var(--ink);
}

/* --- Media Description Modal --- */

.media-describe-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 18, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  overflow-y: auto;
}
.media-describe-overlay:not([open]) { display: none; }

.media-describe-modal {
  color-scheme: light;
  --ink: var(--yd-tool-ink);
  --ink-light: var(--yd-tool-muted);
  --text-secondary: var(--yd-tool-muted);
  --border-strong: var(--yd-tool-border);
  color: var(--yd-tool-ink);
  background: var(--yd-tool);
  border: 1px solid var(--yd-tool-border);
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 480px;
  width: 90%;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .media-describe-modal { color-scheme: dark; }
.media-describe-label { display: block; font: 16px/1.4 var(--serif); margin: 12px 0 6px; }
.media-describe-details { margin: 12px 0 20px; }
.media-describe-details summary { cursor: pointer; color: var(--yd-tool-muted); font: 16px/1.5 var(--serif); padding: 6px 0; }
.media-describe-details[open] summary { margin-bottom: 8px; }
.media-describe-details summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.media-describe-input {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: var(--yd-card-paper);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--yd-tool-ink);
  font-size: 0.95rem;
  font-family: var(--serif);
  outline: none;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.media-describe-input:focus {
  border-color: currentColor;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.media-describe-textarea {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: var(--yd-card-paper);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--yd-tool-ink);
  font-size: 0.95rem;
  font-family: var(--serif);
  outline: none;
  box-sizing: border-box;
  resize: none;
  line-height: 1.45;
  margin-bottom: 16px;
}

.media-describe-textarea:focus {
  border-color: currentColor;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.media-describe-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.media-describe-cancel {
  min-height: 44px;
  padding: 8px 18px;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--yd-tool-ink);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--serif);
}

.media-describe-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
}

.media-describe-submit {
  min-height: 44px;
  padding: 8px 22px;
  background: var(--yd-desk-add-fill);
  color: var(--yd-desk-add-ink);
  border: 1px solid var(--yd-desk-control-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--serif);
}

.media-describe-submit:hover {
  filter: brightness(1.1);
}

.library-upload-area.dragover {
  background: rgba(255, 255, 255, 0.35);
  border-color: var(--gold);
}

.library-source-count {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-faint);
  padding: 12px 12px 4px;
}

/* Library count row — source count + compact toggle */
.library-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.library-compact-toggle {
  font-family: var(--serif);
  font-size: 11px;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
}
.library-compact-toggle:hover {
  background: rgba(0,0,0,0.05);
  color: var(--ink-light);
}
[data-theme="dark"] .library-compact-toggle {
  color: #F0EBE1;
  border-color: rgba(0,0,0,0.12);
}
[data-theme="dark"] .library-compact-toggle:hover {
  background: rgba(0,0,0,0.08);
}

/* Library section headers — group sources by media type (collapsible) */
.library-section-header {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  padding: 16px 12px 5px;
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.library-section-header:first-of-type {
  margin-top: 0;
}
.library-section-header:hover {
  color: var(--ink-light);
}
.library-section-chevron {
  font-size: 9px;
  opacity: 0.6;
}

.library-shelf {
  display: flex;
  flex-direction: column;
}

/* ── Compact source mode ── */
.source-compact .source-list-item {
  padding: 6px 12px 6px 12px;
  margin: 0 6px;
  min-height: 0;
  border-left-width: 2px;
  border-radius: 2px;
}
.source-compact .source-list-item .source-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-compact .source-list-item .source-author {
  display: inline;
  font-size: 11px;
  margin-top: 0;
  opacity: 0.65;
}
.source-compact .source-list-item .source-author::before {
  content: ' \u2014 ';
}
.source-compact .source-list-item .source-yt-label,
.source-compact .source-list-item .source-podcast-label,
.source-compact .source-list-item .source-audio-label {
  display: none;
}
.source-compact .source-list-item:hover {
  transform: none;
  border-left-width: 4px;
}

/* --- Library Pagination --- */
.library-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 8px 16px;
}

.library-pager-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--slab-text);
  background: var(--slab);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.15s, transform 0.15s;
}

.library-pager-btn:hover:not(:disabled) {
  background: var(--slab-light);
  transform: scale(1.08);
}

.library-pager-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.library-pager-label {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}

/* --- Left Pane: Source List — calm scholarly index --- */
.source-list-item {
  display: flex;
  flex-direction: column;
  width: calc(100% - 12px);
  margin: 0 6px;
  padding: 9px 14px 9px 13px;
  font-family: var(--sans);
  color: var(--ink);
  background: rgba(255,255,255,0.25);
  border: none;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Alternating row tint — subtle shelf rhythm */
.source-list-item:nth-child(even) {
  background: rgba(255,255,255,0.15);
}

.source-list-item:hover {
  background: rgba(255,255,255,0.40);
  border-left-color: rgba(160, 140, 110, 0.35);
}
.source-list-item:focus-visible {
  outline: 2px solid var(--gold-muted);
  outline-offset: -2px;
}

.source-list-item.selected {
  background: rgba(255,255,255,0.52);
  border-left-color: var(--gold-muted);
  border-left-width: 3px;
  padding-left: 12px;
  box-shadow:
    0 1px 4px rgba(0,0,0,0.06),
    inset 0 0 0 1px rgba(201,168,76,0.06);
}

/* ── Dark walnut overrides — editorial library in low light ── */
[data-theme="dark"] .source-list-item {
  color: #F0EBE1;
  background: rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
[data-theme="dark"] .source-list-item:nth-child(even) {
  background: rgba(0,0,0,0.10);
}
[data-theme="dark"] .source-list-item:hover {
  background: rgba(0,0,0,0.15);
  border-left-color: rgba(200, 175, 130, 0.30);
}
[data-theme="dark"] .source-list-item.selected {
  background: rgba(0,0,0,0.16);
  border-left-color: var(--gold-muted);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(184,150,74,0.05);
}

/* ── Source presence states (Phase 3) ─────────────────────── */
.source-list-item.state-dormant {
  opacity: 0.55;
}
.source-list-item.state-dormant .source-title {
  color: var(--ink-faint);
}
.source-list-item.state-warm {
  /* Baseline — normal library row */
}
.source-list-item.state-alive {
  border-left-color: rgba(184,150,74,0.35) !important;
}
.source-list-item.state-active {
  border-left-color: var(--gold-muted) !important;
}
.source-list-item.state-active .source-title {
  font-weight: 600;
}
/* Cooling: source was once alive/active, now dormant — faint memory */
.source-list-item.state-cooling {
  opacity: 0.55;
  border-left-color: rgba(184,150,74,0.08) !important;
}
.source-list-item.state-cooling .source-title {
  color: var(--ink-faint);
}
/* Dark theme overrides for source presence */
[data-theme="dark"] .source-list-item.state-cooling {
  opacity: 0.5;
  border-left-color: rgba(184,150,74,0.06) !important;
}
[data-theme="dark"] .source-list-item.state-dormant {
  opacity: 0.5;
}
[data-theme="dark"] .source-list-item.state-dormant .source-title {
  color: rgba(240, 235, 225, 0.45);
}
[data-theme="dark"] .source-list-item.state-cooling .source-title {
  color: rgba(240, 235, 225, 0.45);
}

.source-list-item .source-title {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.source-list-item.selected .source-title {
  font-weight: 600;
}

.source-list-item .source-author {
  font-size: 11px;
  color: rgba(42, 37, 32, 0.52);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Dark walnut — title and author colors: crisp, scannable */
[data-theme="dark"] .source-list-item .source-title {
  color: #F5F0E8;
}
[data-theme="dark"] .source-list-item.selected .source-title {
  color: #FAF6EE;
}
[data-theme="dark"] .source-list-item .source-author {
  color: rgba(240, 235, 225, 0.50);
}

.source-list-item .source-yt-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(42, 37, 32, 0.42);
  letter-spacing: 0.04em;
  margin-top: 3px;
}
[data-theme="dark"] .source-list-item .source-yt-label {
  color: rgba(240, 235, 225, 0.40);
}

.source-list-item .source-meta {
  display: none;
}

/* --- Left Pane: Search Results --- */
.search-result-item {
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  background: rgba(255, 252, 247, 0.3);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.search-result-item:hover {
  background: rgba(255, 252, 247, 0.65);
  box-shadow: var(--shadow-soft);
  transform: translateY(-0.5px);
}

/* Cycling spine accent colors on search results */
.search-result-item:nth-child(5n+1) { border-left-color: var(--gold); }
.search-result-item:nth-child(5n+2) { border-left-color: #A0452D; }
.search-result-item:nth-child(5n+3) { border-left-color: #7A8B6F; }
.search-result-item:nth-child(5n+4) { border-left-color: #6B3A3A; }
.search-result-item:nth-child(5n+5) { border-left-color: #5B6E8A; }

.search-result-item .result-source-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.search-result-item .result-section {
  font-size: 12px;
  color: var(--ink-light);
  margin-top: 3px;
}

.search-result-item .result-preview {
  font-family: var(--serif);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-light);
  margin-top: 6px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-item .result-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 8px;
  padding-top: 5px;
  border-top: 1px solid rgba(60, 50, 35, 0.06);
}

/* --- Left Pane: Reader Surface --- */
.reader-surface {
  padding: 16px 20px 64px;
}

.reader-close-bar {
  /* Close bar is the top-of-pane escape. The media frame (video/YouTube)
     is ALSO sticky — it sticks 40px below this bar (see top: 40px on the
     frame rules) so the video slides under the bar instead of having its
     top cropped by it.
     The bar is a NON-INTERACTIVE backdrop: only the .reader-close label
     inside it is clickable. When the bar itself was the button, its wide
     empty right side sat flush above the pinned video and intercepted
     clicks aimed at the player's own controls (fullscreen, volume) —
     closing the reader instead. Keep hit areas the size of their labels. */
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  margin: 0 -20px 16px;
  padding: 0 20px;
  /* Fixed height so the media frames can anchor below it deterministically. */
  min-height: 52px;
  height: 52px;
  box-sizing: border-box;
  /* Opaque so the label is legible when the video slides beneath. */
  background: var(--frame, #f4ecd8);
  /* Extend past the surface's 20px side padding so the strip fills to the
     pane-body edges instead of having tan gutters. */
  width: calc(100% + 40px);
}

.reader-media-header-group {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
}

.reader-media-header-meta {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.reader-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 148px;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 750;
  color: var(--tool-ink, var(--ink));
  background: rgba(53, 89, 127, 0.08);
  border: 1px solid rgba(53, 89, 127, 0.22);
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s;
  text-align: left;
}

.reader-close:hover {
  color: var(--tool-ink, var(--ink));
  background: rgba(53, 89, 127, 0.15);
  border-color: rgba(53, 89, 127, 0.38);
}
.reader-close:focus-visible {
  outline: 3px solid var(--focus-ring, #7FA6CC);
  outline-offset: 2px;
}

/* Source identity — typographic authority on the white page */
.reader-header {
  /* Column-constrained so on a wide pane, the header/content/video don't
     all align differently (video was auto-centered, chunks hugged the left,
     header spanned full pane). Now they all live inside the same 820px
     column, centered in the pane. */
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 36px 16px;
  background: #FDFBF7;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.03),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.reader-header h1 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: #141210;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.reader-source-meta {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-faint);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Imported web articles retain a publication identity alongside their live
   website. The saved reading copy remains searchable and citable. */
.reader-header-article {
  padding: 30px 44px 26px;
  border-top: 5px solid var(--brand, #31597F);
}
.reader-article-masthead {
  display: inline-block;
  margin-bottom: 18px;
  padding-bottom: 7px;
  font: 700 12px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand, #31597F);
  border-bottom: 2px solid currentColor;
}
.reader-header-article h1 {
  max-width: 720px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.07;
  letter-spacing: -.035em;
}
.reader-article-dek {
  max-width: 680px;
  margin: 14px 0 0;
  font: 400 18px/1.48 var(--serif);
  color: var(--paper-ink-light, #554D44);
}
.reader-source-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}
.reader-source-actions .reader-cite-btn { margin-top: 0; }
.reader-original-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--brand, #31597F);
  border-radius: 3px;
  font: 650 11px/1 var(--sans);
  letter-spacing: .025em;
  color: var(--brand, #31597F);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.reader-original-link:hover {
  color: #FFF;
  background: var(--brand, #31597F);
}
.reader-content-article {
  padding-top: 28px;
}
.reader-article-hero {
  margin: -28px -40px 38px;
  background: #E8E1D7;
  overflow: hidden;
}
.reader-article-hero img {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
}
.reader-article-body {
  max-width: 680px;
  margin: 0 auto;
}
.reader-article-body .reader-chunk {
  max-width: none;
  padding: 0 0 8px;
}
.reader-article-body .reader-chunk p {
  margin: 0 0 1.25em;
  white-space: pre-line;
}

/* The focused-writing composition normally turns reader content into a dark
   tool surface. The full-screen article overlay remains a recognizable page. */
body.two-pane .dv-reader .reader-surface-article {
  padding: 0 0 54px;
  background: transparent;
}
body.two-pane .dv-reader .reader-header-article,
body.two-pane .dv-reader .reader-content-article {
  display: block;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  color: var(--paper-ink);
  background: var(--paper-bg);
  border-color: var(--paper-border);
  box-shadow: 0 4px 20px rgba(30, 24, 16, .10);
}
body.two-pane .dv-reader .reader-header-article {
  padding: 30px 44px 26px;
  border-top: 5px solid var(--brand, #31597F);
  border-bottom: 1px solid var(--paper-border);
}
body.two-pane .dv-reader .reader-header-article h1 { color: var(--paper-ink); }
body.two-pane .dv-reader .reader-content-article {
  padding: 28px 40px 64px;
  font-size: 19px;
  line-height: 1.82;
}

/* Live website workspace. On wide screens this mirrors Chrome's split-view
   idea: the publisher's real page and Your Desk's durable reading copy share
   one focused surface. The hostname remains visible so an embedded page can
   never masquerade as Your Desk chrome. */
.reader-surface-live {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: var(--tool-bg);
}
/* In chapter mode the live reader is the left pane itself. Remove the normal
   library padding/outer scrollbar so the iframe receives a definite viewport
   and owns wheel/touch scrolling like a real browser tab. */
body.two-pane .pane-left .pane-body:has(> .reader-surface-live) {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.reader-surface-live .reader-close-bar {
  position: relative;
  flex: 0 0 40px;
  width: 100%;
  margin: 0;
  padding: 0 18px;
  background: var(--tool-bg-deep);
  border-bottom: 1px solid var(--tool-border);
}
body.two-pane .dv-reader .reader-surface-live .reader-header-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 22px 13px;
  border-top: 3px solid var(--brand);
  border-bottom: 1px solid var(--paper-border);
  border-radius: 0;
  box-shadow: none;
}
.reader-surface-live .reader-article-masthead {
  grid-column: 1;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-size: 10px;
}
.reader-surface-live .reader-header-article h1 {
  grid-column: 1;
  max-width: none;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.reader-surface-live .reader-article-dek {
  grid-column: 1;
  max-width: 880px;
  margin-top: 6px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-surface-live .reader-source-meta {
  grid-column: 1;
  margin-top: 5px;
  font-size: 9px;
}
.reader-surface-live .reader-source-actions {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  justify-content: flex-end;
  margin: 0;
}
.reader-surface-live .reader-content-article,
body.two-pane .dv-reader .reader-surface-live .reader-content-article {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: var(--tool-bg);
}
.reader-live-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  color: var(--tool-ink);
  background: var(--tool-bg);
}
.reader-live-view-toggle { display: none; }
.reader-live-pane,
.reader-reading-pane {
  container-type: inline-size;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.reader-live-pane {
  background: #FFF;
}
.reader-reading-pane { display: none; }
.reader-live-workspace.show-reading .reader-live-pane { display: none; }
.reader-live-workspace.show-reading .reader-reading-pane { display: flex; }
.reader-browser-bar,
.reader-reading-bar {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--tool-border);
  background: var(--tool-bg-deep);
  font-family: var(--sans);
}
.reader-browser-status {
  flex: none;
  margin-right: 9px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #FFF;
  background: var(--success);
  font: 750 8px/1 var(--mono);
  letter-spacing: .12em;
}
.reader-browser-address {
  min-width: 0;
  overflow: hidden;
  color: var(--tool-muted);
  font: 600 11px/1 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-browser-open {
  flex: none;
  margin-left: 12px;
  color: var(--paper-action);
  font: 700 10px/1 var(--sans);
  text-decoration: none;
}
.reader-browser-open:hover { text-decoration: underline; }
.reader-browser-copy {
  flex: none;
  margin-left: auto;
  padding: 0;
  border: 0;
  color: var(--tool-muted);
  background: transparent;
  font: 700 10px/1 var(--sans);
  cursor: pointer;
}
.reader-browser-copy:hover { color: var(--paper-action); }
.reader-browser-frame-host {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #FFF;
}
.reader-website-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #FFF;
}
.reader-browser-help {
  position: absolute;
  right: 12px;
  bottom: 10px;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(22,18,14,.78);
  font: 600 9px/1.25 var(--sans);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.reader-browser-frame-host:hover .reader-browser-help,
.reader-browser-frame-host:focus-within .reader-browser-help { opacity: 1; }
.reader-browser-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px;
  color: #443C34;
  background: #F7F3EC;
  text-align: center;
}
.reader-browser-unavailable strong {
  margin-bottom: 5px;
  font: 700 18px/1.2 var(--serif);
}
.reader-browser-unavailable span { font: 500 12px/1.5 var(--sans); }
.reader-reading-pane { background: var(--paper-bg); }
.reader-reading-bar { justify-content: space-between; }
.reader-reading-label,
.reader-reading-actions {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}
.reader-reading-bar strong {
  color: var(--paper-ink);
  font: 700 11px/1 var(--sans);
}
.reader-reading-actions button,
.reader-reading-actions a {
  padding: 0;
  border: 0;
  color: var(--paper-action);
  background: transparent;
  font: 700 10px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.reader-reading-actions button:hover,
.reader-reading-actions a:hover { text-decoration: underline; }
.reader-reading-bar span {
  color: var(--paper-muted);
  font: 600 8px/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.reader-reading-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 25px 48px;
  color: var(--paper-ink);
  background: var(--paper-bg);
  scrollbar-gutter: stable;
}
.reader-live-workspace .reader-article-hero {
  margin: 0 -25px 24px;
  max-height: 250px;
}
.reader-live-workspace .reader-article-hero img { max-height: 250px; }
.reader-live-workspace .reader-article-body {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.72;
}

@media (max-width: 900px) {
  body.two-pane .dv-reader .reader-surface-live .reader-header-article {
    display: block;
    padding: 12px 16px 11px;
  }
  .reader-surface-live .reader-article-dek,
  .reader-surface-live .reader-source-meta { display: none; }
  .reader-surface-live .reader-source-actions { margin-top: 8px; }
  .reader-live-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .reader-live-view-toggle { display: none; }
  .reader-live-pane,
  .reader-reading-pane { grid-column: 1; grid-row: 1; }
  .reader-live-pane { border: 0; }
  .reader-reading-pane { display: none; }
  .reader-live-workspace.show-reading .reader-live-pane { display: none; }
  .reader-live-workspace.show-reading .reader-reading-pane { display: flex; }
}

@media (max-width: 700px) {
  .reader-header-article,
  body.two-pane .dv-reader .reader-header-article { padding: 24px 22px 20px; }
  .reader-header-article h1 { font-size: 32px; }
  .reader-article-dek { font-size: 16px; }
  .reader-content-article,
  body.two-pane .dv-reader .reader-content-article { padding: 22px 22px 48px; }
  .reader-article-hero { margin: -22px -22px 30px; }
}

/* Reading page: the white-page surface inside the warm shell */
.reader-content {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.82;
  color: #0D0B08;
  background: #FDFBF7;
  padding: 44px 40px 64px;
  border-radius: 0 0 4px 4px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.03),
    0 4px 16px rgba(0, 0, 0, 0.04);
  /* Match the reader-header column so they read as one card when the pane
     is wide (video, header, transcript all centered in the same 820 column). */
  max-width: 820px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.reader-media-missing {
  margin: -20px 0 30px;
  padding: 13px 15px;
  border: 1px solid rgba(168, 112, 35, 0.35);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: rgba(246, 223, 166, 0.24);
  color: var(--ink-light);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
}

.reader-media-missing strong {
  color: var(--ink);
}

/* Personal-media lifecycle line in Library rows: one vocabulary shared with
   the Desk card (media-state.js). Tones map to colour, never to wording. */
.lib-media-state {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: #6B5E52;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lib-media-state-progress { color: #5A6E85; }
.lib-media-state-warning { color: #8A5A1E; }
.lib-media-state-error { color: #9A3B2E; }
.lib-media-retry {
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.library-upload-hint[data-state="error"] { color: #9A3B2E; }
.lib-media-state.is-quiet { margin-top: 2px; }
.lib-media-indicator {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5A6E85;
  animation: lib-media-pulse 1.6s ease-in-out infinite;
}
.lib-media-indicator.is-waiting { background: #B07A2A; animation: none; opacity: 0.85; }
@keyframes lib-media-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lib-media-indicator { animation: none; opacity: 0.8; } }
.media-describe-size {
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 11px;
  color: #6B5E52;
  text-align: center;
  text-transform: capitalize;
}
.media-describe-nopreview {
  margin-bottom: 8px;
  padding: 18px 12px;
  border-radius: 8px;
  background: #D8D0C4;
  color: #3A3128;
  font-family: var(--sans);
  font-size: 12px;
  text-align: center;
}

/* Honest media failure inside a reader frame: the object stays, the frame
   says what happened, and the retry re-resolves the address. */
.reader-media-recovery {
  margin: 12px auto 0;
  max-width: 520px;
  padding: 12px 15px;
  border: 1px solid rgba(168, 112, 35, 0.35);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: rgba(246, 223, 166, 0.24);
  color: var(--ink-light);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
}
.reader-media-recovery-text { margin: 0 0 8px; }
.reader-media-recovery-actions { display: flex; gap: 14px; align-items: center; }
.reader-media-recovery-retry {
  padding: 5px 11px;
  border: 1px solid rgba(90, 70, 50, 0.5);
  border-radius: 5px;
  background: #FFFDF8;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.reader-media-recovery-open { color: var(--ink); }
/* While the version that plays here is being made, the viewer keeps the
   paused picture and shows one quiet mark — never a black player. */
.reader-media-frame.is-preparing { position: relative; }
.reader-media-frame.is-preparing::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5A6E85;
  box-shadow: 0 0 0 3px rgba(255, 253, 248, 0.85);
  animation: reader-preparing-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes reader-preparing-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reader-media-frame.is-preparing::after { animation: none; opacity: 0.8; } }
.reader-media-failed .reader-photo-img,
.reader-media-failed .reader-video-player { display: none; }

/* Library photo rows paint the durable small preview on paper, not on the
   dark slab — a photo still loading is never a black rectangle. */
.lib-thumb.lib-thumb-photo { background: #D8D0C4; }
.lib-thumb.photo-unavailable { color: #8A7A68; }

/* Mood-board / capture annotations whose image cannot be shown on this
   device name themselves instead of rendering a broken image box. */
.annotation-image-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  padding: 10px;
  background: #D8D0C4;
  color: #6B5E52;
  font-family: var(--sans);
  text-align: center;
  object-fit: unset;
}
.annotation-image-unavailable-title { font-size: 12px; font-weight: 600; color: #3A3128; }
.annotation-image-unavailable-note { font-size: 10.5px; }

/* Section dividers: structural headings */
.reader-section-divider {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: #8A8078;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 0 12px;
  margin-top: 36px;
  margin-bottom: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
}

.reader-section-divider:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* Chunks: the reading units */
.reader-chunk {
  max-width: 540px;
  margin-bottom: 0;
  padding: 6px 0;
  position: relative;
  border-bottom: none;
  transition: background 0.15s;
}

.reader-chunk:hover {
  background: rgba(0, 0, 0, 0.015);
  border-radius: 3px;
}

/* Citation click target — scroll-to highlight */
.reader-chunk-target {
  background: rgba(184, 150, 74, 0.12);
  border-left: 3px solid var(--gold);
  padding-left: 12px;
  margin-left: -15px;
  border-radius: 0 4px 4px 0;
  transition: background 1.5s ease-out, border-color 1.5s ease-out;
}

.reader-cited-quote-target {
  color: inherit;
  background: rgba(233, 205, 92, 0.48);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(233, 205, 92, 0.18);
  padding: 0 1px;
}
[data-theme="dark"] .reader-cited-quote-target {
  background: rgba(226, 183, 76, 0.42);
  box-shadow: 0 0 0 2px rgba(226, 183, 76, 0.14);
}


.reader-chunk p {
  margin: 0 0 0.65em;
  white-space: normal;
}

.reader-chunk p:last-child {
  margin-bottom: 0;
}

/* Transcript passages — caption cues joined into one flowing paragraph
   per timestamp group, so the transcript reads like prose against its
   timestamps instead of a ragged one-line-per-cue column. */
.reader-chunk p.reader-passage {
  margin: 0 0 4px;
  line-height: 1.62;
  max-width: 62ch;
}

/* Headings inside reader chunks */
.reader-chunk h1,
.reader-chunk h2,
.reader-chunk h3 {
  font-family: var(--serif);
  color: #0D0B08;
  line-height: 1.3;
  margin: 0 0 0.4em;
}

.reader-chunk h1 {
  font-size: 1.45em;
  font-weight: 700;
  margin-top: 0.6em;
}

.reader-chunk h2 {
  font-size: 1.25em;
  font-weight: 700;
  margin-top: 0.5em;
}

.reader-chunk h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0.4em;
  letter-spacing: 0.005em;
}

/* Blockquotes inside reader — gold-accent editorial treatment */
.reader-content blockquote,
.reader-chunk blockquote {
  border-left: 2px solid var(--gold-muted);
  padding: 8px 20px;
  margin: 16px 0;
  font-style: italic;
  color: var(--ink-light);
  background: rgba(184, 150, 74, 0.03);
  border-radius: 0 3px 3px 0;
}

/* Page references */
.reader-page-ref {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-style: italic;
  color: #A09890;
  margin-top: 8px;
  text-align: right;
  opacity: 0.6;
}

/* --- Photo / Polaroid Styling --- */

/* Reader: photo frame — polaroid on a cream desk */
.polaroid-caption-editor { color: var(--yd-card-ink); font-family: var(--handwritten); }
.polaroid-caption-editor textarea {
  display: block; width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
  background: transparent; color: inherit; font: inherit; line-height: 1.4;
  border: 1px solid transparent; border-radius: 3px; padding: 4px; min-height: 44px;
}
.polaroid-caption-editor textarea:focus { outline: 2px solid var(--yd-accent, #648395); outline-offset: 2px; }
.polaroid-caption-editor textarea::placeholder { color: inherit; opacity: .6; }
.polaroid-caption-actions:not([hidden]) { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.polaroid-caption-actions button {
  color: inherit; background: transparent; border: 1px solid currentColor;
  border-radius: 6px; min-height: 44px; padding: 6px 14px; font: 16px var(--serif);
}
.polaroid-caption-actions span { font: 14px var(--serif); }
.reader-photo-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 40px;
  max-width: 560px;
  margin: 24px auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 6px 24px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  transform: rotate(-0.8deg);
}

.reader-photo-img {
  cursor: zoom-in;
  max-width: 100%;
  max-height: 60vh;
  border-radius: 2px;
  object-fit: contain;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}
.reader-photo-img:focus-visible { outline: 2px solid var(--yd-accent, #648395); outline-offset: 4px; }
/* Photo can be dragged onto the visual-desk canvas, mirroring the
   library photo cards. Visible affordance so users know it's grabbable. */
.reader-photo-img-draggable {
  cursor: grab;
}
.reader-photo-img-draggable:active,
.reader-photo-img-dragging {
  cursor: grabbing;
  opacity: 0.7;
}

.reader-photo-caption {
  font-family: var(--handwritten);
  font-size: 18px;
  color: #4A4540;
  text-align: center;
  margin: 20px 8px 0;
  line-height: 1.4;
  opacity: 0.85;
}

/* Shelf: polaroid thumbnail for photo sources */
.source-list-item.source-photo {
  padding-top: 8px;
}

.source-photo-thumb {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  background: #f0ece6;
}

/* --- Audio / Video Player Styling --- */

/* Shared media frame — card on the desk surface */
.reader-media-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 40px;
  max-width: 640px;
  margin: 24px auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 6px 24px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  /* Stick BELOW the 40px close bar (not at top:0 where the bar would cover
     the video's top edge). */
  position: sticky;
  top: 52px;
  z-index: 10;
}

/* Audio: subtle tilt like a polaroid */
.reader-audio-frame {
  transform: rotate(0.5deg);
  max-width: 520px;
}

.reader-audio-player {
  width: 100%;
  border-radius: 4px;
}

/* Video: straight, wider — capped so the video stops growing past a sane
   HD-ish width even when the pane itself keeps widening. Letting the video
   track the pane width made it balloon absurdly on wide drags. */
.reader-video-frame {
  max-width: 760px;
  width: 100%;
  transform: none;
}

.reader-video-player {
  max-width: 100%;
  width: 100%;
  max-height: calc(100vh - 240px);
  object-fit: contain;
  border-radius: 3px;
  background: #1a1a1a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Uploaded-video transport stays visible even for portrait recordings whose
   native browser controls would otherwise land below the reader viewport. */
.reader-video-transport {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 4px;
  background: #211d19;
  color: #f7f1e7;
  box-sizing: border-box;
  font-family: var(--sans);
}
.reader-video-transport button {
  flex: 0 0 auto;
  min-width: 42px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.reader-video-transport button:hover { background: rgba(255,255,255,.16); }
.reader-video-transport button:focus-visible,
.reader-video-seek:focus-visible {
  outline: 2px solid #e48353;
  outline-offset: 2px;
}
.reader-video-play { min-width: 58px !important; }
.reader-video-seek {
  flex: 1 1 160px;
  min-width: 72px;
  accent-color: #e48353;
  cursor: pointer;
}
.reader-video-time {
  flex: 0 0 auto;
  min-width: 90px;
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .reader-video-transport { gap: 5px; padding-inline: 6px; }
  .reader-video-transport button { min-width: 36px; padding-inline: 6px; }
  .reader-video-time { min-width: 42px; }
  .reader-video-time { font-size: 0; }
  .reader-video-time::before { content: attr(data-current); font-size: 10px; }
}

/* Caption below media players */
.reader-media-caption {
  font-family: var(--handwritten);
  font-size: 18px;
  color: #4A4540;
  text-align: center;
  margin: 20px 8px 0;
  line-height: 1.4;
  opacity: 0.85;
}

/* PDF reading copy + original-page viewer. */
.reader-pdf-reader {
  width: min(100%, 920px);
  margin: 0 auto;
  color: #28231e;
}
.reader-pdf-toolbar {
  position: sticky;
  top: 40px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid rgba(48,41,33,.14);
  border-bottom-color: rgba(48,41,33,.22);
  background: rgba(250,247,240,.96);
  box-sizing: border-box;
  backdrop-filter: blur(8px);
}
.reader-pdf-identity {
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #746a5d;
}
.reader-pdf-actions { display: flex; gap: 6px; }
.reader-pdf-actions button {
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #5a5147;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.reader-pdf-actions button.active {
  border-color: rgba(49,94,136,.25);
  background: rgba(49,94,136,.10);
  color: #315e88;
}
.reader-pdf-reading {
  min-height: 60vh;
  padding: 44px clamp(24px, 8vw, 92px) 80px;
  border: 1px solid rgba(48,41,33,.12);
  border-top: 0;
  background: #fdfaf3;
  box-shadow: 0 6px 22px rgba(33,28,23,.08);
  box-sizing: border-box;
}
.reader-pdf-reading .reader-section-divider {
  margin-top: 42px;
  color: #85796a;
}
.reader-pdf-reading .reader-section-divider:first-child { margin-top: 0; }
.reader-pdf-reading .reader-chunk {
  max-width: 720px;
  margin-inline: auto;
  color: #28231e;
  font-size: 19px;
  line-height: 1.72;
}
.reader-pdf-original {
  border: 1px solid rgba(48,41,33,.14);
  border-top: 0;
  background: #67635e;
}
.reader-pdf-viewer {
  display: block;
  width: 100%;
  height: calc(100vh - 145px);
  min-height: 520px;
  border: 0;
  background: #fff;
}
.reader-pdf-empty {
  max-width: 600px;
  margin: 40px auto;
  padding: 24px;
  border-left: 3px solid #d88155;
  background: #f5eee3;
  color: #554b40;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}

/* Shelf: audio/video label — matches YouTube label style */
.source-media-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 4px;
  opacity: 0.7;
}

.source-audio-label {
  color: #6B7A5A;
}

.source-podcast-label {
  color: #8A6B5A;
}

.source-video-label {
  color: #5B6B8A;
}

/* YouTube embedded player — 16:9, sticky while transcript scrolls, capped at
   a sane HD-ish width. Without the cap the iframe ballooned to full pane on
   wide drags. */
.reader-youtube-frame {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 24px;
  background: #1a1a1a;
  border-radius: 4px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.06);
  /* Stick BELOW the 40px close bar, not at top:0 where the bar would crop
     the video. */
  position: sticky;
  top: 52px;
  z-index: 10;
  overflow: hidden;
}

/* A YouTube reader is one working object. The player remains completely
   visible while the optional transcript opens beside it and scrolls on its
   own. The desk itself never carries transcript-status furniture. */
.reader-surface:has(.reader-youtube-workspace) .reader-header,
.reader-content:has(.reader-youtube-workspace) {
  max-width: 1120px;
}
.reader-content:has(.reader-youtube-workspace) {
  padding: 24px;
}
.reader-youtube-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: min(760px, 100%);
  margin: 0 auto;
  overflow: hidden;
  background: #101318;
  border: 1px solid rgba(53,43,33,.18);
  box-shadow: 0 14px 34px rgba(29,20,13,.18);
  transition: width .22s ease, grid-template-columns .22s ease;
}
.reader-youtube-workspace.has-transcript {
  grid-template-columns: minmax(0, 1.62fr) minmax(300px, .88fr);
  width: 100%;
}
.reader-youtube-video-side {
  min-width: 0;
  align-self: start;
  background: #101318;
}
.reader-youtube-workspace .reader-youtube-frame,
body.two-pane .reader-youtube-workspace .reader-youtube-frame {
  position: relative;
  top: auto;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.reader-youtube-transcript-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: #425D43;
  color: #FFF9EF;
  font: 700 10px/1 var(--sans);
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37,63,40,.18);
}
.reader-youtube-transcript-toggle:hover { background: #354C37; }
.reader-youtube-transcript-toggle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.reader-youtube-transcript-toggle[aria-expanded="true"] {
  background: #2F4532;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.reader-youtube-transcript-pane {
  display: none;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #FFFDF8;
  color: #2E2924;
  border-left: 1px solid #DDD4C8;
  font-family: var(--sans);
}
/* The YouTube transcript is a cream paper object even when the surrounding
   source rail is dark. Uploaded-media transcripts remain transparent tools
   and deliberately inherit the room's --tool-* colors instead. */
.reader-light-surface,
[data-theme="dark"] .reader-light-surface {
  color-scheme: light;
  --reader-surface-ink: #2E2924;
  --reader-surface-muted: #6A6158;
  --reader-surface-accent: #8F2828;
  color: var(--reader-surface-ink);
}
.reader-light-surface .reader-chunk,
.reader-light-surface .reader-chunk :is(p, li, blockquote),
.reader-light-surface .reader-transcript-search input {
  color: var(--reader-surface-ink);
}
.reader-light-surface .reader-transcript-search input::placeholder,
.reader-light-surface .reader-transcript-search-status {
  color: var(--reader-surface-muted);
}
.reader-light-surface .reader-chunk :is(h1, h2, h3) {
  color: var(--reader-surface-ink);
}
.reader-youtube-workspace.has-transcript .reader-youtube-transcript-pane {
  display: grid;
}

/* Phone: the video and its words stack — player on top, transcript below,
   exactly the pocket reader of the approved phone design. The desktop
   workspace animates its grid and offsets; on a phone none of that applies,
   so the layout is stated absolutely. */
@media (max-width: 700px) {
  .reader-youtube-workspace,
  .reader-youtube-workspace.has-transcript {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    transition: none;
  }
  .reader-youtube-video-side { width: 100%; }
  .reader-youtube-transcript-pane {
    display: grid;
    width: 100% !important;
    max-height: 58dvh;
    border-left: 0;
    border-top: 1px solid #DDD4C8;
  }
}
.reader-youtube-transcript-pane-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 13px;
  border-bottom: 1px solid #E2DAD0;
}
.reader-youtube-transcript-pane-header h2 {
  margin: 0;
  color: #2E2924;
  font: 500 17px/1.2 var(--serif);
}
.reader-youtube-transcript-pane-header span {
  margin-left: auto;
  color: #81776D;
  font: 500 10px/1 var(--sans);
}
.reader-youtube-transcript-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5F574F;
  font: 300 22px/1 var(--sans);
  cursor: pointer;
}
.reader-youtube-transcript-close:hover { color: #201D1A; }
.reader-youtube-transcript-close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.reader-youtube-transcript-note {
  margin: 10px 12px 7px;
  padding: 9px 10px;
  color: #5E564E;
  background: #F2EEE6;
  font: 500 10px/1.4 var(--sans);
}
.reader-youtube-transcript-note[hidden] { display: none; }
.reader-youtube-transcript-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 0 12px;
}
.reader-youtube-transcript-body .reader-transcript-tools-pane {
  position: relative;
  top: auto;
  z-index: 2;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  margin: 0;
  padding: 5px 0 9px;
  background: #FFFDF8;
}
.reader-transcript-follow {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(143,40,40,.28);
  border-radius: 999px;
  background: #FFFDF8;
  color: #8F2828;
  font: 700 9px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.reader-transcript-follow:hover { background: #F2EEE7; }
.reader-transcript-follow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.reader-transcript-follow[hidden] { display: none; }
.reader-youtube-transcript-scroll {
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: 5px 8px 22px 0;
  font: 400 13px/1.52 var(--sans);
}
.reader-youtube-transcript-scroll .reader-chunk {
  max-width: none;
  padding: 5px 7px;
}
.reader-youtube-transcript-scroll .reader-chunk p.reader-passage {
  max-width: none;
  margin: 0;
  line-height: 1.52;
}
.reader-youtube-transcript-scroll .reader-cue-timestamp,
.reader-youtube-transcript-scroll .yt-timestamp-block {
  color: #8F2828;
  font-size: 10px;
}
.reader-youtube-transcript-scroll .reader-transcript-cue.transcript-active {
  background: #F2EEE7;
  box-shadow: 0 0 0 3px #F2EEE7;
}
.reader-youtube-transcript-message {
  align-self: center;
  padding: 22px 6px;
  color: #5E564E;
}
.reader-youtube-transcript-message p {
  margin: 0;
  font: 400 14px/1.55 var(--serif);
}
.reader-youtube-transcript-message-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.reader-youtube-transcript-retry,
.reader-youtube-transcript-open {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(66,93,67,.34);
  border-radius: 999px;
  background: transparent;
  color: #354C37;
  font: 700 10px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.reader-youtube-transcript-retry:hover,
.reader-youtube-transcript-open:hover { background: #EEF2E9; }

body.two-pane .reader-youtube-workspace.has-transcript {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(280px, 42vh);
}
body.two-pane .reader-youtube-transcript-pane {
  border-left: 0;
  border-top: 1px solid var(--tool-border);
}

@media (max-width: 820px) {
  .reader-youtube-workspace.has-transcript {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(310px, 46vh);
  }
  .reader-youtube-transcript-pane {
    border-left: 0;
    border-top: 1px solid #DDD4C8;
  }
  .reader-media-header-meta { display: none; }
  .reader-media-header-group { gap: 8px; }
}

@media (max-width: 700px) {
  /* A full-screen reader owns its own status-bar inset through this one
     sticky control rail. The reader body and media frames do not add it. */
  .dv-reader .reader-surface { padding-top: 0; }
  .dv-reader .reader-close-bar {
    height: auto;
    min-height: calc(52px + env(safe-area-inset-top, 0px));
    margin-top: 0;
    margin-bottom: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 10px 4px;
    gap: 6px;
    align-items: flex-end;
  }
  .dv-reader .reader-close {
    flex: 1 1 112px;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    font-size: 10px;
  }
  .dv-reader .reader-media-header-group {
    flex: 0 1 auto;
    gap: 5px;
  }
  .dv-reader .reader-media-expand,
  .dv-reader .reader-youtube-transcript-toggle {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 7px;
    font-size: 9px;
    white-space: nowrap;
  }
  .reader-media-expand.reader-media-expand-overlay {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
}

/* Close button pinned inside every sticky media frame. Lives above the
   player (z-index > parent's 10) so it's always visible while the frame
   is sticky at top:0 — the main .reader-close at the top of the surface
   scrolls out of view as soon as the transcript scrolls. */
.reader-media-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 20;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.reader-media-close:hover {
  opacity: 1;
  background: rgba(20, 18, 16, 0.85);
  transform: scale(1.05);
}
.reader-media-close:focus-visible {
  outline: 2px solid var(--gold-muted, #c9a96e);
  outline-offset: 2px;
}
.reader-media-expand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: color .15s ease, opacity .15s ease;
}
.reader-media-expand:hover { color: var(--accent-warm); }
.reader-media-expand:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.reader-media-expand svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reader-media-expand.reader-media-expand-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 22;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(20,18,16,.82);
  color: #fff;
  box-shadow: 0 2px 9px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.reader-media-expand.reader-media-expand-overlay:hover {
  color: #fff;
  background: rgba(20,18,16,.96);
}
.reader-youtube-frame:fullscreen,
.reader-media-frame:fullscreen,
.reader-media-app-expanded {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: #090807;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader-youtube-frame:fullscreen .reader-youtube-player,
.reader-media-frame:fullscreen .reader-video-player,
.reader-media-app-expanded .reader-youtube-player,
.reader-media-app-expanded .reader-video-player {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  object-fit: contain;
}
.reader-media-frame:fullscreen .reader-video-transport,
.reader-media-app-expanded .reader-video-transport { display: none; }
.reader-media-app-expanded {
  position: fixed !important;
  inset: 0;
  top: 0 !important;
  z-index: 9000 !important;
}
body.reader-media-expanded-open { overflow: hidden; }
.reader-youtube-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

.reader-youtube-transcript-header {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.reader-transcript-tools {
  position: sticky;
  top: 40px;
  z-index: 9;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  background: #FDFBF7;
}
.reader-transcript-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(71,55,37,.18);
  border-radius: 999px;
  background: #F7F1E6;
  color: #726556;
}
.reader-transcript-search:focus-within {
  border-color: rgba(143,108,47,.58);
  box-shadow: 0 0 0 2px rgba(184,150,74,.12);
}
.reader-transcript-search svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.reader-transcript-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #241F19;
  font: 12px var(--sans);
}
.reader-transcript-search input::placeholder { color: #776C61; opacity: .92; }
.reader-transcript-search-status {
  min-width: 46px;
  color: #74695E;
  font: 10px var(--sans);
  text-align: right;
  white-space: nowrap;
}
.reader-transcript-state {
  margin: 22px 0 26px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.reader-transcript-state-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.reader-transcript-state-header h3 {
  margin: 0;
  color: var(--ink);
  font: 600 14px/1.2 var(--sans);
  letter-spacing: .10em;
  text-transform: uppercase;
}
.reader-transcript-state-header span {
  color: var(--ink-faint);
  font: 600 10px/1.2 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reader-transcript-state p {
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--ink-muted);
  font: 400 15px/1.55 var(--serif);
}
.reader-transcript-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.reader-transcribe-action {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(112,79,43,.34);
  border-radius: 999px;
  background: #F8F2E8;
  color: #49351F;
  font: 700 11px/1 var(--sans);
  letter-spacing: .035em;
  cursor: pointer;
}
.reader-transcribe-action:hover { background: #EFE2CE; }
.reader-transcribe-action:disabled { cursor: wait; opacity: .66; }
.reader-transcript-retry {
  margin-top: 14px;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font: 700 11px/1.2 var(--sans);
  letter-spacing: .04em;
  cursor: pointer;
}

.reader-transcript-retry:disabled { cursor: wait; opacity: .62; }
mark.reader-transcript-match {
  padding: 0 1px;
  border-radius: 2px;
  background: #F2D873;
  color: inherit;
}
mark.reader-transcript-match.current {
  background: #D79A3B;
  box-shadow: 0 0 0 2px rgba(215,154,59,.18);
}

/* Clickable YouTube timestamps in transcript */
.yt-timestamp {
  color: #b45309;
  cursor: pointer;
  font-family: var(--mono, 'SF Mono', 'Menlo', monospace);
  font-size: 0.85em;
  font-weight: 600;
  padding: 1px 3px;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.yt-timestamp:hover {
  background: rgba(180, 83, 9, 0.12);
  color: #92400e;
}

/* Block-level timestamp marker — paragraph group header */
.yt-timestamp-block {
  display: block;
  color: var(--ink-faint);
  cursor: pointer;
  font-family: var(--mono, 'SF Mono', 'Menlo', monospace);
  font-size: 0.78em;
  font-weight: 600;
  margin: 20px 0 4px;
  padding: 2px 6px;
  border-radius: 3px;
  width: fit-content;
  transition: background 0.15s, color 0.15s;
}
.yt-timestamp-block:first-child {
  margin-top: 0;
}
.yt-timestamp-block:hover {
  background: rgba(180, 83, 9, 0.10);
  color: #b45309;
}
[data-theme="dark"] .yt-timestamp-block {
  color: var(--ink-dim);
}
[data-theme="dark"] .yt-timestamp-block:hover {
  background: rgba(180, 83, 9, 0.15);
  color: #d97706;
}

/* ── Meeting transcript ── */
.reader-meeting-frame {
  /* Inherits from reader-media-frame + reader-video-frame */
}

.meeting-speaker-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary, #3a2f1f);
  margin-top: 12px;
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

.yt-timestamp-decorative {
  cursor: default;
  opacity: 0.5;
}
.yt-timestamp-decorative:hover {
  background: transparent;
  cursor: default;
}

/* --- Transcript auto-scroll highlight --- */
.reader-chunk.transcript-active {
  border-left: 3px solid var(--link-color, #8b6914);
  padding-left: 10px;
  background: rgba(139, 105, 20, 0.06);
  border-radius: 2px;
  transition: background 0.3s ease, border-left-color 0.3s ease;
}

.reader-cued-passage {
  line-height: 1.78;
}

.reader-cue-timestamp {
  border: 0;
  background: transparent;
  font: inherit;
  margin: 0 .48rem 0 0;
  padding: 0;
}

.reader-transcript-cue {
  border-radius: 3px;
  cursor: pointer;
  opacity: 1;
  transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.reader-transcript-filling .reader-transcript-cue.transcript-future {
  opacity: .38;
}

.reader-transcript-cue.transcript-active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* --- Utility --- */
.hidden { display: none !important; }

/* --- Transitions --- */
.fade-in {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Pane Expand / Collapse --- */

.pane-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-light);
  padding: 4px 6px;
  margin-left: auto;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.pane-expand-btn:hover { opacity: 1; }

.library-add-source-btn {
  display: none;
}
.library-add-source-btn:hover {
  opacity: 1;
  border-color: var(--ink-warm, #8B7D5E);
}

.library-upload-area.upload-highlight {
  border-color: var(--ink-warm, #8B7D5E) !important;
  box-shadow: 0 0 0 2px rgba(184,150,74,0.2);
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Center pane expand button — floats top-right since center has no static header */
.pane-expand-btn-center {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 5;
  margin-left: 0;
}
.pane-center { position: relative; }
.pane-center > .pane-close-btn-center {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 5;
  color: var(--room-muted);
  opacity: .85;
}
.pane-center > .pane-expand-btn-center { right: 44px; }
@media (max-width: 1023px) {
  .pane-close-btn-center { display: none !important; }
  .pane-center > .pane-expand-btn-center { right: 12px; }
}

/* Collapsed pane (expand mode) */
.pane.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border: none !important;
  padding: 0;
}

/* --- Pane Close / Restore --- */

.pane-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-faint);
  padding: 2px 6px;
  opacity: 0.4;
  transition: opacity 0.2s, color 0.2s;
  line-height: 1;
}
.pane-close-btn:hover { opacity: 1; color: var(--ink); }
.pane-close-btn.pane-close-disabled {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

/* Closed pane — rely on grid columns for sizing, just hide overflow */
.pane.pane-closed {
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

/* Close grid states */
.panes.close-left  { grid-template-columns: 0px 0px 1fr 12px var(--right-pane-w) !important; }
.panes.close-right { grid-template-columns: var(--left-pane-w) 12px 1fr 0px 0px !important; }
.panes.close-left  > #resize-handle-left,
.panes.close-right > #resize-handle-right { width: 0; min-width: 0; overflow: hidden; }

/* A named edge tab makes the closed Library discoverable without a toolbar. */
.pane-restore-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  min-height: 106px;
  padding: 9px 4px;
  border: 1px solid var(--yd-tool-border);
  border-radius: 0 4px 4px 0;
  background: var(--yd-tool);
  color: var(--yd-tool-ink);
  font: 600 12px/1 var(--sans);
  box-shadow: 2px 2px 8px rgba(0,0,0,.16);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  z-index: 15;
  transition: background 0.2s;
}
.pane-restore-label { writing-mode: vertical-rl; }
.pane-restore-tab > [aria-hidden] { font-size: 21px; }
.pane-restore-tab:focus-visible { outline: 2px solid var(--yd-action); outline-offset: 2px; }
.pane-restore-tab:hover {
  opacity: 1;
  background: var(--yd-chrome-raised);
  color: var(--yd-tool-ink);
}
.pane-restore-left {
  left: 0;
  border-radius: 0 4px 4px 0;
}
.pane-restore-right, .pane-restore-center {
  right: 0;
  border-radius: 4px 0 0 4px;
}
[data-theme="dark"] .pane-restore-tab {
  background: var(--yd-tool);
}
[data-theme="dark"] .pane-restore-tab:hover {
  background: var(--yd-chrome-raised);
}

/* A private picture belongs only to the full Desktop, never the work panes.
   The root is viewport-sized, so the picture stays still as cards scroll. */
#desktop-background-btn { display: none; }
body.desk-scope #desktop-background-btn { display: block; }
#desk-view-root.has-custom-background {
  background-color: var(--yd-birch);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#desk-view-root.has-custom-background > .dv-surface-room { background: transparent; }
.desktop-background-dialog {
  width: min(440px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  box-sizing: border-box;
  overflow: auto;
  padding: 24px;
  margin: auto;
  border: 1px solid var(--yd-tool-border);
  border-radius: 8px;
  background: var(--yd-chrome);
  color: var(--yd-tool-ink);
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
.desktop-background-dialog::backdrop { background: rgba(0,0,0,.42); }
.desktop-background-dialog h2 { font: 600 24px/1.2 var(--serif); margin: 0 0 6px; }
.desktop-background-desk { font: 14px/1.4 var(--sans); color: var(--yd-tool-muted); margin: 0 0 18px; }
.desktop-background-preview {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--yd-tool-border);
  border-radius: 4px;
  background: repeating-linear-gradient(0deg, transparent 0 40px, var(--yd-birch-dark) 41px 42px), var(--yd-birch);
  display: grid;
  place-items: center;
  color: var(--yd-tool-ink);
}
.desktop-background-preview img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.desktop-background-preview [hidden] { display: none; }
.desktop-background-hint { font: 13px/1.5 var(--sans); color: var(--yd-tool-muted); margin: 12px 0 18px; }
.desktop-background-choices, .desktop-background-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.desktop-background-actions { justify-content: flex-end; }
.desktop-background-dialog button, .desktop-background-pick {
  position: relative;
  padding: 10px 14px;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--yd-tool-border);
  border-radius: 5px;
  background: var(--yd-tool);
  color: var(--yd-tool-ink);
  font: 500 14px/1.4 var(--sans);
  cursor: pointer;
}
.desktop-background-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.desktop-background-pick:focus-within, .desktop-background-dialog button:focus-visible { outline: 2px solid var(--yd-action); outline-offset: 2px; }
.desktop-background-dialog button:disabled, .desktop-background-pick:has(input:disabled) { opacity: .5; cursor: default; }
.desktop-background-dialog [data-save] { font-weight: 700; }
.desktop-background-status { min-height: 20px; margin: 14px 0; font: 13px/1.5 var(--sans); color: var(--yd-tool-ink); }

/* Hide close buttons when in expand mode */
.panes.expand-left .pane-close-btn,
.panes.expand-center .pane-close-btn,
.panes.expand-right .pane-close-btn { display: none; }

/* Expanded grid states.
   NOTE: no `transition: grid-template-columns` on `.panes`. Chrome can't
   reliably interpolate grid-template-columns when the track list mixes
   `fr` with `px`/`%`/`var()` (which `.panes` always does). With the
   transition declared, toggling `.panes.expand-center` left the computed
   grid-template-columns stuck at the pre-toggle value, so the 1fr column
   never actually resolved to full width — the editor collapsed to the
   old center-pane width and the user saw a blank tan pane. Snap-animated
   expand/collapse is correct behavior here. Drag smoothness is already
   handled by JS writing the CSS var at rAF cadence. */

.panes.expand-left   { grid-template-columns: 1fr 0 0 0 0; }
.panes.expand-center { grid-template-columns: 0 0 1fr 0 0; }
.panes.expand-right  { grid-template-columns: 0 0 0 0 1fr; }
/* CRITICAL: do NOT use `display: none` to hide the resize handles in expand
   mode. `display: none` drops the handles from CSS grid auto-placement, which
   re-numbers the remaining items — pane-center ends up as grid item #2 (the
   0-width col 2) instead of #3 (the 1fr col). Result: the entire editor
   collapses to 0 width and the pane shows a blank tan background. Instead,
   keep the handles in flow but collapse their size and disable interaction. */
.panes.expand-left .pane-resize-handle,
.panes.expand-center .pane-resize-handle,
.panes.expand-right .pane-resize-handle {
  width: 0;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

/* Expanded left pane: centered immersive reading mode */
.panes.expand-left .pane-left {
  background: #F0EBE2;
}

.panes.expand-left .reader-surface {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 48px 80px;
}

.panes.expand-left .reader-header {
  max-width: none;
  padding: 36px 52px 20px;
  border-radius: 5px 5px 0 0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.05);
}

.panes.expand-left .reader-header h1 {
  font-size: 28px;
  letter-spacing: -0.02em;
}

.panes.expand-left .reader-content {
  max-width: none;
  padding: 52px 64px 80px;
  font-size: 20px;
  line-height: 1.85;
  border-radius: 0 0 5px 5px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.05);
}

.panes.expand-left .reader-chunk {
  max-width: 620px;
}

/* ============================================================
   REACTION TOOLBAR
   Appears on text selection in reader and editor
   ============================================================ */

/* --- Reaction Toolbar — dark pill, animated, premium --- */
.reaction-toolbar {
  position: fixed;
  /* The source reader is 900; its own selection actions must receive taps. */
  z-index: 950;
  display: flex;
  gap: var(--pill-gap);
  padding: var(--pill-padding);
  background: var(--pill-bg);
  border: var(--pill-border);
  border-radius: var(--pill-radius);
  box-shadow: var(--pill-shadow);
  animation: htbAppear 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes htbAppear {
  from { opacity: 0; transform: scale(0.85) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.reaction-btn {
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.reaction-btn svg {
  width: 22px;
  height: 22px;
  stroke: rgba(240, 235, 225, 0.55);
  stroke-width: 1.8;
  fill: none;
  transition: all 0.15s ease;
}
/* :active removed — each animation's 0% keyframe handles the press-down feel */

/* Hover — each reaction has personality */
.reaction-yellow:hover {
  background: rgba(184, 150, 74, 0.14);
  transform: scale(1.08);
}
.reaction-yellow:hover svg { stroke: var(--react-yellow); fill: none; }

.reaction-blue:hover {
  background: rgba(106, 154, 196, 0.10);
  transform: scale(1.06);
}
.reaction-blue:hover svg { stroke: #6a9ac4; fill: none; }

.reaction-pink:hover {
  background: rgba(200, 100, 120, 0.22);
  transform: scale(1.15);
}
.reaction-pink:hover svg { stroke: #c86478; fill: none; }

.reaction-green:hover {
  background: rgba(140, 170, 140, 0.12);
  transform: scale(1.06) translateX(1px);
}
.reaction-green:hover svg { stroke: #8caa8c; fill: none; }

/* --- Active animations (on click) --- */

/* Highlight — INK WASH */
@keyframes highlightSlash {
  0%  { transform: scale(0.85); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes highlightWash {
  0%   { background: transparent; }
  20%  { background: rgba(232, 200, 64, 0.45); }
  60%  { background: rgba(184, 150, 74, 0.25); }
  100% { background: rgba(184, 150, 74, 0.12); }
}
.htb-highlight-active {
  animation: highlightWash 0.6s ease-out forwards !important;
}
.htb-highlight-active svg {
  stroke: var(--react-yellow) !important;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 10px rgba(232, 200, 64, 0.6));
  animation: highlightSlash 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.htb-highlight-active svg path {
  fill: rgba(232, 200, 64, 0.3);
}

/* Save — DROP WITH WEIGHT */
@keyframes saveSettle {
  0%  { transform: scale(0.85) translateY(-18px); opacity: 0.5; }
  40% { transform: scale(1.05) translateY(4px) scaleY(0.92); opacity: 1; }
  57% { transform: scale(1.05) translateY(4px) scaleY(0.92); opacity: 1; }
  60% { transform: scale(1) translateY(-3px) scaleY(1.02); }
  80% { transform: scale(1) translateY(1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes saveFill {
  0%  { fill: transparent; }
  40% { fill: rgba(106, 154, 196, 0.7); }
  100% { fill: rgba(106, 154, 196, 0.85); }
}
.htb-save-active {
  background: rgba(106, 154, 196, 0.2) !important;
}
.htb-save-active svg {
  stroke: #6a9ac4 !important;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 10px rgba(106, 154, 196, 0.5));
  animation: saveSettle 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.htb-save-active svg path {
  animation: saveFill 0.5s ease-out 0.1s forwards;
}

/* Love — BLOOM (press, overshoot, bounce) */
@keyframes loveBloom {
  0%  { transform: scale(0.85); }
  15% { transform: scale(1.45); }
  35% { transform: scale(0.9); }
  55% { transform: scale(1.18); }
  75% { transform: scale(0.97); }
  100% { transform: scale(1.02); }
}
@keyframes loveFill {
  0%  { fill: transparent; }
  20% { fill: rgba(200, 100, 120, 0.95); }
  100% { fill: rgba(200, 100, 120, 0.85); }
}
@keyframes loveGlow {
  0%  { box-shadow: 0 0 0 0 rgba(200, 100, 120, 0); }
  25% { box-shadow: 0 0 30px 12px rgba(200, 100, 120, 0.45); }
  100% { box-shadow: 0 0 4px 1px rgba(200, 100, 120, 0.08); }
}
@keyframes loveRing {
  0%  { transform: scale(0.5); opacity: 0.8; border-width: 2.5px; }
  100% { transform: scale(2.6); opacity: 0; border-width: 0; }
}
.htb-love-active {
  background: rgba(200, 100, 120, 0.2) !important;
  animation: loveGlow 0.8s ease-out forwards;
}
.htb-love-active svg {
  stroke: #c86478 !important;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 14px rgba(200, 100, 120, 0.6));
  animation: loveBloom 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.htb-love-active svg path {
  animation: loveFill 0.5s ease-out forwards;
}
.love-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(200, 100, 120, 0.5);
  pointer-events: none;
  animation: loveRing 0.5s ease-out forwards;
}

/* Share — OUTWARD RELEASE */
@keyframes shareRelease {
  0%  { transform: scale(0.85) translate(0, 0); }
  25% { transform: scale(1.18) translate(10px, -12px); }
  50% { transform: scale(1.06) translate(4px, -4px); }
  100% { transform: scale(1) translate(0, 0); }
}
@keyframes shareRing {
  0%  { transform: scale(0.5); opacity: 0.7; border-width: 2px; }
  100% { transform: scale(2.4); opacity: 0; border-width: 0; }
}
@keyframes shareTrailDot {
  0%  { opacity: 0; transform: translate(0, 0) scale(0); }
  25% { opacity: 0.9; transform: translate(-6px, 6px) scale(1.2); }
  100% { opacity: 0; transform: translate(-12px, 12px) scale(0.4); }
}
.htb-share-active {
  background: rgba(140, 170, 140, 0.2) !important;
}
.htb-share-active svg {
  stroke: #8caa8c !important;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 10px rgba(140, 170, 140, 0.5));
  animation: shareRelease 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.share-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(140, 170, 140, 0.5);
  pointer-events: none;
  animation: shareRing 0.6s ease-out forwards;
}
.share-trail {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(140, 170, 140, 0.8);
  pointer-events: none;
  animation: shareTrailDot 0.6s ease-out forwards;
}

/* Selection flash feedback */
.reaction-flash {
  border-radius: 2px;
  animation: reactionFlash 1.2s ease forwards;
}
.reaction-flash-yellow { background: rgba(232, 200, 64, 0.35); }
.reaction-flash-blue   { background: rgba(91, 155, 213, 0.3); }
.reaction-flash-pink   { background: rgba(224, 112, 152, 0.3); }
.reaction-flash-green  { background: rgba(93, 174, 130, 0.3); }

/* Selection share panel (green reaction) */
.selection-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 8999;
}
.selection-share-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  padding: 20px 24px;
  max-width: 420px;
  width: 90vw;
  z-index: 9000;
}
.selection-share-quote {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--paper-ink);
  line-height: 1.7;
  margin-bottom: 8px;
}
.selection-share-provenance {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--paper-muted);
  margin-bottom: 8px;
}
.selection-share-source {
  display: inline-block;
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--paper-action);
  text-decoration: none;
}
.selection-share-source:hover {
  text-decoration: underline;
}
.selection-share-actions {
  display: flex;
  gap: 8px;
}
.selection-share-actions button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.selection-share-copy {
  background: var(--paper-ink);
  color: var(--paper-bg);
  border: none;
}
.selection-share-copy:hover { opacity: 0.85; }
.selection-share-email,
.selection-share-native {
  background: transparent;
  color: var(--paper-action);
  border: 1px solid var(--paper-border);
}
.selection-share-email:hover,
.selection-share-native:hover { background: var(--paper-bg-soft); }

@keyframes reactionFlash {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   STICKY NOTE WALL (right pane)
   ============================================================ */

.notes-wall {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notes-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-content: flex-start;
  padding: 0 4px;
}

/* ── Notes pane background — luminance gradient (Working With lit, Pile dim) ── */
.notes-list {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.015) 0%, transparent 120px),
    var(--frame);
}

/* ── Presence tiers — Working With / Nearby / In the Pile ── */
.presence-tier {
  margin-bottom: 8px;
}
/* Captures hold polaroids with drop shadows — generous clearance so the
   shadow never creeps into the Nearby/Pile header below. */
.presence-tier-captures {
  margin-bottom: 44px;
}
.presence-tier-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 14px 8px 10px;
  border-bottom: 1px solid rgba(26, 24, 22, 0.06);
  margin-bottom: 4px;
  user-select: none;
}
.presence-tier-count {
  font-weight: 400;
  opacity: 0.7;
}
.presence-tier-hint {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0;
  text-transform: none;
}
.presence-tier-pile {
  padding-top: 8px;
  border-top: 1px dashed var(--border-strong);
  margin-top: 8px;
}

/* ── Working With — gold accent, spread open ── */
.presence-tier-working .presence-tier-header {
  font-size: 11px;
  color: var(--ink);
}
.presence-tier-working .presence-tier-label {
  color: var(--gold, #B8964A);
}
.presence-tier-body-open {
  display: flex;
  flex-direction: column;
  padding: 0 6px;
  gap: 0;
}

/* ── Captures section — palette-made artifacts live here ── */
.presence-tier-captures .presence-tier-header {
  font-size: 11px;
  color: var(--ink);
}
.presence-tier-captures .presence-tier-label {
  color: var(--gold, #B8964A);
}
.presence-tier-body-captures {
  display: flex;
  flex-direction: column;
  padding: 0 6px;
  gap: 0;
}

/* ── Working With card — paper document with sticky-note overlay ── */
.working-card {
  position: relative;
  margin: 4px 4px 18px;
  background: var(--paper);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-gold);
  display: grid;
  grid-template-columns: 1fr;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.working-card:hover {
  transform: translateY(-1px);
}
.working-card.note-dragging {
  opacity: 0.6;
  cursor: grabbing;
}

.working-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.working-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-faint, rgba(184, 150, 74, 0.18));
  flex-shrink: 0;
}
.working-card-live {
  color: var(--gold);
  font-weight: 500;
}
.working-card-src {
  color: var(--ink-light);
  font-style: italic;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.working-card-quote {
  padding: 10px 18px 4px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.working-card-quote::before {
  content: '\201C';
  color: var(--gold);
  margin-right: 2px;
  font-size: 24px;
  line-height: 0;
  vertical-align: -6px;
}
.working-card-quote::after {
  content: '\201D';
  color: var(--gold);
  margin-left: 2px;
  font-size: 24px;
  line-height: 0;
  vertical-align: -6px;
}

/* Sticky slip laid on the paper — the user's own thought */
.working-card-note {
  margin: 10px 14px 0;
  padding: 12px 16px 14px 18px;
  font-family: var(--handwritten);
  font-size: 21px;
  line-height: 1.35;
  color: #3a2e14;
  position: relative;
  transform: rotate(var(--slip-rot, 0deg));
  transform-origin: top left;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    inset 0 -10px 20px -10px rgba(0, 0, 0, 0.04);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.working-card-note::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.08) 50%);
}
.working-card-note-yellow { background: #F5D878; color: #3a2e14; }
.working-card-note-pink   { background: #F099B8; color: #3a2e14; }
.working-card-note-blue   { background: #87B9E0; color: #0f2c44; }
.working-card-note-green  { background: #86C7A0; color: #133a22; }
.working-card-note-orange { background: #F0B87A; color: #3a2e14; }

.working-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.working-card-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}
.working-card-action {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}
.working-card-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.working-card-action:hover {
  color: var(--gold);
  transform: translateY(-1px);
}
.working-card-action.wca-active {
  color: var(--gold);
}
.working-card-action.wca-active svg {
  fill: currentColor;
}
.working-card-time {
  font-style: italic;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

/* Hover-revealed delete × in the corner — off by default */
.working-card .note-card-delete {
  position: absolute;
  top: 8px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.working-card:hover .note-card-delete {
  opacity: 0.6;
}
.working-card .note-card-delete:hover {
  opacity: 1;
}

/* ── Nearby — compact two-column grid ── */
.presence-tier-body-compact {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  gap: 0;
}
/* Cards in Nearby: half-width, smaller, within reach */
.note-card.note-card-compact {
  width: calc(50% - 8px) !important;
  max-height: 150px !important;
  overflow: hidden;
  opacity: 0.92 !important;
  transform: scale(0.98) rotate(var(--note-angle, 0deg)) !important;
  padding: 12px 14px 14px !important;
  margin: 0 4px 10px;
  min-height: 72px !important;
}
.note-card.note-card-compact .note-quote {
  font-family: var(--handwritten);
  font-size: 17px;
  line-height: 1.32;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.note-card.note-card-compact .note-body {
  font-family: var(--handwritten);
  font-size: 17px;
  line-height: 1.32;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.note-card.note-card-compact .note-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(30, 26, 18, 0.55);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 6px;
}
.note-card.note-card-compact.note-card-blue .note-meta,
.note-card.note-card-compact.note-card-green .note-meta {
  color: rgba(0, 0, 0, 0.55);
}
.note-card.note-card-compact .note-reactions {
  display: none;
}

/* ── In the Pile — stacked overlapping cards ── */
.presence-tier-pile .presence-tier-header {
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.presence-tier-pile .presence-tier-header:hover {
  background: rgba(184,150,74,0.05);
}
/* Shingle stack — overlapping sticky cards, visible when collapsed */
.presence-pile-shingle {
  position: relative;
  margin: 4px 8px 8px;
  padding: 8px 4px 24px;
  min-height: 72px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.presence-pile-shingle-card {
  position: absolute;
  padding: 8px 12px 10px;
  font-family: var(--handwritten);
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transform: rotate(var(--shingle-rot, 0deg));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.presence-pile-shingle-card:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
  z-index: 50;
}
/* Edge fallback for piles ≥ 15 — thinner strips, less overlap */
.presence-pile-edge-fallback .presence-pile-shingle-card {
  max-width: 260px;
  padding: 1px 14px 2px;
  font-size: 13px;
  height: 16px;
}
/* Hide stack when expanded, show cards */
.presence-tier-expanded .presence-pile-shingle {
  display: none;
}
/* Cards body: hidden when collapsed */
.presence-tier-pile .presence-tier-body {
  display: none;
}
.presence-tier-pile.presence-tier-expanded .presence-tier-body {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* ── Working With / Nearby overflow pile ──
   Same shingled preview + click-to-spread as "In the Pile," but lives
   inline inside its parent tier so the top of the tier remains glanceable. */
.presence-tier-overflow-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 4px 6px;
  margin-top: 12px;
  cursor: pointer;
  color: var(--ink-faint);
  border-top: 1px dashed rgba(0,0,0,0.06);
}
.presence-tier-overflow-header:hover { color: var(--ink); }
.presence-tier-overflow-header .presence-tier-label {
  font-family: var(--handwritten);
  font-size: 15px;
}
.presence-tier-overflow-header .presence-tier-hint {
  font-size: 12px;
  opacity: 0.7;
}
.presence-pile-shingle-inline {
  margin: 2px 0 0;
}
.presence-tier-expanded .presence-pile-shingle-inline {
  display: none;
}
.presence-tier-overflow-body {
  display: none;
}
.presence-tier-expanded > .presence-tier-overflow-body {
  display: flex;
  flex-wrap: wrap;
  padding: 4px;
  gap: 8px;
}
.presence-tier-expanded > .presence-tier-overflow-body.presence-tier-body-compact {
  display: grid;
}
[data-theme="dark"] .presence-tier-overflow-header {
  border-top-color: rgba(255,255,255,0.06);
  color: var(--ink-light);
}

/* ── Dark mode: presence tiers ── */
[data-theme="dark"] .presence-tier-header {
  color: var(--ink-faint);
  border-bottom-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .presence-tier-working .presence-tier-header {
  color: var(--ink-light);
}
[data-theme="dark"] .presence-tier-working .presence-tier-label {
  color: var(--gold-muted, #C9AC6E);
}
[data-theme="dark"] .presence-tier-hint {
  color: var(--ink-faint);
}
[data-theme="dark"] .presence-tier-pile {
  border-top-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .working-card {
  background: var(--surface);
  box-shadow:
    0 0 0 1px rgba(184, 150, 74, 0.22),
    0 6px 22px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.24);
}
[data-theme="dark"] .working-card-quote,
[data-theme="dark"] .working-card-time {
  color: var(--ink-light);
}
[data-theme="dark"] .working-card-src {
  color: var(--ink-faint);
}
[data-theme="dark"] .working-card-action {
  color: var(--ink-faint);
}
[data-theme="dark"] .working-card-action:hover,
[data-theme="dark"] .working-card-action.wca-active {
  color: var(--gold-warm, #D4A843);
}
[data-theme="dark"] .presence-tier-pile .presence-tier-header:hover {
  background: rgba(184,150,74,0.08);
}
[data-theme="dark"] .presence-pile-shingle-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .presence-pile-shingle-card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
}
.notes-empty-hint {
  font-size: 11px;
  margin-top: 6px;
  color: var(--ink-faint);
}

/* Individual note card. Standard notes use the same modern material language
   as the sticky notes in the writing seam: muted paper, restrained depth, and
   no decorative folded corner. Capture cards add their own material styles. */
.note-card {
  width: 100%;
  margin: 4px 4px;
  min-height: 68px;
  padding: 12px 14px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--handwritten);
  font-style: normal;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 1px 2px 4px rgba(30,26,18,0.28);
  transition: opacity 0.6s ease, transform 0.4s ease, box-shadow 0.5s ease,
              max-height 0.4s ease, padding 0.3s ease, filter 0.5s ease;
  animation: noteEnter 0.4s ease;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .note-card {
    width: calc(50% - 8px);
  }
}

.note-card:hover {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 2px 4px 10px rgba(30,26,18,0.30);
  z-index: 2;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease;
}
/* Hover lift must override presence state transforms */
.note-card.state-dormant:hover,
.note-card.state-warm:hover,
.note-card.state-alive:hover,
.note-card.state-active:hover,
.note-card.state-cooling:hover {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 2px 4px 10px rgba(30,26,18,0.30);
  z-index: 2;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease;
}

/* The writing seam owns the sticky-note palette. */
.note-card-yellow {
  background: var(--react-yellow, #F2E6C2);
  color: var(--note-ink);
}
.note-card-blue {
  background: var(--react-blue, #CFDBE6);
  color: var(--note-ink);
}
.note-card-pink {
  background: var(--react-pink, #EDD2C6);
  color: var(--note-ink);
}
.note-card-green {
  background: var(--react-green, #D5E1D3);
  color: var(--note-ink);
}
.note-card-orange {
  background: #E9D8C8;
  color: var(--note-ink);
}

/* ── F_i continuous field layer (fast axis) ── */
/* Orthogonal to state-* classes. A radial glow painted via ::after so it
   doesn't collide with the state-specific box-shadow/transform stacks. */
.note-card {
  --presence-field: 0;
}
.note-card::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 6px;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(255, 220, 150, calc(var(--presence-field) * 0.55)) 0%,
    rgba(255, 220, 150, 0) 70%
  );
  opacity: var(--presence-field);
  transition: opacity 200ms ease, background 200ms ease;
  z-index: -1;
}
[data-theme="dark"] .note-card::after {
  background: radial-gradient(
    closest-side,
    rgba(255, 210, 130, calc(var(--presence-field) * 0.35)) 0%,
    rgba(255, 210, 130, 0) 70%
  );
}
@media (prefers-reduced-motion: reduce) {
  .note-card::after { transition: none; }
}

/* ── Presence States (Sub-slice 1) ── */
/* Quiet floor: dormant is visible, never invisible */
.note-card.state-dormant {
  opacity: 0.55;
  transform: scale(0.94) rotate(var(--note-angle, 0deg));
  box-shadow: 1px 2px 3px rgba(0,0,0,0.08);
  filter: saturate(0.7) brightness(0.92);
  max-height: 120px;
  padding: 16px 14px;
  min-height: 80px;
}

.note-card.state-warm {
  opacity: 0.8;
  transform: scale(0.98) rotate(var(--note-angle, 0deg));
  box-shadow: 1px 2px 6px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  max-height: 160px;
  padding: 20px 18px;
  min-height: 100px;
}

.note-card.state-alive {
  opacity: 1.0;
  transform: scale(1.02) rotate(var(--note-angle, 0deg));
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.15),
    0 6px 16px rgba(0,0,0,0.10),
    0 0 0 1px rgba(184,150,74,0.06);
  max-height: 200px;
  padding: 24px 22px;
  min-height: 110px;
}

.note-card.state-active {
  opacity: 1.0;
  transform: scale(1.06) rotate(var(--note-angle, 0deg));
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.18),
    0 8px 22px rgba(0,0,0,0.14),
    0 0 8px rgba(184,150,74,0.06);
  max-height: 220px;
  padding: 26px 24px;
  min-height: 120px;
}

/* Cooling: was once alive/active, now dormant. A memory of heat. */
.note-card.state-cooling {
  opacity: 0.55;
  transform: scale(0.94) rotate(var(--note-angle, 0deg));
  box-shadow: 1px 2px 3px rgba(0,0,0,0.08),
              0 0 8px rgba(184,150,74,0.04);
  filter: saturate(0.75) brightness(0.93);
  max-height: 120px;
  padding: 16px 14px;
  min-height: 80px;
}

.note-card.state-focused {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.18),
    0 8px 22px rgba(0,0,0,0.14),
    0 0 12px rgba(184,150,74,0.10);
  transition: box-shadow 0.2s ease;
}

/* Cluster grouping — notes in the same alive/active cluster subtly group */
.note-card.note-cluster-member {
  margin-bottom: 4px;
}
.note-card.note-cluster-first {
  margin-top: 12px;
  border-top: 1px solid rgba(184,150,74,0.06);
  padding-top: 14px;
}
.note-card.note-cluster-alive {
  background: linear-gradient(135deg, var(--note-bg, #fff8b5) 0%, rgba(184,150,74,0.03) 100%);
}
.note-card.note-cluster-active {
  background: linear-gradient(135deg, var(--note-bg, #fff8b5) 0%, rgba(184,150,74,0.05) 100%);
}
[data-theme="dark"] .note-card.note-cluster-alive {
  background: linear-gradient(135deg, var(--note-bg, #3a3520) 0%, rgba(184,150,74,0.04) 100%);
}
[data-theme="dark"] .note-card.note-cluster-active {
  background: linear-gradient(135deg, var(--note-bg, #3a3520) 0%, rgba(184,150,74,0.07) 100%);
}
/* Dark walnut: note presence state overrides */
[data-theme="dark"] .note-card.state-dormant {
  box-shadow: 1px 2px 3px rgba(0,0,0,0.20);
  filter: saturate(0.65) brightness(0.85);
}
[data-theme="dark"] .note-card.state-warm {
  box-shadow: 1px 2px 6px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.12);
}
[data-theme="dark"] .note-card.state-alive {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.25),
    0 6px 16px rgba(0,0,0,0.18),
    0 0 0 1px rgba(184,150,74,0.08);
}
[data-theme="dark"] .note-card.state-active {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.30),
    0 8px 22px rgba(0,0,0,0.22),
    0 0 8px rgba(184,150,74,0.08);
}
[data-theme="dark"] .note-card.state-cooling {
  box-shadow: 1px 2px 3px rgba(0,0,0,0.20),
              0 0 8px rgba(184,150,74,0.05);
  filter: saturate(0.70) brightness(0.86);
}

/* Standard notes are the same object as the modern seam sticky, even when the
   presence system changes their semantic state. State may change emphasis, but
   it must not resize, fade, or restyle the physical note. */
.note-card.note-card-standard,
.note-card.note-card-standard.state-dormant,
.note-card.note-card-standard.state-warm,
.note-card.note-card-standard.state-alive,
.note-card.note-card-standard.state-active,
.note-card.note-card-standard.state-cooling {
  min-height: 92px;
  max-height: none;
  padding: 10px 30px 10px 10px;
  border: none;
  border-radius: 2px;
  opacity: .94;
  filter: none;
  transform: rotate(var(--note-angle, 0deg));
  box-shadow: 1px 2px 4px rgba(30,26,18,.28);
}
.note-card.note-card-standard:hover,
.note-card.note-card-standard.state-dormant:hover,
.note-card.note-card-standard.state-warm:hover,
.note-card.note-card-standard.state-alive:hover,
.note-card.note-card-standard.state-active:hover,
.note-card.note-card-standard.state-cooling:hover {
  opacity: 1;
  filter: none;
  transform: rotate(0deg) scale(1.03);
  box-shadow: 2px 4px 10px rgba(30,26,18,.30);
}

.note-quote {
  margin-bottom: 6px;
}

.note-body {
  font-style: normal;
  font-family: var(--handwritten);
  font-size: 13px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.note-meta {
  font-style: normal;
  font-family: var(--handwritten);
  font-size: 11px;
  margin-top: 8px;
  color: inherit;
  opacity: 0.55;
}

@keyframes noteEnter {
  from {
    opacity: 0;
    transform: translateY(12px) rotate(var(--note-angle, 0deg));
  }
  to {
    opacity: 1;
  }
}

/* ─── Expanded note overlay ─── */

.note-expanded-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(44, 36, 23, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.note-expanded {
  position: relative;
  width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid var(--react-yellow, #F2E6C2);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(30,26,18,.26);
  font-family: var(--handwritten);
  animation: noteExpandOpen 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Expanded notes match the clean seam popover: neutral paper with a color
   marker, rather than a saturated novelty-note gradient. */
.note-expanded.note-card-yellow {
  border-left-color: var(--react-yellow, #F2E6C2);
}
.note-expanded.note-card-blue {
  border-left-color: var(--react-blue, #CFDBE6);
}
.note-expanded.note-card-pink {
  border-left-color: var(--react-pink, #EDD2C6);
}
.note-expanded.note-card-green {
  border-left-color: var(--react-green, #D5E1D3);
}

/* A sticky note opens as the smallest possible editor. Closing the backdrop or
   pressing Escape saves it; there are intentionally no secondary controls. */
.note-expanded.note-expanded-edit-only {
  width: min(360px, calc(100vw - 40px));
  max-height: none;
  padding: 12px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(30,26,18,.2);
}

.note-expanded-edit-only.note-card-yellow { background: var(--react-yellow, #F2E6C2); }
.note-expanded-edit-only.note-card-blue { background: var(--react-blue, #CFDBE6); }
.note-expanded-edit-only.note-card-pink { background: var(--react-pink, #EDD2C6); }
.note-expanded-edit-only.note-card-green { background: var(--react-green, #D5E1D3); }

.note-expanded-edit-only .note-expanded-thought {
  min-height: 150px;
  padding: 8px;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1.4;
}

.note-expanded-edit-only .note-composer-colors {
  margin: 10px 2px 12px;
}

.note-expanded-edit-only .note-expanded-save {
  margin: 0;
}

@keyframes noteExpandOpen {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.note-expanded-quote {
  font-family: var(--handwritten);
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.note-expanded-thought {
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  padding: 10px;
  border: 1px dashed rgba(0,0,0,0.15);
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  font-family: var(--handwritten);
  font-style: normal;
  font-size: 14px;
  resize: vertical;
  outline: none;
  color: inherit;
}
.note-expanded-thought::placeholder {
  color: inherit;
  opacity: 0.4;
  font-style: italic;
}

.note-expanded-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.note-action-btn {
  padding: 7px 16px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(0,0,0,0.1);
  color: inherit;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.note-action-btn:hover {
  background: rgba(0,0,0,0.18);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.note-action-primary {
  background: rgba(0,0,0,0.18);
  font-weight: 600;
}

.note-action-danger {
  color: #9B2C2C;
}
.note-action-danger:hover {
  background: rgba(155, 44, 44, 0.15);
}

.note-expanded-meta {
  margin-top: 16px;
  font-family: -apple-system, sans-serif;
  font-style: normal;
  font-size: 10px;
  opacity: 0.5;
}

/* ─── Desk scope: Pattern cards ─── */

.patterns-wall {
  padding: 12px;
}

.patterns-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.patterns-loading {
  width: 100%;
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-faint);
}

.patterns-empty {
  width: 100%;
  text-align: center;
  padding: 40px 16px;
  color: var(--ink-faint);
  font-size: 13px;
}
.patterns-empty-hint {
  font-size: 11px;
  margin-top: 6px;
  opacity: 0.7;
}

.pattern-card {
  position: relative;
  width: calc(50% - 5px);
  min-height: 100px;
  padding: 14px 16px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    1px 2px 4px rgba(0,0,0,0.12),
    2px 4px 10px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

/* Folded corner — same as chapter sticky notes */
.pattern-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.06) 50%);
  border-radius: 0 2px 0 0;
}

.pattern-card:hover {
  box-shadow:
    2px 6px 12px rgba(0,0,0,0.18),
    4px 10px 24px rgba(0,0,0,0.10);
  transform: translateY(-3px) scale(1.02) !important;
  z-index: 2;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease;
}

/* Color variants — same saturated palette as chapter sticky notes */
.pattern-card-pink {
  background: linear-gradient(145deg, #F5A0B8 0%, #E88BA5 100%);
  color: #4A1A28;
}
.pattern-card-blue {
  background: linear-gradient(145deg, #8DB8E8 0%, #6BA0D8 100%);
  color: #1A2E45;
}
.pattern-card-yellow {
  background: linear-gradient(145deg, #FFE968 0%, #F5D832 100%);
  color: #4A3F12;
}
.pattern-card-green {
  background: linear-gradient(145deg, #82C89A 0%, #68B882 100%);
  color: #1A3D25;
}

.pattern-card-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(0,0,0,0.40);
  margin-bottom: 6px;
}

.pattern-card-text {
  font-family: var(--handwritten);
  font-size: 15px;
  font-style: normal;
  line-height: 1.5;
  color: var(--ink);
}

.pattern-card-action {
  margin-top: 10px;
  font-family: var(--handwritten);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.pattern-card-action:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.pattern-card-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 14px;
  color: rgba(0,0,0,0.2);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

.pattern-card-dismiss:hover {
  color: rgba(0,0,0,0.5);
}

/* Geography reveal */
.pattern-geography {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.pattern-geography.hidden {
  display: none;
}

.pattern-geo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 11px;
  transition: background 0.1s;
  border-radius: 2px;
}

.pattern-geo-row:hover {
  background: rgba(0,0,0,0.04);
}

.pattern-geo-name {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
}

.pattern-geo-count {
  font-family: var(--sans);
  color: var(--ink-faint);
  flex-shrink: 0;
  margin-left: 8px;
}

.pattern-expanded-geo-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 16px;
  margin-bottom: 6px;
}

/* ─── Shared animations ─── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   LAYER B — SHARED CHAPTER VIEW
   ═══════════════════════════════════════════════════════════ */

/* ── Shared view header ── */

.shared-back-btn {
  background: none;
  border: none;
  color: var(--slab-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.shared-back-btn:hover {
  color: var(--slab-text);
  background: rgba(255,255,255,0.08);
}

body.shared-view .scope-indicator {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
body.shared-view .header-spacer { flex: 0; }
body.shared-view .shared-back-btn {
  flex: 0 0 44px;
  min-height: 44px;
  color: var(--chrome-ink);
}
body.shared-view .shared-header-info { min-width: 0; flex: 1; }
body.shared-view .shared-title-row { align-items: center; min-width: 0; }
body.shared-view .shared-chapter-title-header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.shared-view .shared-by-label { min-width: 0; max-width: 220px; }
body.shared-view .shared-by-label .people-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.shared-view .people-save-sender { margin-left: auto; flex-shrink: 0; }
@media (max-width: 1023px) {
  body.shared-view .shared-title-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  body.shared-view .shared-chapter-title-header { max-width: 100%; }
  body.shared-view .shared-by-label { max-width: 100%; }
  body.shared-view .shared-header-info { flex: 1; }
  body.shared-view .shared-superlabel { display: none; }
}
@media (max-width: 700px) {
  body.shared-view .header-bar { height: auto; min-height: 64px; padding: 8px 12px; }
  body.shared-view .header-scope-group { display: none; }
  body.shared-view .scope-indicator { margin-left: 0; gap: 8px; }
  body.shared-view .header-brand { display: none; }
  body.shared-view .people-save-sender { max-width: 76px; font-size: 11px; }
}

.shared-header-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  --shared-header-title: var(--ink-primary);
  --shared-header-muted: var(--ink-secondary);
}

/* Shared chapters use the existing Inbox sheet and chapter controls. */
.shared-library-list { margin: 16px 0; }
.shared-library-list h3, .dv-shared-menu-heading {
  font: 600 12px/1.4 var(--sans); color: var(--chrome-muted);
  letter-spacing: .06em; padding: 8px 0;
}
.dv-shared-menu-heading { padding: 12px 18px 4px; }
.shared-library-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 0; border-bottom: 1px solid var(--yd-tool-border);
}
.shared-library-title {
  display: block; width: 100%; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--chrome-ink);
  font: 600 22px/1.25 var(--serif); text-align: left; cursor: pointer;
  overflow-wrap: anywhere;
}
.shared-library-meta, .shared-library-place, .shared-library-status {
  font: 12px/1.4 var(--sans); color: var(--chrome-muted);
}
.shared-library-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shared-library-actions button { min-height: 44px; }
.shared-library-toolbar {
  margin-left: auto; display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 8px 16px; min-width: 0;
}
.shared-library-menu { position: relative; }
.shared-library-menu summary {
  cursor: pointer; font: 14px/1.4 var(--serif); padding: 12px 8px;
  color: var(--chrome-ink); min-height: 44px;
}
.shared-library-options {
  position: absolute; z-index: 100; right: 0; top: 100%;
  display: flex; flex-direction: column; min-width: 210px; padding: 8px;
  background: var(--chrome-bg); border: 1px solid var(--yd-tool-border);
  border-radius: 8px; box-shadow: 0 8px 24px #0003;
}
.shared-library-options button { min-height: 44px; text-align: left; }
.shared-workspace > .ws-pane-header {
  position: relative; z-index: 5; flex-wrap: wrap; gap: 8px;
  height: auto; min-height: 52px; padding-top: 4px; padding-bottom: 4px;
}
.dv-chapter-menu-row .people-identity { margin-top: 4px; font-size: 12px; }
.dv-chapter-menu-row .people-avatar { width: 26px; height: 26px; flex-basis: 26px; }
@media (max-width: 700px) {
  .shared-library-toolbar { gap: 4px 8px; }
  .shared-library-status { flex-basis: 100%; }
  .shared-library-status:empty { display: none; }
  .shared-library-row .people-identity { max-width: 100%; }
}

[data-theme="dark"] .shared-header-info {
  --shared-header-title: var(--slab-text);
  --shared-header-muted: var(--slab-muted);
}

.shared-superlabel {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-muted);
  font-family: var(--sans);
}

.shared-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.shared-chapter-title-header {
  font-size: 1rem;
  font-weight: 600;
  color: var(--shared-header-title);
  font-family: var(--serif);
}

.shared-by-label {
  font-size: 0.8rem;
  color: var(--shared-header-muted);
  font-family: var(--sans);
  font-style: italic;
}

/* ── Read-only editor ── */

.shared-ws-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 32px 24px;
  background: var(--surface);
  border-radius: 5px;
  box-shadow:
    0 1px 3px rgba(30, 20, 10, 0.06),
    0 4px 16px rgba(30, 20, 10, 0.08);
}
.shared-ws-page .editor-body {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-primary);
}
.shared-readonly {
  cursor: default;
  user-select: text;
}
.shared-readonly::selection {
  background: rgba(184,150,74,0.2);
}

/* ── Left pane placeholder ── */

.shared-left-placeholder {
  padding: 24px 16px;
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-style: italic;
  font-family: var(--serif);
  text-align: center;
  line-height: 1.6;
}

/* ── Collab note form in toolbar ── */

.collab-toolbar-note-form {
  padding: 8px 10px 4px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.collab-toolbar-note-input {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.85rem;
  font-family: var(--sans);
  resize: none;
  background: rgba(255,255,255,0.9);
  color: var(--ink-primary);
}
.collab-toolbar-note-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(184,150,74,0.15);
}
.collab-note-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.collab-note-submit-btn {
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-family: var(--sans);
  cursor: pointer;
  transition: opacity 0.15s;
}
.collab-note-submit-btn:hover {
  opacity: 0.85;
}

/* ── Toolbar expanded state (note form open) ── */

.reaction-toolbar.toolbar-expanded {
  flex-wrap: wrap;
}

/* ── Collab note button in toolbar ── */

.collab-note-btn {
  position: relative;
}

/* ============================================================
   CAPTURE CARDS — Type-aware rendering for Capture App notes
   Photo (polaroid), Video (dark card), Voice (warm card),
   Link (reference card), Standalone (default sticky note)
   ============================================================ */

/* ── Desk-level captures section ── */
.captures-section-label {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  padding: 14px 8px 5px;
}
.captures-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px 16px;
}

/* ── Photo capture card — polaroid thumbnail ── */
/* Polaroid photo — real polaroid: white frame, thick bottom strip, soft drop shadow.
   Shadow is intentionally mild so a stack of captures doesn't bleed into
   the Nearby/Pile header below. Specificity bumped to override the dark-mode
   state-active heavy shadow defined further down the stylesheet. */
.note-card.capture-photo,
[data-theme="dark"] .note-card.capture-photo,
[data-theme="dark"] .note-card.capture-photo.state-active,
[data-theme="dark"] .note-card.capture-photo.state-alive {
  background: #FFFDF9;
  padding: 10px 10px 0;
  border-radius: 2px;
  color: #3a3520;
  font-family: var(--handwritten);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.06),
    0 4px 10px rgba(0,0,0,0.18);
}
.note-card.capture-photo::before { display: none; }
/* Capture photos are pictures, not compact presence-state notes. This also
   covers the old taped photograph after its non-destructive migration. */
.note-card.capture-photo[class*="state-"] {
  max-height: none;
  opacity: 1;
  filter: none;
}
.capture-photo-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: #2a241d;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.05),
    inset 0 6px 12px rgba(0,0,0,0.08);
}
.dv-photo-placeholder-landscape {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 27%, #f6d878 0 7%, transparent 8%),
    linear-gradient(180deg, #8bb8d2 0 50%, #e4ad75 51% 64%, #576c4d 65% 100%);
}
.dv-photo-placeholder-landscape::before,
.dv-photo-placeholder-landscape::after {
  content: '';
  position: absolute;
  bottom: 25%;
  width: 72%;
  height: 54%;
  background: #4c5a50;
  transform: rotate(35deg) skew(-12deg);
}
.dv-photo-placeholder-landscape::before { left: -18%; }
.dv-photo-placeholder-landscape::after {
  right: -24%;
  bottom: 18%;
  background: #394a40;
  transform: rotate(43deg) skew(-9deg);
}
.capture-photo-caption {
  font-family: var(--handwritten);
  font-size: 15px;
  color: #4A3F30;
  min-height: 44px;
  padding: 10px 6px 12px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: inherit;
}

/* Polaroid video — same white frame + soft drop shadow as photo polaroid.
   Dark-mode state variants explicitly listed so they don't inherit the
   heavy state-active shadow that would otherwise bleed into the next tier. */
.note-card.capture-video,
[data-theme="dark"] .note-card.capture-video,
[data-theme="dark"] .note-card.capture-video.state-active,
[data-theme="dark"] .note-card.capture-video.state-alive {
  background: #FFFDF9;
  padding: 10px 10px 0;
  border-radius: 2px;
  color: #3a3520;
  font-family: var(--handwritten);
  overflow: visible;
  position: relative;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.06),
    0 4px 10px rgba(0,0,0,0.18);
}
.note-card.capture-video::before { display: none; }
/* A card may set its real media ratio inline (TikTok and portrait uploads use
   9:16; landscape uploads use 16:9). Older captures keep the 4:3 default. */
.capture-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  line-height: 0;
  background: #2a241d;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.capture-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #1e1a14;
}
/* An uploaded video's Desk object is a poster, not a second player. Native
   WebKit video hit-testing can swallow the parent card's tap and a focused
   pile's horizontal swipe even when the pointer lands on a caption or play
   glyph. The outer .dv-item owns both; real controls appear in the foreground
   viewer. */
.uploaded-video-card { pointer-events: none; }
.capture-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capture-video-play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent rgba(255,255,255,0.92);
  margin-left: 1px;
}
.capture-video-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  color: rgba(255,255,255,0.88);
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.2;
}
.capture-video-caption {
  padding: 10px 6px 12px;
  min-height: 44px;
  font-family: var(--handwritten);
  font-size: 15px;
  color: #4A3F30;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #FFFDF9;
}

/* ── Voice memo card — screams AUDIO ── */
.note-card.capture-voice {
  position: relative;
  /* Cream memo paper with a brass spine — the olive gradient read as a
     washed-out tag next to the reference's fresh paper objects. */
  background: linear-gradient(135deg, #FAF4E6 0%, #F1E7D2 100%);
  color: #3a3218;
  padding: 14px 16px 16px;
  border-left: 4px solid var(--gold);
  border-radius: 3px;
  font-style: normal;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 16px rgba(30,26,18,0.14);
}
.note-card.capture-voice::before { display: none; }

/* Header: mic glyph + label + duration — the part that shouts "audio" */
.capture-voice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.capture-voice-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--gold, #B8964A);
}
.capture-voice-mic svg {
  width: 16px;
  height: 16px;
}
.capture-voice-label {
  flex: 1;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* On the dark capture slab in both themes */
  color: rgba(240, 235, 225, 0.72);
  font-weight: 500;
}
.capture-voice-duration {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(58, 50, 24, 0.7);
}

/* Play row — big circular play button, wide waveform canvas */
.capture-voice-play-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.capture-voice-play {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--gold, #B8964A);
  color: #FFFDF9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.12s ease, background 0.12s ease;
}
.capture-voice-play:hover { transform: scale(1.06); background: #A37F38; }
.capture-voice-play.playing { background: #8B6B3A; }
.capture-voice-play svg { width: 16px; height: 16px; margin-left: 2px; }
.capture-voice-play.playing svg { margin-left: 0; }

.capture-voice-bars {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
}
.capture-voice-bars span {
  flex: 1 1 auto;
  height: var(--bar-h, 30%);
  min-height: 4px;
  background: rgba(58, 50, 24, 0.35);
  border-radius: 1.5px;
  transform-origin: center;
  /* Idle breath — subtle wave across the bars, staggered via inline delay */
  animation: voice-bar-breath 1.8s ease-in-out infinite;
}
.capture-voice-bars span.played {
  background: var(--gold, #B8964A);
}
/* While playing, height is driven by AnalyserNode — suspend the idle animation */
.capture-voice-bars.playing span {
  animation: none;
  transform: scaleY(1);
  transition: height 80ms linear;
}
@keyframes voice-bar-breath {
  0%, 100% { transform: scaleY(0.78); }
  50%      { transform: scaleY(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .capture-voice-bars span { animation: none; transform: scaleY(1); }
}

.capture-voice-text {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(58, 50, 24, 0.18);
  font-family: var(--handwritten);
  font-size: 14px;
  line-height: 1.4;
  color: #3a3218;
}
@media (prefers-reduced-motion: reduce) {
  .capture-voice-bars span { transition: none; }
  .capture-voice-play { transition: none; }
  .capture-voice-play:hover { transform: none; }
}

/* ── Link capture card — reference card ── */
.note-card.capture-link {
  position: relative;
}
.capture-link-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.capture-link-thumb-box {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  position: relative;
}
.capture-link-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.92);
  pointer-events: none;
}
.capture-link-play svg {
  width: 10px;
  height: 10px;
}
.capture-link-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.capture-link-thumb-fallback {
  background: rgba(184,150,74,0.14);
  color: var(--gold, #B8964A);
}
.capture-link-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* allow flex child to shrink for truncation */
}
.capture-link-title {
  font-family: var(--serif, 'EB Garamond', Georgia, serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
  word-break: break-word;
}
.capture-link-domain {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-style: italic;
  font-size: 10px;
  color: var(--ink-faint, #7A6F5A);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.capture-link-excerpt {
  font-family: var(--serif, 'EB Garamond', Georgia, serif);
  font-style: italic;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-light, #4A3F30);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Expanded capture views ── */

/* Photo expanded — polaroid */
.note-expanded.capture-photo-expanded {
  background: #F7F2EA;
  color: #3a3520;
  padding: 14px 14px 28px;
  border-radius: 1px;
  max-width: 480px;
}
.note-expanded.capture-photo-expanded::before { display: none; }
.capture-expanded-img {
  width: 100%;
  display: block;
  border-radius: 0;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
  cursor: zoom-in;
}
.capture-expanded-img.zoomed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  z-index: 2000;
  background: rgba(0,0,0,0.9);
  cursor: zoom-out;
  border-radius: 0;
  box-shadow: none;
}
.capture-expanded-caption {
  font-family: var(--handwritten);
  font-size: 18px;
  margin-top: 12px;
  padding: 0 4px;
  line-height: 1.4;
}

/* Video expanded */
.note-expanded.capture-video-expanded {
  background: #2a2520;
  color: #F0EBE1;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  max-width: 540px;
}
.note-expanded.capture-video-expanded::before { display: none; }
.capture-expanded-video {
  width: 100%;
  max-height: 50vh;
  display: block;
  background: #000;
}
.capture-expanded-video-body {
  padding: 16px 20px 20px;
}

/* Voice expanded */
.note-expanded.capture-voice-expanded {
  background: linear-gradient(135deg, #D4C4A0 0%, #C8B890 100%);
  color: #3a3218;
  border-left: 4px solid var(--gold);
  border-radius: 3px;
  padding: 18px 20px 20px;
}
.note-expanded.capture-voice-expanded::before { display: none; }
.capture-expanded-voice-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.capture-expanded-voice-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--gold, #B8964A);
}
.capture-expanded-voice-mic svg { width: 20px; height: 20px; }
.capture-expanded-voice-label {
  flex: 1;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(58, 50, 24, 0.8);
  font-weight: 500;
  margin-bottom: 0;
  opacity: 1;
  font-style: normal;
}
.capture-expanded-voice-duration {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  color: rgba(58, 50, 24, 0.75);
}
.capture-expanded-voice-audio {
  width: 100%;
  margin-bottom: 14px;
}
.capture-expanded-voice-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 54px;
  margin-bottom: 14px;
}
.capture-expanded-voice-bars span {
  flex: 1 1 auto;
  height: var(--bar-h, 30%);
  min-height: 4px;
  background: rgba(58, 50, 24, 0.35);
  border-radius: 1.5px;
  transform-origin: center;
  animation: voice-bar-breath 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .capture-expanded-voice-bars span { animation: none; transform: scaleY(1); }
}
.capture-expanded-voice-text {
  font-family: var(--handwritten);
  font-size: 17px;
  line-height: 1.5;
}

/* Link expanded */
.capture-expanded-link-url {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  color: inherit;
  opacity: 0.6;
  text-decoration: none;
  word-break: break-all;
  margin-bottom: 12px;
}
.capture-expanded-link-url:hover {
  opacity: 0.9;
  text-decoration: underline;
}

/* ── Move-to-chapter select ── */
.note-move-chapter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.1);
}
.note-move-chapter-label {
  font-family: var(--sans);
  font-size: 10px;
  opacity: 0.5;
  white-space: nowrap;
}
.note-move-chapter-select {
  flex: 1;
  padding: 4px 8px;
  font-family: var(--sans);
  font-size: 11px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  background: rgba(255,255,255,0.3);
  color: inherit;
  cursor: pointer;
}
.note-move-chapter-select:focus {
  outline: none;
  border-color: var(--gold);
}

/* ============================================================
   CONFIRMATION DIALOG — styled modal for destructive actions
   ============================================================ */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(20, 16, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

.confirm-card {
  width: 380px;
  max-width: 90vw;
  padding: 28px 32px 24px;
  background: #FFFCF7;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
  animation: synthOpen 0.2s ease;
}

.confirm-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.confirm-message {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink-light);
  line-height: 1.6;
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.confirm-cancel {
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.confirm-cancel:hover {
  background: rgba(0,0,0,0.04);
  color: var(--ink);
}

.confirm-delete {
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: #FFFCF7;
  background: #A0452D;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.confirm-delete:hover {
  background: #8B3A25;
}
.confirm-delete:active {
  transform: scale(0.97);
  transition: transform 0.08s;
}

/* Source/chapter delete × button — visible on hover */
.source-delete-btn,
.chapter-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: rgba(42, 37, 32, 0.3);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  z-index: 2;
}
[data-theme="dark"] .source-delete-btn {
  color: rgba(240, 235, 225, 0.25);
}
.source-list-item {
  position: relative;
}
.source-list-item:hover .source-delete-btn {
  opacity: 1;
}
.source-delete-btn:hover {
  color: rgba(180, 60, 60, 0.8);
  background: rgba(180, 60, 60, 0.12);
}

/* Source rename button — visible on hover */
.source-rename-btn {
  position: absolute;
  top: 8px;
  right: 30px;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: rgba(42, 37, 32, 0.3);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  z-index: 2;
}
[data-theme="dark"] .source-rename-btn {
  color: rgba(240, 235, 225, 0.25);
}
.source-list-item:hover .source-rename-btn {
  opacity: 1;
}
.source-rename-btn:hover {
  color: var(--gold);
  background: rgba(184, 150, 74, 0.12);
}

/* Inline rename input */
.source-title-input {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--gold-muted);
  border-radius: 3px;
  padding: 2px 6px;
  width: 100%;
  outline: none;
}
.source-title-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(184, 150, 74, 0.15);
}
[data-theme="dark"] .source-title-input {
  background: var(--slab-light);
  color: var(--slab-text);
  border-color: var(--gold-muted);
}
[data-theme="dark"] .source-rename-btn {
  color: rgba(240, 235, 225, 0.20);
}
[data-theme="dark"] .source-rename-btn:hover {
  color: var(--gold-warm);
}

/* Chapter row delete — darker background context */
.ws-chapter-row {
  position: relative;
}
.ws-chapter-row:hover .chapter-delete-btn {
  opacity: 1;
}
.chapter-delete-btn:hover {
  color: rgba(180, 60, 60, 0.8);
  background: rgba(180, 60, 60, 0.12);
}

/* Dark theme overrides for confirmation dialog */
[data-theme="dark"] .confirm-overlay {
  background: rgba(10, 8, 6, 0.70);
}
[data-theme="dark"] .confirm-card {
  box-shadow: 0 16px 64px rgba(0,0,0,0.50), 0 4px 16px rgba(0,0,0,0.30);
}

/* ============================================================
   TACTILE BUTTON FEEDBACK
   Every interactive element acknowledges the user's action.
   Buttons depress. Actions confirm. The user feels it.
   ============================================================ */

/* ── Universal :active press state ────────────────────────── */

/* Toolbar buttons — physical press */
.ws-tool:active {
  transform: scale(0.93);
  transition: transform 0.08s;
}

/* Slab buttons — login, chapter rows */
.login-btn:active,
.share-email-btn:active {
  transform: scale(0.97) translateY(1px);
  transition: transform 0.08s;
}

/* Desk cards — press into desk */
.desk-card:active {
  transform: translateY(0px) scale(0.99);
  transition: transform 0.08s;
}

/* Source list items — press into shelf */
.source-list-item:active {
  background: rgba(255,255,255,0.50);
  transition: background 0.08s;
}
[data-theme="dark"] .source-list-item:active {
  background: rgba(0,0,0,0.22);
}

/* Chapter list items — brief highlight */
.chapter-list-item:active {
  background: var(--gold-faint);
  transition: background 0.08s;
}

/* Close/dismiss buttons — quick press */
.share-modal-close:active,
.timeline-close:active,
.note-expanded-trash:active {
  transform: scale(0.88);
  transition: transform 0.08s;
}

/* Pane expand buttons — press */
.pane-expand-btn:active {
  transform: scale(0.85);
  opacity: 1;
  transition: transform 0.08s;
}

/* Pagination arrows — press */
.library-pager-btn:active:not(:disabled) {
  transform: scale(0.90);
  transition: transform 0.08s;
}

/* Note action buttons — press in expanded note */
.note-action-btn:active {
  transform: scale(0.94) translateY(0px);
  transition: transform 0.08s;
}

/* Left pane tabs — press */
.left-tab:active {
  transform: scale(0.96);
  transition: transform 0.08s;
}

/* Share chapter button — press */
.share-chapter-btn:active {
  transform: scale(0.88);
  transition: transform 0.08s;
}

/* Header brand — press */
.header-brand:active {
  transform: scale(0.97);
  transition: transform 0.08s;
}

/* Theme toggle in dropdown — press */
.theme-toggle-btn:active {
  background: rgba(0, 0, 0, 0.08);
  transition: background 0.08s;
}


/* Browse collection button */
.library-browse-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s;
}

/* ── Save confirmation pulse ──────────────────────────────── */

@keyframes savePulse {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.editor-save-indicator.save-pulse {
  animation: savePulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--react-blue);
}

/* ── Send-to-writing departure ────────────────────────────── */

@keyframes noteDeparture {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.6; transform: scale(0.95) translateX(-8px); }
  100% { opacity: 0; transform: scale(0.9) translateX(-20px); }
}

.note-departing {
  animation: noteDeparture 0.35s ease forwards;
  pointer-events: none;
}

/* ── Toolbar styles dropdown reveal ───────────────────────── */

@keyframes guidanceReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   DARK WALNUT OVERRIDES
   Grouped by surface. Each group verified independently.
   ============================================================ */

/* ── Group 1: Pane frames ─────────────────────────────────── */

/* Pane inset shadows — subtle edge definition between lighter rails and dark center */
[data-theme="dark"] .pane-left {
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] .pane-right {
  /* Right rail slightly lifted from left for more surface identity */
  background: #5C5249;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10);
}

/* Center pane — deeper shadows on dark */
[data-theme="dark"] .pane-center {
  box-shadow:
    -6px 0 16px rgba(0, 0, 0, 0.30),
    6px 0 16px rgba(0, 0, 0, 0.30),
    -2px 0 4px rgba(0, 0, 0, 0.15),
    2px 0 4px rgba(0, 0, 0, 0.15);
}

/* Pane header — text and background flip for dark frame.
   Lighter overlay since rails are now warm taupe, not dark walnut. */
[data-theme="dark"] .pane-header {
  background: rgba(0, 0, 0, 0.10);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .pane-header h2 {
  color: #DCD4C6;
}

/* Left pane tabs — text flip */
[data-theme="dark"] .left-tab {
  color: var(--ink-faint);
}
[data-theme="dark"] .left-tab:hover {
  color: #B0A898;
}
[data-theme="dark"] .left-tab.active {
  color: #DCD4C6;
  border-bottom-color: var(--gold);
}

/* Library search input — on warm taupe rail */
[data-theme="dark"] .library-search {
  border-bottom-color: rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] .library-search-input {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.15);
  color: #F0EBE1;
  box-shadow: none;
}
[data-theme="dark"] .library-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-faint);
}
[data-theme="dark"] .library-search-input::placeholder {
  color: #DCD4C6;
  opacity: 0.6;
  font-style: normal;
}

/* Library upload area — on warm taupe rail */
[data-theme="dark"] .library-upload-area {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .library-upload-area:hover {
  background: rgba(0, 0, 0, 0.10);
  border-color: var(--gold-muted);
}
[data-theme="dark"] .library-upload-label {
  color: #F0EBE1;
}
[data-theme="dark"] .library-upload-hint {
  color: #F0EBE1;
  opacity: 0.6;
}

/* Search results — on warm taupe rail */
[data-theme="dark"] .search-result-item {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .search-result-item:hover {
  background: rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .search-result-item .result-source-title {
  color: #DCD4C6;
}
[data-theme="dark"] .search-result-item .result-section {
  color: #B0A898;
}
[data-theme="dark"] .search-result-item .result-preview {
  color: #B0A898;
}

/* Search active bar — on warm taupe rail */
[data-theme="dark"] .search-active-bar {
  border-bottom-color: rgba(0, 0, 0, 0.10);
}

/* Source count text */
[data-theme="dark"] .library-source-count {
  color: var(--ink-faint);
}
[data-theme="dark"] .library-section-header {
  color: var(--ink-faint);
}

/* Library browse button — on warm taupe rail */
[data-theme="dark"] .library-browse-btn {
  border-color: rgba(0, 0, 0, 0.12);
  color: #F0EBE1;
}
[data-theme="dark"] .library-browse-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: var(--gold-muted);
  color: #DCD4C6;
}

/* Chapter list items on dark frame */
[data-theme="dark"] .chapter-list-item {
  color: #DCD4C6;
}
[data-theme="dark"] .chapter-list-item .chapter-meta {
  color: var(--ink-faint);
}

/* Expanded reader background — slightly deeper than rail for immersive reading */
[data-theme="dark"] .panes.expand-left .pane-left {
  background: #3A3128;
}

/* Scrollbar on warm taupe panes */
[data-theme="dark"] .pane-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.20);
}

/* ── Group 2: Workspace chrome ────────────────────────────── */

/* Desks landing — text on dark desk surface */
[data-theme="dark"] .desks-landing-title {
  color: #DCD4C6;
}
[data-theme="dark"] .desks-landing-brand {
  color: #DCD4C6;
}
[data-theme="dark"] .landing-user-btn {
  color: var(--ink-faint);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .landing-user-btn:hover {
  color: #B0A898;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Desk cards — paper cards on dark desk surface */
[data-theme="dark"] .desk-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
[data-theme="dark"] .desk-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
}

/* New desk button */
[data-theme="dark"] .desks-landing-new {
  color: var(--ink-faint);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .desks-landing-new:hover {
  color: #B0A898;
  border-color: var(--gold-muted);
  background: rgba(255, 255, 255, 0.04);
}

/* User dropdown — on dark context */
[data-theme="dark"] .user-dropdown {
  background: var(--slab);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] .user-dropdown-item {
  color: #DCD4C6;
}
[data-theme="dark"] .user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Share modal — paper object stays white, deeper shadows on dark */
[data-theme="dark"] .share-modal {
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.50), 0 4px 16px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] .share-modal-overlay {
  background: rgba(10, 8, 6, 0.70);
}

/* Selection share panel — paper object, deeper shadow */
[data-theme="dark"] .selection-share-panel {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
}

/* Note expanded overlay — darker backdrop */
[data-theme="dark"] .note-expanded-overlay {
  background: rgba(10, 8, 6, 0.65);
}
/* Media describe overlay — already dark, just slightly adjust */
[data-theme="dark"] .media-describe-overlay {
  background: rgba(10, 8, 6, 0.94);
}

/* Workspace page object — deeper shadow on dark surface */
[data-theme="dark"] .workspace {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 16px 48px rgba(0, 0, 0, 0.12);
}

/* Reader surface — espresso paper in dark, matching the manuscript.
   The reader hardcodes light-paper hexes, so without these overrides it
   stayed a glaring white column beside the dark page. */
[data-theme="dark"] .reader-header {
  background: var(--paper);
  border-bottom-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .reader-header h1 {
  color: var(--ink);
}
[data-theme="dark"] .reader-content {
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .reader-chunk h1,
[data-theme="dark"] .reader-chunk h2,
[data-theme="dark"] .reader-chunk h3 {
  color: var(--ink);
}
[data-theme="dark"] .reader-chunk:hover {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .panes.expand-left .reader-header {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .panes.expand-left .reader-content {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Photo/media frames on dark — deeper shadow for polaroid effect */
[data-theme="dark"] .reader-photo-frame,
[data-theme="dark"] .reader-media-frame {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* ── Group 3: Toolbar and writing surfaces ────────────────── */

/* Elements on the white page that use --desk-tan-light for hover:
   In dark mode desk-tan-light is dark walnut — wrong on white paper.
   Override to keep them light. */
[data-theme="dark"] .ws-export-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .ws-timeline-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Chapter content placeholder on white page — uses --desk-tan-light */
[data-theme="dark"] .chapter-surface .chapter-content-placeholder {
  background: rgba(0, 0, 0, 0.03);
}

/* ── Dark theme: Toolbar ──────────────────────────── */
/* Dark walnut toolbar — buttons sit on cream manuscript surface,
   so they keep dark ink colors. The key fix: undo the original
   overrides that switched them to invisible light text. */
[data-theme="dark"] .ws-tool {
  color: #4A4038;
  background: transparent;
  border-color: transparent;
}
[data-theme="dark"] .ws-tool:hover {
  background: rgba(26, 24, 22, 0.08);
  color: #1E1A12;
  border-color: rgba(26, 24, 22, 0.08);
}
[data-theme="dark"] .ws-tool.active {
  background: rgba(26, 24, 22, 0.12);
  color: #1E1A12;
}
[data-theme="dark"] .ws-tool:focus-visible {
  outline: 2px solid var(--gold-muted);
  outline-offset: 1px;
}
[data-theme="dark"] .ws-tool[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
[data-theme="dark"] .ws-tool-sep {
  background: var(--border);
}
[data-theme="dark"] .toolbar-styles-btn {
  color: #4A4038;
  background: transparent;
  border-color: transparent;
}
[data-theme="dark"] .toolbar-styles-btn:hover {
  background: rgba(26, 24, 22, 0.08);
  color: #1E1A12;
  border-color: rgba(26, 24, 22, 0.08);
}
[data-theme="dark"] .ws-word-count {
  color: var(--ink-faint);
}

/* Styles dropdown — already dark slab, go deeper */
[data-theme="dark"] .toolbar-styles-dropdown {
  background: #1A1410;
}
[data-theme="dark"] .toolbar-highlight-dropdown,
[data-theme="dark"] .toolbar-spacing-dropdown {
  background: #2a2520;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
}
[data-theme="dark"] .toolbar-size-input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: var(--slab-text);
}
[data-theme="dark"] .toolbar-size-toggle {
  border-color: rgba(255,255,255,0.12);
  color: var(--slab-text);
}
[data-theme="dark"] .editor-body .code-block {
  background: #0D0B08;
  color: #D4CFC6;
}
[data-theme="dark"] .editor-body .callout-info {
  background: rgba(44, 95, 124, 0.15);
}
[data-theme="dark"] .editor-body .callout-warning {
  background: rgba(184, 134, 11, 0.15);
}
[data-theme="dark"] .editor-body .callout-tip {
  background: rgba(58, 95, 58, 0.15);
}
[data-theme="dark"] .editor-body .callout-note {
  background: rgba(107, 107, 107, 0.15);
}
[data-theme="dark"] .editor-body .checklist-item input[type="checkbox"] {
  accent-color: var(--gold, #B8964A);
}
[data-theme="dark"] .snapshot-panel {
  background: #1A1410;
  border-color: rgba(255,255,255,0.08);
  box-shadow: -4px 0 24px rgba(0,0,0,0.35);
}
[data-theme="dark"] .snapshot-save-btn {
  background: rgba(184, 150, 74, 0.15);
  border-color: rgba(184, 150, 74, 0.25);
  color: var(--slab-text);
}
[data-theme="dark"] .snapshot-item:hover {
  background: rgba(255,255,255,0.03);
}
[data-theme="dark"] .slash-menu {
  background: #2a2520;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
[data-theme="dark"] .slash-menu-item {
  color: var(--slab-text);
}
[data-theme="dark"] .slash-menu-item.active,
[data-theme="dark"] .slash-menu-item:hover {
  background: rgba(184, 150, 74, 0.18);
}
[data-theme="dark"] .slash-menu-icon {
  background: rgba(255,255,255,0.08);
  color: var(--slab-text);
}
[data-theme="dark"] .editor-body .page-break {
  color: var(--ink-faint);
}
[data-theme="dark"] .editor-body .page-break::before,
[data-theme="dark"] .editor-body .page-break::after {
  background: rgba(255,255,255,0.10);
}
[data-theme="dark"] .toolbar-table-picker {
  background: #2a2520;
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .toolbar-table-cell {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .editor-body .editor-table td,
[data-theme="dark"] .editor-body .editor-table th {
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .editor-body .editor-table tr:first-child td {
  background: rgba(184, 150, 74, 0.12);
}

/* ── Dark theme: Find & Replace Bar ──────────────── */
[data-theme="dark"] .find-bar {
  background: rgba(42, 31, 22, 0.97);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .find-bar-input {
  background: rgba(26, 20, 16, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--desk-cream);
}
[data-theme="dark"] .find-bar-input:focus {
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .find-bar-input::placeholder {
  color: var(--ink-faint);
}
[data-theme="dark"] .find-bar-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--ink-faint);
}
[data-theme="dark"] .find-bar-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--desk-cream);
}
[data-theme="dark"] .find-bar-replace-row {
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] mark.find-match {
  background: rgba(200, 184, 120, 0.25);
}
[data-theme="dark"] mark.find-match-current {
  background: rgba(200, 184, 120, 0.5);
}

/* Editor drop zone — use a warm tint instead of cream on dark */
[data-theme="dark"] .editor-body.drop-active {
  background: rgba(184, 150, 74, 0.06);
}

/* First-desk input/textarea dark overrides consolidated above (line ~9442) */

/* ── Group 5: Capture cards and desk assistant ────────────── */

/* Video capture card — already dark, go deeper */
[data-theme="dark"] .note-card.capture-video {
  background: #1A1410;
}
[data-theme="dark"] .capture-video-thumb {
  background: #0F0C09;
}
[data-theme="dark"] .note-expanded.capture-video-expanded {
  background: #1A1410;
}
[data-theme="dark"] .capture-expanded-video {
  background: #000;
}

/* Captures section label on dark frame */
[data-theme="dark"] .captures-section-label {
  color: var(--ink-faint);
}

/* Notes empty state on dark frame */
[data-theme="dark"] .notes-empty {
  color: #F0EBE1;
}
[data-theme="dark"] .notes-empty-hint {
  color: #F0EBE1;
  opacity: 0.6;
}


/* Library add source button — on warm taupe rail */
[data-theme="dark"] .library-add-source-btn {
  color: var(--gold-muted);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .library-add-source-btn:hover {
  border-color: var(--gold-muted);
}

/* Pane resize handle — dark theme */
[data-theme="dark"] .pane-resize-handle:hover,
[data-theme="dark"] .pane-resize-handle.dragging {
  background: rgba(184,150,74,0.15);
}
[data-theme="dark"] .pane-resize-handle::after {
  background: rgba(0,0,0,0.20);
}


/* Move-to-chapter select on note cards */
[data-theme="dark"] .note-move-chapter-select {
  background: rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 0, 0, 0.12);
}

/* Collab toolbar note form input — on warm taupe rail */
[data-theme="dark"] .collab-toolbar-note-input {
  background: rgba(0, 0, 0, 0.10);
  color: #DCD4C6;
  border-color: rgba(0, 0, 0, 0.12);
}

/* ── Group 6: Timeline panel ──────────────────────────────── */

/* Timeline panel — chrome surface, matches warm taupe rail level */
[data-theme="dark"] .timeline-panel {
  background: var(--frame);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .timeline-header h3 {
  color: #DCD4C6;
}
[data-theme="dark"] .timeline-close {
  color: var(--ink-faint);
}
[data-theme="dark"] .timeline-close:hover {
  color: #DCD4C6;
}
[data-theme="dark"] .timeline-entry {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .timeline-entry:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .timeline-time {
  color: #B0A898;
}
[data-theme="dark"] .timeline-brief {
  color: #B0A898;
}
[data-theme="dark"] .timeline-loading,
[data-theme="dark"] .timeline-empty {
  color: var(--ink-faint);
}
/* Timeline toast — already on --ink/--paper, auto-adapts */

/* Shared chapter view — text on dark header context */
[data-theme="dark"] .shared-left-placeholder {
  color: var(--ink-faint);
}
/* ── Group 7: Wood grain texture ──────────────────────────── */

/* ── Group 8: Cross-fade transition on toggle ─────────────── */

/* Gentle 0.3s cross-fade on key surfaces when toggling theme */
body,
.pane-left,
.pane-right,
.pane-center,
.workspace,
.header-bar,
.pane-header,
.timeline-panel {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark walnut grain — reduced on broad surfaces to avoid "wood wallpaper".
   Keeps the walnut character but lets surfaces breathe. */
[data-theme="dark"] body::before {
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.25' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* ============================================================
   CITATION EXPORT — Academic citation overlay
   ============================================================ */

.reader-cite-btn {
  font-family: var(--sans);
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.15s ease;
}
.reader-cite-btn:hover {
  border-color: var(--gold-muted);
  color: var(--ink);
}

.citation-export-card {
  background: var(--desk-cream);
  border-radius: 8px;
  padding: 28px 32px;
  max-width: 560px;
  width: 90%;
  position: relative;
  box-shadow: var(--shadow-heavy);
}
.citation-export-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
}
.citation-export-source {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: 20px;
}
.citation-export-close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: none;
  background: none;
  font-size: 20px;
  color: var(--ink-faint);
  cursor: pointer;
}
.citation-export-loading {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-faint);
  font-style: italic;
  padding: 20px 0;
}
.citation-format-section {
  margin-bottom: 18px;
  position: relative;
}
.citation-format-label {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-muted);
  margin-bottom: 4px;
}
.citation-format-text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  padding: 8px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 3px;
  border-left: 2px solid var(--gold-muted);
  user-select: all;
}
.citation-copy-btn {
  font-family: var(--sans);
  font-size: 11px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.15s ease;
}
.citation-copy-btn:hover {
  border-color: var(--gold-muted);
  color: var(--ink);
}

/* Dark walnut */
[data-theme="dark"] .citation-export-card {
  background: var(--slab-light);
}
[data-theme="dark"] .citation-format-text {
  background: rgba(255,255,255,0.04);
  color: var(--slab-text);
}
[data-theme="dark"] .reader-cite-btn {
  color: var(--ink-faint);
  border-color: var(--border);
}
[data-theme="dark"] .reader-cite-btn:hover {
  color: var(--slab-text);
  border-color: var(--gold-muted);
}


/* ============================================================
   MOODBOARD — Visual Desk Canvas
   Spatial image surface. Same material world.
   Polaroid-style images, Caveat captions, free placement.
   ============================================================ */

/* ── Canvas container ── */
.moodboard-canvas {
  position: relative;
  width: 100%;
  min-height: 600px;
  height: calc(100vh - 200px);
  overflow: auto;
  background: var(--surface);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.moodboard-board {
  position: relative;
  width: 2400px;
  height: 1600px;
  min-width: 100%;
  min-height: 100%;
}

/* Drop zone active state */
.moodboard-drop-active {
  background: rgba(184, 150, 74, 0.06);
  border-color: var(--gold-muted);
  box-shadow: inset 0 0 30px rgba(184, 150, 74, 0.08);
}

/* ── Empty state hint — positioned inside canvas viewport ── */
.moodboard-canvas > .moodboard-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ink-faint);
  pointer-events: none;
  width: max-content;
  max-width: 80%;
  z-index: 2;
}
.moodboard-hint-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.moodboard-hint-text {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
}

/* ── Visual toolbar (replaces writing toolbar for Visual Desk) ── */
.ws-visual-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.vtool {
  font-family: var(--sans);
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.vtool:hover {
  background: var(--gold-faint);
  border-color: var(--border);
  color: var(--ink);
}
.vtool.active {
  background: var(--gold-faint);
  border-color: var(--gold-muted);
  color: var(--ink);
}
.vtool-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}
.vtool-icon {
  font-size: 14px;
}

[data-theme="dark"] .ws-visual-toolbar {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .vtool {
  color: var(--ink-faint);
}
[data-theme="dark"] .vtool:hover {
  background: rgba(184, 150, 74, 0.08);
  color: var(--slab-text);
}
[data-theme="dark"] .vtool.active {
  background: rgba(184, 150, 74, 0.12);
  border-color: var(--gold-muted);
  color: var(--slab-text);
}

/* ── Image on canvas — polaroid style ── */
.moodboard-image {
  position: absolute;
  background: #F7F2EA;
  padding: 8px 8px 40px;
  border-radius: 1px;
  box-shadow:
    1px 2px 6px rgba(0,0,0,0.15),
    2px 4px 12px rgba(0,0,0,0.08);
  cursor: grab;
  transition: box-shadow 0.25s ease;
  z-index: 1;
  user-select: none;
}
.moodboard-image:hover {
  box-shadow:
    2px 4px 12px rgba(0,0,0,0.2),
    4px 8px 24px rgba(0,0,0,0.12);
  z-index: 10;
}
.moodboard-image-dragging {
  cursor: grabbing;
  box-shadow:
    4px 8px 20px rgba(0,0,0,0.25),
    8px 16px 40px rgba(0,0,0,0.15);
  z-index: 100;
  opacity: 0.92;
}
.moodboard-image-resizing {
  transition: none;
}

.moodboard-image-photo {
  width: 100%;
  display: block;
  border-radius: 0;
  object-fit: cover;
  pointer-events: auto;
}

/* ── Caption ── */
.moodboard-image-caption {
  font-family: var(--handwritten);
  font-size: 14px;
  color: #4A3F30;
  margin-top: 6px;
  padding: 2px 4px;
  min-height: 20px;
  line-height: 1.35;
  outline: none;
  border: none;
  background: transparent;
  cursor: text;
}
.moodboard-image-caption:empty::before {
  content: attr(data-placeholder);
  color: rgba(74, 63, 48, 0.4);
  font-style: italic;
}
.moodboard-image-caption:focus {
  background: rgba(0,0,0,0.03);
  border-radius: 2px;
}

/* ── Love button ── */
.moodboard-love-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  font-size: 14px;
  color: rgba(0,0,0,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 5;
}
.moodboard-image:hover .moodboard-love-btn {
  opacity: 1;
}
.moodboard-love-btn.loved {
  opacity: 1;
  color: #c44;
}
.moodboard-love-btn:hover {
  color: #c44;
  transform: scale(1.1);
}

/* ── Delete button on canvas items ── */
.moodboard-delete-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(180,60,60,0.85);
  border-radius: 50%;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
  line-height: 1;
  padding: 0;
}
.moodboard-image:hover .moodboard-delete-btn {
  opacity: 0.7;
}
.moodboard-image:focus-within .moodboard-delete-btn,
.moodboard-grid-card .moodboard-delete-btn { opacity: 1; }
.moodboard-delete-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.moodboard-grid-card .moodboard-delete-btn { width: 32px; height: 32px; font-size: 20px; }
@media (any-pointer: coarse) {
  .moodboard-image .moodboard-delete-btn { opacity: 1; width: 44px; height: 44px; font-size: 22px; }
  .moodboard-grid-card .moodboard-delete-btn { width: 44px; height: 44px; }
}
.ws-visual-toolbar .vtool:disabled { opacity: .55; cursor: default; }
.moodboard-delete-btn:hover {
  opacity: 1;
  transform: scale(1.15);
  background: rgba(200,50,50,0.95);
}

/* ── Resize handle ── */
.moodboard-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.moodboard-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(0,0,0,0.2);
  border-bottom: 2px solid rgba(0,0,0,0.2);
}
.moodboard-image:hover .moodboard-resize-handle {
  opacity: 1;
}

/* ── Moodboard grid view ── */
.moodboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
  max-height: 100%;
}
.moodboard-grid-card {
  background: #F7F2EA;
  padding: 8px 8px 36px;
  border-radius: 1px;
  box-shadow:
    1px 2px 6px rgba(0,0,0,0.12),
    2px 4px 10px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.moodboard-grid-card:hover {
  box-shadow:
    2px 4px 12px rgba(0,0,0,0.2),
    4px 8px 24px rgba(0,0,0,0.12);
}
.moodboard-grid-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.moodboard-grid-caption {
  font-family: var(--handwritten);
  font-size: 14px;
  color: #4A3F30;
  margin-top: 6px;
  padding: 2px 4px;
  line-height: 1.3;
}
.moodboard-grid-love {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  font-size: 12px;
  color: rgba(0,0,0,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.moodboard-grid-card:hover .moodboard-grid-love { opacity: 1; }
.moodboard-grid-love.loved { opacity: 1; color: #c44; }
.moodboard-grid-thread-badge {
  position: absolute;
  bottom: 38px;
  left: 8px;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--gold-muted);
  background: rgba(255,255,255,0.8);
  padding: 1px 5px;
  border-radius: 2px;
}

/* Grid presence states */
.moodboard-grid-card.state-active {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.18),
    0 8px 22px rgba(0,0,0,0.14),
    0 0 12px rgba(184,150,74,0.15);
  border: 2px solid var(--gold-muted);
  padding: 6px 6px 34px;
  transform: scale(1.02);
}
.moodboard-grid-card.state-alive {
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.15),
    0 6px 16px rgba(0,0,0,0.10),
    0 0 0 1px rgba(184,150,74,0.06);
}
.moodboard-grid-card.state-warm { opacity: 0.85; }
.moodboard-grid-card.state-dormant {
  opacity: 0.55;
  filter: saturate(0.7) brightness(0.92);
  transform: scale(0.97);
}

/* Dark theme grid */
[data-theme="dark"] .moodboard-grid-card {
  background: #3D3328;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.3), 2px 4px 12px rgba(0,0,0,0.2);
}
[data-theme="dark"] .moodboard-grid-caption { color: var(--slab-text); }
[data-theme="dark"] .moodboard-grid-love {
  background: rgba(0,0,0,0.5);
  color: rgba(240,235,225,0.3);
}
[data-theme="dark"] .moodboard-grid-love.loved { color: #e06070; }
[data-theme="dark"] .moodboard-grid-thread-badge {
  background: rgba(0,0,0,0.4);
}

/* ── Cost field in expanded note ── */
.moodboard-cost-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.moodboard-cost-label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.moodboard-cost-input {
  font-family: var(--sans);
  font-size: 14px;
  width: 100px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  outline: none;
}
.moodboard-cost-input:focus {
  border-color: var(--gold-muted);
}
.moodboard-cost-input::placeholder {
  color: var(--ink-faint);
}

/* ── Cost summary bar ── */
.moodboard-cost-summary {
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  border-top: 1px solid var(--border);
  text-align: center;
  background: var(--surface);
}
.moodboard-cost-summary strong {
  color: var(--ink);
}
.moodboard-cost-link {
  color: var(--gold);
  cursor: pointer;
  font-size: 12px;
}
.moodboard-cost-link:hover {
  text-decoration: underline;
}
[data-theme="dark"] .moodboard-cost-summary {
  background: var(--surface);
}
[data-theme="dark"] .moodboard-cost-summary strong {
  color: var(--slab-text);
}

/* ── Color palette swatches ── */
.moodboard-swatches {
  display: flex;
  gap: 3px;
  padding: 4px 4px 0;
  position: absolute;
  bottom: 10px;
  left: 8px;
}
.moodboard-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
[data-theme="dark"] .moodboard-swatch {
  border-color: rgba(255,255,255,0.15);
}

/* ── Canvas image highlight (from wall click-to-scroll) ── */
.moodboard-image-highlight {
  box-shadow:
    0 0 0 3px var(--gold-muted),
    0 0 20px rgba(184, 150, 74, 0.3) !important;
  z-index: 50 !important;
  transition: box-shadow 0.3s ease;
}

/* ── Thread mode cursor ── */
.moodboard-canvas.thread-mode {
  cursor: crosshair;
}
.moodboard-canvas.thread-mode .moodboard-image {
  cursor: crosshair;
}

/* ── Thread-selected image ── */
.moodboard-image-thread-selected {
  box-shadow:
    0 0 0 2px var(--gold-muted),
    0 0 12px rgba(184, 150, 74, 0.25) !important;
  z-index: 20 !important;
}

/* ── Thread SVG lines ── */
.thread-overlay {
  pointer-events: none;
  z-index: 0;
}
.thread-line {
  fill: none;
  stroke: var(--gold-muted);
  stroke-width: 2;
  opacity: 0.7;
  pointer-events: stroke;
  cursor: pointer;
}
.thread-line:hover {
  stroke: var(--gold-warm);
  opacity: 1;
  stroke-width: 3;
}
[data-theme="dark"] .thread-line {
  stroke: var(--gold-warm);
  opacity: 0.6;
}
[data-theme="dark"] .thread-line:hover {
  opacity: 1;
}

/* Thread disconnect button — subtle dot at midpoint, full on hover */
.thread-disconnect-fo {
  opacity: 0.35;
  transition: opacity 0.2s ease;
  overflow: visible;
}
.thread-disconnect-fo:hover {
  opacity: 1;
}
.thread-disconnect-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--desk-cream, #F0EBE1);
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.thread-disconnect-btn:hover {
  background: #e8c8c8;
  color: #8b3030;
  transform: scale(1.1);
}
[data-theme="dark"] .thread-disconnect-btn {
  background: var(--desk-tan, #4A3F30);
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .thread-disconnect-btn:hover {
  background: #5a3030;
  color: #e8a0a0;
}

/* ── Source dragging indicator ── */
.source-dragging {
  opacity: 0.5;
}

/* ── Chapter type cards — large, unmistakable choice ── */
.ws-chapter-type-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
/* On the dropdown's dark slab in both themes — slab colors, not ink. */
.ws-chapter-type-card {
  flex: 1;
  padding: 16px 14px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-family: var(--serif);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ws-chapter-type-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(184, 150, 74, 0.08);
}
.ws-chapter-type-card.active {
  border-color: var(--gold-muted);
  background: rgba(184, 150, 74, 0.12);
  box-shadow: 0 0 0 1px var(--gold-muted), 0 0 12px rgba(184, 150, 74, 0.12);
}
.ws-type-card-icon {
  font-size: 24px;
  display: block;
  line-height: 1;
}
.ws-type-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--slab-text);
  display: block;
}
.ws-type-card-desc {
  font-size: 11px;
  color: rgba(240, 235, 225, 0.55);
  line-height: 1.3;
  font-style: italic;
  display: block;
}

/* ── Moodboard image note on wall (polaroid thumbnail) ── */
.note-card.moodboard-note {
  background: #F7F2EA;
  padding: 6px 6px 24px;
  border-radius: 1px;
  color: #3a3520;
  font-family: var(--handwritten);
}
.note-card.moodboard-note::before { display: none; }
.moodboard-note-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.moodboard-note-caption {
  font-family: var(--handwritten);
  font-size: 12px;
  color: #4A3F30;
  margin-top: 6px;
  padding: 0 2px;
  line-height: 1.3;
}

/* ── Presence states for moodboard image wall thumbnails ── */
.note-card.moodboard-note.state-active {
  max-height: none;
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.18),
    0 8px 22px rgba(0,0,0,0.14),
    0 0 12px rgba(184,150,74,0.15);
  border: 2px solid var(--gold-muted);
  padding: 4px 4px 22px;
  transform: scale(1.03) rotate(var(--note-angle, 0deg));
}
.note-card.moodboard-note.state-alive {
  max-height: none;
  box-shadow:
    1px 2px 8px rgba(0,0,0,0.15),
    0 6px 16px rgba(0,0,0,0.10),
    0 0 0 1px rgba(184,150,74,0.08);
  transform: scale(1.01) rotate(var(--note-angle, 0deg));
}
.note-card.moodboard-note.state-warm {
  max-height: none;
  opacity: 0.85;
}
.note-card.moodboard-note.state-dormant {
  max-height: none;
  opacity: 0.55;
  filter: saturate(0.7) brightness(0.92);
  transform: scale(0.95) rotate(var(--note-angle, 0deg));
}

/* Hover lift for moodboard image notes — universal language */
.note-card.moodboard-note:hover,
.note-card.moodboard-note.state-dormant:hover,
.note-card.moodboard-note.state-warm:hover,
.note-card.moodboard-note.state-alive:hover,
.note-card.moodboard-note.state-active:hover,
.note-card.moodboard-note.state-cooling:hover {
  transform: translateY(-5px) scale(1.04) rotate(var(--note-angle, 0deg));
  box-shadow:
    2px 6px 12px rgba(0,0,0,0.18),
    4px 10px 24px rgba(0,0,0,0.10);
  z-index: 2;
  opacity: 1;
  filter: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease;
}

/* ── Visual blockquote (citation from moodboard image) ── */
blockquote.visual-citation {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  margin: 8px 0;
  background: rgba(247, 242, 234, 0.6);
  border-left: 3px solid var(--gold-muted);
  border-radius: 2px;
  font-family: var(--serif);
  font-size: 14px;
}
blockquote.visual-citation img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 1px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
blockquote.visual-citation .visual-citation-text {
  flex: 1;
}
blockquote.visual-citation .visual-citation-caption {
  font-family: var(--handwritten);
  font-size: 13px;
  color: var(--ink-light);
}
blockquote.visual-citation .visual-citation-source {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 4px;
  cursor: pointer;
}
blockquote.visual-citation .visual-citation-source:hover {
  color: var(--gold);
}

/* ── Dark walnut overrides ── */
[data-theme="dark"] .moodboard-canvas {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .moodboard-drop-active {
  background: rgba(184, 150, 74, 0.04);
  border-color: var(--gold-muted);
}
[data-theme="dark"] .moodboard-image {
  background: #3D3328;
  box-shadow:
    1px 2px 6px rgba(0,0,0,0.3),
    2px 4px 12px rgba(0,0,0,0.2);
}
[data-theme="dark"] .moodboard-image:hover {
  box-shadow:
    2px 4px 12px rgba(0,0,0,0.4),
    4px 8px 24px rgba(0,0,0,0.25);
}
[data-theme="dark"] .moodboard-image-caption {
  color: var(--slab-text);
}
[data-theme="dark"] .moodboard-image-caption:empty::before {
  color: rgba(240, 235, 225, 0.35);
}
[data-theme="dark"] .moodboard-image-caption:focus {
  background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .moodboard-love-btn {
  background: rgba(0,0,0,0.5);
  color: rgba(240, 235, 225, 0.3);
}
[data-theme="dark"] .moodboard-love-btn.loved {
  color: #e06070;
}
[data-theme="dark"] .moodboard-delete-btn {
  background: rgba(180,60,60,0.8);
}
[data-theme="dark"] .moodboard-resize-handle::after {
  border-color: rgba(255,255,255,0.2);
}
[data-theme="dark"] .moodboard-hint {
  color: var(--ink-faint);
}
[data-theme="dark"] .note-card.moodboard-note {
  background: #3D3328;
  color: var(--slab-text);
}
[data-theme="dark"] .moodboard-note-caption {
  color: var(--slab-text);
}
[data-theme="dark"] blockquote.visual-citation {
  background: rgba(61, 51, 40, 0.5);
  border-left-color: var(--gold-muted);
}
[data-theme="dark"] blockquote.visual-citation .visual-citation-caption {
  color: var(--slab-muted);
}
/* ─── Emoji Picker ──────────────────────────────────────── */
.moodboard-emoji-picker {
  background: var(--surface, #FDFBF7);
  border: 1px solid var(--desk-tan-dark, #C4AD86);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  min-width: 240px;
}
.emoji-picker-row {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}
.emoji-picker-btn {
  background: none;
  border: none;
  font-size: 22px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1;
}
.emoji-picker-btn:hover {
  background: var(--desk-tan-light, #DECCA8);
}

[data-theme="dark"] .moodboard-emoji-picker {
  background: var(--surface);
  border-color: rgba(184, 150, 74, 0.3);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
[data-theme="dark"] .emoji-picker-btn:hover {
  background: rgba(184, 150, 74, 0.15);
}

/* ─── Emoji & Text-Only Moodboard Items ─────────────────── */
.moodboard-emoji-display {
  font-size: 48px;
  text-align: center;
  padding: 8px 4px;
  line-height: 1.1;
  user-select: none;
}
.moodboard-image-emoji {
  min-width: 60px;
  background: rgba(255,255,255,0.6);
  border-radius: 10px;
}
.moodboard-image-textonly {
  background: rgba(255,255,255,0.85);
  border-radius: 10px;
  min-height: 40px;
  padding-top: 8px;
}
.moodboard-image-textonly .moodboard-image-caption {
  font-size: 15px;
  min-height: 1.5em;
}

[data-theme="dark"] .moodboard-image-emoji {
  background: rgba(60, 52, 40, 0.7);
}
[data-theme="dark"] .moodboard-image-textonly {
  background: rgba(60, 52, 40, 0.85);
}

/* ─── Share Link Display ────────────────────────────────── */
.share-link-display {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--desk-tan, #D4BF9A);
}
.share-link-label {
  font-size: 12px;
  color: var(--ink-faint, #7A6E5B);
  white-space: nowrap;
}
.share-link-url {
  flex: 1;
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--desk-tan, #D4BF9A);
  border-radius: 4px;
  background: var(--surface, #FDFBF7);
  color: var(--ink, #1E1A12);
  font-family: monospace;
  min-width: 0;
}
.share-link-copy-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--desk-tan-dark, #C4AD86);
  border-radius: 4px;
  background: var(--desk-tan-light, #DECCA8);
  color: var(--ink, #1E1A12);
  cursor: pointer;
  white-space: nowrap;
}
.share-link-copy-btn:hover {
  background: var(--desk-tan, #D4BF9A);
}

/* ============================================================
   iPAD RESPONSIVE LAYOUT
   Three-pane → Two-pane → Single-pane
   Desktop (>= 1024px) is unchanged. All rules below are additive.
   ============================================================ */

/* --- Safe area support for viewport-fit=cover --- */
:root {
  /* On phones the global header owns the status-bar inset. Surfaces start at
     this complete block height and must not add the inset a second time. */
  --pocket-header-total-h: calc(var(--header-h, 64px) + env(safe-area-inset-top, 0px));
}
.header-bar {
  padding-top: env(safe-area-inset-top, 0);
}

/* --- Library Overlay (for two-pane mode) --- */
.ipad-library-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 149;
  -webkit-tap-highlight-color: transparent;
}
.ipad-library-overlay.visible {
  display: block;
}

/* ── iPad Overlay Pane Styles ─────────────────────────────
   These apply when JS moves panes out of the grid and adds
   .ipad-pane-overlay. Not gated by media query — JS controls
   when the class is added based on window width. */
.pane-left.ipad-pane-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 70vw;
  height: 100vh;
  height: 100dvh;
  max-width: 400px;
  z-index: 150;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.0);
  box-shadow: none;
  padding-top: env(safe-area-inset-top, 0);
}
.pane-left.ipad-pane-overlay.ipad-slide-in {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0,0,0,0.2);
}
.pane-right.ipad-pane-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 150;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.0);
  padding-top: env(safe-area-inset-top, 0);
}
.pane-right.ipad-pane-overlay.ipad-slide-in {
  transform: translateX(0);
}

/* ── Two-Pane Layout: 701px – 1023px ──────────────────────── */
@media (max-width: 1023px) {
  /* Hide resize handles on iPad */
  .pane-resize-handle {
    display: none !important;
  }

  /* Two-pane grid: center + right visible */
  .panes {
    grid-template-columns: 0 0 1fr 0 var(--right-pane-w, 30%);
  }

  /* Pane expand buttons: hide on iPad */
  .pane-expand-btn {
    display: none;
  }

  /* Expanded states should not apply on iPad */
  .panes.expand-left,
  .panes.expand-center,
  .panes.expand-right {
    grid-template-columns: 0 0 1fr 0 var(--right-pane-w, 30%);
  }
}

/* ── Pocket chrome: phone widths through 700px ────────────── */
@media (max-width: 700px) {
  /* Phone type + chrome niceties. The chapter itself never renders
     through the desktop shell here — see POCKET EDITOR below. */

  /* Editor thesis input — 16px prevents iOS zoom-on-focus */
  .editor-thesis-input {
    font-size: 16px;
  }

  /* Header: compact */
  .header-bar {
    padding: env(safe-area-inset-top, 0) 12px 0;
    min-height: calc(48px + env(safe-area-inset-top, 0));
  }
  .header-brand {
    font-size: 16px;
  }
  .scope-superlabel {
    display: none;
  }

  /* Desk landing: single column */
  .desks-landing-list {
    grid-template-columns: 1fr !important;
  }
}

/* ── Touch target sizing for iPad ─────────────────────────── */
@media (max-width: 1023px) {
  /* Reaction toolbar buttons: 48pt minimum */
  .reaction-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }
  .reaction-btn svg {
    width: 24px;
    height: 24px;
  }
  .reaction-toolbar {
    height: 56px;
    gap: 4px;
    padding: 4px 8px;
  }

  /* Toolbar buttons: 44pt minimum */
  .ws-tool {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }

  /* Source cards: taller for touch */
  .source-card {
    min-height: 64px;
    padding: 12px 14px;
  }

  /* Note cards: larger touch targets */
  .note-card {
    padding: 14px;
  }

  /* Header buttons: 44pt minimum */
  .header-user,
  .header-brand,
  .desk-switcher-btn,
  .scope-back-btn,
  .library-add-source-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Pane header buttons */
  .left-tab,
  .pane-expand-btn {
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — Core Interactions (iPad)
   ══════════════════════════════════════════════════════════════ */

/* ── Reaction Toolbar: touch-mode enlargement ──────────────── */
.reaction-toolbar.reaction-toolbar-touch {
  height: 56px;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
}
.reaction-toolbar.reaction-toolbar-touch .reaction-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}
.reaction-toolbar.reaction-toolbar-touch .reaction-btn svg {
  width: 24px;
  height: 24px;
}

/* ── Send to Editor button (in reaction toolbar) ───────────── */
.htb-send-to-editor {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  padding: 0;
  border-radius: 6px;
}
.htb-send-to-editor:hover { opacity: 1; }
.htb-send-to-editor svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}
.reaction-toolbar-touch .htb-send-to-editor {
  width: 44px;
  height: 44px;
}
.reaction-toolbar-touch .htb-send-to-editor svg {
  width: 22px;
  height: 22px;
}

/* ── Send-to-editor toast ──────────────────────────────────── */
.send-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--desk-tan-dark, #3a3520);
  color: var(--desk-tan-light, #F0EBE1);
  font-family: var(--sans);
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.0);
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.send-toast.send-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Swipe-to-reveal action tray ───────────────────────────── */
.swipe-action-tray {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  z-index: 0;
}
.swipe-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.swipe-action-delete {
  background: #c0392b;
}
.swipe-action-send {
  background: var(--gold, #B8860B);
}
.swipe-action-rename {
  background: var(--ink-faint, #9a9488);
}

/* ── Note card long-press-to-drag lift ─────────────────────── */
.note-long-press-lift {
  transform: scale(1.05) rotate(var(--note-angle, 0deg)) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.0),
              box-shadow 0.2s ease !important;
  z-index: 100;
}

/* ── Note drag ghost (follows finger during long-press drag) ── */
.note-drag-ghost {
  opacity: 0.8;
  transform: scale(0.95);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* ── Editor drop-target glow ───────────────────────────────── */
.drop-target-glow {
  box-shadow: inset 0 0 0 3px var(--gold, #B8860B) !important;
  transition: box-shadow 0.3s ease;
}

/* ── Compact editor toolbar (iPad on-screen keyboard) ──────── */
@media (max-width: 1023px) and (pointer: coarse) {
  .ws-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ws-toolbar::-webkit-scrollbar {
    display: none;
  }

  /* In compact mode, hide non-essential tools */
  .ws-toolbar.ws-toolbar-compact > *:not(.compact-keep) {
    display: none !important;
  }
  .ws-toolbar.ws-toolbar-compact > .compact-keep {
    display: flex !important;
  }

  /* Find button: hidden on desktop (visible in compact and overflow) */
  .toolbar-find-btn {
    display: none;
  }
}

/* Find button: always hidden on wide screens */
@media (min-width: 1024px) {
  body.two-pane:has(.reader-surface) #left-pane-header {
    display: none;
  }
  .toolbar-find-btn {
    display: none !important;
  }
}

/* ── Custom link insertion modal ───────────────────────────── */
.link-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.link-modal {
  background: var(--desk-tan-light, #F0EBE1);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  font-family: var(--sans);
}
.link-modal-title {
  font-family: var(--serif, 'EB Garamond', serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ink);
}
.link-modal-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ink-faint, #9a9488);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 15px;
  background: rgba(255,255,255,0.6);
  color: var(--ink);
  margin-bottom: 16px;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.link-modal-input:focus {
  outline: none;
  border-color: var(--gold, #B8860B);
  box-shadow: 0 0 0 2px rgba(184,134,11,0.15);
}
.link-modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.link-modal-cancel {
  padding: 8px 18px;
  border: 1px solid var(--ink-faint);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
.link-modal-insert {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: var(--gold, #B8860B);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.link-modal-insert:hover {
  background: #9a7209;
}
[data-theme="dark"] .link-modal {
  background: var(--desk-tan-dark, #2a2418);
}
[data-theme="dark"] .link-modal-input {
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.1);
  color: var(--desk-tan-light);
}

/* ══════════════════════════════════════════════════════════════
   PHONE WRITE MODE — typewriter at rest, instrument on demand
   ══════════════════════════════════════════════════════════════ */


/* ── Note reaction buttons ─────────────────────────────────── */
.note-reactions {
  display: flex;
  gap: 4px;
  padding: 6px 4px 2px;
  justify-content: flex-end;
}
.note-reaction-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.note-reaction-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--ink-faint, #9A9080);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.note-reaction-btn.reaction-active svg {
  stroke: var(--gold, #B8860B);
  fill: var(--gold, #B8860B);
}
.note-reaction-btn:active {
  transform: scale(0.9);
}
.note-reaction-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .note-reaction-btn {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .note-reaction-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Capture Sheet: creation hub (phone) ───────────────────── */
.capture-sheet-new-chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 8px 16px 0;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  background: rgba(184, 134, 11, 0.06);
  border-left: 3px solid var(--gold, #B8860B);
  font-family: var(--serif, 'EB Garamond', serif);
  font-size: 1rem;
  color: var(--ink, #1E1A12);
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.capture-sheet-new-chapter:active {
  background: rgba(184, 134, 11, 0.14);
}
.capture-sheet-new-chapter .new-chapter-icon {
  width: 20px;
  height: 20px;
  stroke: var(--gold, #B8860B);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.capture-sheet-new-chapter span {
  flex: 1;
  text-align: left;
}
.capture-sheet-new-chapter .new-chapter-arrow {
  width: 16px;
  height: 16px;
  stroke: var(--ink-faint, #9A9080);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.capture-sheet-divider {
  height: 1px;
  margin: 10px 16px 4px;
  background: rgba(0, 0, 0, 0.06);
}
/* Capture tab SVG icons */
.capture-tab-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-theme="dark"] .capture-sheet-new-chapter {
  background: rgba(184, 134, 11, 0.1);
  color: var(--desk-tan-light);
}
[data-theme="dark"] .capture-sheet-new-chapter .new-chapter-arrow {
  stroke: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .capture-sheet-divider {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Notes wall: temporal grouping + masonry (phone) ────────── */
@media (max-width: 700px) {
  .notes-time-label {
    font-family: var(--serif, 'EB Garamond', serif);
    font-size: 0.72rem;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint, #9A9080);
    padding: 12px 4px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 8px;
  }
  .notes-time-grid {
    column-count: 2;
    column-gap: 10px;
    padding: 0 4px;
    margin-bottom: 4px;
  }
  .notes-time-grid > .note-card,
  .notes-time-grid > .capture-photo,
  .notes-time-grid > .capture-video,
  .notes-time-grid > .capture-voice,
  .notes-time-grid > .capture-link {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
  }
  .note-short { font-size: 1.02rem; }
  .note-medium { font-size: 0.92rem; }
  .note-long { font-size: 0.82rem; line-height: 1.45; }
}
[data-theme="dark"] .notes-time-label {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}


/* ── Phone: chapter overview polish ────────────────────────── */
@media (max-width: 700px) {
  .chapter-list-item {
    padding: 14px 16px;
    margin-bottom: 4px;
    border-radius: 8px;
    font-size: 14px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.1);
  }
  .chapter-list-item.selected {
    background: rgba(184, 134, 11, 0.08);
    border-left: 3px solid var(--gold);
    padding-left: 13px;
  }
  .chapter-list-item .chapter-meta {
    font-size: 12px;
    margin-top: 4px;
  }
  .chapter-list-item:active {
    background: rgba(184, 134, 11, 0.06);
  }
}

/* ── Source list: hide hover buttons on touch, use swipe ───── */
@media (pointer: coarse) {
  .source-rename-btn,
  .source-delete-btn {
    display: none !important;
  }
  .note-card-delete {
    display: none !important;
  }
}

/* ── Phone source cards: content wrapper for swipe-to-reveal ── */
/* The inner wrapper has an opaque background so it covers the
   swipe action tray at rest. When swiped left, the inner slides
   to reveal the tray behind it. */
.source-card-inner {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--surface, #faf6ef);
  padding: 9px 14px 9px 13px;
  width: 100%;
}
/* When using the inner wrapper, remove padding from the outer card
   so spacing is handled by the inner only */
.source-list-item:has(.source-card-inner) {
  padding: 0;
}
[data-theme="dark"] .source-card-inner {
  background: var(--surface, #1e1c1a);
}

/* ══════════════════════════════════════════════════════════════
   PHASE 3 — Capacitor Integration CSS
   ══════════════════════════════════════════════════════════════ */

/* ── Smooth theme transitions ──────────────────────────────── */
.app-shell,
.header-bar,
.pane,
.pane-body,
.notes-wall,
.note-card,
.ws-toolbar {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ── Compact toolbar: show Find button on touch ────────────── */
@media (max-width: 1023px) and (pointer: coarse) {
  .toolbar-find-btn {
    display: flex !important;
  }
}

/* ── Keyboard-aware editor padding ─────────────────────────── */
.pane-center[style*="padding-bottom"] .ws-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4 — Visual Desk Touch CSS
   ══════════════════════════════════════════════════════════════ */

/* ── Touch drag lift effect on canvas images ─────────────── */
.canvas-touch-lift {
  transform: scale(1.06);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.0),
              box-shadow 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.0);
}
.canvas-touch-lift img {
  pointer-events: none;
}

/* ── Hide resize handle on touch — pinch-to-resize replaces it ── */
@media (pointer: coarse) {
  .moodboard-resize-handle {
    display: none;
  }
  .moodboard-image {
    touch-action: none;
  }
}

/* ── Dark mode touch lift ───────────────────────────────────── */
[data-theme="dark"] .canvas-touch-lift {
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25);
}

/* ══════════════════════════════════════════════════════════════
   PHASE 5 — Polish and Delight CSS
   ══════════════════════════════════════════════════════════════ */

/* ── Capture Bottom Sheet ────────────────────────────────────── */
.capture-sheet {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.capture-sheet-open {
  pointer-events: auto;
  opacity: 1;
}
.capture-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}
.capture-sheet-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 55vh;
  min-height: 280px;
  background: var(--desk-tan-light, #FAF6F0);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.0);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.capture-sheet-open .capture-sheet-panel {
  transform: translateY(0);
}

/* Sheet handle */
.capture-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
}
.capture-sheet-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.15);
}

/* Sheet tabs */
.capture-sheet-tabs {
  display: flex;
  gap: 2px;
  padding: 0 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.capture-sheet-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: none;
  background: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--desk-brown, #3C2A14);
  opacity: 0.5;
  transition: opacity 0.2s ease, background 0.2s ease;
  min-height: 44px;
}
.capture-sheet-tab.active {
  opacity: 1;
  background: rgba(184,134,11,0.1);
}
.capture-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}
.capture-tab-icon svg {
  width: 20px;
  height: 20px;
}
.capture-tab-label {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Sheet content */
.capture-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Jot mode */
.capture-jot-input {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: #fff;
  font-family: var(--serif, Georgia, serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--desk-brown, #3C2A14);
  resize: none;
  margin-bottom: 12px;
}
.capture-jot-input:focus {
  outline: none;
  border-color: var(--gold, #B8860B);
  box-shadow: 0 0 0 2px rgba(184,134,11,0.15);
}

/* Submit button */
.capture-submit-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--gold, #B8860B);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.2s ease;
}
.capture-submit-btn:hover {
  background: #9a7209;
}
.capture-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Snap mode */
.capture-snap-actions {
  display: flex;
  gap: 12px;
}
.capture-snap-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--desk-brown, #3C2A14);
  min-height: 44px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.capture-snap-btn:active {
  background: rgba(184,134,11,0.08);
  box-shadow: 0 0 0 2px rgba(184,134,11,0.15);
}
.capture-snap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #B8860B);
}
.capture-snap-icon svg {
  width: 28px;
  height: 28px;
}

/* Speak mode — live waveform */
.capture-speak-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  background: var(--slab, #1B1610);
  border-radius: 12px;
  cursor: pointer;
  min-height: 180px;
  width: 100%;
  transition: background 0.2s ease;
}
.capture-speak-wrapper:hover {
  background: #221c14;
}
.capture-speak-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100px;
  width: 100%;
}
.capture-speak-bar {
  width: 4px;
  background: var(--gold-warm, #D4B86A);
  border-radius: 2px;
  height: var(--bar-h, 20%);
  opacity: 0.2;
  transition: height 80ms linear;
}
.capture-speak-wrapper.recording .capture-speak-bar {
  opacity: 1;
}
.capture-speak-wrapper.processing .capture-speak-bar {
  opacity: 0.6;
}
.capture-speak-caption {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240,235,225,0.55);
  min-height: 14px;
}
.capture-speak-wrapper.recording .capture-speak-caption {
  color: var(--gold-warm, #D4B86A);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .capture-speak-bar {
    transition: none;
  }
}

/* Save mode */
.capture-save-input {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--desk-brown, #3C2A14);
  margin-bottom: 12px;
}
.capture-save-input:focus {
  outline: none;
  border-color: var(--gold, #B8860B);
  box-shadow: 0 0 0 2px rgba(184,134,11,0.15);
}

/* ── Capture Palette (⌘⇧K) ───────────────────────────────── */
.capture-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  background: rgba(27,22,16,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.0),
              background 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.0),
              backdrop-filter 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.0);
}
.capture-palette-backdrop.capture-palette-open {
  pointer-events: auto;
  opacity: 1;
  background: rgba(27,22,16,0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.capture-palette {
  width: 560px;
  max-width: 90vw;
  background: var(--slab, #1B1610);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.0) 0.06s,
              opacity 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.0) 0.06s;
  overflow: hidden;
}
.capture-palette-open .capture-palette {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Input row */
.p-input-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.p-mode-chip {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(184,150,74,0.18);
  color: var(--gold-warm, #D4B86A);
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.p-input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  color: var(--slab-text, #F0EBE1);
  font-family: var(--serif, 'EB Garamond', Georgia, serif);
  font-size: 19px;
  line-height: 1.4;
  caret-color: var(--gold-warm, #D4B86A);
  overflow-y: auto;
  max-height: calc(22px * 4 * 1.4);
}
.p-input::placeholder {
  color: rgba(240,235,225,0.3);
  font-style: italic;
}

/* Mode-specific panel — below the input row, above the modes strip. */
.p-panel {
  padding: 14px 22px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.p-panel[data-mode="jot"] { display: none; }
.p-panel-placeholder {
  font-family: var(--serif, 'EB Garamond', Georgia, serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(240,235,225,0.4);
  padding: 6px 0;
}

/* Snap panel — chooser (Record / Upload side by side) */
.p-snap-chooser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 1.5px dashed rgba(184,150,74,0.4);
  border-radius: 8px;
  padding: 14px;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.p-snap-chooser.dragover {
  background: rgba(184,150,74,0.06);
  border-color: var(--gold-warm, #D4B86A);
}
.p-snap-file {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.p-snap-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: rgba(240,235,225,0.8);
  cursor: pointer;
  font-family: var(--serif, 'EB Garamond', Georgia, serif);
  font-size: 15px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.p-snap-action:hover {
  background: rgba(184,150,74,0.08);
  border-color: var(--gold-warm, #D4B86A);
  color: var(--gold-warm, #D4B86A);
}
.p-snap-action svg {
  width: 22px;
  height: 22px;
}
.p-snap-action-sub {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240,235,225,0.4);
}
.p-snap-record-btn svg circle:last-child {
  fill: #D99A8F;
  stroke: #D99A8F;
}

/* Snap panel — live camera view */
.p-snap-camera {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-snap-camera-preview {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  background: #000;
  border-radius: 6px;
}
.p-snap-camera-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.p-snap-cam-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(240,235,225,0.85);
  border-radius: 4px;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.p-snap-cam-btn:hover {
  background: rgba(184,150,74,0.1);
  border-color: var(--gold-warm, #D4B86A);
  color: var(--gold-warm, #D4B86A);
}
.p-snap-cam-btn svg {
  width: 14px;
  height: 14px;
}
.p-snap-cam-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D99A8F;
}
.p-snap-cam-dot.recording {
  animation: snap-rec-pulse 1s ease-in-out infinite;
}
@keyframes snap-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.p-snap-cam-timer {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.55);
  color: var(--gold-warm, #D4B86A);
  border-radius: 3px;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Snap panel — preview after capture/upload */
.p-snap-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.p-snap-preview {
  width: 100%;
  max-width: 360px;
  max-height: 220px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
}
.p-snap-preview img,
.p-snap-preview video {
  max-width: 100%;
  max-height: 220px;
  display: block;
}
.p-snap-meta {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,235,225,0.5);
  word-break: break-all;
  text-align: center;
}
.p-snap-replace {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--gold-warm, #D4B86A);
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.p-snap-replace:hover {
  background: rgba(184,150,74,0.12);
  border-color: var(--gold-warm, #D4B86A);
}

/* Speak panel — waveform + upload, all inside the palette */
.p-speak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 4px;
}
.p-speak-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 72px;
  padding: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.p-speak-wave:hover {
  background: rgba(0,0,0,0.3);
  border-color: rgba(184,150,74,0.3);
}
.p-speak-bar {
  width: 4px;
  background: var(--gold-warm, #D4B86A);
  border-radius: 2px;
  height: var(--bar-h, 20%);
  opacity: 0.22;
  transition: height 80ms linear;
}
.p-speak-wave.recording .p-speak-bar { opacity: 1; }
.p-speak-wave.ready .p-speak-bar { opacity: 0.85; }
.p-speak-caption {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240,235,225,0.55);
}
.p-speak-wave.recording + .p-speak-caption {
  color: var(--gold-warm, #D4B86A);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: none;
}
.p-speak-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-speak-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(240,235,225,0.7);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.p-speak-upload:hover {
  background: rgba(184,150,74,0.1);
  border-color: var(--gold-warm, #D4B86A);
  color: var(--gold-warm, #D4B86A);
}
.p-speak-upload svg {
  width: 14px;
  height: 14px;
}
.p-speak-upload-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.p-speak-clear {
  background: transparent;
  border: 0;
  color: rgba(240,235,225,0.45);
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 6px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.p-speak-clear:hover {
  color: rgba(240,235,225,0.85);
}
@media (prefers-reduced-motion: reduce) {
  .p-speak-bar { transition: none; }
}

/* Modes strip */
.p-modes-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.p-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(240,235,225,0.55);
  transition: background 0.15s ease, color 0.15s ease;
}
.p-mode:hover {
  background: rgba(255,255,255,0.04);
  color: rgba(240,235,225,0.85);
}
.p-mode.active {
  background: rgba(184,150,74,0.18);
  color: var(--gold-warm, #D4B86A);
}
.p-mode-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.p-mode-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.p-mode-label {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Footer */
.p-footer {
  padding: 10px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-footer-hints {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,235,225,0.4);
}
.p-footer-hints kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  border: 1px solid rgba(240,235,225,0.25);
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
  color: rgba(240,235,225,0.7);
  background: transparent;
}

/* Reduced motion — collapse all palette transitions to a simple fade */
@media (prefers-reduced-motion: reduce) {
  .capture-palette-backdrop,
  .capture-palette {
    transition: opacity 0.08s linear !important;
    transform: none !important;
  }
}

/* ── Blank sticky (Door A to capture) ────────────────────── */
.blank-sticky {
  width: 100%;
  min-height: 88px;
  padding: 14px 14px 12px;
  margin: 4px 4px;
  border-radius: 2px;
  border: 1.5px dashed rgba(184,150,74,0.4);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(184,150,74,0.08) 0 2px,
      transparent 2px 8px
    ),
    linear-gradient(#FBF5E6, #F5ECD9);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transform: rotate(-0.6deg);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--handwritten, 'Caveat', cursive);
}
.blank-sticky:hover,
.blank-sticky:focus-visible {
  transform: rotate(-0.2deg) scale(1.02);
  border: 1.5px solid var(--gold, #B8964A);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(184,150,74,0.1) 0 2px,
      transparent 2px 8px
    ),
    linear-gradient(#FFF9E6, #FBF1D9);
  box-shadow: 0 3px 8px rgba(184,150,74,0.2);
  outline: none;
}
.bs-prompt {
  font-family: var(--handwritten, 'Caveat', cursive);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink-light, #4A3F30);
  opacity: 0.7;
  transition: opacity 0.18s ease;
}
.blank-sticky:hover .bs-prompt,
.blank-sticky:focus-visible .bs-prompt {
  opacity: 1;
}
.bs-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  opacity: 0.5;
  transition: opacity 0.18s ease;
}
.blank-sticky:hover .bs-row2,
.blank-sticky:focus-visible .bs-row2 {
  opacity: 1;
}
.bs-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(184,150,74,0.12);
  color: var(--gold, #B8964A);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.bm svg {
  width: 13px;
  height: 13px;
}
.bm:hover {
  background: rgba(184,150,74,0.24);
  transform: scale(1.1);
}
.bs-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bs-new {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint, #7A6F5A);
}
.bm-kbd {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid rgba(184,150,74,0.5);
  border-radius: 3px;
  background: transparent;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--gold, #B8964A);
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .blank-sticky,
  .blank-sticky:hover,
  .blank-sticky:focus-visible,
  .bm,
  .bm:hover {
    transition: opacity 0.08s linear;
    transform: none !important;
  }
}

/* Screen-reader-only — used for palette's aria-live announcement */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Corner hint (⌘⇧K capture) ───────────────────────────── */
.kbd-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 4px;
  background: rgba(253,251,247,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint, #7A6F5A);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.kbd-hint:hover {
  opacity: 1;
  border-color: var(--gold, #B8964A);
  color: var(--ink-light, #4A3F30);
}
.kbd-hint kbd {
  display: inline-block;
  padding: 1px 4px;
  border: 1px solid var(--border, rgba(0,0,0,0.14));
  border-radius: 2px;
  font-family: inherit;
  font-size: 9px;
  color: var(--ink-light, #4A3F30);
  background: transparent;
}
/* Fade hint while the user is actively typing so it doesn't pull the eye */
body.editor-typing .kbd-hint {
  opacity: 0.1;
}
/* Mobile: tab-bar has its own capture entry; hide the hint */
@media (max-width: 700px) {
  .kbd-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kbd-hint {
    transition: opacity 0.08s linear, border-color 0.08s linear, color 0.08s linear;
  }
}

/* Dark mode capture sheet */
[data-theme="dark"] .capture-sheet-panel {
  background: var(--desk-tan-dark, #2a2418);
}
[data-theme="dark"] .capture-sheet-handle-bar {
  background: rgba(255,255,255,0.2);
}
[data-theme="dark"] .capture-sheet-tab {
  color: var(--desk-tan-light);
}
[data-theme="dark"] .capture-sheet-tab.active {
  background: rgba(184,134,11,0.15);
}
[data-theme="dark"] .capture-jot-input,
[data-theme="dark"] .capture-save-input {
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.1);
  color: var(--desk-tan-light);
}
[data-theme="dark"] .capture-snap-btn {
  background: rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.1);
  color: var(--desk-tan-light);
}
[data-theme="dark"] .capture-speak-btn {
  background: rgba(0,0,0,0.2);
}

/* ── Desk Entry Transition ───────────────────────────────────── */
@keyframes desk-enter {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.desk-entering {
  animation: desk-enter 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.0) both;
}

/* ── Chapter Swipe Transition ────────────────────────────────── */
@keyframes chapter-slide-left {
  0% { opacity: 1; transform: translateX(0); }
  30% { opacity: 0.3; transform: translateX(-30px); }
  31% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes chapter-slide-right {
  0% { opacity: 1; transform: translateX(0); }
  30% { opacity: 0.3; transform: translateX(30px); }
  31% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}
.chapter-swipe-left {
  animation: chapter-slide-left 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.0) both;
}
.chapter-swipe-right {
  animation: chapter-slide-right 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.0) both;
}

/* ============================================================
   THE PILL — Editor selection toolbar
   One bubble, two states: reactions (default) + formatting (Aa).
   Reuses --pill-* tokens. The reaction buttons inside are the
   same .reaction-btn used in the reader's reaction-toolbar.
   ============================================================ */

.pill {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 950;
  display: none;
  align-items: center;
  /* Tighter than the reader's --pill-padding so the compact 38×38
     reaction buttons land at the spec's 46px overall pill height. */
  padding: 4px 6px;
  background: var(--pill-bg);
  border: var(--pill-border);
  border-radius: var(--pill-radius);
  box-shadow: var(--pill-shadow);
  pointer-events: auto;
  animation: htbAppear 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pill.pill-visible {
  display: inline-flex;
}

/* The two rows are not stacked — only the active row renders, so the
   pill width fits the active row instead of being padded to the wider
   formatting row. The pill itself fades briefly during a mode swap. */
.pill-rows {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pill-row {
  display: none;
  align-items: center;
  gap: var(--pill-gap);
}

.pill-row.pill-row-active {
  display: inline-flex;
}

.pill-sep {
  width: 1px;
  height: 22px;
  background: var(--pill-divider);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Aa toggle — italic serif, same height as reaction buttons */
.pill-aa {
  width: 44px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 19px;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  color: var(--pill-text);
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
}
.pill-aa:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pill-text-hover);
}
.pill-aa[aria-expanded="true"] {
  background: rgba(184, 150, 74, 0.18);
  color: #D4B86A;
}

/* Reaction buttons inside the Pill — smaller than the reader's 46×46
   to fit the compact pill container per spec §02. */
.pill .reaction-btn {
  width: 38px;
  height: 38px;
}
.pill .reaction-btn svg {
  width: 20px;
  height: 20px;
}

/* Format buttons — 36×36 circle, 15px serif glyph (spec §02) */
.pill-fmt-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 18px;
  color: var(--pill-text);
  font-family: var(--serif);
  font-size: 15px;
  transition: background 150ms ease, color 150ms ease, transform 150ms cubic-bezier(.34,1.56,.64,1);
  padding: 0;
}
.pill-fmt-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pill-text-hover);
  transform: scale(1.05);
}
.pill-fmt-btn b { font-weight: 600; font-family: var(--serif); font-size: 16px; }
.pill-fmt-btn i { font-style: italic; font-family: var(--serif); font-size: 16px; }
.pill-fmt-btn u { text-decoration: underline; text-underline-offset: 2px; font-family: var(--serif); font-size: 16px; }
.pill-fmt-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* Close button (×) on the formatting row */
.pill-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  color: var(--pill-text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 0;
  transition: background 150ms ease, color 150ms ease;
}
.pill-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pill-text-hover);
}

/* Quote-card mode: reactions only. Aa toggle + its separator are hidden
   because formatting can't be applied to immutable cited text. Spec §05. */
.pill[data-quote-context="1"] .pill-aa,
.pill[data-quote-context="1"] .pill-aa-sep {
  display: none;
}

/* Tail — same shape/positioning as .selection-bubble-arrow */
.pill-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--pill-bg);
  border-right: var(--pill-border);
  border-bottom: var(--pill-border);
  rotate: 45deg;
  transform-origin: center;
  transition: bottom 150ms ease, top 150ms ease;
}
.pill-arrow[data-flipped="1"] {
  bottom: auto;
  top: -6px;
  rotate: 225deg;
}

/* ============================================================
   THE PILL — Phase 3 highlight materialization
   Persistent stain on the highlighted sentence + flying ghost
   that bridges selection → Working With tier. Spec §06.
   ============================================================ */

/* Persistent highlight on the editor text. Two background-image layers
   (full-height wash + 2px underline) so the highlight survives line
   wraps via box-decoration-break. The underline is the persistent
   trace; the wash is the soft stain underneath the words. */
mark.highlight-mark {
  background-image:
    linear-gradient(rgba(232, 200, 64, 0.16) 0 100%),
    linear-gradient(var(--react-yellow) 0 100%);
  background-size: 100% 100%, 100% 2px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  color: inherit;
  padding: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  cursor: pointer;
}

/* Materialize: underline grows L→R over 800ms after a 200ms delay
   (per spec §06 timing). The class is removed after the animation
   so re-renders / reloads don't replay it. */
@keyframes highlightUnderlineGrow {
  from { background-size: 100% 100%, 0 2px; }
  to   { background-size: 100% 100%, 100% 2px; }
}
@keyframes highlightStainFade {
  from { background-color: rgba(232, 200, 64, 0.45); }
  to   { background-color: transparent; }
}
mark.highlight-mark.materializing {
  animation:
    highlightUnderlineGrow 800ms cubic-bezier(0.34, 1.4, 0.64, 1) 200ms forwards,
    highlightStainFade     600ms ease-out forwards;
}

/* Flying ghost — bridges selection rect → Working With tier.
   The real sticky is created synchronously by addAnnotation; the
   ghost is purely visual. */
.highlight-flying-note {
  position: fixed;
  background: #F4DD6A;
  border: 1px solid rgba(184, 150, 74, 0.5);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(232, 200, 64, 0.45),
              0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 1100;
  pointer-events: none;
  transform-origin: top left;
}

/* Working-card source line — own-words variant uses Caveat + a yellow
   dot prefix so the wall visibly carries provenance. The typography
   is the label: handwriting = "you wrote this." Spec §06. */
.working-card-src-own-words {
  font-family: var(--handwritten) !important;
  font-style: normal !important;
  font-size: 14px !important;
  color: #4A3F30 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.working-card-src-own-words::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--react-yellow);
  box-shadow: 0 0 6px rgba(232, 200, 64, 0.5);
  flex-shrink: 0;
}
.working-card-src-own-words em {
  font-style: italic;
}

/* ============================================================
   SHARED PAPER-MENU CHILD STYLES
   Used by the Pill's .pill-overflow / .pill-align-menu (which
   inherit .slash-menu base from elsewhere) and by the THE_PAGE
   re-skin of the legacy slash menu (further below).
   The base .slash-menu styles for the legacy menu are at line 3894;
   under body.the-page-on those are overridden to match the spec.
   ============================================================ */

.slash-header {
  padding: 8px 16px 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.slash-divider {
  font-family: var(--serif);
  color: var(--gold);
  opacity: 0.35;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.4em;
  padding: 4px 0;
}

.slash-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 14px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.2;
  transition: background 100ms;
  height: 36px;
}

.slash-item.on { background: rgba(184, 150, 74, 0.12); }
.slash-item:hover { background: rgba(184, 150, 74, 0.08); }

.slash-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 16px;
}

.slash-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.4; fill: none; }

.slash-label { flex: 1; color: var(--ink); }
.slash-label b { font-weight: 600; color: var(--ink); }

.slash-hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #9A8F7A);
  text-transform: uppercase;
}

.slash-empty {
  padding: 12px 16px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted, #9A8F7A);
  font-size: 14px;
}

/* ============================================================
   THE PAGE — re-skin of the legacy slash menu (editor.js:945+)
   Norman keeps the existing trigger/keydown/insert logic; this
   block restyles only — under body.the-page-on the legacy menu
   gets the spec's paper-popover look.
   ============================================================ */

body.the-page-on .slash-menu {
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 12px 36px rgba(0, 0, 0, 0.14);
  border-radius: 2px;
  padding: 6px 0;
  width: 300px;
  font-family: var(--serif);
  color: var(--ink);
}

body.the-page-on .slash-menu-item {
  padding: 8px 16px;
  gap: 14px;
  height: 36px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  transition: background 100ms;
}

body.the-page-on .slash-menu-item.active,
body.the-page-on .slash-menu-item:hover {
  background: rgba(184, 150, 74, 0.12);
}

body.the-page-on .slash-menu-icon {
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.the-page-on .slash-menu-label {
  flex: 1;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
}

@media (max-width: 720px) {
  body.the-page-on .slash-menu { width: 240px; }
}

/* ============================================================
   PAGE SLAB — Walnut strip replacing .ws-toolbar under THE_PAGE
   See docs/superpowers/specs/2026-04-17-the-page-design.md §01
   ============================================================ */

.page-slab {
  height: 44px;
  background: var(--slab);
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: var(--slab-text);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.005em;
  position: relative;
  flex-shrink: 0;
}

.page-slab-chapter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-style: italic;
  color: rgba(240, 235, 225, 0.8);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.page-slab-chapter b {
  font-style: normal;
  font-weight: 500;
  color: #D4B86A;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.page-slab-chapter em {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.page-slab-spacer { flex: 0 0 12px; }

.page-slab-right {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(240, 235, 225, 0.5);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Save dot — four states (idle / saving / saved / error). See spec §04.
   Cross-fade cycle: error → keystroke → saving → save success → saved →
   3s timeout → idle. The transition handles the cross-fade automatically. */
.slab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(240, 235, 225, 0.3);
  flex-shrink: 0;
  display: inline-block;
  transition: background 200ms ease, box-shadow 200ms ease;
  cursor: default;
  position: relative;
}

.slab-dot.saving {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(184, 150, 74, 0.65);
  animation: slabDotPulse 1.2s ease-in-out infinite;
}

.slab-dot.saved {
  background: rgba(140, 170, 140, 0.9);
  animation: slabDotSavedPulse 400ms ease-in-out 1;
}

.slab-dot.error {
  background: #C07040;
  animation: slabDotError 0.8s ease-in-out infinite;
  cursor: pointer;
}

@keyframes slabDotPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
@keyframes slabDotSavedPulse {
  0%   { opacity: 0.4; transform: scale(0.85); }
  50%  { opacity: 1;   transform: scale(1.15); }
  100% { opacity: 1;   transform: scale(1); }
}
@keyframes slabDotError {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.page-slab-wc { color: rgba(240, 235, 225, 0.6); white-space: nowrap; }

.page-slab-more {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(240, 235, 225, 0.6);
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  background: transparent;
  border: none;
  transition: background 150ms;
  padding: 0;
  flex-shrink: 0;
}
.page-slab-more:hover { background: rgba(255, 255, 255, 0.08); color: var(--slab-text); }

.page-slab-overflow {
  position: absolute;
  top: 44px;
  right: 12px;
  width: 200px;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 12px 36px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
  z-index: 951;
  border-radius: 2px;
}
.page-slab-overflow[hidden] { display: none; }
.page-slab-overflow button.slash-item {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  text-align: left;
}
.page-slab-overflow button.slash-item:is(:hover, :focus-visible) {
  background: var(--yd-tool);
  color: var(--yd-tool-ink);
  outline: 2px solid var(--ink-faint);
  outline-offset: -2px;
}

/* Hide legacy toolbar under flag */
body.the-page-on .ws-toolbar,
body.the-page-on .ws-toolbar-secondary {
  display: none !important;
}

/* Progressive collapse — word count drops at <=480 */
@media (max-width: 768px) {
  .page-slab { padding: 0 16px; }
}
@media (max-width: 480px) {
  .page-slab-wc { display: none; }
  .page-slab { padding: 0 12px; }
}

/* ============================================================
   PILL FORMATTING MENUS
   The selection pill stays compact; complete paragraph and text
   controls unfold into paper menus beside it.
   ============================================================ */

.slash-menu.pill-overflow,
.slash-menu.pill-align-menu,
.slash-menu.pill-spacing-menu,
.slash-menu.pill-size-menu,
body.the-page-on .slash-menu.pill-overflow,
body.the-page-on .slash-menu.pill-align-menu,
body.the-page-on .slash-menu.pill-spacing-menu,
body.the-page-on .slash-menu.pill-size-menu {
  z-index: 960;
}

.slash-menu.pill-overflow,
body.the-page-on .slash-menu.pill-overflow {
  width: min(250px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 16px));
  overflow-y: auto;
}

.slash-menu.pill-align-menu,
body.the-page-on .slash-menu.pill-align-menu {
  width: min(180px, calc(100vw - 16px));
}

.slash-menu.pill-spacing-menu,
body.the-page-on .slash-menu.pill-spacing-menu,
.slash-menu.pill-size-menu,
body.the-page-on .slash-menu.pill-size-menu {
  width: min(150px, calc(100vw - 16px));
}

.pill-overflow[hidden],
.pill-align-menu[hidden],
.pill-spacing-menu[hidden],
.pill-size-menu[hidden] {
  display: none;
}

.pill-overflow button.slash-item,
.pill-align-menu button.slash-item,
.pill-spacing-menu button.slash-item,
.pill-size-menu button.slash-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
}

.pill-menu-label {
  padding: 8px 14px 5px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.pill-menu-rule {
  height: 1px;
  margin: 5px 14px;
  background: rgba(57, 43, 29, 0.1);
}

[data-theme="dark"] .pill-menu-rule {
  background: rgba(255, 255, 255, 0.1);
}

.pill-menu-value {
  white-space: nowrap;
}

.pill-list-icon {
  font-size: 15px;
  letter-spacing: -0.1em;
}

.pill-size-icon {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.05em;
}

.pill-indent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 4px 10px 7px;
}

.pill-indent-btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: rgba(74, 57, 37, 0.06);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 13px;
}

.pill-indent-btn:hover,
.pill-indent-btn:focus-visible {
  background: rgba(184, 150, 74, 0.16);
  outline: none;
}

[data-theme="dark"] .pill-indent-btn {
  background: rgba(255, 255, 255, 0.06);
}

.pill-spacing-menu .slash-item,
.pill-align-menu .slash-item,
.pill-size-menu .slash-item {
  min-height: 34px;
}

.pill-spacing-menu .slash-item[aria-checked="true"],
.pill-align-menu .slash-item[aria-checked="true"],
.pill-size-menu .slash-item[aria-checked="true"] {
  background: rgba(184, 150, 74, 0.13);
}

.pill-overflow .slash-icon s {
  text-decoration: line-through;
  font-style: normal;
  font-family: var(--serif);
  font-size: 16px;
}

/* ============================================================
   THE PAGE — Document H1 (chapter title) + sources footer
   See docs/superpowers/specs/2026-04-17-the-page-design.md §05
   ============================================================ */

body.the-page-on .doc-h1 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px;
  outline: none;
  padding: 0;
  border: none;
  background: transparent;
}

body.the-page-on .doc-h1.empty::before {
  content: attr(data-placeholder);
  font-style: italic;
  color: var(--ink);
  opacity: 0.35;
  font-weight: 400;
  pointer-events: none;
}

/* Footer (sources block) — re-skinned editor-references under flag */
body.the-page-on .editor-references {
  margin-top: 56px;
  max-height: none;
  overflow: visible;
  text-align: center;
  font-family: var(--serif);
  background: transparent;
  border: none;
  padding: 0;
}

body.the-page-on .editor-references-header {
  cursor: default;
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

body.the-page-on .editor-references-fleuron {
  display: none;
}

body.the-page-on .editor-references-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint, #7A6F5A);
}

body.the-page-on .editor-references-toggle {
  color: #9A4F3F;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(154, 79, 63, 0.38);
  cursor: pointer;
  font-style: italic;
}

body.the-page-on .editor-references-list {
  margin-top: 12px;
  text-align: left;
  font-family: var(--serif);
  font-style: normal;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  padding: 0;
  background: transparent;
  border: none;
}

/* ============================================================
   THE PAGE — hide the legacy utility row above the slab.
   The clock button (Thinking Timeline) and chapter Export are
   both reachable through the slab ⋯ overflow (History uses the
   same /api/chapters/:id/snapshots endpoint as the clock did).
   ============================================================ */
body.the-page-on .ws-header {
  display: none !important;
}

/* ============================================================
   LIBRARY PANE v2 — .lib-* namespace
   Spec: docs/superpowers/specs/ + Library Pane v2.html mockup
   Replaces the old .library-* / .source-list-item chain.
   ============================================================ */

/* When v2 is active on the left pane, hide legacy search and let
   the v2 root own its own layout and scroll. */
.pane-left.lib-v2 .library-search,
.pane-left.lib-v2 #search-active-bar { display: none; }
.pane-left.lib-v2 .pane-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Library v2 has no title or tabs, so its legacy pane header must not reserve
   an empty row. Keep the original expand/close buttons alive (their event
   handlers are bound to these nodes), but place them over the real search
   toolbar instead of marooning them in a strip of their own. */
.pane-left.lib-v2 #left-pane-header {
  position: relative;
  z-index: 8;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}
.pane-left.lib-v2 #left-pane-header .pane-expand-btn,
.pane-left.lib-v2 #left-pane-header .pane-close-btn {
  position: absolute;
  top: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.pane-left.lib-v2 #left-pane-header .pane-expand-btn {
  right: 44px;
  border-left: 1px solid var(--border);
}
.pane-left.lib-v2 #left-pane-header .pane-close-btn { right: 10px; }
.lib-v2-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Add source belongs beside Library search, not alone in the pane chrome. */
.pane-left.lib-v2 .library-add-source-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 30px;
  padding: 0 2px 0 13px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  background: transparent;
  color: var(--ink-light);
  border: 0;
  border-left: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  position: relative;
  flex: 0 0 auto;
}
.pane-left.lib-v2 .library-add-source-btn:hover {
  background: transparent;
  color: var(--gold-warm);
  border-left-color: var(--border-strong);
}

/* Search row — replaces .library-search */
.lib-search-v2 {
  display: flex;
  align-items: center;
  padding: 10px 82px 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  gap: 10px;
  flex-shrink: 0;
}
.lib-search-v2-input {
  flex: 1;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 7px 12px;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.lib-search-v2-input:focus-within {
  background: var(--gold-softer);
  box-shadow: inset 0 -1px 0 var(--gold);
}
.lib-search-v2-input svg { width: 13px; height: 13px; color: var(--ink-faint); flex-shrink: 0; }
.lib-search-v2-input input {
  flex: 1;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  min-width: 0;
}
.lib-search-v2-input input::placeholder { color: var(--ink-secondary); font-style: italic; }
.lib-add-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-strong);
  background: var(--paper);
  color: var(--ink-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.lib-add-btn:hover { background: var(--slab); color: var(--gold-warm); border-color: var(--slab); }
.lib-add-btn svg { width: 13px; height: 13px; }

/* + Add sheet (dropdown) */
.lib-add-sheet {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(30, 26, 18, 0.20), 0 1px 4px rgba(30, 26, 18, 0.12);
  display: none;
}
.lib-add-sheet.open { display: block; }
.lib-add-sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.lib-add-sheet-item + .lib-add-sheet-item { border-top: 1px solid var(--border); }
.lib-add-sheet-item:hover { background: var(--gold-softer); }
.lib-add-sheet-item svg { width: 14px; height: 14px; color: var(--ink-faint); flex-shrink: 0; }
.lib-add-sheet-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-faint);
  display: block;
  margin-top: 1px;
}

/* Filter chips strip */
.lib-chips {
  display: flex;
  gap: 18px;
  padding: 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}
.lib-chips::-webkit-scrollbar { display: none; }
.lib-chip {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-height: 38px;
  padding: 2px 0 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.lib-chip:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.lib-chip.on {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--gold-warm);
}
.lib-chip .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}

/* Scrolling body */
.lib-body {
  flex: 1;
  overflow-y: auto;
  background: var(--paper);
  min-height: 0;
  position: relative;
}
.lib-body.dragover::after {
  content: 'Drop to add to library';
  position: absolute;
  inset: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
  background: var(--gold-softer);
  border: 2px dashed var(--gold);
  pointer-events: none;
  z-index: 3;
}
.lib-row2.lib-row2-dragging { opacity: 0.4; }

/* Sections */
.lib-sec { border-bottom: 1px solid var(--border); }
.lib-sec-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 14px 8px;
  cursor: pointer;
  user-select: none;
}
.lib-sec-h .lib-sec-title {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.lib-sec-h .lib-sec-count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
}
.lib-sec-h .lib-sec-sp { flex: 1; }
.lib-sec-h .lib-sec-caret { color: var(--ink-faint); display: inline-flex; align-items: center; }
.lib-sec-h .lib-sec-caret svg { width: 10px; height: 10px; transition: transform 0.18s; }

.lib-sec.collapsed .lib-sec-body { display: none; }
.lib-sec.collapsed .lib-sec-caret svg { transform: rotate(-90deg); }
.lib-sec.hidden { display: none; }

/* USED IN THIS CHAPTER — gold treatment */
.lib-sec-used {
  background: linear-gradient(180deg, var(--gold-softer), transparent 85%);
  border-top: 1px solid var(--gold-faint);
  border-bottom: 1px solid var(--gold-faint);
}
.lib-sec-used .lib-sec-h { padding-bottom: 6px; }
.lib-sec-used .lib-sec-title { color: var(--gold); }
.lib-sec-used::before {
  content:'';
  display: block;
  height: 1px;
  background: var(--gold);
  opacity: 0.3;
  margin: 0 14px;
}

/* Row */
.lib-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px;
  align-items: center;
  padding: 0 8px 0 0;
  position: relative;
  border-top: 1px solid transparent;
  transition: background 0.12s;
  background: transparent;
  border-left: none;
  border-right: none;
  width: 100%;
}
.lib-row2 + .lib-row2 { border-top: 1px solid rgba(0, 0, 0, 0.04); }
.lib-row2:hover { background: var(--gold-softer); }
.lib-row2.active { background: var(--gold-faint); }
.lib-row-open {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 6px 9px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lib-row-open:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.lib-row-more { display: none; }

/* Thumbnail */
.lib-thumb {
  width: 56px;
  height: 42px;
  background: var(--slab);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.lib-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lib-thumb::after {
  content:'';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25));
  pointer-events: none;
}
.lib-thumb .play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  color: rgba(247, 242, 234, 0.9);
  z-index: 2;
  pointer-events: none;
}
.lib-thumb .play svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.lib-thumb .dur {
  position: absolute;
  right: 3px; bottom: 2px;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 9px;
  color: rgba(247, 242, 234, 0.95);
  background: rgba(0, 0, 0, 0.6);
  padding: 0 4px;
  z-index: 2;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.lib-thumb.no-thumb {
  background: var(--paper-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  border: 1px solid var(--border);
}
.lib-thumb.no-thumb::after { display: none; }
.lib-thumb.no-thumb svg { width: 18px; height: 18px; position: relative; z-index: 2; }
.lib-thumb.no-thumb.book  { background: #efe2c8; color: #8c6b31; }
.lib-thumb.no-thumb.memo  { background: #e3e9de; color: #4c6b4a; }
.lib-thumb.no-thumb.photo { background: #f0e3d0; color: #8a6a42; }
.lib-thumb.no-thumb.audio { background: #ebdfc7; color: #8c6b31; }
.lib-thumb.no-thumb.video { background: #332E29; color: #F7F2EA; }
.lib-thumb.no-thumb.video .play { color: currentColor; }

/* Website sources should read as websites at a glance, never generic files.
   The saved article image wins; a publisher favicon and a deterministic
   site monogram remain underneath as progressively stronger fallbacks. */
.lib-thumb.lib-thumb-web {
  isolation: isolate;
  border: 1px solid var(--tool-border, var(--border));
  background:
    radial-gradient(circle at 22% 18%, hsla(var(--site-hue), 42%, 82%, 0.8), transparent 52%),
    hsl(var(--site-hue), 24%, 92%);
}
.lib-thumb.lib-thumb-web:not(.has-hero)::after { display: none; }
.lib-site-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 0;
}
.lib-site-monogram {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  font-weight: 650;
  color: hsl(var(--site-hue), 36%, 30%);
}
.lib-thumb img.lib-site-favicon {
  position: absolute;
  z-index: 1;
  width: 24px;
  height: 24px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.lib-thumb img.lib-web-hero {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lib-thumb.lib-thumb-web.has-hero::after { z-index: 3; }

/* Row body */
.lib-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lib-row-title2 {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.28;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-row-meta2 {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-row-meta2 .dot { color: var(--ink-faint); opacity: 0.5; font-style: normal; }
.lib-usage-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  font-style: normal;
}
.lib-usage-pill svg { width: 9px; height: 9px; align-self: center; }

/* Hover actions */
.lib-row-actions {
  display: flex;
  gap: 4px;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.12s, transform 0.12s;
}
.lib-row2:hover .lib-row-actions,
.lib-row2.active .lib-row-actions,
.lib-row2:focus-within .lib-row-actions { opacity: 1; transform: translateX(0); }
.lib-row-actions button {
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lib-row-actions button:hover { color: var(--ink); background: rgba(0, 0, 0, 0.05); }
.lib-row-actions button svg { width: 13px; height: 13px; }
/* Delete: red on hover so the permanent action is visually distinct. */
.lib-row-actions .lib-row-delete:hover {
  color: #fff;
  background: rgba(180, 40, 40, 0.95);
}

/* Library Notes and Playlists follow the phone's own materials. */
.lib-note-list, .lib-playlist-list { display: grid; gap: 12px; padding: 4px 14px 20px; }
.lib-note-card { position: relative; background: var(--note-stock); color: var(--yd-note-ink); border-radius: 2px; box-shadow: 0 2px 4px #0002; }
.lib-note-open { display: block; width: 100%; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; padding: 14px 16px; }
.lib-note-words { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 17px/1.48 var(--handwritten); padding-right: 48px; }
.lib-note-card.is-quoted .lib-note-words { font-family: var(--serif); }
.lib-note-origin { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.lib-note-origin .lib-thumb { flex: 0 0 42px; width: 42px; height: 42px; min-height: 0; border: 0; border-radius: 2px; }
.lib-note-source { color: #59534b; font: 500 12px/1.45 var(--serif); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lib-note-card > .lib-row-actions, .lib-playlist-card > .lib-row-actions { position: absolute; right: 8px; top: 8px; }
.lib-note-card .lib-row-actions button { color: #59534b; }
.lib-note-card:hover > .lib-row-actions, .lib-note-card:focus-within > .lib-row-actions,
.lib-playlist-card:hover > .lib-row-actions, .lib-playlist-card:focus-within > .lib-row-actions { opacity: 1; transform: none; }
.lib-note-open:focus-visible, .lib-playlist-open:focus-visible { outline: 2px solid var(--yd-action); outline-offset: 2px; }
.lib-playlist-card { position: relative; background: var(--yd-playlist-surface); border: .5px solid var(--yd-tool-border); border-radius: 10px; box-shadow: 0 2px 3px #0001; }
.lib-playlist-open { display: flex; gap: 14px; align-items: center; width: 100%; padding: 12px; border: 0; border-radius: inherit; background: transparent; text-align: left; color: var(--yd-tool-ink); cursor: pointer; }
.lib-playlist-collage { display: grid; flex: 0 0 76px; width: 76px; height: 76px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; overflow: hidden; }
.lib-playlist-collage[data-count="2"] { grid-template-rows: 1fr; }
.lib-playlist-collage[data-count="3"] > :first-child { grid-row: span 2; }
.lib-playlist-collage > .lib-thumb, .lib-playlist-collage > .lib-playlist-paper { width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; border-radius: 0; }
.lib-playlist-paper { display: block; width: 44px; height: 44px; flex: 0 0 44px; overflow: hidden; padding: 4px; background: var(--yd-card-paper); color: var(--yd-card-ink); font: 7px/1.3 var(--serif); }
.lib-playlist-paper.is-note { font-family: var(--handwritten); color: var(--yd-note-ink); }
.lib-playlist-copy { display: grid; gap: 6px; flex: 1; min-width: 0; padding-right: 18px; }
.lib-playlist-name { font: 500 18px/1.3 var(--serif); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lib-playlist-count { font: 12px/1.4 var(--serif); color: var(--yd-tool-muted); }
.lib-playlist-chevron { color: var(--yd-tool-muted); font: 24px/1 var(--serif); }
.lib-collection-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 14px 12px; }
.lib-collection-header h3 { flex: 1; margin: 0; font: 500 19px/1.4 var(--serif); color: var(--yd-tool-ink); }
.lib-collection-tools { display: flex; gap: 20px; padding: 0 14px 16px; }
.lib-collection-action { background: transparent; border: 0; padding: 5px 0; color: var(--yd-tool-muted); font: 13px/1.4 var(--sans); cursor: pointer; }
.lib-collection-action:hover { color: var(--yd-tool-ink); text-decoration: underline; text-underline-offset: 3px; }
.lib-collection-action:disabled { opacity: .35; cursor: default; }
.playlist-share-sheet { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(480px, calc(100vw - 40px)); max-height: calc(100dvh - 56px); overflow-y: auto; padding: 28px; border: .5px solid var(--yd-tool-border); border-radius: 14px; background: var(--yd-playlist-surface); color: var(--yd-tool-ink); box-shadow: 0 20px 80px #0005; }
.playlist-share-sheet::backdrop { background: #100c0980; }
.desk-code-sheet .desk-code-name { font-family: var(--handwritten); }
.desk-code-sheet .desk-code-value { font-family: var(--mono); font-size: 17px; }
.desk-code-sheet label, .desk-code-sheet .playlist-share-meta { font-size: 14px; }
.desk-code-sheet button { font-size: 16px; }
.desk-code-sheet select { width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--yd-tool-border); border-radius: 5px; background: var(--yd-card-paper); color: var(--yd-card-ink); font: 16px/1.45 var(--sans); }
.desk-code-sheet select:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.playlist-share-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.playlist-share-header h2 { font: 27px/1.2 var(--serif); margin: 0; }
.playlist-share-sheet h3 { font: 25px/1.3 var(--serif); margin: 16px 0 4px; overflow-wrap: anywhere; }
.playlist-share-sheet label { display: block; margin: 20px 0 0; font: 13px/1.4 var(--sans); color: var(--yd-tool-muted); }
.playlist-share-sheet input, .playlist-share-sheet textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--yd-tool-border); border-radius: 5px; background: var(--yd-card-paper); color: var(--yd-card-ink); font: 16px/1.45 var(--sans); }
.playlist-share-sheet textarea { resize: vertical; font-family: var(--handwritten); }
.playlist-share-sheet input::placeholder, .playlist-share-sheet textarea::placeholder { color: var(--yd-card-ink); opacity: .65; }
.playlist-share-meta { font: 12px/1.5 var(--sans); color: var(--yd-tool-muted); margin: 5px 0 12px; }
.playlist-share-description { font: 16px/1.5 var(--serif); margin: 18px 0; }
.playlist-share-status { font: 14px/1.5 var(--sans); margin: 18px 0; overflow-wrap: anywhere; }
.playlist-share-sheet .playlist-share-send { width: 100%; padding: 12px 16px; border: 1px solid var(--yd-tool-border); border-radius: 24px; color: var(--yd-tool-ink); }
.playlist-share-faces { display: flex; align-items: center; padding: 5px 8px; height: 90px; }
.playlist-share-faces .lib-thumb { width: 78px; height: 78px; flex: 0 0 78px; border: 3px solid var(--yd-card-paper); box-shadow: 0 2px 7px #0002; transform: rotate(-5deg); overflow: hidden; font: 10px/1.3 var(--serif); }
.playlist-share-faces .lib-thumb + .lib-thumb { margin-left: -16px; transform: rotate(3deg); }
.playlist-share-faces .lib-thumb:nth-child(3) { transform: rotate(-2deg); }
.playlist-share-sheet button:focus-visible, .playlist-share-sheet input:focus-visible, .playlist-share-sheet textarea:focus-visible, .playlist-arrival:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.playlist-arrivals { margin-top: 28px; border-top: 1px solid var(--yd-tool-border); padding-top: 18px; }
.playlist-arrivals h3 { font: 21px/1.3 var(--serif); color: var(--yd-tool-ink); margin: 0 0 12px; }
.playlist-arrival { display: grid; grid-template-columns: 185px 1fr; align-items: center; width: 100%; padding: 10px 0; text-align: left; background: none; border: 0; border-bottom: .5px solid var(--yd-tool-border); color: var(--yd-tool-ink); cursor: pointer; }
.playlist-arrival .playlist-share-faces { grid-row: span 2; }
.playlist-arrival strong { align-self: end; font: 20px/1.3 var(--serif); }
.playlist-inbox-entry { border-bottom: .5px solid var(--yd-tool-border); padding-bottom: 8px; }
.playlist-inbox-entry .playlist-arrival { border-bottom: 0; }
.playlist-inbox-entry > .people-quiet { display: block; margin-left: auto; }
.playlist-arrival > span { align-self: start; font: 12px/1.5 var(--sans); color: var(--yd-tool-muted); margin-top: 4px; }
.playlist-arrival-items { max-height: 40vh; overflow-y: auto; margin: 18px 0; }
.playlist-arrival-item { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: .5px solid var(--yd-tool-border); font: 17px/1.4 var(--serif); }
.playlist-arrival-item .lib-thumb { flex: 0 0 58px; width: 58px; height: 58px; }
.playlist-arrival-item { width: 100%; text-align: left; background: none; border: 0; border-bottom: .5px solid var(--yd-tool-border); color: inherit; cursor: pointer; }
.playlist-arrival-item:hover { background: color-mix(in srgb, var(--yd-tool-ink) 5%, transparent); }
.playlist-preview { position: fixed; inset: 0; margin: auto; width: 100vw; height: 100dvh; max-width: none; max-height: none; box-sizing: border-box; border: 0; padding: 0; background: #100d0bf5; color: #faf5ed; }
.playlist-preview[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.playlist-preview::backdrop { background: #100d0be6; }
.playlist-preview-header, .playlist-preview-footer { display: flex; align-items: center; gap: 20px; padding: 16px 24px; font: 14px/1.4 var(--sans); }
.playlist-preview-title { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-preview button, .playlist-preview-link { color: inherit; font: 14px/1.5 var(--sans); background: none; border: 0; padding: 8px 12px; cursor: pointer; text-decoration: none; }
.playlist-preview button:hover, .playlist-preview-link:hover { text-decoration: underline; }
.playlist-preview button:disabled { opacity: .3; cursor: default; text-decoration: none; }
.playlist-preview button:focus-visible, .playlist-preview a:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.playlist-preview-header > button { flex-shrink: 0; border: 1px solid #faf5ed50; border-radius: 24px; }
.playlist-preview-stage { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; overflow: auto; }
.playlist-preview-photo, .playlist-preview-media { display: block; width: 100%; min-height: 0; flex: 1; object-fit: contain; }
.playlist-preview-youtube { border: 0; width: min(100%, calc((100dvh - 180px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: 100%; flex-shrink: 1; }
.playlist-preview-footer { justify-content: center; }
.playlist-preview-status { text-align: center; font: 16px/1.5 var(--sans); }
.playlist-preview.is-audio .playlist-preview-media { flex: none; width: min(520px, 100%); height: 54px; }
.playlist-preview .playlist-preview-artwork { flex: 0 1 auto; width: min(340px, 60vw); height: auto; aspect-ratio: 1; max-height: 45dvh; }
.playlist-preview-artwork img { width: 100%; height: 100%; object-fit: contain; }
.playlist-preview h2 { font: 28px/1.3 var(--serif); text-align: center; margin: 0; }
.playlist-preview-byline { font: 15px/1.5 var(--sans); margin: 0; opacity: .8; }
.playlist-preview-destination { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 650px; text-align: center; }
.playlist-preview-destination .lib-thumb { width: min(420px, 70vw); height: 240px; }
.playlist-preview-destination .playlist-preview-link { border: 1px solid #faf5ed70; border-radius: 24px; padding: 10px 24px; }
.playlist-preview.is-reading { background: var(--yd-playlist-surface); color: var(--yd-tool-ink); }
.playlist-preview.is-reading .playlist-preview-header > button { border-color: var(--yd-tool-border); }
.playlist-preview.is-reading .playlist-preview-stage { justify-content: flex-start; }
.playlist-preview-paper { width: min(760px, 100%); box-sizing: border-box; margin: 12px auto; padding: clamp(24px, 5vw, 60px); background: var(--yd-card-paper); color: var(--yd-card-ink); font: 20px/1.65 var(--serif); overflow-wrap: anywhere; }
.playlist-preview-paper.is-note { background: var(--note-stock); color: #302d27; }
.playlist-preview-paper.is-note p, .playlist-preview-paper.is-note blockquote { white-space: pre-wrap; }
.playlist-preview-paper blockquote { margin: 24px 0; padding-left: 20px; border-left: 3px solid var(--action); }
.playlist-preview-paper pre { white-space: pre-wrap; }
.playlist-preview-paper table { width: 100%; }
@media (max-width: 600px) {
  .playlist-preview-header, .playlist-preview-footer { padding: 12px; gap: 8px; }
  .playlist-preview-stage { padding: 0 12px; }
  .playlist-preview-title { font-size: 12px; }
}
.dv-playlist-inbox { position: absolute; right: 30px; top: 26px; z-index: 10; padding: 8px 12px; background: var(--yd-playlist-surface); border: .5px solid var(--yd-tool-border); border-radius: 20px; color: var(--yd-tool-ink); font: 13px/1.4 var(--sans); cursor: pointer; }
.playlist-share-sheet > .playlist-arrivals { border: 0; padding: 0; margin: 0; }
.playlist-share-sheet > .playlist-arrivals > h3 { display: none; }
.playlist-share-sheet .playlist-arrival { grid-template-columns: 150px 1fr; }
.playlist-share-sheet .playlist-arrival .lib-thumb { width: 62px; height: 62px; flex-basis: 62px; }
.lib-collection-hint { margin: 0 14px 12px; color: var(--yd-tool-muted); font: 12px/1.5 var(--sans); }
.lib-playlist-member { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; border: 0; border-bottom: .5px solid var(--yd-tool-border); background: transparent; text-align: left; color: var(--yd-tool-ink); font: 15px/1.4 var(--serif); }
button.lib-playlist-member, label.lib-playlist-member { cursor: pointer; }
.lib-playlist-member .lib-thumb { width: 44px; height: 44px; flex: 0 0 44px; }
.lib-playlist-member-title { flex: 1; }
.lib-playlist-member input { accent-color: var(--yd-action); }
.lib-playlist-members { position: relative; }
.lib-playlist-members .lib-playlist-member { user-select: none; position: relative; cursor: grab; }
.lib-playlist-members .lib-playlist-member:active { cursor: grabbing; }
.lib-playlist-member.is-dragging { z-index: 3; background: var(--yd-playlist-surface); box-shadow: 0 6px 20px #0003; opacity: .9; }
.lib-playlist-drop-line { position: absolute; z-index: 4; left: 14px; right: 14px; height: 2px; background: var(--yd-action); pointer-events: none; }
.library-note-view { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(620px, calc(100vw - 40px)); max-height: calc(100dvh - 64px); padding: 26px 30px; border: 0; border-radius: 4px; background: var(--note-stock); color: var(--yd-note-ink); box-shadow: 0 20px 80px #0006; overflow-y: auto; }
.library-note-view::backdrop { background: #100c0980; }
.library-note-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.library-note-heading > button:last-child:not(:first-child) { width: 30px; height: 30px; padding: 5px; border: 0; background: transparent; color: inherit; opacity: .65; cursor: pointer; }
.library-note-heading svg { width: 18px; height: 18px; }
.library-note-back { font: 13px/1.5 var(--sans); color: inherit; background: transparent; border: 0; padding: 4px 0; cursor: pointer; }
.library-note-content { overflow-wrap: anywhere; }
.library-note-quote { margin: 0 0 24px; font: 22px/1.6 var(--serif); white-space: pre-wrap; }
.library-note-personal { margin: 0 0 24px; font: 22px/1.6 var(--handwritten); white-space: pre-wrap; }
.library-note-caption { display: block; margin: 18px 0 8px; font: 12px/1.5 var(--sans); opacity: .7; }
.library-note-input { box-sizing: border-box; width: 100%; padding: 12px; resize: vertical; border: 1px solid #655a4945; border-radius: 3px; background: #ffffff20; color: inherit; font: 21px/1.6 var(--handwritten); }
.library-note-origin { display: flex; align-items: center; gap: 14px; border-top: 1px solid #655a4930; padding-top: 18px; margin-top: 8px; }
.library-note-origin .lib-thumb { width: 64px; height: 64px; flex: 0 0 64px; }
.library-note-source-copy { min-width: 0; }
.library-note-source-title { display: block; padding: 0; background: transparent; border: 0; color: inherit; text-align: left; font: 16px/1.4 var(--serif); overflow-wrap: anywhere; }
button.library-note-source-title, button.library-note-moment { cursor: pointer; }
.library-note-source-meta { font: 12px/1.5 var(--sans); margin-top: 4px; }
.library-note-moment { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: 12px/1.4 var(--mono); text-decoration: underline; text-underline-offset: 3px; }
.library-note-status { font: 12px/1.5 var(--sans); margin: 14px 0 0; }
.library-note-status:empty { display: none; }
.library-note-edit-tools { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.library-note-colors { display: flex; gap: 8px; flex: 1; }
.library-note-color { width: 20px; height: 20px; border: 1px solid #655a4960; border-radius: 50%; cursor: pointer; }
.library-note-color[aria-pressed="true"] { outline: 1px solid currentColor; outline-offset: 3px; }
.library-note-save { padding: 6px 18px; border: 1px solid #655a4960; border-radius: 3px; color: inherit; background: #ffffff20; font: 13px/1.5 var(--sans); cursor: pointer; }
.library-note-view button:focus-visible, .library-note-input:focus-visible { outline: 2px solid #526871; outline-offset: 3px; }
.lib-action-error { display: block; margin: 8px 14px; color: var(--yd-error); font: 12px/1.5 var(--sans); }
.lib-note-card > .lib-row-more, .lib-playlist-card > .lib-row-more { display: none; }
@media (hover: none) {
  .lib-note-card > .lib-row-more, .lib-playlist-card > .lib-row-more { display: block; position: absolute; right: 4px; top: 4px; }
  .lib-note-card.actions-open > .lib-row-actions, .lib-playlist-card.actions-open > .lib-row-actions { display: flex; right: 48px; top: 8px; transform: none; }
}

@media (max-width: 700px), (hover: none) {
  .lib-row2 {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 0;
    padding-right: 4px;
  }
  .lib-row-open {
    min-height: 64px;
    padding: 9px 6px 9px 12px;
  }
  .lib-row-more {
    grid-column: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-light);
    font: 700 20px/1 var(--sans);
  }
  .lib-row-more:active,
  .lib-row-more[aria-expanded="true"] { background: rgba(53, 89, 127, .1); }
  .lib-row-actions {
    display: none;
    position: absolute;
    right: 48px;
    top: 50%;
    z-index: 4;
    transform: translateY(-50%);
    opacity: 1;
    padding: 4px;
    border: 1px solid var(--tool-border, var(--border));
    border-radius: 999px;
    background: var(--tool-bg, var(--paper));
    box-shadow: 0 5px 16px rgba(25, 18, 10, .18);
  }
  .lib-row2.actions-open .lib-row-actions {
    display: flex;
    transform: translateY(-50%);
  }
  .lib-row-actions button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

/* Empty / loading states */
.lib-sec-empty {
  padding: 0 14px 14px;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-faint);
}
.lib-empty {
  padding: 40px 14px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 13px;
}

/* Footer */
.lib-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-tint);
  flex-shrink: 0;
}
.lib-footer .sp { flex: 1; }
.lib-footer button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-faint);
  padding: 0 4px;
}
.lib-footer button:hover { color: var(--ink); }
.lib-footer .sep { opacity: 0.3; margin: 0 6px; }

/* Link ingestion reports the real network stage without opening an alert or
   replacing the desk. The same compact line carries success and useful
   failures, so adding a source still feels like placing an object. */
.lib-ingest-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 8px;
  padding: 2px 7px;
  font: 500 11px/1.35 var(--sans);
  color: var(--ink-faint);
  opacity: 1;
  border-left: 2px solid transparent;
}
.lib-ingest-status:empty { display: none; }
.lib-ingest-status[data-state="loading"] { color: var(--ink-light); }
.lib-ingest-status[data-state="loading"]::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--gold-warm);
  border-radius: 50%;
  animation: lib-ingest-spin .75s linear infinite;
}
.lib-ingest-status[data-state="success"] {
  color: #315D43;
  border-left-color: #5F8C6C;
  background: rgba(95, 140, 108, .08);
}
.lib-ingest-status[data-state="error"] {
  color: #8A3D2D;
  border-left-color: #B6533C;
  background: rgba(182, 83, 60, .08);
}
@keyframes lib-ingest-spin { to { transform: rotate(360deg); } }

/* Dark theme overrides */
[data-theme="dark"] .lib-search-v2,
[data-theme="dark"] .lib-chips,
[data-theme="dark"] .lib-body,
[data-theme="dark"] .lib-add-sheet { background: var(--paper); }
[data-theme="dark"] .lib-search-v2-input { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .lib-search-v2-input:focus-within { background: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .lib-add-btn { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .lib-footer { background: rgba(255, 255, 255, 0.03); }

/* ═══════════════════════════════════════════════════════════════════
   EMAIL-IN — setup overlay + toast
   ═══════════════════════════════════════════════════════════════════
   The Email-It-In tile in the + sheet reuses `.lib-add-sheet-item`
   (no new styles needed there). Everything below is scoped to the
   dedicated setup card overlay and the arrival toast.
*/

/* ── Overlay shell ── */
.email-in-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 26, 18, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9800;
  animation: email-in-fade-in 200ms ease-out;
}
.email-in-overlay-closing { animation: email-in-fade-out 180ms ease-in forwards; }

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

.email-in-card {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 32px 32px 28px;
  box-shadow: 0 20px 48px rgba(30, 26, 18, 0.28), 0 4px 12px rgba(30, 26, 18, 0.16);
  animation: email-in-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes email-in-pop {
  from { transform: translateY(6px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.email-in-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: 6px;
}
.email-in-close:hover { background: var(--gold-softer); color: var(--ink); }

.email-in-step {
  display: flex;
  flex-direction: column;
}
.email-in-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep, var(--gold-warm));
  font-weight: 600;
  margin-bottom: 6px;
}
.email-in-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.email-in-lead {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft, var(--ink));
  margin: 0 0 20px;
}

/* ── Address row ── */
.email-in-address-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--gold-softer);
}
.email-in-address {
  flex: 1;
  padding: 12px 14px;
  border: none;
  background: transparent;
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
  outline: none;
}
.email-in-copy {
  border: none;
  background: var(--slab);
  color: var(--slab-text);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 0 16px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.12s;
  white-space: nowrap;
}
.email-in-copy:hover { background: var(--slab-hover, var(--slab)); }

/* ── Action buttons ── */
.email-in-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.email-in-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: var(--slab);
  color: var(--slab-text);
  border: none;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, background 0.12s;
}
.email-in-primary:hover { background: var(--slab-hover, var(--ink)); }
.email-in-primary:active { transform: scale(0.98); }

.email-in-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 14px;
  cursor: pointer;
}
.email-in-secondary:hover { background: var(--gold-softer); }

.email-in-footnote {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.email-in-inline-addr {
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 12px;
  background: var(--gold-softer);
  padding: 2px 6px;
  border-radius: 4px;
  font-style: normal;
}

/* ── Step 1: vCard install visual ── */
.email-in-download-visual {
  display: flex;
  justify-content: center;
  margin: 10px 0 24px;
}
.email-in-visual-card {
  display: inline-block;
  padding: 14px 28px;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(30, 26, 18, 0.12);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  transform: rotate(-2deg);
  transition: transform 0.3s;
}
.email-in-visual-card::before {
  content: "✉︎";
  display: inline-block;
  margin-right: 10px;
  color: var(--gold-warm);
}
.email-in-download-visual:hover .email-in-visual-card {
  transform: rotate(0) scale(1.03);
}

/* ── Step 2: Provider grid ── */
.email-in-provider-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.email-in-provider {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
  font-family: var(--serif);
}
.email-in-provider:hover {
  border-color: var(--gold-warm);
  background: var(--gold-softer);
}
.email-in-provider:active { transform: scale(0.99); }
.email-in-provider-logo {
  font-size: 22px;
  line-height: 1;
}
.email-in-provider-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  display: block;
}
.email-in-provider-sub {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  display: block;
  margin-top: 2px;
}

/* ── Step 3: Numbered walkthrough ── */
.email-in-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.email-in-steps > li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.email-in-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--slab);
  color: var(--slab-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.email-in-step-body { flex: 1; min-width: 0; }
.email-in-step-head {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
}
.email-in-step-sub {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.5;
}
.email-in-snippet {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--gold-softer);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.email-in-snippet code {
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 12px;
  color: var(--ink);
  overflow-wrap: anywhere;
  flex: 1;
}
.email-in-mini-copy {
  border: none;
  background: transparent;
  color: var(--gold-warm);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  flex-shrink: 0;
}
.email-in-mini-copy:hover { color: var(--ink); }

/* ── Manual-forward card for Apple Mail iOS / Other ── */
.email-in-manual-card {
  background: var(--gold-softer);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.email-in-manual-head {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.email-in-manual-list {
  padding-left: 20px;
  margin: 0;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.email-in-manual-list code {
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 12px;
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Done step ── */
.email-in-step-done { text-align: center; }
.email-in-step-done .email-in-title { margin-top: 8px; }
.email-in-step-done .email-in-lead { text-align: left; }
.email-in-done-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: var(--gold-warm);
  color: var(--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  animation: email-in-check 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes email-in-check {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.email-in-done-addr {
  margin: 0 auto 20px;
  padding: 10px 14px;
  background: var(--gold-softer);
  border-radius: 6px;
  display: inline-block;
}
.email-in-done-addr code {
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 13px;
  color: var(--ink);
}

/* ── Arrival toast ── */
.email-in-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 14px 18px;
  background: var(--slab);
  color: var(--slab-text);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(30, 26, 18, 0.32), 0 2px 8px rgba(30, 26, 18, 0.18);
  font-family: var(--serif);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 9900;
  max-width: min(420px, calc(100vw - 40px));
}
.email-in-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.email-in-toast-icon {
  font-size: 22px;
  color: var(--gold-warm);
  line-height: 1;
  flex-shrink: 0;
}
.email-in-toast-body {
  flex: 1;
  min-width: 0;
}
.email-in-toast-headline {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.email-in-toast-sub {
  margin-top: 3px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--slab-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Mobile tightening ── */
@media (max-width: 600px) {
  .email-in-overlay { padding: 12px; align-items: flex-end; }
  .email-in-card {
    width: 100%;
    padding: 26px 22px 24px;
    border-radius: 14px 14px 0 0;
    animation: email-in-slide-up 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes email-in-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .email-in-title { font-size: 22px; }
  .email-in-lead { font-size: 14px; }
}

/* ── Dark theme ── */
[data-theme="dark"] .email-in-card { background: var(--paper); }
[data-theme="dark"] .email-in-overlay { background: rgba(0, 0, 0, 0.62); }
[data-theme="dark"] .email-in-visual-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32); }
/*
=====================================================
   THE PAGE — Slab overflow Export submenu (Fix 1)
   Three format rows + a marks toggle live inside the slab ⋯
   overflow alongside History and Find. The legacy header dropdown
   is hidden under THE_PAGE; this is the user-visible export path.
   ============================================================ */
.page-slab-overflow .slash-grouplabel {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 8px 14px 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 4px;
}
.page-slab-overflow .slash-item-sub { padding-left: 22px; }
.slab-export-marks {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  padding: 6px 14px 4px;
  cursor: pointer;
  user-select: none;
}
.slab-export-marks input { cursor: pointer; }

/* Export toast — red variant for failures, otherwise inherits .desk-toast. */
.desk-toast.export-toast-error { background: #8B2A2A; color: #FFFFFF; }
[data-theme="dark"] .page-slab-overflow .slash-grouplabel {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   THE PAGE — Slab save indicator text (Fix 3)
   Sibling label next to .slab-dot that says "Saved" / "Saving…"
   so autosave is trustworthy. The dot stays as the visual cue.
   ============================================================ */
/* Secondary words stay available without taking over media playback. */
.reader-close-bar .reader-close {
  font: 500 16px/1.3 var(--serif);
  text-transform: none;
  letter-spacing: normal;
}
.reader-optional-transcript {
  margin: 20px auto 0;
  padding: 0 12px;
  max-width: 920px;
  color: var(--yd-ink);
}
.reader-optional-transcript > summary {
  width: fit-content;
  padding: 10px 14px;
  border: 1px solid var(--yd-tool-border);
  border-radius: 999px;
  background: var(--yd-tool);
  color: var(--yd-tool-ink);
  font: 500 16px/1.3 var(--serif);
  cursor: pointer;
}
details.reader-optional-transcript:not([open]) > :not(summary) { display: none; }
.reader-optional-transcript > summary:focus-visible {
  outline: 2px solid var(--yd-tool-ink);
  outline-offset: 3px;
}
/* These are system controls, not handwritten notes, in either room. */
body .dv-add-source-wrap .dv-add-source,
body .dv-draw-area-wrap :is(.dv-draw-area, .dv-arrange-toggle) {
  background: var(--yd-desk-add-fill);
  color: var(--yd-desk-add-ink);
  border: 1px solid var(--yd-desk-control-border);
  font: 500 16px/1.25 var(--serif);
}
body .dv-draw-area-check { border-color: currentColor; color: var(--yd-desk-add-ink); }
body .dv-add-source-wrap .dv-add-source-menu,
body .lib-add-sheet {
  background: var(--yd-tool);
  color: var(--yd-tool-ink);
  border-color: var(--yd-tool-border);
}
body .dv-add-source-menu button,
body .lib-add-sheet .lib-add-sheet-item { color: var(--yd-tool-ink); }
body .dv-add-source-menu strong { font: 500 16px/1.3 var(--serif); }
body .dv-add-source-menu button span,
body .lib-add-sheet-sub { color: var(--yd-tool-muted); }
body .dv-add-source-menu button:is(:hover, :focus-visible) {
  background: var(--yd-tool-deep);
  outline: 1px solid var(--yd-tool-border);
}
@media (max-width: 700px) {
  body .dv-add-source-wrap .dv-add-source-menu { left: auto; right: 0; }
}
.slab-save-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--yd-tool);
  color: var(--yd-tool-ink);
}
.slab-save-status .slab-dot { background: currentColor; opacity: 1; }
.slab-save-text {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--yd-tool-ink);
  font-style: normal;
  transition: color 0.18s ease, opacity 0.18s ease;
  user-select: none;
  white-space: nowrap;
}
.slab-save-text.saving, .slab-save-text.saved { color: var(--yd-tool-ink); }
.slab-save-text.error {
  color: var(--yd-action);
  font-style: normal;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* ============================================================
   Chapter rename (Fix 4) — slab inline edit + row pencil button
   ============================================================ */
#page-slab-title.editing {
  outline: 1px dashed rgba(184, 150, 74, 0.7);
  outline-offset: 2px;
  background: rgba(184, 150, 74, 0.08);
  cursor: text;
  font-style: normal;
  border-radius: 2px;
  padding: 0 4px;
}

.chapter-rename-btn {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--ink-faint);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
  padding: 0;
}
.ws-chapter-row { position: relative; }
.ws-chapter-row:hover .chapter-rename-btn { opacity: 0.8; }
.chapter-rename-btn:hover { opacity: 1 !important; background: rgba(184, 150, 74, 0.14); color: var(--ink); }

.ws-ch-title-input {
  flex: 1;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid rgba(184, 150, 74, 0.7);
  border-radius: 3px;
  padding: 2px 6px;
  min-width: 0;
  outline: none;
}
[data-theme="dark"] .ws-ch-title-input { background: rgba(255, 255, 255, 0.06); }

/* ============================================================
   Chapter drag-to-reorder (Fix 5) — insertion indicator + drag state
   ============================================================ */
.ws-chapter-row.dragging { opacity: 0.45; }
.ws-chapter-row.drop-before { box-shadow: inset 0 2px 0 0 rgba(184, 150, 74, 0.95); }
.ws-chapter-row.drop-after { box-shadow: inset 0 -2px 0 0 rgba(184, 150, 74, 0.95); }

/* ============================================================
   Desk dropdown — chapter rename pencil + drag-reorder
   Mirrors the existing .dropdown-chapter-delete styling so
   delete + rename sit side-by-side on hover. Pencil at right:32px,
   delete at right:8px (existing).
   ============================================================ */
.dropdown-chapter-rename {
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--slab-muted);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.desk-dropdown-chapter:hover .dropdown-chapter-rename,
.dropdown-chapter-rename:focus-visible { opacity: 0.75; }
.dropdown-chapter-rename:hover {
  opacity: 1;
  color: var(--gold);
  background: rgba(184, 150, 74, 0.14);
}
@media (hover: none) {
  .dropdown-chapter-rename { opacity: 0.6; }
}

.dropdown-chapter-title-input {
  flex: 1;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(184, 150, 74, 0.7);
  border-radius: 3px;
  padding: 2px 6px;
  min-width: 0;
  outline: none;
  margin-right: 60px; /* leave space for the rename + delete buttons */
}

/* Drag-to-reorder indicators on dropdown rows */
.desk-dropdown-chapter.dragging { opacity: 0.45; }
.desk-dropdown-chapter.drop-before { box-shadow: inset 0 2px 0 0 rgba(184, 150, 74, 0.95); }
.desk-dropdown-chapter.drop-after { box-shadow: inset 0 -2px 0 0 rgba(184, 150, 74, 0.95); }

/* ============================================================
   Library reader — TikTok player (portrait 9:16)
   Mirrors .reader-youtube-frame but narrower since TikToks are
   vertical. Iframe close button (.reader-media-close) is reused.
   ============================================================ */
/* Public Spotify and Apple players sit directly in the reader. The note below
 * explains the transcription boundary without losing contrast on dark wood. */
.reader-spotify-frame {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 20px;
  border-radius: 14px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.06);
}
.reader-spotify-player {
  display: block;
  width: 100%;
  border: none;
  border-radius: 14px;
}
.reader-spotify-note {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid rgba(122, 96, 62, .22);
  border-radius: 8px;
  background: rgba(122, 96, 62, .06);
  color: var(--ink, #2A1E17);
  font-size: 13px;
  line-height: 1.55;
}
.reader-spotify-note strong { font-weight: 640; }
.reader-spotify-description {
  margin: 10px 0 0;
  color: var(--ink-soft, #5C4F43);
}
[data-theme="dark"] .reader-spotify-note {
  border-color: rgba(238, 226, 211, .22);
  background: rgba(255, 255, 255, .055);
  color: #F4ECE2;
}
[data-theme="dark"] .reader-spotify-description {
  color: #D8CCBF;
}

.reader-tiktok-frame {
  width: 100%;
  max-width: 360px;
  margin: 0 auto 24px;
  background: #000;
  border-radius: 4px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 40px;
  z-index: 10;
}
.reader-tiktok-player {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  border: none;
}
.reader-tiktok-fallback {
  text-align: center;
  padding: 16px 0 24px;
  font-size: 14px;
}
.reader-tiktok-fallback a { color: var(--gold); text-decoration: none; }
.reader-tiktok-fallback a:hover { text-decoration: underline; }
/* Compact "Open in TikTok ↗" beneath the embed. Quiet by default; if the
   iframe doesn't load within 6s the JS adds -primary and we promote it. */
.reader-tiktok-watch-link {
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.04);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.reader-tiktok-watch-link a { color: var(--ink-faint); text-decoration: none; }
.reader-tiktok-watch-link a:hover { color: var(--gold); text-decoration: underline; }
.reader-tiktok-watch-link-primary {
  background: var(--gold);
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
}
.reader-tiktok-watch-link-primary a { color: #fff; }
.reader-tiktok-watch-link-primary a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   TWO-PANE LAYOUT — source | note gutter | writing
   A sticky note isn't a place. It's born on the left when you
   react and spent on the right when you cite it, so it lives at
   the seam rather than in a pane of its own.
   Scoped to body.two-pane so the three-pane layout still works.
   ============================================================ */

body.two-pane .panes {
  grid-template-columns: var(--left-pane-w) 1px var(--note-gutter-w, 220px) 1fr;
}
body.two-pane #resize-handle-right,
body.two-pane #pane-right,
body.two-pane .pane-restore-right { display: none !important; }
body.two-pane .panes.close-left  { grid-template-columns: 0px 0px var(--note-gutter-w, 220px) 1fr !important; }
body.two-pane .panes.close-right { grid-template-columns: var(--left-pane-w) 1px var(--note-gutter-w, 220px) 1fr !important; }
body.two-pane .panes.close-center { grid-template-columns: minmax(0, 1fr) 0px var(--note-gutter-w, 220px) 0px !important; }
body.two-pane .panes.close-center > #resize-handle-left { width: 0; min-width: 0; overflow: hidden; }
body.two-pane .panes.close-center > #pane-center { padding: 0; border: 0; min-width: 0; }
body.two-pane .panes.close-center:not(.expand-left):not(.expand-center) > #pane-center { visibility: hidden; }

.note-gutter { display: none; }
/* Shared writing belongs to someone else: the reader's private stickies
   never sit beside it. */
body.two-pane.shared-view .note-gutter { display: none; }
body.two-pane .note-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0 20px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.035), transparent 15%, transparent 85%, rgba(0,0,0,.035)),
    var(--frame);
  box-shadow: inset 1px 0 0 rgba(0,0,0,0.05), inset -1px 0 0 rgba(0,0,0,0.05);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 3;
  scrollbar-width: none;
}
body.two-pane .note-gutter::-webkit-scrollbar { display: none; }
.note-gutter-label {
  width: 100%;
  padding: 1px 0 6px;
  color: var(--ink-faint);
  font: 700 10px/1 var(--sans);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

/* --- Chips: sticky notes seen edge-on --- */
.note-chip {
  position: relative;
  width: calc(100% - 28px);
  max-width: 198px;
  min-height: 92px;
  flex: 0 0 auto;
  padding: 10px 30px 9px 10px;
  border: none;
  border-radius: 2px;
  cursor: grab;
  text-align: left;
  opacity: 0.94;
  transform: rotate(-1deg);
  box-shadow: 1px 2px 4px rgba(30,26,18,0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.note-chip-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(45, 38, 29, .62);
  background: rgba(255, 255, 255, .34);
  font: 500 17px/1 var(--sans);
  cursor: pointer;
  opacity: .78;
  transition: color .14s ease, background .14s ease, opacity .14s ease, transform .14s ease;
}
.note-chip-delete:hover,
.note-chip-delete:focus-visible {
  color: #2E2821;
  background: rgba(255, 255, 255, .72);
  opacity: 1;
  transform: scale(1.08);
  outline: 2px solid rgba(49, 94, 136, .55);
  outline-offset: 1px;
}
.note-chip-delete:disabled { cursor: wait; opacity: .35; }
.note-chip:nth-child(even) { transform: rotate(0.8deg); }
.note-chip:hover,
.note-chip:focus-visible {
  transform: rotate(0deg) scale(1.06);
  opacity: 1;
  box-shadow: 2px 4px 10px rgba(30,26,18,0.36);
  z-index: 2;
  outline: none;
}
.note-chip-label {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  font-family: var(--handwritten, cursive);
  font-size: 14px;
  line-height: 1.38;
  letter-spacing: 0.1px;
  word-break: break-word;
}
.note-chip-label:focus-visible {
  outline: 2px solid rgba(49, 94, 136, .55);
  outline-offset: 3px;
  border-radius: 1px;
}
body.two-pane .note-gutter .note-chip:not(.note-chip-add) {
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
}
body.two-pane .note-gutter .note-chip:not(.note-chip-add) .note-chip-label {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}
.note-chip-moment {
  display: inline-flex;
  margin-top: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  color: rgba(42, 37, 32, .78);
  font: 700 9px/1.2 var(--sans);
  letter-spacing: .03em;
}
.note-chip-used {
  opacity: 1;
  box-shadow: 0 2px 5px rgba(30,26,18,0.3), 0 0 0 1.5px var(--gold-muted, #B8964A);
}

/* A sourced sticky carries where its words came from, on the paper itself:
   a small true picture when the source has one, its title, who and where,
   and the moment or passage it points at. The paper grows to fit; ordinary
   stickies keep their square. */
body.two-pane .note-gutter .note-chip.note-chip-sourced {
  aspect-ratio: auto;
  min-height: 0;
  padding-bottom: 10px;
}
body.two-pane .note-gutter .note-chip.note-chip-sourced .note-chip-label { -webkit-line-clamp: 5; }
.note-chip-source {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 9px -20px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(30, 26, 18, .14);
}
.note-chip-source-face {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.note-chip-source-face:focus-visible { outline: 2px solid rgba(49, 94, 136, .55); outline-offset: 2px; border-radius: 2px; }
.note-chip-source-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(30, 26, 18, .10);
  box-shadow: inset 0 0 0 1px rgba(30, 26, 18, .12);
}
.note-chip-source-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note-chip-source-thumb.pv-exhausted img { display: none; }
.note-chip-source-mark { font: 500 14px/1 var(--sans); color: rgba(30, 26, 18, .55); }
.note-chip-source-thumb .dv-pv-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.note-chip-source-copy { min-width: 0; flex: 1; }
.note-chip-source-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 650 11px/1.3 var(--sans);
  color: rgba(30, 26, 18, .88);
  overflow-wrap: anywhere;
}
.note-chip-source-copy small {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 10px/1.3 var(--sans);
  color: rgba(30, 26, 18, .62);
  overflow-wrap: anywhere;
}
.note-chip-source-moment {
  align-self: flex-start;
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 26, 18, .82);
  color: #FFF9EF;
  font: 700 10px/1.2 var(--sans);
  letter-spacing: .03em;
  cursor: pointer;
}
.note-chip-source-moment:hover, .note-chip-source-moment:focus-visible { background: #9A4F3F; outline: none; }
.note-chip-source-moment:focus-visible { box-shadow: 0 0 0 2px rgba(154, 79, 63, .35); }
.note-chip-dragging { opacity: 0.35; cursor: grabbing; }
.note-chip-yellow { background: var(--react-yellow, #F2E6C2); color: var(--note-ink); }
.note-chip-blue   { background: var(--react-blue,   #CFDBE6); color: var(--note-ink); }
.note-chip-pink   { background: var(--react-pink,   #EDD2C6); color: var(--note-ink); }
.note-chip-green  { background: var(--react-green,  #D5E1D3); color: var(--note-ink); }

/* The + that writes a fresh sticky — a blank pad waiting at the seam */
.note-chip-add {
  width: calc(100% - 28px);
  max-width: 198px;
  min-height: 38px;
  padding: 2px 0 4px;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-faint);
  background: var(--paper-tint, #F5EEDF);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  text-align: center;
  cursor: pointer;
}
.note-chip-add:hover {
  color: var(--ink);
  transform: rotate(0deg);
  box-shadow: 1px 2px 5px rgba(30,26,18,0.18);
}
[data-theme="dark"] .note-chip-add {
  background: #241C17;
  color: #A08A75;
  border-color: rgba(196, 181, 162, 0.35);
}
[data-theme="dark"] .note-chip-add:hover { color: #F0EBE1; }

/* Composer inside the popover */
.note-composer-input {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  font-family: var(--handwritten, cursive);
  font-size: 16px;
  line-height: 1.35;
  color: inherit;
  outline: none;
  margin-bottom: 6px;
}
.note-composer-colors {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.note-composer-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  cursor: pointer;
  padding: 0;
}
.note-composer-dot.on { box-shadow: 0 0 0 2px var(--gold-muted, #B8964A); }
.note-composer-dot-yellow { background: var(--react-yellow, #E8C840); }
.note-composer-dot-blue   { background: var(--react-blue,   #5B9BD5); }
.note-composer-dot-pink   { background: var(--react-pink,   #E07098); }
.note-composer-dot-green  { background: var(--react-green,  #5DAE82); }

.note-gutter-source-btn { margin-top: 4px; }

.note-gutter-more {
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 2px;
  letter-spacing: 0.3px;
}

/* --- Popover: the note itself, on demand --- */
.note-gutter-popover {
  position: fixed;
  z-index: 4000;
  width: 262px;
  max-height: 340px;
  overflow-y: auto;
  padding: 13px 15px;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 4px solid var(--react-yellow, #E8C840);
  border-radius: 7px;
  box-shadow: 0 10px 30px rgba(30,26,18,0.26);
}
.sticky-note-editor,
[data-theme="dark"] .sticky-note-editor {
  color-scheme: light;
  --ink: var(--note-ink, #2A2520);
  --ink-faint: #625A50;
  --paper: #FFFDF8;
  color: var(--note-ink, #2A2520);
  border: 0;
  border-left: 0;
  border-radius: 4px;
}
.sticky-note-editor.note-yellow { background: var(--react-yellow, #F2E6C2); }
.sticky-note-editor.note-blue { background: var(--react-blue, #CFDBE6); }
.sticky-note-editor.note-pink { background: var(--react-pink, #EDD2C6); }
.sticky-note-editor.note-green { background: var(--react-green, #D5E1D3); }
.sticky-note-editor :is(.note-composer-input, .note-expanded-thought),
[data-theme="dark"] .sticky-note-editor :is(.note-composer-input, .note-expanded-thought) {
  color: var(--note-ink, #2A2520);
  caret-color: var(--note-ink, #2A2520);
}
.sticky-note-editor .note-gutter-insert-btn,
[data-theme="dark"] .sticky-note-editor .note-gutter-insert-btn {
  color: var(--note-ink, #2A2520);
  border-color: rgba(42, 37, 32, .42);
}
.sticky-note-editor .note-gutter-insert-btn:disabled { opacity: .58; cursor: wait; }
.sticky-note-editor .note-editor-error {
  margin: 8px 2px 0;
  color: #7D2E2A;
  font: 600 11px/1.35 var(--sans);
}
.note-gutter-popover.note-blue  { border-left-color: var(--react-blue,  #5B9BD5); }
.note-gutter-popover.note-pink  { border-left-color: var(--react-pink,  #E07098); }
.note-gutter-popover.note-green { border-left-color: var(--react-green, #5DAE82); }
.note-gutter-popover-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.note-gutter-popover-src {
  margin: 9px 0 0;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.note-gutter-insert-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--gold-muted, #B8964A);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.note-gutter-insert-btn:hover { background: rgba(154,79,63,0.14); }

/* --- Phone: the same strip, above the keyboard --- */
/* Narrow iPad windows: the gutter column collapses */
@media (max-width: 767px) {
  body.two-pane .panes { grid-template-columns: var(--left-pane-w) 1px 1fr; }
  body.two-pane .note-gutter { display: none; }
}

/* Dark theme keeps --ink dark, so text colours must be set explicitly here.
   --paper stays light in both themes, which makes it the right foreground. */
[data-theme="dark"] .note-gutter-popover {
  background: var(--slab, #241F19);
  border-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .note-gutter-popover-text,
[data-theme="dark"] .note-gutter-insert-btn {
  color: var(--paper, #FDFBF7);
}
[data-theme="dark"] .note-gutter-popover.sticky-note-editor.note-yellow { background: var(--react-yellow, #F2E6C2); }
[data-theme="dark"] .note-gutter-popover.sticky-note-editor.note-blue { background: var(--react-blue, #CFDBE6); }
[data-theme="dark"] .note-gutter-popover.sticky-note-editor.note-pink { background: var(--react-pink, #EDD2C6); }
[data-theme="dark"] .note-gutter-popover.sticky-note-editor.note-green { background: var(--react-green, #D5E1D3); }
[data-theme="dark"] .note-gutter-insert-btn:hover {
  background: rgba(154,79,63,0.22);
}

/* Focused writing is one deliberate composition: useful source material,
   physical notes at the seam, and a clean manuscript page. */
@media (min-width: 1024px) {
  body.two-pane .panes {
    background: var(--tool-bg);
  }
  body.two-pane .pane-left {
    background: var(--tool-bg);
    color: var(--tool-ink);
    box-shadow: none;
    border-right: 0;
  }
  body.two-pane .reader-surface {
    padding: 0 24px 44px;
    background: var(--tool-bg);
  }
  body.two-pane .reader-close-bar {
    margin: 0 -24px 12px;
    width: calc(100% + 48px);
    padding: 0 24px;
    min-height: 52px;
    height: 52px;
    background: var(--tool-bg);
    border-bottom: 1px solid var(--tool-border);
  }
  body.two-pane .reader-close { color: var(--tool-muted); }
  body.two-pane .reader-close:hover { color: var(--tool-ink); }
  body.two-pane .reader-media-header-meta { color: var(--tool-muted); }
  body.two-pane .reader-media-expand { color: var(--accent); }
  body.two-pane .reader-media-expand:hover { color: var(--accent-warm); }
  body.two-pane .reader-surface:has(.reader-youtube-frame) .reader-header,
  body.two-pane .reader-surface:has(.reader-video-frame) .reader-header {
    display: none;
  }
  body.two-pane .reader-header {
    max-width: none;
    padding: 12px 0 14px;
    border: 0;
    border-bottom: 1px solid var(--tool-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.two-pane .reader-header h1 {
    font-size: 20px;
    line-height: 1.22;
    color: var(--tool-ink);
  }
  body.two-pane .reader-source-meta { color: var(--tool-muted); }
  body.two-pane .reader-content {
    max-width: none;
    padding: 0 0 48px;
    font-size: 16.5px;
    line-height: 1.66;
    color: var(--tool-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.two-pane .reader-youtube-frame {
    max-width: none;
    position: relative;
    top: auto;
    z-index: 1;
    margin: 0 0 18px;
    border-radius: 0;
    box-shadow: none;
  }
  body.two-pane .reader-media-frame {
    max-width: none;
    position: relative;
    top: auto;
    z-index: 1;
    padding: 0;
    margin: 0 0 18px;
    border: 0;
    border-radius: 0;
    background: #10100F;
    box-shadow: none;
  }
  body.two-pane .reader-transcript-tools {
    position: relative;
    top: auto;
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr) minmax(46px, auto);
    gap: 16px;
    margin: 22px 0 14px;
    padding: 0 0 14px;
    background: var(--tool-bg);
    border-bottom: 1px solid var(--tool-border);
  }
  body.two-pane .reader-transcript-state {
    margin-top: 24px;
    border-color: var(--tool-border);
  }
  body.two-pane .reader-transcript-state-header h3 { color: var(--tool-ink); }
  body.two-pane .reader-transcript-state-header span,
  body.two-pane .reader-transcript-state p { color: var(--tool-muted); }
  body.two-pane .reader-youtube-transcript-header { color: var(--tool-ink); }
  body.two-pane .reader-transcript-search {
    padding: 6px 2px 6px 8px;
    border: 0;
    border-bottom: 1px solid var(--tool-border);
    border-radius: 0;
    background: transparent;
    color: var(--tool-muted);
  }
  body.two-pane .reader-transcript-search:focus-within {
    border-bottom-color: var(--focus-ring);
    box-shadow: none;
  }
  body.two-pane .reader-transcript-search input { color: var(--tool-ink); }
  body.two-pane .reader-transcript-search input::placeholder,
  body.two-pane .reader-transcript-search-status { color: var(--tool-muted); }
  body.two-pane .reader-section-divider {
    color: var(--tool-muted);
    border-top-color: var(--tool-border);
  }
  body.two-pane .reader-chunk {
    max-width: none;
    color: var(--tool-ink);
  }
  body.two-pane .reader-chunk p.reader-passage {
    max-width: none;
    line-height: 1.58;
  }
  body.two-pane .yt-timestamp-block,
  body.two-pane .yt-timestamp { color: var(--accent); }
  body.two-pane #resize-handle-left {
    width: 1px;
    min-width: 1px;
    overflow: visible;
    background: var(--tool-border);
    border: 0;
  }
  body.two-pane #resize-handle-left::before {
    content: '';
    position: absolute;
    inset: 0 -6px;
    cursor: col-resize;
  }
  body.two-pane #resize-handle-left::after { display: none; }
  body.two-pane .note-gutter {
    background: var(--tool-bg-deep);
    border: 0;
    border-right: 1px solid var(--tool-border);
    box-shadow: none;
  }
  body.two-pane .note-gutter-label { color: var(--tool-muted); }
  body.two-pane .note-chip-add {
    width: auto;
    min-height: 26px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--tool-muted);
  }
  body.two-pane .pane-center {
    background:
      radial-gradient(ellipse 90% 70% at 58% 6%, rgba(255,255,255,.055), transparent 66%),
      var(--room-bg);
    box-shadow: none;
  }
  body.two-pane .pane-center > .pane-body {
    padding: 18px 20px 18px 22px;
  }
  body.two-pane .workspace {
    margin: 0;
    color-scheme: light;
    --paper: var(--paper-bg);
    --surface: var(--paper-bg);
    --ink: var(--paper-ink);
    --ink-primary: var(--paper-ink);
    --ink-light: var(--paper-ink-light);
    --ink-faint: var(--paper-muted);
    --ink-secondary: var(--paper-muted);
    --ink-dim: var(--paper-muted);
    --border: var(--paper-border);
    --accent: var(--paper-action);
    --accent-warm: var(--paper-action-hover);
    background: var(--paper-bg);
    border: 0;
    border-radius: 6px;
    box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 3px 10px rgba(0,0,0,.24);
  }
  body.two-pane .page-slab {
    height: 38px;
    padding: 12px max(42px, calc((100% - 720px) / 2)) 0;
    background: transparent;
    color: var(--paper-ink-light);
  }
  body.two-pane .page-slab-chapter {
    color: var(--paper-ink-light);
    font-style: normal;
  }
  body.two-pane .page-slab-chapter b {
    color: var(--brand);
    border-right: 0;
    padding-right: 0;
  }
  body.two-pane .page-slab-chapter em { display: none; }
  body.two-pane .page-slab-right { color: var(--paper-muted); }
  body.two-pane .slab-dot { background: #A59A8C; }
  body.two-pane .slab-save-text { color: var(--paper-muted); }
  body.two-pane .slab-save-text.saving { color: var(--amber); }
  body.two-pane .slab-save-text.saved { color: var(--success); }
  body.two-pane .slab-save-text.error { color: var(--error); }
  body.two-pane .page-slab-wc { color: var(--paper-muted); }
  body.two-pane .page-slab-more { color: var(--paper-muted); }
  body.two-pane .page-slab-more:hover { background: rgba(0,0,0,.05); color: var(--paper-ink); }
  body.two-pane .page-slab-right .collab-feedback-toggle {
    margin-left: 0;
    color: #35597F;
    border-color: rgba(53, 89, 127, 0.24);
  }
  body.two-pane .page-slab-right .collab-toggle-dot { background: #35597F; }
  body.two-pane .editor-title {
    border-bottom: 0;
  }
  body.two-pane .editor-title {
    padding: 20px max(42px, calc((100% - 720px) / 2)) 18px;
    font-size: 1.75rem;
    line-height: 1.2;
  }
  body.two-pane .editor-thesis,
  body.two-pane .editor-status-bar {
    padding-left: max(42px, calc((100% - 720px) / 2));
    padding-right: max(42px, calc((100% - 720px) / 2));
  }
  body.two-pane .editor-body {
    padding: 34px max(46px, calc((100% - 720px) / 2)) 32vh;
    font-size: 1.16rem;
    line-height: 1.78;
  }
  body.two-pane .pane-expand-btn-center {
    color: var(--room-muted);
    opacity: 0.85;
  }
  body.two-pane .pane-expand-btn-center:hover {
    color: var(--room-ink);
    opacity: 1;
  }
  body.two-pane.the-page-on .doc-h1 {
    font-size: 31px;
    line-height: 1.12;
    margin-left: max(42px, calc((100% - 720px) / 2));
    margin-right: max(42px, calc((100% - 720px) / 2));
  }
  body.two-pane .editor-surface > .editor-thesis-input {
    width: auto;
    margin-left: max(42px, calc((100% - 720px) / 2));
    margin-right: max(42px, calc((100% - 720px) / 2));
    padding-left: 0;
    padding-right: 0;
  }
  body.two-pane .reader-youtube-transcript-header {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .12em;
  }
}

[data-theme="dark"] body:not(.two-pane) .reader-transcript-tools {
  background: #211A15;
  border-bottom-color: rgba(240,235,225,.14);
}
[data-theme="dark"] body:not(.two-pane) .reader-transcript-search {
  background: #30261E;
  border-color: rgba(240,235,225,.18);
  color: #CDBFAE;
}
[data-theme="dark"] .reader-transcript-search input {
  color: #F3EEE5;
}
[data-theme="dark"] .reader-transcript-search input::placeholder,
[data-theme="dark"] .reader-transcript-search-status {
  color: #C4B5A2;
}

/* ============================================================
   DARK THEME — one material
   Dark walnut keeps a bright cream manuscript, which makes the page
   an object sitting in a room. Espresso takes the room and the page
   down to the same wood, so the surface reads as one continuous
   thing. Five surface values, three of them a shade apart.
   ============================================================ */
/* The chapter is a warm sheet of paper in BOTH themes (art direction,
   2026-08-20 references): in the dark room the page reads as cream paper
   under lamplight on dark walnut — not more wood. Ink tokens are pinned
   locally (same idiom as .confirm-card) so every descendant that reads
   var(--ink*) resolves dark-on-paper again. */
[data-theme="dark"] .workspace {
  background: var(--paper-bg);
  box-shadow: 0 10px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  color-scheme: light;
  --paper: var(--paper-bg);
  --paper-tint: #F7F1E8;
  --surface: var(--paper-bg);
  --ink: var(--paper-ink);
  --ink-primary: var(--paper-ink);
  --ink-light: var(--paper-ink-light);
  --ink-faint: var(--paper-muted);
  --ink-secondary: var(--paper-muted);
  --ink-dim: var(--paper-muted);
  --border: var(--paper-border);
  --border-strong: rgba(0, 0, 0, 0.18);
  --accent: var(--paper-action);
  --accent-warm: var(--paper-action-hover);
  --accent-muted: #5E7FA3;
  --accent-faint: rgba(53, 89, 127, 0.16);
  --accent-softer: rgba(53, 89, 127, 0.08);
  --gold: var(--accent);
  --gold-warm: var(--accent-warm);
  --gold-muted: var(--accent-muted);
  --gold-faint: var(--accent-faint);
  --gold-softer: var(--accent-softer);
}

/* The manuscript remains light in the dark room. Keep its small controls
   dark-on-paper too; these were the white-on-white failures in the UI. */
[data-theme="dark"] .workspace .cited-block-remove {
  color: var(--ink-light);
}
[data-theme="dark"] .workspace .cited-block-remove:hover,
[data-theme="dark"] .workspace .cited-block-remove:focus-visible {
  color: var(--ink);
}
[data-theme="dark"] .workspace .editor-body blockquote.cited-block .citation {
  color: #9A4F3F;
}

/* Hardcoded dark inks that don't read --ink */
[data-theme="dark"] .capture-tab-label { color: #C4B5A2; }
[data-theme="dark"] .capture-sheet-tab.active .capture-tab-label { color: #E39A84; }
[data-theme="dark"] .doc-h1 { color: #F7F3EC; }
[data-theme="dark"] .left-tab.active { color: #F0EBE1; }
[data-theme="dark"] kbd { color: #C4B5A2; }

/* The seam sits deeper than the rails */
[data-theme="dark"] body.two-pane .note-gutter,
[data-theme="dark"] .note-gutter-popover {
  background: #171210;
  border-color: #3A2E27;
}
[data-theme="dark"] .note-gutter-popover-text,
[data-theme="dark"] .note-gutter-insert-btn { color: #F0EBE1; }

/* Desk-view labels the palette flip caught out.
   The video caption card stays white, so ink on it stays dark. */
[data-theme="dark"] .capture-video-caption,
[data-theme="dark"] .capture-video-caption * { color: #1E1A12; }

/* Sign-in: "check your email" confirmation replaces the form in place. */
.login-sent-title {
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 10px;
}
.login-sent-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-secondary);
  margin: 0 0 18px;
}
.login-sent-body strong { color: var(--ink); font-weight: 400; }
.login-code-field { margin-top: 20px; }
.login-code-field input {
  font: 600 24px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .22em;
  text-align: center;
}
#login-code-btn { margin-bottom: 14px; }
#login-restart-btn { display: block; margin: 4px auto 0; }

/* ============================================================
   PHONE FIXES
   The header user block (photo + full name) is wider than a phone,
   which was pushing the whole page sideways — 500px of content on a
   390px screen. Everything below either stops that or makes a
   control big enough to hit with a thumb.
   ============================================================ */
@media (max-width: 767px) {
  /* The name is the part that doesn't fit. The photo identifies you fine. */
  .header-user-name { display: none; }
  .header-user { max-width: 44px; padding-left: 0; padding-right: 0; }

  /* Dropdown anchors to the right edge instead of overhanging it */
  .user-menu {
    right: 8px;
    left: auto;
    max-width: calc(100vw - 16px);
  }

  /* Apple's minimum comfortable target is 44px. These were 23–28px. */
  .share-chapter-btn,
  .page-slab-more,
  .pane-close-btn,
  .pane-expand-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The citation remove "×" is 16x14 and sits inside body text, so it can't
     grow visually without disfiguring the paragraph. Extend the hit area
     instead and leave the glyph alone. */
  /* Filter chips sit in a row, so 44px would look wrong — 38px still hits. */
  .lib-chip { min-height: 38px; }

  .cited-block-remove { position: absolute; }
  .cited-block-remove::after {
    content: '';
    position: absolute;
    inset: -14px;
  }
}

/* Text input inside the confirm-card family (showTextPrompt) */
.confirm-input {
  width: 100%;
  margin: 14px 0 4px;
  padding: 10px 12px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-tint);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  outline: none;
}
.confirm-input:focus { border-color: var(--gold); }
.confirm-input-multiline {
  min-height: 118px;
  line-height: 1.45;
  resize: vertical;
}
.confirm-primary {
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: #FDFBF7;
  background: var(--slab);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.confirm-primary:hover { background: var(--slab-light); }

/* A desk sticky starts through the same handwritten text + four-color process
   as a chapter sticky. The composer itself is square so the result is clear
   before it lands on the desk. */
.sticky-note-prompt {
  width: 300px;
  min-height: 300px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.sticky-note-prompt .confirm-title { color: var(--note-ink, #2A2520); }
.sticky-note-prompt-input {
  flex: 1 1 auto;
  min-height: 142px;
  margin: 8px 0 10px;
}
.sticky-note-prompt .note-composer-colors { margin-bottom: 14px; }
.sticky-note-prompt .confirm-actions { margin-top: auto; }
.sticky-note-prompt .sticky-note-prompt-save {
  width: auto;
  min-width: 76px;
  margin-top: 0;
}

/* ── Two-pane expand states ─────────────────────────────────
   The ⤢ buttons toggled classes wired to the retired three-pane grid —
   dead buttons. Under two panes they mean:
   expand-left   → read full-screen (library/reader takes the window)
   expand-center → focus writing (just the page; even the gutter rests) */
body.two-pane .panes.expand-left  { grid-template-columns: 1fr 0px 0px 0px !important; }
body.two-pane .panes.expand-center { grid-template-columns: 0px 0px 0px 1fr !important; }
body.two-pane .panes.expand-left  #resize-handle-left,
body.two-pane .panes.expand-center #resize-handle-left { width: 0; min-width: 0; overflow: hidden; }
/* NEVER display:none a grid item here — it re-numbers grid auto-placement
   and drops the editor into a 0-width column (blank tan pane). See the
   warning above the legacy expand rules. Collapse in place instead. */
body.two-pane .panes.expand-left  .note-gutter,
body.two-pane .panes.expand-center .note-gutter { min-width: 0; padding: 0; overflow: hidden; }

/* While a focus/read mode is active the whole window belongs to one pane —
   the library restore tab would be a confusing overlay, so it waits. */
body.two-pane:has(.panes.expand-left) .pane-restore-tab,
body.two-pane:has(.panes.expand-center) .pane-restore-tab { display: none; }

/* ============================================================
   DARK MODE — the parts the theme never reached
   The wood itself, the landing cards, and a set of controls that
   kept light-mode ink. Findings from the dark-mode audit.
   ============================================================ */

/* The desk surface follows the theme. "Warm tan" is the default
   wallpaper, so in dark mode it becomes the espresso wood instead of
   daylight oak — cards, ink, and pins already expect a dark room. */
[data-theme="dark"] .dv-surface-room {
  /* Deep warm walnut under a desk lamp — grain visible, never a void. */
  background-color: var(--room-bg);
  background-image:
    radial-gradient(ellipse 82% 66% at 28% 6%, rgba(190, 160, 130, 0.10), transparent 64%),
    radial-gradient(ellipse 135% 115% at 52% 54%, transparent 42%, rgba(0, 0, 0, 0.36) 100%),
    repeating-linear-gradient(180deg, transparent 0, transparent 176px, rgba(0,0,0,.24) 177px, rgba(210,190,170,.05) 178px, transparent 180px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='540' viewBox='0 0 1200 540'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .045' numOctaves='3' seed='23' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='24' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg fill='none' stroke='%23c38c56' stroke-opacity='.10' filter='url(%23w)'%3E%3Cpath d='M-30 54 C210 24 410 82 650 48 S1010 32 1240 62'/%3E%3Cpath d='M-20 86 C190 122 420 52 720 92 S980 130 1230 94'/%3E%3Cpath d='M-40 214 C220 174 420 240 690 202 S1010 176 1240 222'/%3E%3Cpath d='M-20 268 C180 298 430 232 700 276 S1010 310 1230 270'/%3E%3Cpath d='M-30 404 C230 364 440 430 720 394 S1010 370 1240 416'/%3E%3Cpath d='M-20 452 C210 486 440 420 700 460 S1000 492 1230 456'/%3E%3Cellipse cx='292' cy='285' rx='54' ry='12'/%3E%3Cellipse cx='292' cy='285' rx='31' ry='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, auto, 1200px 540px;
}

/* ── Paper stays paper (dark room) ─────────────────────────────
   The reference dark desk keeps CREAM PAPER on dark walnut — cards,
   chapter sheets, and memos are lit paper objects, not more wood.
   Ink tokens are pinned locally (same idiom as .confirm-card) so every
   descendant that reads var(--ink*) resolves dark-on-paper. */
[data-theme="dark"] .desk-card,
[data-theme="dark"] .dv-chapter,
[data-theme="dark"] .dv-item .note-card {
  color-scheme: light;
  --paper: #F7F1E4;
  --paper-tint: #F0E8D6;
  --surface: #F7F1E4;
  --ink: #1E1A12;
  --ink-primary: #1E1A12;
  --ink-light: #4A3F30;
  --ink-faint: #5A5040;
  --ink-secondary: #6B6050;
  --ink-dim: #5A5040;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);
  --accent: #9A4F3F;
  --accent-warm: #AD604D;
  --accent-muted: #7F594F;
  --accent-faint: rgba(154, 79, 63, 0.16);
  --accent-softer: rgba(154, 79, 63, 0.08);
  --gold: var(--accent);
  --gold-warm: var(--accent-warm);
  --gold-muted: var(--accent-muted);
  --gold-faint: var(--accent-faint);
  --gold-softer: var(--accent-softer);
}
[data-theme="dark"] .desk-card { background: #F7F1E4; }
[data-theme="dark"] .desk-card-name { color: #1E1A12; }
[data-theme="dark"] .desk-card-meta { color: #6B6050; }
[data-theme="dark"] .desk-card-desc { color: #4A3F30; }
[data-theme="dark"] .desks-landing-subtitle { color: #A08A75; }
[data-theme="dark"] .desks-landing-new { color: #C4B5A2; border-color: rgba(196, 181, 162, 0.35); }

/* Library pane: controls and labels that kept their dusk ink */
[data-theme="dark"] .pane-header h2,
[data-theme="dark"] .left-tab { color: #C4B5A2; }
[data-theme="dark"] .left-tab.active { color: #F0EBE1; }
[data-theme="dark"] .library-add-source-btn,
[data-theme="dark"] .pane-expand-btn,
[data-theme="dark"] .pane-close-btn { color: #C4B5A2; opacity: 0.85; }
[data-theme="dark"] .library-add-source-btn:hover,
[data-theme="dark"] .pane-expand-btn:hover,
[data-theme="dark"] .pane-close-btn:hover { color: #F0EBE1; opacity: 1; }
[data-theme="dark"] .library-search-input { color: #F0EBE1; }
[data-theme="dark"] .library-search-input::placeholder { color: var(--ink-secondary); }
[data-theme="dark"] .lib-chip { color: #C4B5A2; }
[data-theme="dark"] .lib-chip .lib-chip-count { color: #A08A75; }
[data-theme="dark"] .lib-footer, [data-theme="dark"] .lib-footer * { color: #A08A75; }

/* Page: prompts and quote-card fine print */
[data-theme="dark"] .editor-thesis-input::placeholder { color: var(--ink-secondary); }
/* Typed thesis text sits on the dark manuscript page — hardcoded light
   ink; the light-theme #3D3328 disappeared into the espresso paper. */
[data-theme="dark"] .editor-thesis-input { color: var(--ink); }
[data-theme="dark"] .editor-thesis-input.thesis-filled { border-bottom-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .editor-thesis-input:focus { border-bottom-color: rgba(255,255,255,0.30); }
[data-theme="dark"] .lib-empty { color: var(--ink-secondary); }
/* Cited blocks sit on the cream page — their light defaults already fit. */

/* Sticky popover attribution + user menu */
[data-theme="dark"] .note-gutter-popover-src { color: #A08A75; }
[data-theme="dark"] .user-dropdown-item { color: #E4DCCE; }

/* Storage-mode boundary: in browser-storage mode (the public product) the
   library, search, photos, and imports all run against this browser's own
   storage — the full UI stays visible. Nothing is hidden by mode; features
   that require Norman's approval (sharing, link ingest) simply have no UI. */

/* Deep search results inside the library shelf */
.lib-deep-head {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  padding: 10px 14px 4px;
}
.lib-deep-status {
  padding: 18px 14px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-secondary);
  font-size: 13px;
}
.lib-deep-results .search-result-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.lib-deep-results .search-result-item:hover { background: var(--gold-softer); }
.lib-deep-results .result-source-title {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 2px;
}
.lib-deep-results .result-preview {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-secondary);
}
.lib-deep-results .result-meta {
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* Create button in the new-chapter form (dropdown). Gold on the dark
   slab — slab-on-slab made it read as bare text, not a button. */
.ws-chapter-create-btn {
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: #241C12;
  background: var(--gold-muted);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.ws-chapter-create-btn:hover { background: var(--gold); }

/* The focused composition owns its own dark source rail even when the room
   theme is walnut. Earlier general dark-mode reader rules create paper cards;
   those are appropriate for full-screen reading, not for the compact
   source → notes → writing arrangement. */
@media (min-width: 1024px) {
  [data-theme="dark"] body.two-pane .reader-header,
  [data-theme="dark"] body.two-pane .reader-content,
  [data-theme="dark"] body.two-pane .reader-media-frame {
    background: transparent;
    box-shadow: none;
  }
  [data-theme="dark"] body.two-pane .reader-header h1,
  [data-theme="dark"] body.two-pane .reader-chunk h1,
  [data-theme="dark"] body.two-pane .reader-chunk h2,
  [data-theme="dark"] body.two-pane .reader-chunk h3 {
    color: #FFF9EE;
  }
  [data-theme="dark"] body.two-pane .reader-content,
  [data-theme="dark"] body.two-pane .reader-chunk { color: #E8E1D5; }
  [data-theme="dark"] body.two-pane .reader-transcript-tools,
  [data-theme="dark"] body.two-pane .reader-transcript-search {
    background: transparent;
    box-shadow: none;
  }
  [data-theme="dark"] body.two-pane .reader-light-surface,
  [data-theme="dark"] body.two-pane .reader-light-surface .reader-chunk,
  [data-theme="dark"] body.two-pane .reader-light-surface .reader-chunk :is(p, li, blockquote),
  [data-theme="dark"] body.two-pane .reader-light-surface .reader-chunk :is(h1, h2, h3),
  [data-theme="dark"] body.two-pane .reader-light-surface .reader-transcript-search input {
    color: var(--reader-surface-ink);
  }
  [data-theme="dark"] body.two-pane .reader-light-surface .reader-transcript-search input::placeholder,
  [data-theme="dark"] body.two-pane .reader-light-surface .reader-transcript-search-status {
    color: var(--reader-surface-muted);
  }
  [data-theme="dark"] body.two-pane .workspace {
    background: #FFFCF6;
    box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.32);
  }
}

/* The new-chapter form pins to the dropdown's bottom edge — with invisible
   macOS scrollbars, anything that scrolls out of a dropdown simply doesn't
   exist to the user (the Create button was unreachable by eye). */
.desk-dropdown .ws-chapter-new-form {
  position: sticky;
  bottom: 0;
  background: var(--slab);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 2;
}

/* ============================================================
   BIRCH / WALNUT SYSTEM — approved production direction
   One product in two rooms: quiet material, paper objects, ink-blue
   actions, amber playback, and a single clay provenance gesture.
   ============================================================ */

::selection { background: var(--selection); }

/* The manuscript remains cream paper in both rooms. Keep selected writing
   dark and legible instead of inheriting dark wood's charcoal selection. */
.workspace .editor-body::selection,
.workspace .editor-body *::selection {
  color: var(--paper-ink, #1E1A12);
  background: #E8D6A7;
}

:where(button, [role="button"], a, input, textarea, select, [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Light mode has pale, paper-like chrome. Focused writing deliberately
   returns to the dark tool rail so source, notes, and paper read as a room. */
.header-bar {
  background: var(--chrome-bg);
  border-bottom-color: var(--chrome-border);
  box-shadow: 0 1px 0 rgba(42,30,23,.04);
}
.header-brand,
.scope-chapter-name,
.scope-back-btn,
.header-user { color: var(--chrome-ink); }
.header-user:hover,
.scope-back-btn:hover {
  color: var(--ink);
  background: rgba(53,89,127,.08);
}
.desk-switcher-btn {
  color: var(--chrome-ink);
  background: var(--chrome-bg-raised);
  border-color: var(--chrome-border);
}
.desk-switcher-btn:hover { background: #EEE5D8; }
.desk-switcher-btn .arrow { color: var(--ink-faint); }
.scope-superlabel { color: var(--brand); }
.profile-initials {
  color: #FFF9F2 !important;
  background: var(--brand) !important;
}

[data-theme="dark"] .header-bar {
  background: var(--chrome-bg);
  border-bottom-color: var(--chrome-border);
  box-shadow: none;
}
[data-theme="dark"] .header-brand,
[data-theme="dark"] .scope-chapter-name,
[data-theme="dark"] .scope-back-btn,
[data-theme="dark"] .header-user { color: var(--chrome-ink); }
[data-theme="dark"] .desk-switcher-btn {
  color: var(--chrome-ink);
  background: var(--chrome-bg-raised);
  border-color: var(--chrome-border);
}
[data-theme="dark"] .desk-switcher-btn .arrow { color: var(--chrome-muted); }
[data-theme="dark"] .scope-superlabel { color: var(--brand); }
[data-theme="dark"] .profile-initials {
  color: #211710 !important;
  background: var(--brand) !important;
}

/* Library is a tool laid on the desk, never the manuscript itself. Keeping
   this role explicit prevents a theme change from turning its controls into
   paper in one room and wood in the other. */
.pane-left.lib-v2,
.lib-v2-root,
.lib-search-v2,
.lib-chips,
.lib-body {
  background: var(--tool-bg);
  color: var(--tool-ink);
}
.pane-left.lib-v2 #left-pane-header,
.lib-footer { background: var(--tool-bg-deep); }
.lib-search-v2,
.lib-chips,
.lib-footer,
.lib-sec { border-color: var(--tool-border); }
.lib-search-v2-input input,
.lib-row-title2,
.lib-sec-h .lib-sec-title,
.lib-chip.on { color: var(--tool-ink); }
.lib-search-v2-input input::placeholder,
.lib-row-meta2,
.lib-sec-h .lib-sec-count,
.lib-chip,
.lib-footer { color: var(--tool-muted); }
.lib-search-v2-input:focus-within,
.lib-row2:hover { background: var(--accent-softer); }
.lib-row2.active { background: var(--accent-faint); }

/* The Add Source sheet is a physical slip on top of the Library tool. It
   keeps dark ink and cream paper in both room themes. */
.lib-add-sheet {
  color-scheme: light;
  --ink: var(--paper-ink);
  --ink-primary: var(--paper-ink);
  --ink-light: var(--paper-ink-light);
  --ink-faint: var(--paper-muted);
  --ink-secondary: var(--paper-muted);
  --border: var(--paper-border);
  --border-strong: rgba(35,32,28,.22);
  background: var(--paper-bg-soft);
  color: var(--paper-ink);
}

/* A full source opens as readable paper inside the current room. Focused
   writing overrides this below and recomposes source + seam as compact tools. */
.reader-surface { background: var(--tool-bg); color: var(--tool-ink); }
.reader-close-bar { background: var(--tool-bg); }
.reader-header,
.reader-content {
  color-scheme: light;
  --ink: var(--paper-ink);
  --ink-primary: var(--paper-ink);
  --ink-light: var(--paper-ink-light);
  --ink-faint: var(--paper-muted);
  --ink-secondary: var(--paper-muted);
  --border: var(--paper-border);
  background: var(--paper-bg);
  color: var(--paper-ink);
}
.reader-header h1,
.reader-content :is(h1, h2, h3) { color: var(--paper-ink); }
[data-theme="dark"] .reader-header,
[data-theme="dark"] .reader-content {
  background: var(--paper-bg);
  color: var(--paper-ink);
  border-color: var(--paper-border);
}
[data-theme="dark"] .reader-header h1,
[data-theme="dark"] .reader-chunk :is(h1, h2, h3) { color: var(--paper-ink); }
[data-theme="dark"] .reader-chunk:hover { background: rgba(35,32,28,.025); }

/* Desk scope uses a plain handwritten project label, not an unexplained
   switcher. Its colour must follow the actual header, not the room token. */
body.desk-scope #desk-switcher-name { color: var(--ink); }
[data-theme="dark"] body.desk-scope #desk-switcher-name { color: #F0E7DA; }

/* Paper stays paper in the walnut room. These are the modal/setup families
   that previously inherited pale text from the surrounding dark shell. */
[data-theme="dark"] :is(
  .workspace,
  .photo-step-card,
  .photo-crop-modal,
  .profile-expanded-card,
  .confirm-card,
  .share-modal,
  .citation-export-card,
  .email-in-card,
  .lib-add-sheet,
  .desk-card,
  .dv-chapter,
  .dv-item .note-card
) {
  color-scheme: light;
  --paper: var(--paper-bg-soft);
  --paper-tint: #F1E8D8;
  --surface: var(--paper-bg-soft);
  --ink: var(--paper-ink);
  --ink-primary: var(--paper-ink);
  --ink-light: var(--paper-ink-light);
  --ink-faint: var(--paper-muted);
  --ink-secondary: var(--paper-muted);
  --ink-dim: var(--paper-muted);
  --border: var(--paper-border);
  --border-strong: rgba(35,32,28,.22);
  --accent: var(--paper-action);
  --accent-warm: var(--paper-action-hover);
  --accent-muted: #5E7FA3;
  --accent-faint: rgba(53,89,127,.16);
  --accent-softer: rgba(53,89,127,.08);
  --gold: var(--accent);
  --gold-warm: var(--accent-warm);
  --gold-muted: var(--accent-muted);
  --gold-faint: var(--accent-faint);
  --gold-softer: var(--accent-softer);
  color: var(--ink);
}
[data-theme="dark"] .workspace .doc-h1,
[data-theme="dark"] .workspace .editor-title,
[data-theme="dark"] .workspace input,
[data-theme="dark"] .workspace textarea,
[data-theme="dark"] :is(.photo-step-card, .photo-crop-modal, .profile-expanded-card, .confirm-card, .share-modal, .citation-export-card, .email-in-card) input,
[data-theme="dark"] :is(.photo-step-card, .photo-crop-modal, .profile-expanded-card, .confirm-card, .share-modal, .citation-export-card, .email-in-card) textarea {
  color: #23201C;
}
[data-theme="dark"] :is(.photo-step-card, .photo-crop-modal, .profile-expanded-card, .confirm-card, .share-modal, .citation-export-card, .email-in-card) input::placeholder,
[data-theme="dark"] :is(.photo-step-card, .photo-crop-modal, .profile-expanded-card, .confirm-card, .share-modal, .citation-export-card, .email-in-card) textarea::placeholder {
  color: #766F66;
  opacity: 1;
}

/* Citations use clay for provenance while links and timecodes stay ink-blue. */
.editor-body blockquote.cited-block {
  border-left-color: var(--brand);
  background: linear-gradient(135deg, rgba(176,81,44,.055), rgba(255,255,255,.38));
}
.editor-body blockquote.cited-block .citation { color: var(--brand); }
[data-theme="dark"] .workspace .editor-body blockquote.cited-block {
  border-left-color: var(--brand);
}
[data-theme="dark"] .workspace .editor-body blockquote.cited-block .citation { color: var(--brand); }
.editor-reference-moment,
body.the-page-on .editor-references-toggle { color: var(--accent); }

body.the-page-on .doc-h1::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 16px;
  background: var(--brand);
}

/* Active transcript passage: a readable rail and wash, not a decorative glow. */
body.two-pane .reader-chunk.transcript-active {
  border-left-color: var(--accent);
  background: var(--accent-softer);
}
body.two-pane .reader-chunk.transcript-active .yt-timestamp,
body.two-pane .reader-chunk.transcript-active .yt-timestamp-block { color: var(--accent); }
body.two-pane .reader-youtube-frame,
body.two-pane .reader-video-frame { border-bottom: 3px solid var(--amber); }

/* Sources Used is the page footer, with the content aligned to the writing
   column rather than floating as a separate card. */
@media (min-width: 1024px) {
  body.two-pane.the-page-on .editor-references {
    margin-top: auto;
    padding: 16px max(42px, calc((100% - 720px) / 2)) 18px;
    border-top: 1px solid rgba(35,32,28,.09);
  }
  body.two-pane .note-chip {
    width: calc(100% - 30px);
    max-width: 230px;
    min-height: 104px;
    padding: 14px 38px 12px 14px;
  }
  body.two-pane .note-chip:nth-of-type(3n + 2) { transform: rotate(.7deg); }
  body.two-pane .note-chip:nth-of-type(3n) { transform: rotate(-.35deg); }
}

@media (max-width: 1180px) and (min-width: 768px) {
  :root {
    --left-pane-w: 38%;
    --note-gutter-w: clamp(166px, 16vw, 200px);
  }
}

/* ============================================================
   SIGN-IN
   Shared form controls. Entry layout and material live in entry.css.
   ============================================================ */

.login-assurance {
  margin: -10px 0 18px;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-secondary);
}

.login-btn { font-family: var(--sans); }
.auth-mode-toggle,
.auth-toggle-btn { font-family: var(--sans); }

/* ============================================================
   READING COPY — invariant paper and ink
   This surface is deliberately isolated from the room theme. Dark walnut can
   surround the page, but it must never turn its body copy pale on cream.
   Keep these rules at the end of the cascade so focused-reader theme rules
   cannot leak into saved web articles.
   ============================================================ */
.reader-reading-pane {
  color-scheme: light;
  --paper-bg: #FFFCF6;
  --paper-bg-soft: #F7F0E3;
  --paper-ink: #1E1A14;
  --paper-ink-light: #493F34;
  --paper-muted: #6C6052;
  --paper-action: #315E88;
  --paper-border: rgba(38, 30, 22, .14);
  --ink: #1E1A14;
  --ink-primary: #1E1A14;
  --ink-light: #493F34;
  --ink-faint: #6C6052;
  --ink-secondary: #5C5145;
  color: #1E1A14;
  background: #FFFCF6;
}
.reader-reading-pane .reader-reading-bar,
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-reading-bar {
  color: #1E1A14;
  background: #F2EBDD;
  border-bottom-color: rgba(38, 30, 22, .14);
}
.reader-reading-pane .reader-reading-bar strong,
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-reading-bar strong {
  color: #1E1A14;
}
.reader-reading-pane .reader-reading-bar span,
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-reading-bar span {
  color: #6C6052;
}
.reader-reading-pane .reader-reading-origin,
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-reading-origin {
  color: #6C6052;
  font: 600 10px/1 var(--mono);
  letter-spacing: .015em;
  text-transform: none;
}
.reader-reading-pane .reader-reading-actions :is(button, a),
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-reading-actions :is(button, a) {
  color: #315E88;
}
.reader-reading-scroll,
[data-theme="dark"] body.two-pane .reader-reading-scroll {
  padding: clamp(30px, 5vw, 64px) clamp(26px, 6vw, 84px) 72px;
  color: #1E1A14;
  background: #FFFCF6;
  scrollbar-color: #B9AB98 #F2EBDD;
}
.reader-copy-header {
  max-width: 720px;
  margin: 0 auto 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(38, 30, 22, .14);
}
.reader-copy-publication {
  margin-bottom: 15px;
  color: #9A4F3F;
  font: 750 11px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.reader-copy-header h1,
[data-theme="dark"] body.two-pane .reader-copy-header h1 {
  max-width: 700px;
  margin: 0;
  color: #1E1A14;
  font: 700 clamp(32px, 4.6vw, 54px)/1.05 var(--serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.reader-copy-dek {
  max-width: 670px;
  margin: 16px 0 0;
  color: #493F34;
  font: 400 clamp(17px, 1.8vw, 21px)/1.48 var(--serif);
}
.reader-copy-meta {
  margin-top: 17px;
  color: #6C6052;
  font: 700 10px/1.3 var(--sans);
  letter-spacing: .075em;
  text-transform: uppercase;
}
.reader-reading-pane .reader-article-hero {
  max-width: 860px;
  max-height: 440px;
  margin: 0 auto 42px;
  border-radius: 2px;
  background: #E8E0D4;
}
.reader-reading-pane .reader-article-hero img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
}
.reader-reading-pane .reader-article-body {
  max-width: 720px;
  margin: 0 auto;
  color: #1E1A14;
  font-family: var(--serif);
  font-size: clamp(17px, 1.55vw, 19px);
  line-height: 1.76;
  letter-spacing: .002em;
}
.reader-reading-pane .reader-website-overview {
  max-width: 720px;
}
.reader-website-overview-card {
  padding: clamp(26px, 5vw, 46px);
  border: 1px solid rgba(38, 30, 22, .14);
  border-radius: 3px;
  background: #F7F0E3;
  box-shadow: 0 14px 34px rgba(56, 42, 27, .08);
}
.reader-website-overview-card > span {
  display: block;
  margin-bottom: 12px;
  color: #9A4F3F;
  font: 750 10px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reader-website-overview-card h2 {
  margin: 0;
  color: #1E1A14;
  font: 700 clamp(25px, 3vw, 38px)/1.08 var(--serif);
  letter-spacing: -.025em;
}
.reader-website-overview-card p {
  margin: 12px 0 22px;
  color: #493F34;
  font: 400 17px/1.5 var(--serif);
}
.reader-website-overview-card a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 17px;
  border-radius: 999px;
  color: #FFF;
  background: #315E88;
  font: 700 12px/1 var(--sans);
  text-decoration: none;
}
.reader-website-overview-card a:hover { background: #274E72; }
.reader-reading-pane .reader-chunk,
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-chunk {
  max-width: none;
  padding: 0 0 8px;
  color: #1E1A14;
  background: transparent;
  opacity: 1;
}
.reader-reading-pane .reader-chunk:hover,
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-chunk:hover {
  color: #1E1A14;
  background: rgba(49, 94, 136, .035);
}
.reader-reading-pane .reader-chunk :is(p, li, blockquote),
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-chunk :is(p, li, blockquote) {
  color: #1E1A14;
  opacity: 1;
}
.reader-reading-pane .reader-chunk p { margin: 0 0 1.35em; }
.reader-reading-pane .reader-chunk :is(h1, h2, h3),
[data-theme="dark"] body.two-pane .reader-reading-pane .reader-chunk :is(h1, h2, h3) {
  margin: 1.55em 0 .55em;
  color: #1E1A14;
  font-family: var(--serif);
  line-height: 1.18;
}
.reader-reading-pane .reader-chunk a { color: #315E88; }
.reader-reading-pane ::selection {
  color: #17130F;
  background: #D6E3EF;
}

@media (max-width: 700px) {
  .reader-reading-scroll,
  [data-theme="dark"] body.two-pane .reader-reading-scroll {
    padding: 28px 22px 58px;
  }
  .reader-copy-header { margin-bottom: 28px; padding-bottom: 22px; }
  .reader-copy-header h1 { font-size: 34px; }
  .reader-reading-pane .reader-article-hero { margin-bottom: 30px; }
}

/* Chapter source panes are often narrow even on a wide desktop, so viewport
   media queries are not enough. Adapt the page to the reader's own width. */
@container (max-width: 620px) {
  .reader-reading-scroll,
  [data-theme="dark"] body.two-pane .reader-reading-scroll {
    padding: 30px 24px 60px;
  }
  .reader-copy-header {
    margin-bottom: 27px;
    padding-bottom: 21px;
  }
  .reader-copy-header h1,
  [data-theme="dark"] body.two-pane .reader-copy-header h1 {
    font-size: clamp(34px, 11cqi, 44px);
    line-height: 1.06;
  }
  .reader-copy-dek { font-size: 17px; }
  .reader-reading-pane .reader-article-hero {
    max-height: 270px;
    margin-bottom: 30px;
  }
  .reader-reading-pane .reader-article-hero img { max-height: 270px; }
  .reader-reading-pane .reader-article-body {
    font-size: 17px;
    line-height: 1.72;
  }
}

/* Final production-object cascade. Keep these after the legacy reader and
   dark-theme rules so paper never turns into a black application panel. */
body .note-card.media-audio-memo-card,
body .note-card.media-podcast-card,
[data-theme="dark"] body .note-card.media-audio-memo-card,
[data-theme="dark"] body .note-card.media-podcast-card {
  color: var(--media-ink) !important;
  background-color: var(--media-paper) !important;
  border-color: var(--media-paper-edge) !important;
  border-radius: 2px !important;
}

body .reader-media-frame:is(.reader-audio-memo-frame, .reader-podcast-frame),
[data-theme="dark"] body .reader-media-frame:is(.reader-audio-memo-frame, .reader-podcast-frame),
[data-theme="dark"] body.two-pane .reader-media-frame:is(.reader-audio-memo-frame, .reader-podcast-frame) {
  box-sizing: border-box;
  overflow: visible;
  color: var(--media-ink) !important;
  background: var(--media-paper) !important;
  border: 1px solid var(--media-paper-edge) !important;
  border-radius: 2px !important;
  box-shadow: 0 3px 4px rgba(37,25,14,.20), 0 20px 42px rgba(37,25,14,.20) !important;
}

.reader-audio-memo-frame,
.reader-podcast-frame {
  container: reader-audio / inline-size;
  width: min(620px, calc(100% - 32px));
  max-width: 620px;
  padding: 0 !important;
  transform: rotate(.25deg);
}
body .reader-podcast-frame,
body.two-pane .reader-podcast-frame,
[data-theme="dark"] body .reader-podcast-frame,
[data-theme="dark"] body.two-pane .reader-podcast-frame,
body .reader-memo-cover-frame,
body.two-pane .reader-memo-cover-frame,
[data-theme="dark"] body .reader-memo-cover-frame,
[data-theme="dark"] body.two-pane .reader-memo-cover-frame {
  position: relative;
  top: auto;
  z-index: 1;
  margin: 24px auto 0;
}
.reader-audio-player {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.reader-audio-memo-object {
  position: relative;
  width: 100%;
  min-height: 278px;
  padding: 29px 32px 22px;
  box-sizing: border-box;
}
.reader-object-label {
  color: var(--yd-media-card-accent);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reader-object-duration,
.reader-audio-memo-object > p,
.reader-podcast-copy > p {
  color: var(--media-muted-ink);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.reader-audio-object-header { display: flex; align-items: center; justify-content: space-between; }
.reader-audio-memo-object h3,
.reader-podcast-copy h3 {
  color: var(--media-ink);
  font-family: var(--serif);
  font-style: normal;
}
.reader-audio-memo-object h3 { margin: 23px 0 7px; font-size: clamp(24px, 4vw, 32px); line-height: 1.08; }
.reader-audio-memo-object > p { margin: 0; font-size: 12px; }
.reader-audio-object-row { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.reader-object-play {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  padding: 0;
  border: 1px solid rgba(52,43,32,.52);
  border-radius: 50%;
  color: var(--media-ink);
  background: rgba(255,255,255,.25);
  box-shadow: 0 1px 2px rgba(33,25,16,.16), inset 0 0 0 1px rgba(255,255,255,.3);
  cursor: pointer;
}
.reader-object-play:focus-visible { outline: 3px solid #315E88; outline-offset: 3px; }
.reader-object-play > span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.is-playing .reader-object-play > span {
  width: 10px;
  height: 12px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}
.is-playing .reader-object-play { color: #8A560A; border-color: var(--media-amber); }
.reader-object-waveform { display: flex; align-items: center; gap: 2px; min-width: 0; height: 54px; overflow: hidden; }
.reader-object-waveform span {
  display: block;
  width: 3px;
  min-width: 3px;
  height: max(4px, calc(48px * var(--media-peak, .25)));
  border-radius: 1px;
  background: #827565;
  opacity: .72;
}
.reader-object-waveform span.is-played { background: var(--media-amber); opacity: 1; }
.reader-object-waveform-interactive { cursor: pointer; }
.reader-object-waveform-interactive:focus-visible {
  outline: 2px solid #315E88;
  outline-offset: 4px;
  border-radius: 2px;
}
.reader-object-waveform span.is-current {
  background: #D88917;
  opacity: 1;
  transform: scaleY(1.15);
  transform-origin: center;
  box-shadow: 0 0 5px rgba(216, 137, 23, .42);
}
.reader-podcast-object.is-playing .reader-object-waveform span.is-current {
  animation: readerPodcastWavePulse .58s ease-in-out infinite alternate;
}
@keyframes readerPodcastWavePulse {
  from { transform: scaleY(.82); }
  to { transform: scaleY(1.28); }
}
.reader-audio-object-row .reader-object-waveform { flex: 1; }
.reader-audio-now {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 0 65px;
  color: #8B5A13;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: 0;
}
.reader-audio-now i,
.reader-podcast-now i { width: 7px; height: 7px; border-radius: 50%; background: var(--media-amber); }
.reader-audio-memo-object.is-playing .reader-audio-now { opacity: 1; }

.reader-podcast-object {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  width: 100%;
  min-height: 270px;
}
.reader-podcast-cover {
  position: relative;
  z-index: 1;
  align-self: stretch;
  overflow: hidden;
  background: #DED4C5;
  box-shadow: 1px 0 0 rgba(45,35,25,.13);
  transition: transform 180ms cubic-bezier(.2,.76,.25,1), box-shadow 180ms ease;
}
.reader-podcast-cover > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.reader-podcast-art-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  color: #F8F1E5;
  background: #534B40;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.08;
  text-align: center;
}
.reader-podcast-art-fallback[hidden] { display: none; }
.reader-podcast-copy { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 31px 26px 22px 31px; }
.reader-podcast-copy .reader-audio-object-header { gap: 12px; flex-wrap: wrap; }
.reader-podcast-copy h3 { margin: 18px 0 9px; font-size: clamp(22px, 3.3vw, 29px); line-height: 1.06; overflow-wrap: anywhere; }
.reader-podcast-copy > p { margin: 0; font-size: 11px; line-height: 1.35; }
.reader-podcast-copy .reader-object-duration { font-size: 11px; white-space: nowrap; }
.reader-podcast-copy .reader-object-waveform { flex: 0 0 38px; margin-top: auto; padding-top: 18px; box-sizing: content-box; }
.reader-podcast-copy .reader-object-waveform span { width: 2px; min-width: 2px; height: max(3px, calc(32px * var(--media-peak, .25))); }
.reader-podcast-object > .reader-object-play {
  position: absolute;
  z-index: 3;
  left: 42%;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  background: var(--media-paper);
}
.reader-podcast-now {
  position: absolute;
  left: 13px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  color: #FFF8E9;
  background: rgba(24,20,16,.72);
  font-family: var(--sans);
  font-size: 10px;
  opacity: 0;
}
.reader-podcast-object.is-playing .reader-podcast-cover {
  transform: translate(-3px, -4px);
  box-shadow: 7px 9px 17px rgba(30,20,12,.25), 1px 0 0 rgba(45,35,25,.13);
}
.reader-podcast-object.is-playing .reader-podcast-now { opacity: 1; }

/* The podcast is a playable object; the transcript is a separate working
   surface below it, never content inside the card. */
.reader-podcast-transcript,
.reader-audio-transcript {
  width: min(760px, calc(100% - 32px));
  max-width: 760px;
  margin: 36px auto 0;
  color: var(--ink);
}
.reader-podcast-transcript .reader-transcript-tools,
.reader-audio-transcript .reader-transcript-tools {
  position: relative;
  top: auto;
  margin-bottom: 0;
  padding: 0 0 13px;
  background: transparent;
}
.reader-transcript-scroll {
  max-height: min(52vh, 620px);
  padding: 20px 14px 34px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: auto;
}
.reader-transcript-scroll .reader-chunk {
  max-width: 680px;
}
.reader-transcript-scroll .yt-timestamp-block.transcript-active {
  color: var(--accent);
  background: var(--accent-softer);
  box-shadow: -3px 0 0 var(--accent);
}
[data-theme="dark"] .reader-podcast-transcript,
[data-theme="dark"] .reader-audio-transcript {
  color: var(--tool-ink, #F1E9DC);
}
[data-theme="dark"] .reader-podcast-transcript .reader-transcript-search input,
[data-theme="dark"] .reader-audio-transcript .reader-transcript-search input {
  color: var(--tool-ink, #F1E9DC);
}

/* Uploaded video follows the same rule as TikTok: the media is a bounded
   object and its transcript is a separate, scrollable surface beneath it. */
body .reader-uploaded-video-frame,
body.two-pane .reader-uploaded-video-frame,
[data-theme="dark"] body .reader-uploaded-video-frame,
[data-theme="dark"] body.two-pane .reader-uploaded-video-frame {
  position: relative;
  top: auto;
  width: min(760px, 100%);
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}
.reader-uploaded-video-stage {
  display: grid;
  place-items: center;
  width: 100%;
  max-height: min(62dvh, 640px);
  aspect-ratio: var(--uploaded-video-ratio, 16 / 9);
  overflow: hidden;
  background: #090807;
}
body .reader-uploaded-video-frame.is-portrait,
body.two-pane .reader-uploaded-video-frame.is-portrait,
[data-theme="dark"] body.two-pane .reader-uploaded-video-frame.is-portrait {
  width: min(360px, calc((100dvh - 260px) * .5625), calc(100% - 24px));
}
.reader-uploaded-video-frame.is-portrait .reader-uploaded-video-stage {
  aspect-ratio: var(--uploaded-video-ratio, 9 / 16);
}
.reader-uploaded-video-frame .reader-video-player {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(62dvh, 640px);
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
  background: #090807;
}
.reader-uploaded-video-transcript {
  width: min(680px, calc(100% - 24px));
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 44px;
  color: var(--tool-ink, inherit);
  font-family: var(--serif);
}
.reader-content:has(.reader-uploaded-video-frame + .reader-uploaded-video-transcript),
.reader-content:has(.reader-uploaded-video-frame ~ .reader-uploaded-video-transcript) {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 150px);
  min-height: 520px;
  overflow: hidden;
}
.reader-content:has(.reader-uploaded-video-transcript) .reader-uploaded-video-frame {
  flex: 0 1 auto;
  margin-bottom: 12px;
}
.reader-content:has(.reader-uploaded-video-transcript) .reader-uploaded-video-stage,
.reader-content:has(.reader-uploaded-video-transcript) .reader-video-player {
  max-height: min(48dvh, 520px);
}
.reader-content:has(.reader-uploaded-video-transcript) .reader-uploaded-video-transcript {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  min-height: 220px;
  overflow: hidden;
  padding-bottom: 18px;
}
.reader-uploaded-video-transcript .reader-transcript-scroll {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  padding-top: 12px;
}
.reader-uploaded-video-transcript .reader-chunk { max-width: none; }
.reader-uploaded-video-transcript .reader-passage {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.62;
}
.reader-uploaded-video-description {
  width: min(680px, calc(100% - 24px));
  max-width: 680px;
  margin: 0 auto 18px;
}

@media (max-width: 660px) {
  .reader-audio-memo-object { min-height: 232px; padding: 24px 22px 18px; }
  .reader-audio-memo-object h3 { margin-top: 17px; }
  .reader-audio-object-row { margin-top: 18px; gap: 13px; }
  .reader-object-waveform { gap: 1px; }
  .reader-object-waveform span { width: 2px; min-width: 2px; }
  .reader-podcast-object { grid-template-columns: 43% 57%; min-height: 220px; }
  .reader-podcast-object > .reader-object-play { left: 43%; }
  .reader-podcast-copy { padding: 22px 17px 16px 22px; }
  .reader-podcast-copy h3 { margin-top: 14px; font-size: 20px; }
}

/* A Library pane can be narrow on a wide desktop. Size the card's copy from
   its own available width while keeping the artwork on the left. */
@container reader-audio (max-width: 420px) {
  .reader-podcast-copy { padding: 20px 14px 16px 22px; }
  .reader-podcast-copy h3 { margin-top: 14px; font-size: 20px; }
  .reader-podcast-copy .reader-audio-object-header { gap: 8px; }
  .reader-podcast-copy .reader-object-label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-podcast-cover { transition: none !important; }
  .reader-podcast-object.is-playing .reader-podcast-cover { transform: none; }
}

.media-audio-memo-card:focus-visible,
.media-podcast-card:focus-visible {
  outline: 3px solid #315E88;
  outline-offset: 4px;
}

/* ── Production objects: photographs, editorial articles, websites ────── */
:root {
  --object-paper: var(--media-paper, #F4EFE5);
  --object-paper-edge: var(--media-paper-edge, #DDD4C5);
  --object-ink: var(--media-ink, #221E19);
  --object-muted: var(--media-muted-ink, #776E62);
  --object-clay: var(--media-clay, #B15136);
  --object-contact-shadow: 0 2px 3px rgba(37,25,14,.20);
  --object-ambient-shadow: 0 12px 27px rgba(37,25,14,.18);
  --object-hover-shadow: 0 4px 5px rgba(37,25,14,.18), 0 20px 40px rgba(37,25,14,.21);
}

body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item) {
  transform: rotate(var(--object-idle-tilt, 0deg)) !important;
  transform-origin: 50% 58%;
  transition: transform 190ms cubic-bezier(.2,.76,.25,1);
}
body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item):hover,
body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item):focus-within {
  transform: translateY(-4px) scale(1.012) rotate(var(--object-hover-tilt, 0deg)) !important;
  z-index: 25;
}
body.desk-scope .dv-item.photo-polaroid-item {
  backface-visibility: hidden;
  transform: translateZ(0) rotate(var(--object-idle-tilt, 0deg)) !important;
  will-change: transform;
}
body.desk-scope .dv-item.photo-polaroid-item:hover,
body.desk-scope .dv-item.photo-polaroid-item:focus-within {
  transform: translate3d(0, -2px, 0) scale(1.004) rotate(var(--object-hover-tilt, 0deg)) !important;
}
body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item).is-open {
  transform: translateY(-4px) scale(1.015) rotate(0deg) !important;
  z-index: 26;
}

body .note-card:is(.photo-polaroid, .article-sheet, .website-specimen),
[data-theme="dark"] body .note-card:is(.photo-polaroid, .article-sheet, .website-specimen) {
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--object-paper-edge) !important;
  border-radius: 2px !important;
  color: var(--object-ink) !important;
  background: var(--object-paper) !important;
  background-image: linear-gradient(105deg, rgba(255,255,255,.30), transparent 38%, rgba(102,78,49,.018)) !important;
  box-shadow: var(--object-contact-shadow), var(--object-ambient-shadow) !important;
  cursor: pointer;
}
body .note-card:is(.photo-polaroid, .article-sheet, .website-specimen)::before { display: none !important; }
body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item):hover > .note-card,
body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item):focus-within > .note-card {
  box-shadow: var(--object-hover-shadow) !important;
}
.photo-polaroid:focus-visible,
.article-sheet:focus-visible,
.website-specimen:focus-visible { outline: 3px solid #315E88; outline-offset: 4px; }

/* Photograph: source-aware instant film, composition preserved. */
body .photo-polaroid,
[data-theme="dark"] body .photo-polaroid {
  width: 100% !important;
  padding: 9px 9px 0 !important;
}
.photo-polaroid-aperture {
  width: 100%;
  aspect-ratio: var(--photo-ratio, 3 / 2);
  overflow: hidden;
  background: #D8D0C4;
  box-shadow: inset 0 0 0 1px rgba(32,24,17,.16);
}
.photo-polaroid.is-portrait .photo-polaroid-aperture { aspect-ratio: var(--photo-ratio, 4 / 5); }
.photo-polaroid.is-square .photo-polaroid-aperture { aspect-ratio: var(--photo-ratio, 1 / 1); }
.photo-polaroid-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.photo-polaroid-fallback { background: #D8D0C4; }
.photo-polaroid-caption {
  position: relative;
  min-height: 62px;
  padding: 9px 3px 8px;
  box-sizing: border-box;
}
.photo-polaroid-handwriting {
  overflow: hidden;
  color: #2D2822;
  font-family: var(--handwritten);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.05;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-polaroid-caption-affordance {
  color: var(--object-muted);
  font-family: var(--sans);
  font-size: 9px;
  opacity: 0;
  transition: opacity 150ms ease;
}
.photo-polaroid:hover .photo-polaroid-caption-affordance,
.photo-polaroid:focus-visible .photo-polaroid-caption-affordance { opacity: .68; }
.photo-polaroid-meta {
  position: absolute;
  right: 3px;
  bottom: 8px;
  left: 3px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  color: var(--object-muted);
  font-family: var(--sans);
  font-size: 7.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.photo-polaroid-meta span { overflow: hidden; text-overflow: ellipsis; }

/* Editorial article: concise 288 × 250 reading sheet. */
body .article-sheet,
[data-theme="dark"] body .article-sheet {
  position: relative;
  width: 288px !important;
  height: 250px;
  padding: 14px 16px 15px !important;
}
.article-sheet-masthead {
  overflow: hidden;
  color: var(--object-ink);
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.article-sheet-section {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 10px;
  margin: 9px 0 5px;
  color: #5B5146;
  font-family: var(--sans);
  font-size: 7px;
  font-weight: 680;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.article-sheet-section i { width: 5px; height: 5px; border-radius: 50%; background: var(--object-clay); }
.article-sheet-hero {
  display: block;
  width: 100%;
  height: 82px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(31,24,18,.10);
}
.article-sheet h3 {
  display: -webkit-box;
  margin: 9px 0 3px;
  overflow: hidden;
  color: var(--object-ink);
  font-family: var(--serif);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.03;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.article-sheet-byline {
  display: flex;
  gap: 5px;
  min-height: 9px;
  color: #4D463E;
  font-family: var(--sans);
  font-size: 7.5px;
  line-height: 1.1;
  text-transform: uppercase;
}
.article-sheet > p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: #3F3932;
  font-family: var(--sans);
  font-size: 8.5px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.article-sheet.no-hero .article-sheet-section { margin-top: 15px; }
.article-sheet.no-hero h3 { margin-top: 18px; font-size: 23px; -webkit-line-clamp: 3; }
.article-sheet.no-hero > p { margin-top: 12px; font-size: 10px; -webkit-line-clamp: 4; }

/* Website: page specimen with actual layout/capture and attached provenance. */
body .website-specimen,
[data-theme="dark"] body .website-specimen {
  width: 310px !important;
  height: 208px;
  padding: 8px 8px 0 !important;
}
.website-specimen-capture {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #D8D0C4;
  box-shadow: inset 0 0 0 1px rgba(32,24,17,.17);
}
.website-specimen-screenshot,
.website-specimen-live {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: transparent;
  pointer-events: none;
}
.product-specimen .website-specimen-capture { background: #F2F0EC; }
.product-specimen .website-specimen-screenshot {
  object-fit: contain;
  background: #F2F0EC;
}
.website-specimen-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px;
  box-sizing: border-box;
  color: #EFE8DB;
  background: #4B4A45;
  text-align: center;
}
.website-specimen-fallback img { width: 25px; height: 25px; object-fit: contain; }
.website-specimen-fallback strong { font: 600 17px/1.05 var(--serif); }
.website-specimen-fallback span { font: 600 8px/1 var(--sans); letter-spacing: .06em; }
.website-specimen-provenance {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  height: 49px;
  padding: 0 4px;
  box-sizing: border-box;
}
.website-specimen-favicon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  background: #E2DACD;
  box-shadow: inset 0 0 0 1px rgba(44,34,24,.16);
}
.website-specimen-favicon img { width: 15px; height: 15px; object-fit: contain; }
.website-specimen-favicon i { width: 6px; height: 6px; border-radius: 50%; background: var(--object-clay); }
.website-specimen-identity { min-width: 0; font-style: normal; }
.website-specimen-identity small,
.website-specimen-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.website-specimen-identity small { color: var(--object-muted); font: 500 7px/1.15 var(--sans); }
.website-specimen-identity strong { margin-top: 2px; color: var(--object-ink); font: 600 12px/1 var(--serif); }
.website-specimen-label {
  color: #4C453D;
  font: 680 7px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.website-specimen-label b { margin-left: 3px; font-size: 10px; font-weight: 500; }

/* Opening surfaces: the desk softens, but never becomes a black lightbox. */
.dv-reader:has(.reader-photo-polaroid, .reader-article-sheet, .reader-website-specimen) .dv-reader-backdrop {
  background: rgba(42,31,21,.34);
  backdrop-filter: blur(9px) saturate(.78);
}
.dv-reader:has(.reader-photo-polaroid, .reader-article-sheet, .reader-website-specimen) .dv-reader-close {
  color: #2C251E;
  background: rgba(244,239,229,.88);
  box-shadow: 0 2px 8px rgba(35,24,14,.18);
}
.dv-reader-body:has(.reader-photo-polaroid),
.dv-reader-body.dv-reader-body-article {
  width: min(650px, 94vw);
  min-height: 0;
  padding: 52px 30px 70px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.reader-surface-editorial,
.reader-surface-editorial .reader-content-editorial,
.reader-surface-photo,
.reader-surface-photo .reader-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
body .reader-photo-polaroid,
[data-theme="dark"] body .reader-photo-polaroid {
  display: block;
  width: min(540px, 86vw);
  max-width: 540px;
  margin: 0 auto;
  padding: 14px 14px 20px;
  border: 1px solid var(--object-paper-edge);
  border-radius: 2px;
  color: var(--object-ink);
  background: var(--object-paper);
  box-shadow: 0 4px 5px rgba(37,25,14,.20), 0 24px 52px rgba(37,25,14,.24);
  transform: rotate(.15deg);
}
.reader-photo-polaroid .reader-photo-img {
  display: block;
  width: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  background: #D8D0C4;
  box-shadow: inset 0 0 0 1px rgba(32,24,17,.15);
}
.reader-photo-polaroid.is-portrait { width: min(380px, 82vw); }
.reader-photo-polaroid.is-square { width: min(470px, 84vw); }
.reader-photo-polaroid .reader-chunk { padding: 0; background: transparent; }
.reader-photo-polaroid .reader-photo-caption {
  margin: 15px 4px 3px;
  color: #2D2822;
  font-family: var(--handwritten);
  font-size: clamp(22px, 4vw, 30px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.08;
  text-align: left;
}
.reader-photo-meta {
  margin: 9px 4px 0;
  color: var(--object-muted);
  font: 500 10px/1.2 var(--sans);
}

body .reader-article-sheet,
[data-theme="dark"] body .reader-article-sheet {
  width: min(500px, 88vw);
  margin: 0 auto;
  padding: 24px 28px 42px;
  box-sizing: border-box;
  border: 1px solid var(--object-paper-edge);
  border-radius: 2px;
  color: var(--object-ink);
  background: var(--object-paper);
  box-shadow: 0 4px 5px rgba(37,25,14,.20), 0 25px 54px rgba(37,25,14,.24);
}
.reader-article-sheet-masthead {
  color: var(--object-ink);
  font: 700 13px/1 var(--serif);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.reader-article-sheet-section {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 9px;
  color: #524A42;
  font: 700 9px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reader-article-sheet-section i { width: 7px; height: 7px; border-radius: 50%; background: var(--object-clay); }
.reader-article-sheet-hero { display: block; width: 100%; max-height: 250px; object-fit: cover; }
.reader-article-sheet h1 {
  margin: 17px 0 5px;
  color: var(--object-ink);
  font: 600 clamp(30px, 6vw, 42px)/1.02 var(--serif);
}
.reader-article-sheet-identity { color: #4A433B; font: 600 10px/1.25 var(--sans); text-transform: uppercase; }
.reader-article-sheet-dek { margin: 12px 0 0; color: #403A33; font: 500 15px/1.3 var(--sans); }
.reader-article-sheet-actions { display: flex; gap: 14px; margin: 16px 0 20px; }
.reader-article-sheet-actions :is(button,a) {
  padding: 0;
  border: 0;
  color: #315E88;
  background: transparent;
  font: 700 10px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.reader-article-sheet-body {
  margin-top: 22px;
  animation: article-sheet-body-reveal 240ms 170ms both ease-out;
}
.reader-article-sheet-body .reader-chunk { max-width: none; padding: 0; color: var(--object-ink); background: transparent; }
.reader-article-sheet-body .reader-chunk :is(p,li,blockquote) { color: var(--object-ink); font: 400 16px/1.65 var(--serif); }
.reader-article-sheet.no-hero h1 { margin-top: 31px; }

body .dv-reader-body.dv-reader-body-live:has(.reader-website-specimen),
[data-theme="dark"] body .dv-reader-body.dv-reader-body-live:has(.reader-website-specimen) {
  width: min(680px, 96vw);
  height: 94vh;
  padding: 42px 40px 60px;
  overflow: auto;
  background: transparent;
  box-shadow: none;
}
.reader-surface-website,
.reader-surface-website .reader-content-website {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.reader-website-workspace { height: 100%; background: transparent; }
.reader-website-workspace .reader-live-pane { align-items: center; overflow: auto; background: transparent; }
body .reader-website-specimen,
[data-theme="dark"] body .reader-website-specimen {
  width: min(540px, 88vw);
  margin: 0 auto;
  padding: 10px 10px 0;
  box-sizing: border-box;
  border: 1px solid var(--object-paper-edge);
  border-radius: 2px;
  color: var(--object-ink);
  background: var(--object-paper);
  box-shadow: 0 4px 5px rgba(37,25,14,.20), 0 25px 54px rgba(37,25,14,.25);
}
.reader-website-capture { position: relative; width: 100%; height: min(58vh, 430px); overflow: hidden; background: #D8D0C4; }
.reader-website-screenshot,
.reader-website-capture .reader-website-frame { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; background: #FFF; }
.reader-website-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  color: #EFE8DB;
  background: #4B4A45;
  text-align: center;
}
.reader-website-fallback strong { font: 600 28px/1.05 var(--serif); }
.reader-website-fallback span { font: 600 11px/1 var(--sans); }
.reader-website-fallback small { max-width: 300px; font: 500 10px/1.35 var(--sans); opacity: .75; }
.reader-website-provenance {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 0 7px;
}
.reader-website-favicon { display: grid; place-items: center; width: 32px; height: 32px; background: #E2DACD; box-shadow: inset 0 0 0 1px rgba(44,34,24,.16); }
.reader-website-favicon img { width: 21px; height: 21px; object-fit: contain; }
.reader-website-identity { min-width: 0; }
.reader-website-identity :is(small,strong) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-website-identity small { color: var(--object-muted); font: 500 9px/1.15 var(--sans); }
.reader-website-identity strong { margin-top: 3px; color: var(--object-ink); font: 600 17px/1 var(--serif); }
.reader-website-actions { display: flex; align-items: center; gap: 9px; color: #4C453D; font: 700 8px/1 var(--sans); text-transform: uppercase; }
.reader-website-actions :is(button,a) { padding: 0; border: 0; color: #315E88; background: transparent; font: 700 9px/1 var(--sans); text-decoration: none; cursor: pointer; }
.reader-website-workspace .reader-reading-pane { width: min(540px, 88vw); margin: 0 auto; border: 1px solid var(--object-paper-edge); background: var(--object-paper); box-shadow: 0 20px 48px rgba(37,25,14,.22); }

@keyframes article-sheet-body-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
::view-transition-group(photo-polaroid),
::view-transition-group(article-sheet),
::view-transition-group(website-specimen) { animation-duration: 380ms; animation-timing-function: cubic-bezier(.2,.76,.25,1); }
::view-transition-old(photo-polaroid),
::view-transition-new(photo-polaroid),
::view-transition-old(article-sheet),
::view-transition-new(article-sheet),
::view-transition-old(website-specimen),
::view-transition-new(website-specimen) { mix-blend-mode: normal; }

@media (max-width: 700px) {
  .dv-reader-body:has(.reader-photo-polaroid),
  .dv-reader-body.dv-reader-body-article { padding: 66px 14px 45px; }
  body .dv-reader-body.dv-reader-body-live:has(.reader-website-specimen) { padding: 66px 12px 40px; }
  .reader-website-capture { height: 55vh; }
  .reader-website-actions > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item) { transition: none !important; }
  body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item):hover,
  body.desk-scope .dv-item:is(.photo-polaroid-item, .article-sheet-item, .website-specimen-item):focus-within {
    transform: rotate(var(--object-hover-tilt, 0deg)) !important;
  }
  .reader-article-sheet-body { animation: none; }
  ::view-transition-group(photo-polaroid),
  ::view-transition-group(article-sheet),
  ::view-transition-group(website-specimen) { animation-duration: 1ms; }
}

/* The manuscript is centered in its paper, including when feedback is hidden.
   Feedback uses the available physical margin or its compact presentation. */
body.two-pane .workspace .editor-body,
body.two-pane.the-page-on .workspace .doc-h1,
body.two-pane .workspace .editor-surface > .editor-thesis-input,
.shared-workspace .editor-thesis {
  width: min(640px, calc(100% - 92px));
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
body.two-pane .workspace .editor-body {
  padding-left: 0;
  padding-right: 0;
  position: relative;
  z-index: 1;
}
body.two-pane .workspace .page-slab {
  padding-left: max(46px, calc((100% - 640px) / 2));
  padding-right: max(46px, calc((100% - 640px) / 2));
}
.shared-workspace { min-height: 100%; }
.shared-chapter-frame { min-height: 100%; }
body.two-pane .shared-workspace .editor-thesis { padding: 24px 0 4px; }
.margin-highlight-layer,
.margin-cards-layer {
  position: absolute;
  inset: 0 0 auto;
  pointer-events: none;
}
.margin-highlight-layer { z-index: 0; }
.margin-cards-layer { z-index: 3; overflow: visible; }
.margin-highlight-rect {
  position: absolute;
  opacity: .32;
  border-radius: 3px 8px 4px 6px;
  transform: rotate(-.25deg);
  filter: saturate(.9);
}
.margin-rail-header {
  position: absolute;
  top: 28px;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(55,47,38,.16);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #756d63;
}
.margin-note-card,
.margin-note-cluster {
  position: absolute;
  pointer-events: auto;
  color: #30291f;
  transform: rotate(var(--note-angle, 0deg));
  animation: noteEnter .38s ease both;
}
.margin-note-card { cursor: pointer; }
.margin-note-sheet {
  position: relative;
  min-height: 76px;
  margin-top: calc(var(--stack, 0) * -4px);
  padding: 14px 15px 12px;
  border-radius: 2px;
  box-shadow: 1px 3px 7px rgba(31,24,16,.16), 3px 8px 18px rgba(31,24,16,.09), inset 0 1px rgba(255,255,255,.35);
  overflow: hidden;
}
.margin-note-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.08) 50%);
}
.margin-yellow { background: #F5D878; color: #3a2e14; }
.margin-blue   { background: #87B9E0; color: #0f2c44; }
.margin-pink   { background: #F099B8; color: #3a2030; }
.margin-green  { background: #86C7A0; color: #133a22; }
.margin-note-card:hover {
  transform: translateY(-4px) rotate(0deg) scale(1.015);
  transition: transform .22s cubic-bezier(.34,1.4,.64,1);
  z-index: 8;
}
.margin-connector {
  position: absolute;
  height: 1px;
  background: rgba(77,68,57,.28);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .16s ease;
}
.margin-note-card:hover + .margin-connector,
.margin-note-cluster:hover + .margin-connector { opacity: 1; }
.margin-note-type {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .66;
}
.margin-note-quote {
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.35;
}
.margin-note-body {
  margin-top: 8px;
  font-family: var(--handwritten);
  font-size: 14px;
  line-height: 1.35;
}
.margin-note-meta {
  margin-top: 9px;
  font-family: var(--sans);
  font-size: 9px;
  opacity: .62;
}
.margin-note-cluster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(52,43,32,.13);
  border-radius: 16px;
  background: #FBF8F2;
  box-shadow: 0 6px 16px rgba(36,26,16,.14);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.margin-cluster-dots { display: inline-flex; gap: 4px; }
.margin-cluster-dots i { width: 8px; height: 8px; border-radius: 50%; }
.margin-note-removed { opacity: .60; }
.margin-note-removed::after { content: 'passage removed'; display: block; margin-top: 5px; font: 9px var(--sans); opacity: .65; }
.margin-edge-marker {
  position: absolute;
  right: 0;
  width: 7px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 3px 0 0 3px;
  box-shadow: -2px 2px 5px rgba(25,18,10,.18);
  pointer-events: auto;
  cursor: pointer;
}
.margin-note-popover {
  position: fixed;
  z-index: 10020;
  padding: 8px;
  border: 1px solid rgba(45,35,24,.13);
  border-radius: 6px;
  background: #FBF8F2;
  box-shadow: 0 18px 44px rgba(25,18,10,.28);
}
.margin-popover-item { padding: 13px 14px; margin: 5px 0; border-radius: 2px; }
.margin-passage-glow {
  position: absolute;
  left: 34px;
  right: 34px;
  height: 76px;
  border-radius: 10px;
  background: rgba(184,150,74,.18);
  animation: passageGlow 2.6s ease-out forwards;
}
/* Who left it — a small portrait or initials beside the name. */
.margin-person { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.margin-person-photo,
.margin-person-initials {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 1px solid rgba(0,0,0,.14);
}
.margin-person-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.42);
  font: 700 8px/1 var(--sans); letter-spacing: .04em; color: inherit;
}
.margin-note-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.margin-note-body, .margin-reply-body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Replies stay on the paper they answer, in the order they were sent. */
.margin-reply-thread { margin-top: 8px; }
.margin-reply { padding-top: 8px; margin-top: 8px; border-top: 1px solid rgba(0,0,0,.14); }
.margin-reply-who { font-family: var(--sans); font-size: 10px; font-weight: 650; opacity: .82; }
.margin-reply-body { margin-top: 4px; font-family: var(--handwritten); font-size: 14px; line-height: 1.35; }
.margin-reply-area { margin-top: 8px; font-family: var(--sans); cursor: default; }
.margin-reply-open {
  display: block; margin-left: auto; padding: 6px 2px 2px;
  border: 0; background: transparent; color: inherit;
  font: 650 11px var(--sans); letter-spacing: .02em; cursor: pointer; opacity: .78;
  min-height: 28px;
}
.margin-reply-open:hover, .margin-reply-open:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; outline: none; }
.margin-reply-form { display: flex; flex-direction: column; gap: 6px; }
.margin-reply-rule { display: block; height: 1px; background: rgba(0,0,0,.16); }
.margin-reply-label { font: 650 10px var(--sans); letter-spacing: .03em; opacity: .82; }
.margin-reply-input {
  display: block; width: 100%; box-sizing: border-box; min-height: 88px; max-height: 160px;
  padding: 4px 2px; border: 0; border-bottom: 1px solid rgba(0,0,0,.18); border-radius: 0;
  background: transparent; color: inherit; resize: none;
  font-family: var(--handwritten); font-size: 15px; line-height: 1.35;
}
.margin-reply-input:focus { outline: none; border-bottom-color: rgba(0,0,0,.42); }
.margin-reply-input[readonly] { opacity: .78; }
.margin-reply-status { font: 11px/1.35 var(--sans); opacity: .86; }
.margin-reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.margin-reply-cancel {
  padding: 6px 4px; border: 0; background: transparent; color: inherit;
  font: 650 11px var(--sans); cursor: pointer; opacity: .78; min-height: 32px;
}
.margin-reply-cancel:hover { opacity: 1; }
.margin-reply-send {
  min-width: 72px; min-height: 32px; padding: 6px 14px; border: 0; border-radius: 9px;
  background: #3a2e14; color: #F5D878; font: 650 12px var(--sans); cursor: pointer;
}
.margin-blue .margin-reply-send { background: #0f2c44; color: #87B9E0; }
.margin-pink .margin-reply-send { background: #3a2030; color: #F099B8; }
.margin-green .margin-reply-send { background: #133a22; color: #86C7A0; }
.margin-reply-send:disabled, .margin-reply-cancel:disabled { opacity: .5; cursor: default; }
.margin-reply-form.is-sending .margin-reply-send { opacity: .7; }
/* A paper with an open reply sits still: no tilt, no lift, so the caret stays where the words are. */
.margin-note-card.margin-note-replying,
.margin-note-card.margin-note-replying:hover { transform: none; cursor: default; z-index: 9; }
.margin-note-replying .margin-note-sheet { overflow: visible; }
.margin-note-popover { overflow-y: auto; }

/* Desk-code resolution and human confirmation. */
.share-modal { width: 460px; }
.share-modal-header { align-items: flex-start; }
.share-modal-header p { margin: 4px 28px 0 0; font: 12px/1.4 var(--sans); color: var(--ink-faint); }
.share-desk-label { display: block; margin-bottom: 4px; font: 700 9px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.share-desk-input { font-family: var(--sans); }
.share-code-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(26,24,22,.08);
  font: 11px var(--sans);
  color: var(--ink-faint);
}
.share-code-footer code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font: 11px var(--mono, 'JetBrains Mono', monospace);
  color: var(--ink-light);
}
.share-code-footer button { border: 0; background: transparent; color: #35597F; font: 650 11px var(--sans); cursor: pointer; flex-shrink: 0; }
.share-email-btn { background: #35597F; color: #fff; }
.share-email-btn:disabled { opacity: .35; cursor: default; }
.share-copy-link-btn { color: #35597F; }
.share-desk-confirmation { margin: -5px 0 14px; padding: 8px 10px; border-radius: 4px; background: rgba(53,89,127,.07); font: 12px var(--sans); color: var(--ink); }
.share-result-message { padding: 8px 0; }
.collab-feedback-toggle { color: #35597F; border-color: rgba(53,89,127,.24); }

@media (max-width: 700px) {
  .shared-workspace .editor-thesis {
    width: calc(100% - 48px);
    margin-left: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .margin-note-card, .margin-note-cluster, .margin-note-sheet,
  .margin-edge-marker, .margin-note-popover, .margin-connector { animation: none !important; transition: none !important; }
  .margin-note-card:hover { transform: rotate(var(--note-angle, 0deg)); }
}

/* ============================================================
   POCKET EDITOR — the phone's chapter
   Writing, References and Share match the native navigation. The real
   editor and its selection tools stay mounted while a reference is open.
   ============================================================ */
body.pocket-page .panes { display: none; }
/* Phone Writing uses the native app's header and three destinations. */
body.pocket-page .scope-indicator { display: none; }
body.pocket-page { overflow: hidden; overscroll-behavior: none; }
body.pocket-page:not(.pocket-library-open):not(.pocket-writing-open) .header-bar { visibility: hidden; }
body.dv-reader-open #pocket-editor,
body.dv-mv-open #pocket-editor,
body.pocket-library-open #pocket-editor,
body.pocket-writing-open #pocket-editor { visibility: hidden; pointer-events: none; }
#pocket-editor {
  position: fixed; inset: 0 0 calc(var(--pocket-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
  z-index: 300; display: flex; flex-direction: column; min-width: 0;
  padding-top: env(safe-area-inset-top, 0px); overflow: hidden;
  background: var(--yd-paper); color: var(--yd-ink);
}
.pocket-editor-lede { display: flex; align-items: center; gap: 8px; padding: 10px 16px; flex: none; }
.pocket-editor-lede button { min-height: 44px; border: 0; padding: 6px; color: inherit; background: transparent; font: 500 17px/1.2 var(--serif); cursor: pointer; }
.pocket-editor-lede .pocket-writing-title { margin-right: auto; padding-left: 0; font-size: 29px; font-weight: 600; }
.pocket-editor-kicker { flex: none; padding: 10px 24px; color: var(--yd-coral, #B0512C); font: 600 11px/1.4 var(--sans); letter-spacing: .08em; }
.pocket-editor-surface { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: calc(var(--keyboard-height, 0px) + 32px); }

/* One consistent measure: 24px of air from the screen edge. The body
   selector outweighs the desktop shell's own the-page-on rules. */
body.pocket-page .pocket-editor-surface .doc-h1,
body.pocket-page .pocket-editor-surface .editor-thesis-input,
body.pocket-page .pocket-editor-surface .editor-references {
  padding-left: 24px;
  padding-right: 24px;
}
body.pocket-page .pocket-editor-surface .editor-body {
  margin: 0;
  width: auto;
  max-width: none;
  padding: 12px 24px 40px;
  font-family: var(--serif, 'EB Garamond', serif);
  font-size: 17px;
  line-height: 1.7;
  min-height: 45vh;
}

/* References belongs to Writing. The editor stays mounted underneath so
   opening material and inserting a sticky retain both scroll and caret. */
dialog.pocket-references { position: fixed; inset: env(safe-area-inset-top, 0px) 0 0; width: 100%; max-width: 520px; height: 100%; max-height: 100dvh; box-sizing: border-box; margin: 0 auto; padding: 0; border: 0; background: var(--yd-paper); color: var(--yd-ink); }
dialog.pocket-references[open] { display: flex; flex-direction: column; }
dialog.pocket-references::backdrop { background: #18120c70; }
.pocket-references-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; }
.pocket-references-header h2 { margin: 0; font: 600 28px/1.2 var(--serif); }
.pocket-references button { min-height: 44px; padding: 8px 10px; color: inherit; background: transparent; border: 1px solid var(--yd-tool-border); border-radius: 7px; font: 500 15px/1.3 var(--serif); cursor: pointer; }
.pocket-references-header button { border: 0; }
.pocket-references-search { flex: none; margin: 0 18px; width: calc(100% - 36px); box-sizing: border-box; padding: 12px; min-height: 44px; font: 16px var(--sans); color: inherit; border: 1px solid var(--yd-tool-border); border-radius: 8px; background: var(--yd-tool); }
.pocket-references-tools { flex: none; display: flex; gap: 10px; padding: 12px 18px; }
.pocket-references-tools button:first-child { background: #1c1d1d; color: #F0EBE1; }
.pocket-references-list { flex: 1; min-height: 0; overflow: auto; padding: 0 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
.pocket-references-list h3 { font: 600 16px/1.4 var(--serif); margin: 12px 0; }
.pocket-reference-note { padding: 16px; margin: 0 0 16px; background: var(--note-stock); color: #2B2723; box-shadow: 0 2px 4px #0002; }
.pocket-reference-words { font: 500 17px/1.45 var(--handwritten, var(--sans)); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; }
.pocket-reference-origin { font: 13px/1.4 var(--sans); margin: 0 0 12px; }
.pocket-reference-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pocket-reference-actions button { border-color: #2B272340; font: 500 14px/1.3 var(--sans); }
.pocket-reference-source { display: block; width: 100%; margin-bottom: 10px; text-align: left; }
.pocket-references :focus-visible, .pocket-editor-lede :focus-visible { outline: 2px solid var(--yd-action); outline-offset: 2px; }

/* Voice memo — record/stop/save/cancel, nothing else. The microphone is
   asked for at Record, never before. */
.voice-memo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: grid;
  place-items: center;
  background: rgba(24, 18, 12, .34);
}
.voice-memo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 40px));
  padding: 20px 22px 18px;
  background: var(--paper, #FDFBF6);
  color: var(--ink, #27221D);
  border: 1px solid rgba(53, 43, 31, .25);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(9, 5, 3, .4);
}
.voice-memo-card b { font: 600 16px/1.2 var(--serif, 'EB Garamond', serif); }
.voice-memo-status { font: 400 12.5px/1.4 var(--sans); color: var(--ink-faint, #756B60); }
.voice-memo-timer { font: 500 22px/1 var(--sans); font-variant-numeric: tabular-nums; }
.voice-memo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.voice-memo-actions button {
  border: 1px solid rgba(53, 43, 31, .3);
  border-radius: 8px;
  background: none;
  color: var(--ink, #27221D);
  font: 500 13px/1 var(--sans);
  padding: 10px 13px;
  min-height: 42px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.voice-memo-record { color: #A33B24; border-color: rgba(163, 59, 36, .5); }
.voice-memo-save:not(:disabled) { background: var(--gold, #B8860B); border-color: transparent; color: #fff; }
.voice-memo-actions button:disabled { opacity: .45; cursor: default; }
/* Destroying the only copy of a recording is its own deliberate action, kept
   quiet until there is something to destroy and asked for twice. */
.voice-memo-discard { color: var(--ink-faint, #756B60); border-color: transparent; }
.voice-memo-discard[data-confirm="1"] { color: #A33B24; border-color: rgba(163, 59, 36, .5); }

/* iPad Writing keeps the library as a slide-over outside this grid. Once
   pane-left is reparented, place the two remaining visible surfaces
   explicitly so their widths cannot inherit the retired five-track order. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.two-pane .panes,
  body.two-pane .panes.close-left,
  body.two-pane .panes.close-right,
  body.two-pane .panes.expand-left,
  body.two-pane .panes.expand-center,
  body.two-pane .panes.expand-right {
    grid-template-columns: var(--note-gutter-w, 190px) minmax(0, 1fr) !important;
  }
  body.two-pane .note-gutter { grid-column: 1; }
  body.two-pane .pane-center {
    grid-column: 2;
    min-width: 0;
  }
}

@media (min-width: 701px) and (max-width: 767px) {
  body.two-pane .panes,
  body.two-pane .panes.close-left,
  body.two-pane .panes.close-right,
  body.two-pane .panes.expand-left,
  body.two-pane .panes.expand-center,
  body.two-pane .panes.expand-right {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.two-pane .pane-center {
    grid-column: 1;
    min-width: 0;
  }
}

/* Shared writing uses the existing focused page. Removing private stickies
   must not auto-place the page in the former 190px note column. These
   temporary rules leave the person's own pane arrangement intact on return. */
body.two-pane.shared-view .panes {
  grid-template-columns: minmax(0, 1fr) !important;
}
body.two-pane.shared-view #pane-center {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex !important;
  visibility: visible !important;
}
body.two-pane.shared-view :is(#pane-left, #resize-handle-left, .note-gutter,
  .pane-restore-tab, #pane-center > .pane-expand-btn, #pane-center > .pane-close-btn) {
  display: none !important;
}

/* Review stays behind the existing writing pill until requested. */
.writing-review {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-height: 80vh;
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
.writing-review::backdrop { background: rgba(0,0,0,.25); }
.writing-review h2 { margin: 0 0 12px; font: 24px var(--serif); }
.writing-review p { font-size: 14px; line-height: 1.5; }
.writing-review-results section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.writing-review button { padding: 8px 12px; margin: 8px 8px 0 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: inherit; cursor: pointer; }

/* Library bulk actions: reuse the shelf and its existing item actions. */
.lib-selection-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lib-selection-controls button { border: 1px solid var(--tool-border); border-radius: 6px; background: var(--tool-bg); color: var(--tool-ink); padding: 7px 12px; font: 500 13px var(--sans); cursor: pointer; }
.lib-selection-controls button:disabled { opacity: .45; cursor: default; }
.lib-selection-controls .lib-selection-delete { color: var(--tool-ink); }
.lib-selection-controls .lib-selection-delete:hover:not(:disabled) { background: #b42828; color: white; }
.lib-selection-status { font: 12px/1.4 var(--sans); color: var(--tool-muted); }
.lib-selection-controls [hidden], .lib-item-select[hidden] { display: none !important; }
.lib-item-select { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; margin: 0; accent-color: var(--yd-action); cursor: pointer; z-index: 1; }
.lib-selecting .lib-row2, .lib-selecting .lib-note-card { padding-left: 44px; }
.lib-selecting .lib-row-actions, .lib-selecting .lib-row-more { display: none !important; }
.lib-selecting .lib-selected { outline: 2px solid var(--yd-action); outline-offset: -2px; }
.lib-selection-busy .lib-item-select { cursor: progress; }
.lib-search-v2:has(.lib-selection-controls [aria-pressed="true"]) { flex-wrap: wrap; }
.lib-search-v2:has(.lib-selection-controls [aria-pressed="true"]) .lib-selection-controls { flex-basis: 100%; order: 2; }

/* Keep ordinary list markers inside the manuscript's scrollable area. */
.editor-body ul:not(.checklist), .editor-body ol {
  padding-inline-start: 1.65em;
  margin-block: .5em;
  list-style-position: outside;
}
.editor-body ul:not(.checklist) { list-style-type: disc; }
.editor-body ol { list-style-type: decimal; }
.editor-body li > ul, .editor-body li > ol { margin-block: .15em; }
.pill [aria-pressed="true"], .pill [aria-pressed="mixed"] { background: rgba(184,150,74,.18); }

/* Writing controls reuse the existing Desk palette and editorial type. */
.writing-tools { flex:none; position:sticky; top:0; z-index:4; background:var(--paper); color:var(--ink); font-family:var(--serif); margin:0 auto; width:min(640px, calc(100% - 92px)); max-width:640px; }
.writing-tools-row { display:flex; align-items:center; flex-wrap:wrap; gap:3px; padding:7px 0; }
.writing-tools .ws-tool { color:var(--ink-light); }
.writing-tools .writing-tool-label { width:auto; padding-inline:9px; font-weight:400; }
.writing-tools select { font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--border); border-radius:4px; padding:6px; max-width:100%; }
.writing-tools [hidden] { display:none!important; }
.writing-more,.writing-outline { padding:12px; background:var(--paper); border:1px solid var(--border); border-radius:6px; display:flex; flex-wrap:wrap; gap:8px; }
.writing-more button,.writing-outline button { font:inherit; color:var(--ink); border:0; background:transparent; border-radius:4px; padding:7px 9px; cursor:pointer; }
.writing-more button:hover,.writing-outline button:hover { background:var(--frame); }
.writing-more label { display:flex; align-items:center; gap:6px; font-size:13px; }
.writing-outline { flex-direction:column; max-height:220px; overflow:auto; }
.writing-outline button { text-align:left; }
.writing-tools button:disabled { opacity:.4; cursor:default; }
@media(pointer:coarse) { .writing-tools button,.writing-tools select { min-height:44px; min-width:44px; } }

::highlight(writing-find) { background-color: rgba(200, 184, 120, 0.35); color: inherit; }
::highlight(writing-find-current) { background-color: rgba(200, 184, 120, 0.7); color: inherit; }

[data-theme="dark"] ::highlight(writing-find) { background-color: rgba(200, 184, 120, 0.25); }
[data-theme="dark"] ::highlight(writing-find-current) { background-color: rgba(200, 184, 120, 0.5); }

/* Controls use the same paper margins as the writing in every desktop width. */
.writing-tools [aria-pressed="mixed"] { box-shadow: inset 0 -2px var(--ink-faint); }
.pill [aria-pressed="mixed"] { box-shadow: inset 0 -2px currentColor; }
body.pocket-page .writing-tools { width:calc(100% - 48px); max-width:none; }

.find-option { display:flex; align-items:center; gap:4px; white-space:nowrap; font-size:12px; color:var(--ink-light); }
.find-bar-row { flex-wrap:wrap; }
.writing-command-notice { font:13px/1.5 var(--sans); padding:6px 0; color:var(--ink-light); }
.editor-surface > .find-bar { box-sizing:border-box; width:min(640px, calc(100% - 92px)); margin:0 auto 8px; }

/* Approved Writing layout: one manuscript column, with type choices in reach. */
.writing-title-mark { height:3px; width:28px; background:var(--coral, #AD7659); margin:16px 0 17px; margin-left:max(46px, calc((100% - 640px)/2)); }
body.the-page-on .editor-surface > .doc-h1 { margin-bottom:0; padding-bottom:0; }
body.the-page-on .editor-surface > .doc-h1::after { display:none; }
.writing-tools-row { gap:3px; padding:4px 0 9px; flex-wrap:wrap; }
.writing-tools .ws-tool { width:32px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:5px; background:transparent; font:18px var(--serif); cursor:pointer; }
.writing-tools .ws-tool:hover,.writing-tools .ws-tool[aria-pressed=true],.writing-tools .ws-tool[aria-expanded=true] { background:var(--frame); }
.writing-tools .writing-style { border:0; padding:6px 1px; width:105px; font:14px var(--serif); }
.writing-font-trigger { border:0; background:transparent; color:var(--ink); display:flex; gap:4px; align-items:center; justify-content:space-between; width:113px; padding:6px 5px; cursor:pointer; font:14px var(--serif); }
.writing-font-trigger > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.writing-size-control { position:relative; display:inline-flex; align-items:center; width:66px; border-radius:5px; }
.writing-size { width:42px; min-width:0; background:transparent; border:0; color:var(--ink); font:14px var(--serif); padding:6px 2px 6px 4px; appearance:textfield; }
.writing-size::-webkit-inner-spin-button,.writing-size::-webkit-outer-spin-button { appearance:none; margin:0; }
.writing-size-trigger { display:inline-flex; align-items:center; justify-content:center; width:24px; height:34px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--ink); font:14px var(--serif); cursor:pointer; }
.writing-size-trigger:hover,.writing-size-trigger[aria-expanded=true] { background:var(--frame); }
.writing-size-menu { position:absolute; z-index:12; top:calc(100% + 5px); left:0; display:flex; flex-direction:column; width:108px; max-height:min(320px,50dvh); overflow-y:auto; overscroll-behavior:contain; padding:5px; border:1px solid var(--border); border-radius:8px; background:var(--paper); box-shadow:0 8px 25px #0002; }
.writing-size-menu[hidden] { display:none; }
.writing-size-menu button { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; width:100%; min-height:32px; padding:6px 10px; border:0; border-radius:4px; background:transparent; color:var(--ink); text-align:left; font:14px var(--sans); cursor:pointer; }
.writing-size-menu button[aria-checked=true]::after { content:'✓'; }
.writing-size-menu button:hover,.writing-size-menu button:focus,.writing-size-menu button[aria-checked=true] { background:var(--frame); }
.writing-size-trigger:focus-visible,.writing-size-menu button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.writing-control-group { display:inline-flex; align-items:center; gap:1px; margin-left:7px; }
.writing-history { margin-left:auto; }
.writing-more,.writing-font-picker { position:absolute; z-index:12; top:100%; right:0; width:min(300px,100%); padding:14px; background:var(--paper); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 25px #0002; max-height:calc(100dvh - 210px); overflow:auto; }
.writing-more { display:flex; flex-direction:column; gap:8px; font:13px var(--sans); }
.writing-more label { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.writing-more button { text-align:left; font:13px var(--sans); padding:6px; min-height:32px; }
.writing-more .writing-align { display:flex; justify-content:space-between; }
.writing-more .writing-panel-pair { display:flex; gap:8px; }
.writing-more .writing-panel-pair button { flex:1; width:auto; }
.writing-panel-heading,.writing-font-heading { font:500 11px var(--sans); color:var(--ink-light); letter-spacing:.6px; margin:6px 0 2px; }
.writing-more label select { max-width:145px; }
.writing-font-picker { left:105px; right:auto; max-width:calc(100% - 105px); }
.writing-font-picker > input { width:100%; border:1px solid var(--border); border-radius:5px; padding:9px; background:var(--paper); color:var(--ink); font:14px var(--sans); }
.writing-font-results { max-height:310px; overflow:auto; padding-top:8px; }
.writing-font-results button { display:block; width:100%; min-height:36px; text-align:left; border:0; background:transparent; color:var(--ink); padding:6px; font-size:17px; cursor:pointer; border-radius:4px; }
.writing-font-results button:hover,.writing-font-results button[aria-pressed=true] { background:var(--frame); }
.writing-outline { margin-top:6px; font:14px var(--sans); }
@media(max-width:560px) { .writing-tools { width:calc(100% - 48px); } .writing-control-group { margin-left:2px; } .writing-history { margin-left:2px; } .writing-font-picker { left:0; max-width:100%; } .writing-title-mark { margin-left:24px; } }
@media(pointer:coarse) { .writing-tools .ws-tool,.writing-tools button,.writing-tools select,.writing-size { min-height:44px; } .writing-tools .ws-tool { min-width:44px; } }