@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ============================================================
   BUBBLE — Candy-Pastel Glass Softness
   A Couplet theme. Light polarity.

   Iridescent periwinkle→lilac→pink→peach gradients rendered as
   glossy frosted glass over clean white. Pillowy squircle forms,
   a single bubblegum-pink pop, soft pastel ambient glows, and
   liquid wave dividers. Phone-native, all vibes.

   Two-layer model (THEME-SPEC §1): this file declares the raw
   --theme-* palette + a html.theme-bubble remap (mirrors the shared
   css/tokens.css formula — registration step §7.3) + surface
   skinning scoped to body.theme-bubble. base.css / the tokens.css
   FORMULA are untouched.
   ============================================================ */

/* ---- raw palette (the "fill-in", THEME-SPEC §4) ------------- */
html.theme-bubble,
body.theme-bubble {
  /* grounds — near-white with the faintest cool lilac cast */
  --theme-bg-base:    #fbfaff;   /* page ground            -> --paper      */
  --theme-bg-surface: #ffffff;   /* cards / inputs (glass)  -> --paper-soft  */
  --theme-bg-raised:  #f3effc;   /* hover / lilac highlight -> --paper-warm  */
  --theme-bg-deep:    #ffffff;   /* deep surface = surface (light theme)    */

  /* neutral inks + borders — cool purple-charcoal, never pure black */
  --theme-ink-neutral:         #36304e;   /* -> --ink   (~9:1 on paper)     */
  --theme-ink-mid-neutral:     #635c7e;   /* -> --ink-soft                  */
  --theme-ink-muted-neutral:   #938da8;   /* -> --ink-mute (caps labels)    */
  --theme-ink-faint-neutral:   #bcb6cd;   /* -> --ink-faint / placeholders  */
  --theme-border-neutral:      #ece7f6;   /* -> --rule (faint lilac hair)   */
  --theme-border-deep-neutral: #f4f0fb;   /* -> --rule-soft                 */

  /* accent — bubblegum pink, the single true pop (overridden per character) */
  --theme-accent:      #ec5f9b;   /* -> --accent     (brand/seal hue)       */
  --theme-accent-soft: #f9cfe2;   /* -> --accent-soft (pastel surface)      */
  --theme-accent-wash: #fce8f2;   /* -> --accent-wash (faint wash)          */
  --theme-accent-deep: #cc3b7c;   /* -> --accent-deep (contrast role, 4.0:1)*/

  /* accent-tint ratios — a gentle warm lilac/pink breath through neutrals */
  --mix-border-accent:      14%;
  --mix-border-deep-accent: 9%;
  --mix-ink-mid-accent:     6%;
  --mix-ink-soft-accent:    7%;

  /* extras — soft, airy, faintly violet shadows (light polarity) */
  --shadow-soft:  0 1px 2px rgba(120,104,170,0.05), 0 10px 30px rgba(150,120,190,0.10);
  --shadow-card:  0 2px 6px rgba(120,104,170,0.07), 0 20px 46px rgba(150,120,190,0.15);
  --ok:           #1f9e6e;   /* mint success, reads on white                */
  --ok-wash:      #dcf3e8;

  /* corner scale — pillowy squircles everywhere (override THEME-SPEC §3) */
  --radius-field:  13px;
  --radius-image:  20px;
  --radius-card:   22px;
  --radius-modal:  30px;

  /* ---- Bubble-specific design tokens (used by the skinning below) ---- */
  /* the candy ramp — periwinkle → lilac → cotton-candy → peach. THE BRAND. */
  --bub-grad:   linear-gradient(135deg, #c8d0f7 0%, #d9caf2 32%, #f6cfe2 66%, #fde2cf 100%);
  --bub-grad-2: linear-gradient(150deg, #cdd6f8 0%, #e6d4f1 40%, #f9d2e0 72%, #fde4d3 100%);
  --bub-bar:    linear-gradient(90deg, #aeb8f0 0%, #d4b9ec 45%, #f6a6c8 100%);  /* slider fills */
  /* iridescent edge rim */
  --bub-rim:    linear-gradient(135deg, #b9c4f2 0%, #f3c2dd 50%, #fdd9c4 100%);
  /* frosted glass material */
  --glass-fill:   rgba(255,255,255,0.55);
  --glass-fill-2: rgba(255,255,255,0.42);
  --glass-stroke: rgba(255,255,255,0.75);
  --glass-blur:   blur(18px) saturate(1.35);
  /* the breath-fog gloss highlight (top / upper-left specular) + faint lower-right refraction */
  --gloss: inset 0 1.5px 0 rgba(255,255,255,0.95), inset 1px 1px 2px rgba(255,255,255,0.55), inset -1px -1.5px 3px rgba(180,150,214,0.07);
  /* aero specular sweep — a soft diagonal gloss that catches the light, brightening again at the lower edge (refraction). Painted as a background-image layer over glass surfaces. */
  --glass-aero: linear-gradient(150deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.22) 28%, rgba(255,255,255,0.04) 52%, rgba(255,255,255,0.10) 78%, rgba(206,196,244,0.16) 100%);
  /* liquid wave mask — one soft, shallow curve carved out of a gradient header's bottom edge */
  --bub-wave-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'><path d='M0 0H100V93Q50 105 0 93Z' fill='%23000'/></svg>");
  /* asymmetrical card wave — the roster/portrait image dips on an organic slant
     (higher on the right), landing just above the name. Signature move. */
  --bub-card-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 0 H100 V80 C70 98 40 92 0 87 Z' fill='%23000'/></svg>");
  /* clean shallow foot wave — for the thin white strip where a gradient banner
     meets a glass body (cat banner / post banner). Short viewBox = no squish-scuff. */
  --bub-foot-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M0 24 L0 13 Q50 0 100 13 L100 24 Z' fill='%23000'/></svg>");

  /* SB-Graphs net-new tokens (Claude Design 2026-06-09) */
  --beat-exposition: #5b9bd1;
  --beat-inciting:   #9277cf;
  --beat-rising:     #df6a9d;
  --beat-climax:     #e8595e;
  --beat-falling:    #e0973c;
  --beat-resolution: #2fa882;
  --arc-actual:  #4a4566;
  --arc-ideal:   #b6a6d6;
  --grid:        rgba(54,48,78,.09);
  --grid-strong: rgba(54,48,78,.16);
  --baseline:    #cdc6dd;
  --band-ink:    rgba(54,48,78,.42);
  --status-planned:  #b6afc8;
  --status-written:  #ec5f9b;
  --status-complete: #1f9e6e;
  --ring: #ffffff;
  /* glass tokens the mockup uses but light Bubble lacked (dark already defines them) */
  --glass-thin:   rgba(255,255,255,0.40);
  --glass-well:   rgba(255,255,255,0.62);
}

/* The shared --theme-* -> legacy-token remap lives in css/tokens.css (THEME-SPEC
   §7.3): html.theme-bubble is added to that shared selector list rather than
   duplicated here, so the FORMULA stays shared and cannot drift. */

/* ---- fonts (aesthetic extra, THEME-SPEC §3 allows) ---------- */
html.theme-bubble,
body.theme-bubble {
  --font-display: 'Fraunces', 'Noto Serif KR', serif;
  --font-body:    'Hanken Grotesk', 'Noto Sans KR', system-ui, sans-serif;
  --font-korean:  'Noto Serif KR', 'Fraunces', serif;
  /* --font-mono stays JetBrains Mono — functional only (timestamps) */
}

/* Fraunces plainer cut — default optical sizing (axes removed so these match .plot-subtitle) */
body.theme-bubble .section-title,
body.theme-bubble .char-card-name,
body.theme-bubble .sidebar-name,
body.theme-bubble .empty-state h2,
body.theme-bubble .notfound h2,
body.theme-bubble .modal h3 {
  letter-spacing: -0.01em;
}

/* ============================================================
   BODY — flat near-white + soft pastel ambient glows.
   Glass cards float above and sample these glows through blur.
   ============================================================ */
body.theme-bubble {
  background:
    radial-gradient(1150px 760px at 8% -10%,  rgba(190,201,247,0.55), transparent 60%),
    radial-gradient(1000px 720px at 102% -4%, rgba(250,206,224,0.52), transparent 56%),
    radial-gradient(1100px 900px at 48% 118%, rgba(253,224,206,0.48), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
}

/* the ambient glow lives on a fixed layer so it stays put while content scrolls */
body.theme-bubble::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(680px 520px at 78% 16%, rgba(214,196,244,0.40), transparent 62%),
    radial-gradient(560px 460px at 20% 82%, rgba(248,206,226,0.34), transparent 64%);
  opacity: 0.9;
}

body.theme-bubble .app-topbar,
body.theme-bubble .field-card,
body.theme-bubble .traits-block,
body.theme-bubble .portrait-frame {
  transition: background-color 600ms cubic-bezier(.2,.7,.3,1), border-color 400ms ease, box-shadow 400ms ease;
}

body.theme-bubble .label {
  color: var(--ink-mute);
  letter-spacing: 0.18em;
}

/* ============================================================
   BUTTONS — pill glass + a candy-pink primary
   ============================================================ */
body.theme-bubble .btn {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  border-color: var(--glass-stroke);
  border-radius: 999px;
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: transform 240ms cubic-bezier(.2,.9,.3,1.2), box-shadow 240ms ease, color 200ms ease, background 200ms ease;
}
body.theme-bubble .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), var(--gloss); color: var(--accent-deep); }
body.theme-bubble .btn-ghost {
  background: rgba(255,255,255,0.32);
  border-color: var(--rule);
  color: var(--ink-soft);
  box-shadow: none;
  border-radius: 999px;
}
body.theme-bubble .btn-ghost:hover { background: var(--glass-fill); color: var(--ink); border-color: var(--accent-soft); transform: translateY(-1px); }
body.theme-bubble .btn-accent {
  background: linear-gradient(140deg, #f48bbb 0%, #ec6ba2 55%, #e0568f 100%);
  color: #fff;
  border-color: transparent;
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px color-mix(in oklab, var(--accent) 45%, transparent), var(--gloss);
}
body.theme-bubble .btn-accent:hover {
  filter: brightness(1.03) saturate(1.04);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px color-mix(in oklab, var(--accent) 52%, transparent), var(--gloss);
}
body.theme-bubble .btn-icon {
  border-color: var(--glass-stroke);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink-soft);
  border-radius: 50%;
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: transform 220ms cubic-bezier(.2,.9,.3,1.2), color 200ms ease, box-shadow 200ms ease;
}
body.theme-bubble .btn-icon:hover { color: var(--accent-deep); transform: translateY(-2px); box-shadow: var(--shadow-card), var(--gloss); }
body.theme-bubble .btn-link { color: var(--ink-mute); }
body.theme-bubble .btn-link:hover { color: var(--accent-deep); }
body.theme-bubble .btn-link.danger { color: #e02040; }
body.theme-bubble .btn-link.danger:hover { color: #b8132e; }

/* ============================================================
   INPUTS — soft frosted wells, pink focus glow
   ============================================================ */
body.theme-bubble input,
body.theme-bubble textarea,
body.theme-bubble select { color: var(--ink); background: transparent; outline: none; }
/* Notebook source picker: override the generic select{background:transparent} reset.
   dir-foot-btn in bubble uses var(--pg-well) = rgba(255,255,255,0.62); match it. */
body.theme-bubble .notebook-source__picker { background: var(--pg-well); }
body.theme-bubble .notebook-source__picker:hover { border-color: var(--accent-soft); }
/* T28: notebook source meta chips adopt the candy tag style */
body.theme-bubble .notebook-source__chip {
  background: var(--accent-wash);
  border-color: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: var(--gloss);
}
body.theme-bubble input::placeholder,
body.theme-bubble textarea::placeholder { color: var(--ink-faint); font-style: italic; }
body.theme-bubble .field-input {
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--rule);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
body.theme-bubble .field-input:focus-within {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-wash);
}
body.theme-bubble .quickstat-value-input {
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--rule);
  border-radius: var(--radius-field);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
body.theme-bubble .quickstat-value-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}
body.theme-bubble textarea.prose-input {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--rule);
  color: var(--ink-soft);
}
body.theme-bubble textarea.prose-input:focus { border-color: var(--accent); background: #fff; color: var(--ink); box-shadow: 0 0 0 4px var(--accent-wash); }

/* ============================================================
   TOP BAR — frosted glass shelf
   ============================================================ */
body.theme-bubble .app-topbar {
  border-bottom-color: transparent;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -16px rgba(150,120,190,0.4);
}
body.theme-bubble .wordmark-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
body.theme-bubble .wordmark-script { font-family: var(--font-display); color: var(--accent-deep); }
body.theme-bubble .wordmark-sep { color: var(--ink-faint); }
body.theme-bubble .wordmark-subtitle { color: var(--ink-mute); }
/* the date — a 2-line phone lock-screen stack (weekday large, month+day below).
   DateBlock (primitives.js) emits .topbar-date-day / .topbar-date-sub. */
body.theme-bubble .topbar-date {
  color: var(--ink);
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0 2px;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.08;
}
body.theme-bubble .topbar-date-sub::before { content: none; }  /* no inline comma when stacked */
body.theme-bubble .topbar-date-day {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}
body.theme-bubble .topbar-date-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
  text-transform: none;
  margin-top: 1px;
}
/* the live widget slot — Bubble's NOW-PLAYING MUSIC BUBBLE (THEME-SPEC §8 / brief
   Option A). bubble-widget.js repaints the inside of .topbar-weather; these rules
   skin the glass-bubble shell + the album chip, track meta, and bouncing eq. */
body.theme-bubble .topbar-weather {
  color: var(--ink-soft);
  gap: 9px;
  width: 234px;
  box-sizing: border-box;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.56));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: transform 220ms cubic-bezier(.2,.9,.3,1.3), box-shadow 220ms ease;
}
body.theme-bubble a.topbar-weather.topbar-music { cursor: pointer; }
body.theme-bubble .topbar-weather:hover { transform: translateY(-1px); box-shadow: var(--shadow-card), var(--gloss); }
body.theme-bubble .topbar-weather i { color: var(--accent);}
.topbar-weather i {font-size:18px;}
body.theme-bubble .topbar-weather-temp { color: var(--ink-faint); }

/* now-playing internals (theme-owned widget markup) — iTunes mini-player register */
body.theme-bubble .np-art {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bub-grad); color: rgba(54,48,78,0.55); font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 6px -2px rgba(150,120,190,0.45);
}
body.theme-bubble .np-meta {
  display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-width: 0; line-height: 1.2;
  transition: opacity 240ms ease, transform 240ms ease;
}
body.theme-bubble .topbar-weather.is-swapping .np-meta { opacity: 0; transform: translateY(3px); }
body.theme-bubble .np-title {
  font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: -0.01em;
  color: var(--ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.theme-bubble .np-artist {
  font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.01em; text-transform: none;
  color: var(--ink-mute); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.theme-bubble .np-eq {
  flex: 0 0 auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: 2px;
}
body.theme-bubble .np-eq i {
  width: 2.5px; border-radius: 2px; background: linear-gradient(var(--accent), #b9a6e8);
  animation: bubEq 900ms ease-in-out infinite;
}
body.theme-bubble .np-eq i:nth-child(1) { height: 50%; animation-delay: -200ms; }
body.theme-bubble .np-eq i:nth-child(2) { height: 100%; animation-delay: -500ms; }
body.theme-bubble .np-eq i:nth-child(3) { height: 65%;  animation-delay: -100ms; }
body.theme-bubble .np-eq i:nth-child(4) { height: 85%;  animation-delay: -350ms; }
@keyframes bubEq { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* weather + moon: compact auto-width pill (not the 234px music slab) */
body.theme-bubble .topbar-weather:not(.topbar-music) {
  width: auto;
  padding: 6px 13px 6px 10px;
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: 9px;
  row-gap: 1px;
  align-items: center;
}
body.theme-bubble .topbar-weather:not(.topbar-music) > :first-child {
  grid-column: 1; grid-row: 1 / 3; align-self: center;
}
body.theme-bubble .topbar-weather:not(.topbar-music) .topbar-weather-label {
  grid-column: 2; grid-row: 1; line-height: 1.2;
}
body.theme-bubble .topbar-weather:not(.topbar-music) .topbar-weather-temp {
  grid-column: 2; grid-row: 2; margin-left: 0; line-height: 1.2;
}

/* moon phase: neutral grey matching the discord/bell/hamburger controls */
body.theme-bubble .topbar-moon {
  --accent: var(--ink-soft);
  --accent-deep: var(--ink-mute);
}
/* give the wrapped phase name ~10px breathing room from the widget's right edge
   (beats the .topbar-weather:not(.topbar-music) grid padding shorthand) */
body.theme-bubble .topbar-moon.topbar-weather:not(.topbar-music) {
  padding-right: 23px;
}
body.theme-bubble .topbar-moon .topbar-weather-label { color: var(--ink-soft); }
/* v1.45 — moon name on up to 2 lines, vertically centered beside the glyph.
   The moon has no temp row, so let the label span both grid rows and center. */
body.theme-bubble .topbar-moon .topbar-moon-label {
  grid-row: 1 / 3;
  align-self: center;
  white-space: normal;
  line-height: 1.12;
}
body.theme-bubble .topbar-moon .topbar-moon-label.is-single-word {
  white-space: nowrap;
}

/* top-right controls — matching fully-round glass bubbles */
/* Scope: bell, messages button (topbar-nav-icon in right cluster), hamburger only.
   Feature-nav icons in .topbar-nav are neutralized below. */
body.theme-bubble .topbar-bell,
body.theme-bubble .topbar-right .topbar-nav-icon,
body.theme-bubble .topbar-hamburger {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  color: var(--ink-soft);
  text-decoration: none;
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: transform 200ms cubic-bezier(.2,.9,.3,1.3), color 180ms ease, box-shadow 180ms ease;
}
body.theme-bubble .topbar-bell:hover,
body.theme-bubble .topbar-right .topbar-nav-icon:hover,
body.theme-bubble .topbar-hamburger:hover { color: var(--accent-deep); transform: translateY(-2px); box-shadow: var(--shadow-card), var(--gloss); }
body.theme-bubble .topbar-right .topbar-nav-icon.is-active { color: var(--accent); border-color: var(--accent); }
/* Feature nav (.topbar-nav): flat icon+label, no glass fill, no circle/pill */
body.theme-bubble .topbar-nav .topbar-nav-icon {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  padding: 7px 10px;
  gap: 7px;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--ink-soft);
}
body.theme-bubble .topbar-nav .topbar-nav-icon:hover {
  color: var(--accent-deep);
  transform: none;
  box-shadow: none;
  background: transparent;
}
@media (max-width: 1180px) {
  /* labels hidden — tighten to icon-only sizing */
  body.theme-bubble .topbar-nav .topbar-nav-icon {
    padding: 7px 10px; gap: 0;
  }
  /* v1.45 — collapsed weather/moon become round glass bubbles the SAME 40px
     as the bell/hamburger, showing only their symbol (weather icon / moon glyph). */
  body.theme-bubble .topbar-weather:not(.topbar-music) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 0;
    grid-template-columns: none;
  }
  body.theme-bubble .topbar-weather:not(.topbar-music) > :first-child {
    grid-row: auto;
  }
}
body.theme-bubble .topbar-icon-dot { background: var(--accent); box-shadow: 0 0 0 2px #fff; }

/* EditDock — frosted glass pill above the bottom bar */
body.theme-bubble .editdock {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-card), var(--gloss);
}
body.theme-bubble .editdock-notice { color: var(--ink-mute); }

/* ============================================================
   REGISTRY — glass roster cards with a candy gradient face
   + a liquid wave splitting image from body (signature move)
   ============================================================ */
body.theme-bubble .char-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-card), var(--gloss);
  transition: transform 320ms cubic-bezier(.2,.8,.3,1.1), box-shadow 320ms ease, border-color 320ms ease;
  animation: cardFadeIn 700ms cubic-bezier(.2,.7,.3,1) both;
}
body.theme-bubble .char-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card), 0 26px 50px -20px rgba(150,120,190,0.32), var(--gloss);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--glass-stroke));
}
body.theme-bubble .char-card-image {
  background-image: var(--bub-grad);
  background-size: cover;
  background-position: center;
  /* soft symmetric liquid wave at the bottom edge — lands just above the name */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 0 H100 V90 Q50 99 0 90 Z' fill='%23000'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 0 H100 V90 Q50 99 0 90 Z' fill='%23000'/></svg>") center / 100% 100% no-repeat;
}
body.theme-bubble .char-card-accent { display: none; }  /* drop the hard accent strip — glass + gradient carry the per-character color */
body.theme-bubble .char-card-image::after { box-shadow: none; }
body.theme-bubble .char-card-placeholder {
  font-style: italic;
  color: rgba(54,48,78,0.42);
  background: var(--char-soft-grad, var(--bub-grad-2));
}
body.theme-bubble .char-card-body { border-top-color: transparent; padding-top: 15px; }
body.theme-bubble .char-card-name { color: var(--ink); font-weight: 600; }
body.theme-bubble .char-card-hangul { color: var(--ink-mute); }
/* two compact quick-stats per card — no bounding box, just label + italic value */
body.theme-bubble .char-card-meta { gap: 5px; margin-top: 2px; }
body.theme-bubble .char-card-meta .row {
  align-items: baseline;
  gap: 10px;
  padding: 2px 1px;
  background: none;
  border: none;
  box-shadow: none;
  white-space: nowrap;
}
body.theme-bubble .char-card-meta .row > span:first-child {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  color: var(--ink-mute); font-size: 9.5px; letter-spacing: 0.14em;
}
body.theme-bubble .char-card-meta .row > span:last-child {
  color: var(--ink) !important; font-family: var(--font-body); font-style: normal;
  font-size: 13px !important; letter-spacing: 0 !important; text-align: right;
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.theme-bubble .char-card-status {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--accent-deep);
  border-color: var(--glass-stroke);
  border-radius: 999px;
  box-shadow: var(--shadow-soft), var(--gloss);
}
body.theme-bubble .char-card-tone {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
body.theme-bubble .char-card-tone-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 55%, transparent);
}
/* Approval status badge dot overrides (C-Approval Task 6) */
body.theme-bubble .char-card-tone--approved {
  color: var(--ok);
}
body.theme-bubble .char-card-tone--approved .char-card-tone-dot {
  background: var(--ok);
  box-shadow: 0 0 6px color-mix(in oklab, var(--ok) 50%, transparent);
}
body.theme-bubble .char-card-tone--pending {
  color: var(--ink-mute);
}
body.theme-bubble .char-card-tone--pending .char-card-tone-dot {
  background: var(--ink-mute);
  box-shadow: none;
}
body.theme-bubble .card-action {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
  transition: color 180ms ease, transform 180ms ease, background 180ms ease;
}
body.theme-bubble .card-action:hover { color: var(--accent-deep); transform: translateY(-1px); }
body.theme-bubble .card-action.danger:hover { color: var(--danger); }
body.theme-bubble .link-copied {
  color: var(--accent-deep);
  background: var(--glass-fill);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--glass-stroke));
}
body.theme-bubble .char-card-new {
  background: rgba(255,255,255,0.32);
  border-color: var(--rule);
  border-style: dashed;
  border-radius: var(--radius-modal);
  transition: all 280ms ease;
}
body.theme-bubble .char-card-new:hover { border-color: var(--accent-soft); background: var(--glass-fill); transform: translateY(-4px); }
body.theme-bubble .char-card-new .plus { color: var(--accent); }
body.theme-bubble .char-card-new .label { color: var(--ink-mute); }
body.theme-bubble .char-card-new .quiet { font-family: var(--font-display); font-style: italic; color: var(--ink-faint); }

/* registry filter dock */
body.theme-bubble .rf-select-trigger .rf-key { color: var(--ink-faint); }
body.theme-bubble .rf-select-trigger .rf-val { color: var(--ink); }
body.theme-bubble .rf-select-trigger.dirty .rf-val { color: var(--accent-deep); }
body.theme-bubble .rf-select-trigger:hover .rf-val { color: var(--accent-deep); }
body.theme-bubble .rf-caret { color: var(--ink-faint); }
body.theme-bubble .rfd-dock {
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--glass-stroke);
  box-shadow: 0 -8px 30px -18px rgba(150,120,190,0.5);
}
body.theme-bubble .rf-menu {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  border-radius: 18px;
  box-shadow: var(--shadow-card), var(--gloss);
}
body.theme-bubble .rf-menu-item { color: var(--ink-soft); border-radius: 12px; }
body.theme-bubble .rf-menu-item:hover { background: var(--accent-wash); color: var(--accent-deep); }
body.theme-bubble .rf-menu-item.on { color: var(--accent-deep); }
body.theme-bubble .rfd-sheet-trigger {
  background: var(--glass-fill);
  border-color: var(--glass-stroke);
  border-radius: 999px;
  color: var(--ink);
}

body.theme-bubble .registry-empty-message,
body.theme-bubble .empty-state p { color: var(--ink-mute); }
body.theme-bubble .empty-state h2 { color: var(--ink); }

/* ============================================================
   PROFILE SIDEBAR — pillowy portrait with an iridescent rim
   ============================================================ */
body.theme-bubble .portrait-frame {
  background: var(--bub-rim);
  border: none;
  padding: 4px;
  box-shadow: var(--shadow-card), var(--gloss);
}
body.theme-bubble .portrait-frame::after {
  /* overlay the PHOTO exactly (the frame has 4px padding/rim) so the gloss reaches
     the photo edges and reads as glass; base.css insets it 8px, which left a gap. */
  inset: 4px;
  box-shadow: inset 0 2px 10px rgba(255,255,255,0.7), inset 0 -20px 40px -20px rgba(150,120,190,0.25);
  border-radius: calc(var(--radius-image) - 4px);
}
body.theme-bubble .portrait-placeholder {
  background: var(--portrait-soft-grad, var(--bub-grad-2)) !important;
  color: rgba(54,48,78,0.5);
  border-radius: calc(var(--radius-image) - 4px);
}
body.theme-bubble .portrait-image { filter: none; border-radius: calc(var(--radius-image) - 4px); }
body.theme-bubble .portrait-image-input { background: rgba(255,255,255,0.9); border-color: var(--glass-stroke); }
body.theme-bubble .portrait-tape { display: none; }

body.theme-bubble .sidebar-name { color: var(--ink); }
body.theme-bubble .sidebar-name .it { font-style: normal; }
body.theme-bubble .sidebar-alt-script { font-family: var(--font-korean); color: var(--ink-mute); }
body.theme-bubble .sidebar-quote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-deep); font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0;
}
body.theme-bubble .sidebar-quote::before { color: var(--accent-soft); opacity: 1; }

body.theme-bubble .quickstats { border-top-color: var(--rule); }
body.theme-bubble .quickstat { border-bottom-color: var(--rule-soft); }
body.theme-bubble .quickstat .k { color: var(--ink-mute); }  /* darker for legible field labels on the glass */
body.theme-bubble .quickstat .v { color: var(--ink-soft); font-weight: 500; font-family: var(--font-body); font-style: normal; font-size: 13px; }

/* tonal-theme chooser */
body.theme-bubble .theme-picker { border-top-color: var(--rule); }
body.theme-bubble .swatch {
  border: 1.5px solid #fff;            /* crisp white ring \u2014 was a translucent wash that greyed the chips (#20) */
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(150,120,190,0.25), 0 0 0 1px rgba(120,104,170,0.08);
  transition: transform 200ms cubic-bezier(.2,.9,.3,1.3), box-shadow 200ms ease;
}
body.theme-bubble .swatch:hover { transform: scale(1.12); box-shadow: var(--shadow-card); }
body.theme-bubble .swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent), var(--shadow-soft);
}
body.theme-bubble .swatch-label { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }
body.theme-bubble .gallery-thumb {
  background: #efe9f6;
  border: none;
  border-radius: var(--radius-image);
  overflow: hidden;
  padding: 0;  /* #2: drop the 4px inset so the image fills + clips to the rounded corner (no square poke) */
  box-shadow: 0 2px 8px -3px rgba(150,120,190,0.28);
}
body.theme-bubble .gallery-thumb.empty { color: rgba(54,48,78,0.4); background: var(--bub-grad-2); }
body.theme-bubble .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; }
body.theme-bubble .gallery-input { background: rgba(255,255,255,0.6); border-color: var(--rule); }

/* ============================================================
   PROFILE MAIN — header stack, section titles, field cards
   ============================================================ */
body.theme-bubble .pf-headerstack { background: transparent; }
body.theme-bubble .section-title { color: var(--ink); padding-right: 0.05em; font-weight: 600; }  /* minimal clearance for italic Fraunces overshoot; weight 600 matches fc-sub-head h2 heading treatment */
body.theme-bubble .section-title .it { font-style: normal; }
body.theme-bubble .section-title-en { font-family: var(--font-display); font-size: 18px; font-style: italic; color: var(--ink-mute); font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; }
body.theme-bubble .section-title-block { border-bottom-color: var(--rule); gap: 4px; }

body.theme-bubble .field-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: transform 220ms cubic-bezier(.2,.8,.3,1.1), box-shadow 220ms ease, border-color 220ms ease;
}
body.theme-bubble .field-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), var(--gloss);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--glass-stroke));
}
body.theme-bubble .field-card-label { color: var(--accent-deep); letter-spacing: 0.16em; }
body.theme-bubble .field-card-label .icon { color: var(--accent); }
body.theme-bubble .field-card-value { color: var(--ink); }
body.theme-bubble .field-card-value.empty { color: var(--ink-faint); }

/* section divider — keep the soft gradient rule, drop the squiggly wave SVG (per request) */
body.theme-bubble .section-divider { color: var(--accent); opacity: 1; }
body.theme-bubble .section-divider svg { display: none; }
body.theme-bubble .section-divider .line {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent-soft) 20%, #cdd0f3 50%, var(--accent-soft) 80%, transparent);
  border-radius: 2px;
}

/* depth blocks */
body.theme-bubble .depth-head-num { color: var(--accent-deep); }
body.theme-bubble .depth-head-num .waves span { background: var(--accent); opacity: 0.28; }
body.theme-bubble .depth-head-num .waves span.fill { opacity: 1; }
body.theme-bubble .depth-head-title { color: var(--ink); }
body.theme-bubble .depth-head-title .it { font-style: italic; }
body.theme-bubble .depth-head-desc { font-style: italic; color: var(--ink-mute); font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; }
body.theme-bubble .depth-body { color: var(--ink-soft); }
body.theme-bubble .depth-body.empty { font-style: italic; color: var(--ink-faint); border-left-color: var(--accent-soft); }

/* personality / traits */
body.theme-bubble .traits-block {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  border-top: none;
  box-shadow: var(--shadow-card), var(--gloss);
  position: relative;
  overflow: hidden;
}
/* (the candy top ribbon was removed per request — no strong border on top) */
body.theme-bubble .traits-block::before { display: none; }
body.theme-bubble .traits-title { font-family: var(--font-display); font-style: normal; color: var(--ink); }

/* slider fills (inline gradient on element → override with the candy bar) */
/* trait bars (#5): ONE candy gradient. The filled portion is vivid; the rest of
   the track is the same gradient gone translucent (unfilled). No border/ridge. */
body.theme-bubble .ship-slider-track {
  background: linear-gradient(90deg, rgba(174,184,240,0.4) 0%, rgba(212,185,236,0.4) 45%, rgba(246,166,200,0.4) 100%);
  height: 8px; border-radius: 999px; border: none;
}
body.theme-bubble .ship-slider-fill {
  background: var(--bub-bar) !important;
  border-radius: 999px;
  box-shadow: none;
}
body.theme-bubble .ship-slider-tick { background: #fff; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 55%, #fff), var(--shadow-soft); width: 12px; height: 12px; }
body.theme-bubble .ship-slider-pct { font-family: var(--font-display); font-weight: 600; font-style: normal; font-size: 16.5px; color: var(--ink); }
body.theme-bubble .ship-slider-label { color: var(--ink-soft); font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0;}

/* connections */
body.theme-bubble .connection-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
body.theme-bubble .connection-card:hover { transform: translateY(-2px); }
body.theme-bubble .connection-card.open {
  border-color: color-mix(in oklab, var(--accent) 38%, var(--glass-stroke));
  box-shadow: var(--shadow-card), var(--gloss);
}
body.theme-bubble .connection-summary:focus-visible { background: var(--accent-wash); }
body.theme-bubble .connection-portrait {
  background: var(--paper);
  border: 2px solid var(--rule);
  box-shadow: var(--shadow-soft);
}
body.theme-bubble .connection-portrait-fallback { color: var(--ink-mute); }
body.theme-bubble .connection-name { font-family: var(--font-display); font-style: normal; color: var(--ink); }
body.theme-bubble .connection-descriptor { font-family: var(--font-display); font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; font-style: italic; color: var(--ink-mute); }
body.theme-bubble .connection-chevron { color: var(--ink-faint); }
body.theme-bubble .connection-card.open .connection-chevron { color: var(--accent-deep); }
body.theme-bubble .connection-card.open .connection-drawer-inner { border-top-color: var(--rule); }
body.theme-bubble .connection-notes { color: var(--ink-soft); }
body.theme-bubble .connection-notes.empty { font-style: italic; color: var(--ink-faint); }
body.theme-bubble .connection-edit-label { color: var(--ink-mute); }
/* wanted-ad pill row: category + TW pills beneath the tagline in view mode */
body.theme-bubble .wanted-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
body.theme-bubble .connection-name-input,
body.theme-bubble .connection-descriptor-input { font-style: italic; background: transparent; border-bottom-color: var(--rule); }
body.theme-bubble .connection-name-input { color: var(--ink); }
body.theme-bubble .connection-descriptor-input { color: var(--ink-mute); }
body.theme-bubble .connection-name-input:focus,
body.theme-bubble .connection-descriptor-input:focus { outline: none; border-bottom-color: var(--accent); }
body.theme-bubble .connection-url-input { background: rgba(255,255,255,0.6); border-color: var(--rule); color: var(--ink); }
body.theme-bubble .connection-url-input:focus { outline: none; border-color: var(--accent); background: #fff; }

/* edit-mode small controls */
body.theme-bubble .remove-btn { background: transparent; border-color: var(--rule); color: var(--ink-faint); border-radius: 999px; transition: all 180ms ease; }
body.theme-bubble .remove-btn:hover { color: var(--danger); border-color: var(--danger); }
body.theme-bubble .reorder-btn { background: transparent; border-color: var(--rule); color: var(--ink-faint); border-radius: 999px; }
body.theme-bubble .reorder-btn:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-wash); }
body.theme-bubble .add-btn {
  font-style: italic;
  color: var(--accent-deep);
  background: var(--accent-wash);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 999px;
  transition: all 200ms ease;
}
body.theme-bubble .add-btn:hover { background: var(--accent-soft); transform: translateY(-1px); }

/* profile header-stack action buttons + pills */
body.theme-bubble .pf-iconbtn { color: var(--ink-mute); border-radius: 50%; }
body.theme-bubble .pf-iconbtn:hover { color: var(--accent-deep); background: var(--accent-wash); }
body.theme-bubble .pf-iconbtn.is-done { color: var(--accent-deep); background: var(--accent-soft); }
body.theme-bubble .pf-secondary { border-top-color: var(--rule); background: transparent; }
body.theme-bubble .pf-act { border-color: var(--rule); color: var(--ink-soft); border-radius: 999px; background: var(--glass-fill); }
body.theme-bubble .pf-act:hover { border-color: var(--accent-soft); color: var(--accent-deep); }
/* Save = filled candy gradient, matching Bubble's admin theme button (.btn-accent). */
body.theme-bubble .pf-act-primary { background: linear-gradient(140deg, #f48bbb 0%, #ec6ba2 55%, #e0568f 100%); color: #fff; border-color: transparent; }
body.theme-bubble .pf-act-primary:hover { filter: brightness(1.03) saturate(1.04); color: #fff; border-color: transparent; }
body.theme-bubble .pf-act-approve { color: var(--ok, #1f9e6e); border-color: color-mix(in oklab, var(--ok, #1f9e6e) 45%, var(--rule)); border-radius: 999px; }
body.theme-bubble .pf-act-approve:hover { color: #fff; background: var(--ok, #1f9e6e); border-color: var(--ok, #1f9e6e); }
body.theme-bubble .pf-denial-banner { border-radius: var(--radius-card, 10px) var(--radius-card, 10px) 0 0; }
body.theme-bubble .pf-pill {
  border-radius: 999px;
  padding: 8px 14px;
}
body.theme-bubble .pf-pill-dirty {
  color: #e02040;
  background: color-mix(in oklab, #e02040 12%, transparent);
  border-color: color-mix(in oklab, #e02040 35%, transparent);
}
body.theme-bubble .pf-pill-saved {
  color: var(--ok, #1f9e6e);
  background: color-mix(in oklab, var(--ok, #1f9e6e) 12%, transparent);
  border-color: color-mix(in oklab, var(--ok, #1f9e6e) 35%, transparent);
}
body.theme-bubble .tab-action-btn:hover { border-color: var(--rule); background: var(--accent-wash); color: var(--accent-deep); }

/* ============================================================
   TAB BAR
   ============================================================ */
body.theme-bubble .tab-bar { border-bottom-color: var(--rule); background: transparent; }
body.theme-bubble .tab { background: none; color: var(--ink-faint); transition: color 220ms ease; }
body.theme-bubble .tab:hover { color: var(--ink-soft); }
body.theme-bubble .tab.active { color: var(--ink); }
body.theme-bubble .tab.active::after { background: var(--bub-bar); height: 3px; border-radius: 999px; }
/* Profile TW compact pill — pushed to far right of the tab row */
body.theme-bubble .tab-bar__tw { margin-left: auto; }

/* ============================================================
   NETWORK TAB
   ============================================================ */
body.theme-bubble .network-center-frame,
body.theme-bubble .network-node-frame {
  background: var(--bub-rim);
  border: 2px solid transparent;
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: box-shadow 220ms ease, transform 220ms ease;
}
body.theme-bubble .network-center-frame { box-shadow: 0 0 0 4px #fff, var(--shadow-card); }
body.theme-bubble .network-node-frame { box-shadow: 0 0 0 3px #fff, var(--shadow-soft); }
body.theme-bubble .network-node-link:hover .network-node-frame { transform: translateY(-3px); box-shadow: var(--shadow-card); }
body.theme-bubble .network-node-frame img,
body.theme-bubble .network-center-frame img { filter: none; }
body.theme-bubble .network-photo-placeholder { font-style: italic; color: var(--ink-mute); background: var(--bub-grad-2); }
body.theme-bubble .network-center-label,
body.theme-bubble .network-node-name { font-family: var(--font-display); font-style: italic; color: var(--ink); }
body.theme-bubble .network-node-name .muted { color: var(--ink-faint); }
body.theme-bubble .network-line-icon {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: currentColor;
  box-shadow: 0 2px 8px rgba(150,120,190,0.18), 0 0 0 3px #fff;
}
body.theme-bubble .network-node-name-input { background: transparent; border-bottom-color: var(--rule); font-style: italic; }
body.theme-bubble .legend-chip { color: var(--ink-soft); }
body.theme-bubble .network-legend-full summary { color: var(--ink-faint); }
body.theme-bubble .network-legend-full summary:hover { color: var(--accent-deep); }
body.theme-bubble .legend-block-head { border-bottom-color: var(--rule); }
body.theme-bubble .legend-block-name { color: var(--ink-soft); }

/* ---- Family Tree appearance (light) ---- */
body.theme-bubble .family-tree-connector { background: var(--rule); }
body.theme-bubble .family-tree-node-label { color: var(--ink-mute); }
body.theme-bubble .family-tree-row-empty { color: var(--ink-faint); font-family: var(--font-display); }
body.theme-bubble .family-tree-cap-notice { color: var(--ink-mute); }
body.theme-bubble .family-tree-node-card--link:hover .network-node-frame,
body.theme-bubble .family-tree-node-card--edit:hover .network-node-frame {
  box-shadow: var(--shadow-card), var(--gloss);
}

/* ============================================================
   SHIPPING TAB
   ============================================================ */
body.theme-bubble .ship-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  border-top: none;
  box-shadow: var(--shadow-card), var(--gloss);
  position: relative;
  overflow: hidden;
}
body.theme-bubble .ship-card::before {
  display: none;  /* #(shipping): remove the candy ribbon at the top of the block */
}
body.theme-bubble .ship-portrait-frame { background: var(--bub-rim); border: 2px solid transparent; box-shadow: 0 0 0 4px #fff, var(--shadow-soft); }
body.theme-bubble .ship-photo-placeholder { font-style: italic; color: var(--ink-mute); background: var(--bub-grad-2); }
body.theme-bubble .ship-portrait-name { font-family: var(--font-display); font-style: normal; color: var(--ink); }
body.theme-bubble .ship-partner-link { color: inherit; border-bottom-color: var(--accent); }
body.theme-bubble .ship-partner-link:hover { color: var(--accent-deep); }
body.theme-bubble .ship-rel-display { filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--accent) 30%, transparent)); }
body.theme-bubble .ship-status { font-style: italic; color: var(--ink-soft); }
body.theme-bubble .ship-quote { font-family: var(--font-display); font-style: italic; color: var(--accent-deep); }
body.theme-bubble .ship-status-input { font-style: italic; background: transparent; border-bottom-color: var(--rule); }
body.theme-bubble .ship-rel-btn { background: transparent; border-color: transparent; color: var(--ink-mute); border-radius: 999px; transition: all 180ms ease; }
body.theme-bubble .ship-rel-btn:hover { color: var(--ink); background: var(--accent-wash); }
body.theme-bubble .ship-rel-btn.active { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-deep); }
body.theme-bubble .ship-slider-pct-input { background: rgba(255,255,255,0.6); border-color: var(--rule); color: var(--accent-deep); }
body.theme-bubble .ship-slider-label-input { font-style: italic; background: transparent; border-bottom-color: var(--rule); color: var(--ink); }
body.theme-bubble .ship-slider-label-input:focus { border-bottom-color: var(--accent); }
body.theme-bubble .ship-card-foot { border-top-color: var(--rule); }
body.theme-bubble .quickstat-sub { border-bottom-color: var(--rule-soft); }
body.theme-bubble .quickstat-sub input { background: transparent; border-bottom-color: var(--rule); font-style: italic; color: var(--ink-soft); }

/* ============================================================
   PLOTTING / TIMELINE
   ============================================================ */
body.theme-bubble .plot-subtitle { font-family: var(--font-display); color: var(--ink); }
body.theme-bubble .plot-subtitle .it { font-style: normal; }
body.theme-bubble .plot-subnote { color: var(--ink-mute); font-size: 14px; }
body.theme-bubble .timeline-entry.drag-over { background: var(--accent-wash); }
body.theme-bubble .timeline-dot { background: var(--accent); box-shadow: 0 0 0 4px #fff, 0 2px 6px color-mix(in oklab, var(--accent) 40%, transparent); }
body.theme-bubble .timeline-line { background: linear-gradient(to bottom, var(--accent-soft), color-mix(in oklab, var(--accent) 12%, #ece7f6)); }
body.theme-bubble .timeline-date { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 8px; }
body.theme-bubble .timeline-title {
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--glass-stroke); border-bottom: none;
  border-radius: 18px 18px 0 0; margin: 0; padding: 13px 18px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
body.theme-bubble .timeline-desc {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--glass-stroke); border-top: none;
  border-radius: 0 0 18px 18px; margin: 0; padding: 2px 18px 14px;
  color: var(--ink-soft); max-width: none;
  box-shadow: var(--shadow-soft);
}
/* match the standalone site timeline (tlx) exactly: date eyebrow above, then
   title + description in a soft white bubble. No wrapper bubble on .timeline-body. */
body.theme-bubble .timeline-body { background: none; border: none; box-shadow: none; padding: 0; }
body.theme-bubble .timeline-meta { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
body.theme-bubble .timeline-meta .warn-callout { margin-left: auto; align-self: flex-end; margin-top: 4px; }
body.theme-bubble .timeline-date-input,
body.theme-bubble .timeline-title-input { background: rgba(255,255,255,0.6); border-color: var(--rule); }

/* loose ideas */
body.theme-bubble .idea-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
body.theme-bubble .idea-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 35%, var(--glass-stroke)); box-shadow: var(--shadow-card), var(--gloss); }
body.theme-bubble .idea-card-text { color: var(--ink-soft); }
body.theme-bubble .idea-tag {
  color: var(--accent-deep);
  background: var(--accent-wash);
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
  border-radius: 999px;
}
body.theme-bubble .idea-tag-remove { background: none; color: color-mix(in oklab, var(--accent-deep) 55%, var(--ink-mute)); }
body.theme-bubble .idea-tag-remove:hover { color: var(--danger); }
body.theme-bubble .idea-tag-input { color: var(--ink-soft); background: transparent; border-color: var(--rule); border-radius: 999px; }
body.theme-bubble .idea-tag-input::placeholder { color: var(--ink-faint); font-style: normal; }

/* ============================================================
   DEVELOPMENT TAB — dev blocks + phone-native artifacts
   ============================================================ */
body.theme-bubble .dev-block {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
/* Guidebook + Faceclaims ONLY: flat dev blocks — no card bg/border/shadow.
   Scoped to those two page wrappers so the Character-profile Development blocks
   keep their card chrome. */
body.theme-bubble .gbx-layout .dev-block,
body.theme-bubble .fc-process-blocks .dev-block {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
}
body.theme-bubble .dev-ctrl { background: rgba(255,255,255,0.7); border-color: var(--rule); color: var(--ink-mute); border-radius: 999px; transition: all 160ms ease; }
body.theme-bubble .dev-ctrl:hover:not(:disabled) { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-wash); }
body.theme-bubble .dev-block-heading { font-family: var(--font-display); font-style: normal; color: var(--ink); }
/* Guidebook + Faceclaims ONLY: dev-block headings adopt the .fc-sub-head look —
   display-font 22px (not the uppercase micro-label) + trailing gradient rule.
   Scoped to the two page wrappers so Character-profile Development is untouched. */
body.theme-bubble .gbx-layout .text-block .dev-block-heading,
body.theme-bubble .fc-process-blocks .text-block .dev-block-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
body.theme-bubble .gbx-layout .text-block .dev-block-heading::after,
body.theme-bubble .fc-process-blocks .text-block .dev-block-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--accent-soft), transparent);
}
body.theme-bubble .text-block-heading-input { background: transparent; border-bottom-color: var(--rule); }
body.theme-bubble .text-block-heading-input:focus { outline: none; border-bottom-color: var(--accent); }
body.theme-bubble .dev-add-picker { background: rgba(255,255,255,0.7); border-color: var(--rule); border-radius: 18px; }
body.theme-bubble .dev-add-option { background: var(--glass-fill); border-color: var(--glass-stroke); border-radius: 14px; transition: all 160ms ease; }
body.theme-bubble .dev-add-option:hover { border-color: var(--accent-soft); background: #fff; transform: translateY(-2px); }
body.theme-bubble .dev-add-option-label { font-family: var(--font-display); font-style: italic; color: var(--ink); }
body.theme-bubble .dev-add-option-hint { color: var(--ink-mute); }

/* shared placeholder fills — candy gradient wells */
body.theme-bubble .placeholder-fill { background: var(--bub-grad-2) !important; color: rgba(54,48,78,0.5); }
body.theme-bubble .images-slot-placeholder,
body.theme-bubble .banner-placeholder { background: var(--bub-grad-2); color: rgba(54,48,78,0.5); }
body.theme-bubble .field-hint { color: var(--ink-mute); }

/* instagram grid */
body.theme-bubble .ig-cell { background: var(--bub-grad-2); box-shadow: var(--shadow-soft), var(--gloss); transition: transform 200ms ease, box-shadow 200ms ease; }
body.theme-bubble .ig-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
body.theme-bubble .ig-cell-empty { background: var(--bub-grad-2); }

/* tinder card */
body.theme-bubble .tinder-block { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-stroke); box-shadow: 0 2px 6px rgba(120,104,170,0.035), 0 20px 46px rgba(150,120,190,0.075), var(--gloss); }
body.theme-bubble .tinder-photo-empty { background: var(--bub-grad-2); }
body.theme-bubble .tinder-pill { background: var(--accent-wash); color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 28%, transparent); border-radius: 999px; }

/* tracker */
body.theme-bubble .tracker-entry {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  border-left: none;
  box-shadow: var(--shadow-soft), var(--gloss);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
body.theme-bubble .tracker-entry:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), var(--gloss); }
body.theme-bubble .tracker-thumb { border: none; background: var(--bub-grad-2); box-shadow: var(--gloss); }
body.theme-bubble .tracker-thumb-placeholder { color: rgba(54,48,78,0.45); }
body.theme-bubble .tracker-entry-link { color: var(--accent-deep); opacity: 0.8; }

/* Tracker icon: adopt search-row frosted candy disc style (srr-avatar-icon).
   Size (92px from .tracker-thumb parent) is preserved; only fill/colour aligned. */
body.theme-bubble .tracker-thumb-icon {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--glass-stroke));
  box-shadow: var(--gloss);
}
/* Per-type colour coding — mirrors search-row srr-avatar-icon per-type palette */
body.theme-bubble .tracker-thumb-icon[data-tracker-type="article"] { background: #fbe7ef; color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 26%, var(--glass-stroke)); }
body.theme-bubble .tracker-thumb-icon[data-tracker-type="call"]    { background: #e8ecfb; color: #5a6cc4; border-color: color-mix(in oklab,#5a6cc4 26%, var(--glass-stroke)); }
body.theme-bubble .tracker-thumb-icon[data-tracker-type="message"] { background: #f4e7f7; color: #9a55b0; border-color: color-mix(in oklab,#9a55b0 26%, var(--glass-stroke)); }
body.theme-bubble .tracker-thumb-icon[data-tracker-type="letter"]  { background: #fdeede; color: #c07a32; border-color: color-mix(in oklab,#c07a32 26%, var(--glass-stroke)); }
body.theme-bubble .tracker-thumb-icon[data-tracker-type="journal"] { background: var(--accent-wash); color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 26%, var(--glass-stroke)); }
/* Dark-mode per-type */
body.theme-bubble.dark-mode .tracker-thumb-icon[data-tracker-type="article"] { background: var(--accent-wash); color: var(--accent-deep); }
body.theme-bubble.dark-mode .tracker-thumb-icon[data-tracker-type="call"]    { background: rgba(90,108,196,0.22); color: #aab6f4; }
body.theme-bubble.dark-mode .tracker-thumb-icon[data-tracker-type="message"] { background: rgba(154,85,176,0.22); color: #e0a6f0; }
body.theme-bubble.dark-mode .tracker-thumb-icon[data-tracker-type="letter"]  { background: rgba(192,122,50,0.20); color: #f0c089; }
body.theme-bubble.dark-mode .tracker-thumb-icon[data-tracker-type="journal"] { background: var(--accent-wash); color: var(--accent-deep); }
body.theme-bubble .tracker-entry-link:hover { opacity: 1; }

/* Scene Tracker (W-St) */
body.theme-bubble .scene-tracker__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
body.theme-bubble .scene-tracker__chip { font-size: 10px; padding: 2px 6px; border-radius: 10px;
  background: var(--glass-fill); color: var(--ink-faint); }
body.theme-bubble .scene-tracker__empty { padding: 12px 0; font-style: italic; color: var(--ink-faint); }

body.theme-bubble .playlist-track { border-bottom-color: var(--rule-soft); }
body.theme-bubble .playlist-track-artist { font-family: var(--font-body); font-style: normal; font-variant: small-caps; text-align:right;}
body.theme-bubble .playlist-track-input { font-style: italic; background: transparent; border-bottom-color: var(--rule-soft); color: var(--ink); }
body.theme-bubble .playlist-track-input:focus { outline: none; border-bottom-color: var(--accent); }
body.theme-bubble .likes-add-input { background: transparent; border-bottom-color: var(--rule); font-style: italic; color: var(--ink); }
body.theme-bubble .likes-add-input:focus { outline: none; border-bottom-color: var(--accent); }

/* short-answer academic sub-block */
body.theme-bubble .short-answer-academic { border-top-color: var(--accent-soft); border-bottom-color: var(--rule-soft); }
body.theme-bubble .short-answer-academic::before { background: var(--accent); opacity: 0.85; }
body.theme-bubble .short-answer-subhead-rule { background: var(--rule); }
body.theme-bubble .short-answer-subhead-label { color: var(--accent-deep); }
body.theme-bubble .traits-flourish-rule { background: linear-gradient(to right, transparent, var(--rule) 40%, var(--accent-soft) 100%); }
body.theme-bubble .traits-flourish-mark { display: none; }
body.theme-bubble .traits-flourish-heart { display: flex; align-items: center; color: var(--accent); }

/* ============================================================
   FORUM — categories, thread rows, posts
   ============================================================ */
body.theme-bubble .cat-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-card), var(--gloss);
  transition: transform 280ms cubic-bezier(.2,.8,.3,1.1), box-shadow 280ms ease, border-color 280ms ease;
}
body.theme-bubble .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), 0 26px 50px -20px rgba(150,120,190,0.3); border-color: color-mix(in oklab, var(--accent) 35%, var(--glass-stroke)); }

/* category banner — replace the Island per-category tints with the candy ramp.
   Charcoal text on pastel (brief), a soft light scrim for legibility, and the
   signature wave foot dipping into the glass meta strip. Tone varies per card. */
body.theme-bubble .cat-banner { background: var(--bub-grad); }
body.theme-bubble .category-list .cat-card:nth-child(4n+2) .cat-banner { background: linear-gradient(135deg, #d7c8f1 0%, #f3c9e0 55%, #fde0d0 100%); }
body.theme-bubble .category-list .cat-card:nth-child(4n+3) .cat-banner { background: linear-gradient(135deg, #f6cfe1 0%, #f7cdd4 50%, #fde2cf 100%); }
body.theme-bubble .category-list .cat-card:nth-child(4n+4) .cat-banner { background: linear-gradient(135deg, #c3cdf6 0%, #d3d0f2 50%, #eccde6 100%); }
body.theme-bubble .cat-banner::before { background: radial-gradient(circle at 24% 26%, rgba(255,255,255,0.5) 0%, transparent 56%); }
/* repurpose the dark scrim as a soft white wave foot (gradient header -> meta strip) */
body.theme-bubble .cat-banner::after { display: none; }  /* #14: straight bottom edge (no curvature) */
body.theme-bubble .cat-banner-body { z-index: 2; }
body.theme-bubble .cat-banner-title { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,0.55); font-style: normal; font-size: 20px; }
body.theme-bubble .cat-eyebrow { color: var(--accent-deep); }
body.theme-bubble .cat-banner-desc { color: var(--ink-soft); text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
body.theme-bubble .cat-meta { background: transparent; }
body.theme-bubble .cat-meta-num { color: var(--ink-mute); }
body.theme-bubble .cat-meta-num .n { color: var(--accent-deep); }
body.theme-bubble .cat-meta-last-label { color: var(--ink-faint); }
body.theme-bubble .cat-meta-last-by { color: var(--ink); }
body.theme-bubble .cat-meta-last-when { color: var(--ink-faint); }

body.theme-bubble .thread-list { border-radius: var(--radius-card); overflow: hidden; }
body.theme-bubble .thread-row { transition: background 200ms ease, padding 200ms ease; }
body.theme-bubble .thread-row:hover { background: rgba(255,255,255,0.55); }
/* keep the hover teaser gradient BEHIND the row text */
body.theme-bubble .thread-row-teaser { z-index: 0; }
body.theme-bubble .thread-row-ordinal,
body.theme-bubble .thread-row-main,
body.theme-bubble .thread-row-last,
body.theme-bubble .thread-row-stats { position: relative; z-index: 1; }
body.theme-bubble .thread-list .thread-row:last-of-type { border-bottom-color: var(--rule-soft); }
body.theme-bubble .thread-row-ordinal { font-family: var(--font-display); font-style: italic; color: var(--accent-soft); }
/* #20: the active page number keeps the same font/size as the other page buttons
   (base.css bumps it to display-italic 17px) — only the accent fill marks it current. */
body.theme-bubble .page-btn.is-current { font-family: var(--font-mono); font-style: normal; font-size: 10.5px; }
body.theme-bubble .thread-row-title { font-family: var(--font-display); color: var(--ink); }
body.theme-bubble .thread-row-title::after { background: var(--bub-bar); height: 2px; border-radius: 2px; }
body.theme-bubble .thread-row-desc { color: var(--ink-soft); }
/* hover teaser — widened + gradual so the candy glow eases in from the right
   across a long, pleasing fade rather than a hard 86px strip */
body.theme-bubble .thread-row-teaser {
  width: 340px;
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.86) 26%, rgba(255,255,255,0.3) 64%, transparent 100%),
    var(--bub-grad-2);
}
body.theme-bubble .thread-row:hover .thread-row-teaser { opacity: 0.85; }
body.theme-bubble .thread-row-stats .stat-num { color: var(--accent-deep); font-family: var(--font-display); }
body.theme-bubble .stat .stat-label,
body.theme-bubble .thread-row-last { color: var(--ink-mute); }
body.theme-bubble .thread-foot {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-soft);
}

/* posts — glass card, candy gradient banner header with a wave foot */
body.theme-bubble .post {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-card), var(--gloss);
}
body.theme-bubble .post.is-op { border-top: none; }
/* Transient highlight when navigating to a specific post via deep-link anchor. */
.is-post-target {
  transition: outline 0.3s ease;
  outline: 3px solid var(--accent, #c89766);
  outline-offset: 4px;
}
body.theme-bubble .post-banner {
  background: var(--bub-grad);
  position: relative;
}
body.theme-bubble .post-banner::before { background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 60%); }
/* wave foot under the banner — removed (#14: straight bottom edge) */
body.theme-bubble .post-banner::after { display: none; }
body.theme-bubble .banner-name { font-family: var(--font-display); font-style: normal; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
body.theme-bubble .banner-titles { position: relative; z-index: 1; }
body.theme-bubble .post-side { border-right-color: var(--rule-soft); background: transparent; }
body.theme-bubble .post-portrait { box-shadow: var(--shadow-soft), var(--gloss); }
body.theme-bubble .post-portrait::after { box-shadow: inset 0 2px 10px rgba(255,255,255,0.6); }
body.theme-bubble .post-portrait-fill { background: var(--bub-grad-2); color: rgba(54,48,78,0.5); }
body.theme-bubble .post-side-divider { color: var(--accent); }
body.theme-bubble .post-side-divider .ln { background: var(--rule); }
body.theme-bubble .post-side-divider .orn { color: var(--accent); }
body.theme-bubble .side-group-label { color: var(--ink-mute); }
body.theme-bubble .post-stamp .date { color: var(--ink); }
body.theme-bubble .post-stamp .sep { color: var(--ink-faint); }
body.theme-bubble .post-stamp .post-num { font-family: var(--font-display); font-style: italic; color: var(--accent-deep); }
body.theme-bubble .post-prose { color: var(--ink-soft); }
body.theme-bubble .post-prose p:first-of-type::first-letter { color: var(--accent-deep); }

/* ============================================================
   COMMS TEMPLATES — phone-native chat/call/letter/journal
   ============================================================ */
/* shared phone frame — clean modern glass handset */
body.theme-bubble .comms-template .comms--call-frame,
body.theme-bubble .comms-template .comms--message-frame {
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-stroke);
  /* #21: soften to match the letter's shadow (drop the heavy 40px glow) */
  box-shadow: var(--shadow-card), var(--gloss);
  border-radius: 38px;
  /* #21: more breathing room between the handset and the bottom of the post box */
  margin-bottom: 18px;
}
body.theme-bubble .comms-template .comms--name { font-family: var(--font-display); color: var(--ink); }
body.theme-bubble .comms-template .comms--sublabel { color: var(--ink-mute); }
body.theme-bubble .comms-template .comms--action-text { color: var(--ink-soft); }
body.theme-bubble .comms-template .comms--portrait::before { background: radial-gradient(circle, color-mix(in oklab, var(--accent) 45%, transparent) 0%, transparent 68%); }
/* clean iridescent ring (rim via PADDING, not a transparent border that an inner
   image would overlap) + a soft inner disc so the placeholder text never sits
   straight on the bright gradient */
body.theme-bubble .comms-template .comms--portrait-ring {
  border: none;
  padding: 2.5px;
  background: var(--bub-rim);
  box-shadow: var(--shadow-soft);
}
body.theme-bubble .comms-template .comms--portrait-ring img { border-radius: 50%; }
body.theme-bubble .comms-template .comms--portrait-fill {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ffffff 0%, #f4ecfb 62%, #ecdff4 100%);
  color: rgba(54,48,78,0.5);
}

/* call */
body.theme-bubble .comms-template .comms--call-head { border-bottom-color: var(--rule-soft); }
body.theme-bubble .comms-template .comms--call-ring {
  background: radial-gradient(circle at 36% 30%, #fff 0%, #f6d3e4 45%, #d3c4f1 100%);
  box-shadow: 0 10px 26px -8px rgba(150,120,190,0.5), inset 0 0 0 1px rgba(255,255,255,0.7);
}
body.theme-bubble .comms-template .comms--call-ring i { color: var(--accent-deep); }
body.theme-bubble .comms-template .comms--call-ring::after { color: color-mix(in oklab, var(--accent) 40%, transparent); }
body.theme-bubble .comms-template .comms--call-status { color: var(--ink); }
body.theme-bubble .comms-template .comms--call-elapsed { font-family: var(--font-mono); color: var(--ink-faint); }
body.theme-bubble .comms-template .comms--call-bubble {
  background: linear-gradient(145deg, #e8e3fb 0%, #fbe4ef 100%);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--gloss);
}
body.theme-bubble .comms-template .comms--call-bubble-bq { color: var(--ink); font-family: var(--font-body); font-style: normal; font-size: 14.5px; line-height: 1.5; }
body.theme-bubble .comms-template .comms--call-controls { background: linear-gradient(180deg, transparent, var(--accent-wash)); }
body.theme-bubble .comms-template .comms--call-btn { background: #fff; color: var(--ink-soft); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--rule-soft); }
body.theme-bubble .comms-template .comms--call-btn.is-end { background: linear-gradient(135deg, #f56fa6, var(--accent-deep)); color: #fff; box-shadow: 0 8px 18px -6px color-mix(in oklab, var(--accent) 60%, transparent); }
body.theme-bubble .comms-template .comms--call-ctl-cap { color: var(--ink-faint); }

/* message — iMessage/KakaoTalk-style bubbles */
body.theme-bubble .comms-template .comms--message-statusbar { color: var(--ink-mute); }
body.theme-bubble .comms-template .comms--message-contact { border-bottom-color: var(--rule-soft); }
body.theme-bubble .comms-template .comms--message-contact-status { color: var(--ink-faint); }
body.theme-bubble .comms-template .comms--message-online-dot { background: var(--ok); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ok) 30%, transparent); }
/* received (left): frosted lilac bubble */
body.theme-bubble .comms-template .comms--message-row.is-left .comms--message-bubble {
  background: rgba(255,255,255,0.85);
  color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}
/* sent (right): candy gradient bubble */
body.theme-bubble .comms-template .comms--message-row.is-right .comms--message-bubble {
  background: linear-gradient(140deg, #c9d1f6 0%, #e6d2f0 50%, #f8d1e2 100%);
  color: #43345a;
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-soft), var(--gloss);
}
body.theme-bubble .comms-template .comms--message-bubble-img-placeholder { background: var(--bub-grad-2); color: rgba(54,48,78,0.5); }
body.theme-bubble .comms-template .comms--message-action { color: var(--ink-mute); }
body.theme-bubble .comms-template .comms--message-sendbar { background: #fff; border: 1px solid var(--rule); border-radius: 999px; box-shadow: inset 0 1px 3px rgba(150,120,190,0.08); }
body.theme-bubble .comms-template .comms--message-sendbar-add { color: var(--accent-deep); }
body.theme-bubble .comms-template .comms--message-sendbar-placeholder { color: var(--ink-faint); }
body.theme-bubble .comms-template .comms--message-sendbar-send { background: linear-gradient(135deg, #f56fa6, var(--accent)); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--accent) 55%, transparent); }

/* letter — soft glass paper-card (no parchment/skeuomorphism) */
body.theme-bubble .comms-template .comms--letter-paper {
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--gloss);
}
body.theme-bubble .comms-template .comms--letter-edge { display: none; }
body.theme-bubble .comms-template .comms--letter-tape { display: none; }  /* #16: no tape */
body.theme-bubble .comms-template .comms--letter-head { border-bottom-color: var(--rule); }
body.theme-bubble .comms-template .comms--letter-meta-label { color: var(--ink-mute); }
body.theme-bubble .comms-template .comms--letter-meta-name { font-family: var(--font-display); color: var(--ink); }
body.theme-bubble .comms-template .comms--letter-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; line-height: 1.5; text-align: right; color: var(--ink-faint); }
body.theme-bubble .comms-template .comms--letter-body { color: var(--ink-soft); --comms-letter-rule-color: var(--rule); }
body.theme-bubble .comms-template .comms--letter-signoff-text { color: var(--ink-soft); }
body.theme-bubble .comms-template .comms--letter-sig-name { font-family: var(--font-display); font-style: italic; color: var(--accent-deep); }
body.theme-bubble .comms-template .comms--letter-portrait { border: 2px solid transparent; background: var(--bub-rim); box-shadow: var(--shadow-soft); }

/* journal — a ruled diary page (warm cream paper + notebook rules + a margin line),
   distinct from the letter's clean, cool stationery (#18) */
body.theme-bubble .comms-template .comms--journal-book {
  background: linear-gradient(180deg, rgba(255,253,248,0.92), rgba(255,250,243,0.86));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--gloss);
}
body.theme-bubble .comms-template .comms--journal-spine { display: none; }  /* #16: no book spine */
body.theme-bubble .comms-template .comms--journal-inner { padding: 28px 34px 24px; }
body.theme-bubble .comms-template .comms--journal-head { border-bottom-color: var(--rule); }
body.theme-bubble .comms-template .comms--journal-eyebrow { color: var(--ink-mute); }
body.theme-bubble .comms-template .comms--journal-day { font-family: var(--font-display); color: var(--ink); }
body.theme-bubble .comms-template .comms--journal-date { font-family: var(--font-mono); color: var(--ink-faint); }
body.theme-bubble .comms-template .comms--journal-date-label { color: var(--ink-faint); }
body.theme-bubble .comms-template .comms--journal-body {
  color: var(--ink-soft);
  --comms-journal-dot-color: color-mix(in oklab, var(--accent) 22%, #e7e2f2);
  /* (ruled lines removed — they couldn't align with the cursive across paragraph
     gaps; the warm cream paper below already distinguishes the journal.) */
}
body.theme-bubble .comms-template .comms--journal-foot { border-top-color: var(--rule); }
body.theme-bubble .comms-template .comms--journal-flourish { color: var(--accent-soft); }
body.theme-bubble .comms-template .comms--journal-page { font-family: var(--font-mono); color: var(--ink-faint); }

/* ============================================================
   GUIDEBOOK / BANNER blocks
   ============================================================ */
body.theme-bubble .banner-image { background: var(--bub-grad); border-radius: var(--radius-card); }
body.theme-bubble.dark-mode .banner-image { background: linear-gradient(135deg, #3b4496 0%, #56399c 32%, #823c8c 66%, #9c4877 100%); }
body.theme-bubble .banner-image img { filter: none; }
/* dev photo grids (3×1 + 2×3) mirror the Instagram block: rounded cells, tight gap (#10) */
body.theme-bubble .images-square { border-radius: 14px; }
body.theme-bubble .images-square img { filter: none; }
body.theme-bubble .images-grid { gap: 8px; }
.playlist-header {
    margin-bottom: 0px;
}
/* spotify playlist link — right-aligned (#9) */
body.theme-bubble .playlist-link { display: block; width: -moz-fit-content; width: fit-content; margin-left:auto; padding:5px; }

/* ============================================================
   MODAL · TOAST · DRAWER · SCROLL-TOP
   ============================================================ */
body.theme-bubble .modal-backdrop { background: rgba(54,48,78,0.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.theme-bubble .modal {
  background: #fff;  /* clean white (was a translucent frost that picked up the candy ground) */
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-card), 0 50px 90px -36px rgba(150,120,190,0.5), var(--gloss);
}
body.theme-bubble .modal h3 { font-family: var(--font-display); color: var(--ink); }
body.theme-bubble .modal p { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }
body.theme-bubble .modal-helper-text { color: var(--ink-mute); font-style: normal; font-family: var(--font-body); }
body.theme-bubble .modal .modal-actions { border-top-color: var(--rule); }
body.theme-bubble .lock-error { color: var(--danger); }

body.theme-bubble .toast {
  background: rgba(54,48,78,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fdf3f8;
  font-style: italic;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
body.theme-bubble .toast-dismiss { color: var(--accent-soft); }
body.theme-bubble .toast-dismiss:hover { color: #fff; }

/* v1.44: the legacy `body.theme-bubble .toast` rule above (dark pill) was
   leaking onto the new toast-host cards, making them dark in BOTH modes. Scope
   the new frosted cards to light here; dark variant is later in this file. */
body.theme-bubble .toast-host .toast {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  color: var(--ink-soft);
  font-style: normal;
  border-radius: 16px;
  box-shadow: 0 14px 40px -14px rgba(120, 104, 170, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.theme-bubble .scroll-top-btn {
  border-color: var(--glass-stroke);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--accent-deep);
  box-shadow: var(--shadow-card), var(--gloss);
  border-radius: 50%;
  transition: transform 200ms cubic-bezier(.2,.9,.3,1.3), color 180ms ease;
}
body.theme-bubble .scroll-top-btn:hover { color: var(--accent); transform: translateY(-3px); }

body.theme-bubble .dark-mode-toggle { background: var(--paper-soft); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
body.theme-bubble .dark-mode-toggle:hover { background: var(--paper-warm); }

/* N6: bottom-bar toggle buttons */
body.theme-bubble .bottombar-toggle-btn { color: var(--ink); }
body.theme-bubble .bottombar-toggle-btn:hover { background: var(--paper-soft); }

body.theme-bubble .drawer-backdrop { background: rgba(54,48,78,0.22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.theme-bubble .drawer {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.0) 48%),
    rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(32px) saturate(1.6) brightness(1.04);
  backdrop-filter: blur(32px) saturate(1.6) brightness(1.04);
  border-left: 1px solid rgba(255,255,255,0.82);
  box-shadow:
    -28px 0 64px -24px rgba(140,110,190,0.28),
    inset -1px 0 0 rgba(255,255,255,0.5);
}
/* no section divider */
body.theme-bubble .drawer-section { border-bottom: none; position: relative; }
body.theme-bubble .drawer-section::after { display: none; }
body.theme-bubble .drawer-group { border-bottom: none; }
body.theme-bubble .drawer-section-label {
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 14px;
}
/* #68/#70: Bubble suppresses the hairline divider (rounded pill items have their
   own visual separation via gap/padding); color matches base --ink-mute. */
body.theme-bubble .drawer-item { border-radius: 14px; border-bottom: none; transition: background 180ms ease, box-shadow 180ms ease; }
body.theme-bubble .drawer-item i { transition: color 180ms ease; }
body.theme-bubble .drawer-item:hover { background: rgba(255,255,255,0.68); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 10px rgba(160,130,200,0.1); }
body.theme-bubble .drawer-item:hover i { color: var(--accent-deep); }
body.theme-bubble .drawer-item:hover span { color: var(--accent-deep); }
body.theme-bubble .drawer-item-accent { color: var(--accent-deep); }
body.theme-bubble .drawer-item-accent i { color: var(--accent); }
body.theme-bubble .drawer-item-danger { color: var(--danger); }
body.theme-bubble .drawer-item-danger i { color: var(--danger); }
body.theme-bubble .drawer-item-danger:hover { background: var(--danger-wash); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset; }
body.theme-bubble .drawer-item-danger:hover span { color: var(--danger); }
body.theme-bubble .drawer-close { color: var(--ink-mute); }
body.theme-bubble .drawer-close:hover { color: var(--accent-deep); }

body.theme-bubble .quickstat-select { background: rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: var(--rule); border-radius: var(--radius-field); font-style: italic; color: var(--ink); transition: border-color 180ms ease, background 180ms ease; }
body.theme-bubble .quickstat-select:focus { border-color: var(--accent); background: #fff; }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
/* admin top nav — transparent (lets the page's ambient glow show through; no
   opaque band). A faint hairline keeps the tabs anchored. */
body.theme-bubble .tab-bar.admin-tab-bar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--rule);
}
body.theme-bubble .admin-subtab { background: var(--glass-fill); border-color: var(--glass-stroke); color: var(--ink-mute); border-radius: 999px; transition: all 180ms ease; }
body.theme-bubble .admin-subtab:hover { color: var(--accent-deep); border-color: var(--accent-soft); background: #fff; }
body.theme-bubble .admin-subtab.active { color: #fff; background: linear-gradient(135deg, #f56fa6, var(--accent), var(--accent-deep)); border-color: transparent; box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--accent) 60%, transparent); }
body.theme-bubble .admin-block { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-stroke); border-radius: var(--radius-card); box-shadow: var(--shadow-soft), var(--gloss); }
body.theme-bubble .admin-block-head { background: rgba(255,255,255,0.4); border-bottom-color: var(--rule); }
body.theme-bubble .admin-block-title { color: var(--ink-mute); }
body.theme-bubble .admin-block-body { background: transparent; }
body.theme-bubble .adm-tab-head { font-family: var(--font-display); font-style: italic; color: var(--ink); }
body.theme-bubble .adm-tab-head-note { color: var(--ink-faint); }
body.theme-bubble .adm-empty .t { font-family: var(--font-display); font-style: italic; color: var(--ink-mute); }
body.theme-bubble .admin-toggle { color: var(--ink-soft); }
body.theme-bubble .icon-link-pill { border-color: var(--rule); background: var(--glass-fill); color: var(--ink-mute); border-radius: 999px; transition: all 180ms ease; }
body.theme-bubble .icon-link-pill:hover { color: var(--accent-deep); border-color: var(--accent-soft); background: #fff; }
body.theme-bubble .admin-dev-eyebrow { color: var(--ink-faint); }
body.theme-bubble .admin-dev-eyebrow-dot { background: var(--accent); }
body.theme-bubble .admin-saved-flash {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-stroke);
  color: var(--accent-deep);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}

/* admin danger zone (uses the cross-theme --danger tokens) */
body.theme-bubble .admin-danger-zone { border-color: var(--danger); background: var(--danger-wash); border-radius: var(--radius-card); }
body.theme-bubble .admin-danger-zone-head h3 { color: var(--danger-deep) !important; }
body.theme-bubble .admin-danger-zone-label { color: var(--ink-soft); }
body.theme-bubble .admin-danger-zone-keyword { color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, transparent); }
body.theme-bubble .admin-danger-zone-btn { background: transparent; color: var(--ink-faint); border-color: var(--danger); border-radius: 999px; opacity: 0.55; transition: all 200ms ease; }
body.theme-bubble .admin-danger-zone-btn.is-armed { background: var(--danger); color: #fff; border-color: var(--danger); opacity: 1; }
body.theme-bubble .admin-danger-zone-btn.is-armed:hover { background: var(--danger-deep); border-color: var(--danger-deep); }

/* debug panel */
body.theme-bubble .debug-panel { background: rgba(255,255,255,0.5); border-color: var(--glass-stroke); border-left: 3px solid var(--accent); color: var(--ink-soft); border-radius: var(--radius-card); }
body.theme-bubble .debug-panel-head { color: var(--ink-mute); }
body.theme-bubble .debug-panel-toggle { color: var(--accent-deep); }
body.theme-bubble .debug-panel-section-label { color: var(--accent-deep); border-bottom-color: color-mix(in oklab, var(--accent-deep) 30%, transparent); }
body.theme-bubble .debug-panel-key { color: var(--ink-mute); }
body.theme-bubble .debug-panel-val { color: var(--ink); }
body.theme-bubble .debug-panel-row--total { border-top-color: var(--rule); }
body.theme-bubble .debug-panel-empty { color: var(--ink-faint); font-style: italic; }

/* error boundary */
body.theme-bubble .error-boundary-box { background: var(--glass-fill); border-color: var(--glass-stroke); box-shadow: var(--shadow-card); color: var(--ink); border-radius: var(--radius-card); }
body.theme-bubble .error-boundary-box pre { color: var(--ink-soft); background: rgba(255,255,255,0.5); border-color: var(--rule); }

/* ============================================================
   USER PROFILE — triggers / content-warning uses --warn tokens
   ============================================================ */
body.theme-bubble .app-splash-title { font-family: var(--font-display); font-style: italic; color: var(--ink); }
body.theme-bubble .app-splash-icon { color: var(--accent); }

/* ============================================================
   ▸ REQUESTED REVISIONS  (round 2)
   New surfaces + refinements layered after the base theme.
   ============================================================ */

/* ---- the Bubble decorative mark (replaces the hardcoded ❦ / ❧ glyphs) ----
   A soft trio-of-bubbles. We neutralize the literal glyph (font-size:0) and
   paint a theme-owned ornament via ::before. NOTE TO DEV: the ❦/❧ characters
   are hardcoded in the DOM (thread-divider .ornament, post-side-divider .orn,
   comms journal flourish) — they should become a themeable token (e.g.
   --ornament) so a theme can swap the mark without this glyph-hiding shim. */
/* The journal flourish (❧) becomes a soft accent pearl. */
body.theme-bubble .comms-template .comms--journal-flourish {
  font-size: 0 !important;
  color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 12px;
  line-height: 0;
}
body.theme-bubble .comms-template .comms--journal-flourish::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0%, var(--accent-soft) 70%, var(--accent) 130%);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.8);
}
/* thread + post-side dividers (❦) → a Phosphor heart. A real <i class="ph
   ph-heart"> is injected into posts.html (see HANDOFF: the ornament should be
   a themeable --ornament token rather than a hardcoded glyph). */
body.theme-bubble .thread-divider .ornament,
body.theme-bubble .post-side-divider .orn {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); line-height: 1;
}
/* Bubble swaps the ❦ fleuron for a Phosphor heart (per the design request). */
body.theme-bubble .thread-divider .ornament .orn-glyph,
body.theme-bubble .post-side-divider .orn .orn-glyph { display: none; }
body.theme-bubble .thread-divider .ornament i.ph,
body.theme-bubble .post-side-divider .orn i.ph {
  display: inline-flex;
  font-size: 15px; line-height: 1; color: var(--accent);
  filter: drop-shadow(0 1px 2px color-mix(in oklab, var(--accent) 40%, transparent));
}

/* ---- profile field-cards: smaller, social-media-scaled values ----
   (was 19px display serif — too "massive" per the brief; this is meant to read
   like a tidy social profile field, not an editorial pull line) */
body.theme-bubble .field-card-value {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: 0;
}
body.theme-bubble .field-card-value.empty { font-size: 14.5px; }
body.theme-bubble .field-card { padding-top: 12px; padding-bottom: 12px; }

/* =========================================================================
   PULL-QUOTE STYLES (4)  — development tab + guidebook
   base.css ships the structure for .quote-style-{classic,bold,editorial,faded};
   here each gets a distinct Bubble treatment so the user can pick a look.
   ========================================================================= */
body.theme-bubble .quote-display { color: var(--ink); }

/* CLASSIC — the dev-block already provides the card; classic just adds the
   oversized accent quote mark + indent (no second nested bubble) (#11) */
body.theme-bubble .quote-style-classic .quote-display-wrap {
  border-left: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 8px 6px 56px;
}
body.theme-bubble .quote-style-classic .quote-display-wrap::before {
  font-family: var(--font-display);
  color: var(--accent-soft);
  opacity: 1;
  top: 6px;
}
body.theme-bubble .quote-style-classic .quote-display,
body.theme-bubble .quote-style-classic .quote-input { color: var(--ink); }

/* BOLD — centered, candy-gradient text (the headline epigraph) */
body.theme-bubble .quote-style-bold .quote-display,
body.theme-bubble .quote-style-bold .quote-input {
  background: linear-gradient(100deg, #9f8fe6 0%, #ec5f9b 52%, #f3a172 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 0.14em;
}

/* EDITORIAL — soft accent margin rule, muted but legible (#12: was too faint) */
body.theme-bubble .quote-style-editorial .quote-display-wrap {
  border-left: 2px solid var(--accent-soft);
}
body.theme-bubble .quote-style-editorial .quote-display,
body.theme-bubble .quote-style-editorial .quote-input { color: var(--ink-soft); opacity: 1; }

/* FADED — soft pink watermark, but raised to a readable opacity (#12) */
body.theme-bubble .quote-style-faded .quote-display,
body.theme-bubble .quote-style-faded .quote-input {
  color: var(--accent-deep);
  opacity: 0.62;
}

/* the style picker — glass preview chips */
body.theme-bubble .quote-style-btn.quote-style-preview {
  background: var(--glass-fill);
  border-color: var(--glass-stroke);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
body.theme-bubble .quote-style-btn.quote-style-preview:hover {
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}
body.theme-bubble .quote-style-btn-active.quote-style-preview {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow-soft);
}
body.theme-bubble .quote-preview-glyph { color: var(--accent); }
body.theme-bubble .quote-style-preview.quote-style-faded .quote-preview-glyph { color: var(--accent-deep); }

/* =========================================================================
   TRAIT-BAR DESIGNS (3)  — toggled from the Tweaks panel via html[data-trait]
   "fill" (default, the candy capsule) needs no override.
   ========================================================================= */
/* SEGMENTED — chop the track + fill into a ticked level meter, hide the knob */
html[data-trait="segmented"] body.theme-bubble .ship-slider-track,
html[data-trait="segmented"] body.theme-bubble .ship-slider-fill {
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 15px);
          mask: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 15px);
}
html[data-trait="segmented"] body.theme-bubble .ship-slider-tick { opacity: 0; }

/* BUBBLE KNOB — thin track, faded fill, the value rides a big glossy pearl */
html[data-trait="dot"] body.theme-bubble .ship-slider-track { height: 5px; }
html[data-trait="dot"] body.theme-bubble .ship-slider-fill { opacity: 0.45; }
html[data-trait="dot"] body.theme-bubble .ship-slider-tick {
  width: 19px; height: 19px;
  background: radial-gradient(circle at 34% 28%, #fff 0%, var(--accent-soft) 55%, var(--accent) 135%);
  box-shadow: 0 5px 12px -4px color-mix(in oklab, var(--accent) 60%, transparent), inset 0 1px 1px #fff;
}

/* =========================================================================
   TIMELINE (standalone page, .tlx-*)  — soft gradient spine + glass bubble
   wrapping ONLY the title + description (date & name stay outside, per ask).
   ========================================================================= */
body.theme-bubble .tlx-head .section-title { color: var(--ink); }
body.theme-bubble .tlx-thread {
  width: 3px;
  background: linear-gradient(to bottom, var(--accent-soft), color-mix(in oklab, var(--accent) 12%, #ece7f6));
  border-radius: 999px;
}
body.theme-bubble .tlx-node {
  border: 1.5px solid var(--glass-stroke);
  background: var(--glass-fill);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft);
}
body.theme-bubble .tlx-node-img { filter: none; }
body.theme-bubble .tlx-node-initial { color: rgba(54,48,78,0.55); }
body.theme-bubble .tlx-date { color: var(--accent-deep); }
body.theme-bubble .tlx-who-inline { font-family: var(--font-display); font-style: italic; color: var(--ink-mute); }
body.theme-bubble .tlx-who-inline::before { content: "\2014 "; color: var(--accent-soft); }

/* the soft white bubble — title (top-rounded) + desc (bottom-rounded) merge */
body.theme-bubble .tlx-title {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--glass-stroke);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  margin: 9px 0 0;
  padding: 15px 20px 6px;
  color: var(--ink);
  /* #7 fix: the title sits flush ON TOP of .tlx-desc — a downward shadow here casts
     onto the desc and reads as two stacked boxes. Drop it; the card's lift comes from
     the desc's bottom shadow + the continuous border. The no-description case keeps a
     full shadow via the .tlx-title:last-child / .tlx-title-row:last-child rules below. */
  box-shadow: none;
}
body.theme-bubble .tlx-desc {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--glass-stroke);
  border-top: none;
  border-radius: 0 0 18px 18px;
  margin: 0;
  padding: 2px 20px 16px;
  color: var(--ink-soft);
  max-width: none;
  box-shadow: var(--shadow-soft);
}
/* tlx-title-row: title bubble stays full-width + continuous with .tlx-desc;
   the TW pill floats at the title's right without shrinking the bubble. */
body.theme-bubble .tlx-title-row { position: relative; }
body.theme-bubble .tlx-title-row .tlx-title { padding-right: 64px; }   /* reserve space so title text never runs under the pill */
body.theme-bubble .tlx-title-row .warn-callout {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  margin: 0;
  z-index: 1;
}
/* when tlx-title-row is the last card child (no .tlx-desc), close the bubble */
body.theme-bubble .tlx-title-row:last-child .tlx-title {
  border-bottom: 1px solid var(--glass-stroke);
  border-radius: 18px;
  padding-bottom: 15px;
  box-shadow: var(--shadow-soft);
}

/* =========================================================================
   INSTAGRAM dev block — compact, cohesive social card (was "huge")
   ========================================================================= */
body.theme-bubble .dev-block .ig-block { max-width: 430px; margin: 0 auto; gap: 13px; }
body.theme-bubble .ig-username { color: var(--ink); }
body.theme-bubble .ig-bio { color: var(--ink-mute); }
body.theme-bubble .ig-avatar { background: var(--bub-rim); border: none; padding: 2.5px; box-shadow: var(--shadow-soft); }
body.theme-bubble .ig-avatar img { border-radius: 50%; }
body.theme-bubble .ig-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  border-bottom: none; padding: 4px 0 4px;
}
body.theme-bubble .ig-stat {
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  border-radius: 14px;
  padding: 9px 4px 8px;
  box-shadow: var(--shadow-soft), var(--gloss);
}
body.theme-bubble .ig-stat-num { color: var(--ink); font-size: 19px; }
body.theme-bubble .ig-grid { gap: 6px; padding: 0; }
body.theme-bubble .ig-cell { aspect-ratio: 1 / 1; border-radius: 12px; }

/* =========================================================================
   TINDER dev block — narrower card + shorter photo (was too tall)
   ========================================================================= */
body.theme-bubble .tinder-block { max-width: 320px; margin: 0 auto; border-radius: 24px; overflow: hidden; }
body.theme-bubble .tinder-photo { aspect-ratio: 4 / 3; }
body.theme-bubble .tinder-name { color: var(--ink); }
body.theme-bubble .tinder-bio { color: var(--ink-soft); }

/* =========================================================================
   USER PROFILE — minimal, cohesive sidebar
   ========================================================================= */
body.theme-bubble .up-sidebar {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-card), var(--gloss);
  padding: 28px 24px 18px;
  position: sticky;
  top: 84px;
}
/* ≤1024 the profile layout stacks single-column, so the sidebar must NOT be sticky
   (it would pin while you scroll the rest). Owner 2026-06-17. */
@media (max-width: 1024px) {
  body.theme-bubble .up-sidebar { position: static; top: auto; }
}
body.theme-bubble .up-sidebar .up-header { flex-direction: column; align-items: center; text-align: center; gap: 13px; margin-bottom: 24px; }
body.theme-bubble .up-avatar {
  width: 84px; height: 84px;
  background: var(--bub-rim);
  border: none; padding: 3px;
  box-shadow: var(--shadow-soft);
}
/* Ensure white-ring variant uses pure white (#fff) ring, not theme bub-rim tint. */
body.theme-bubble .up-avatar--white-ring { background: #fff; }

body.theme-bubble .up-avatar-initial {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4);
  color: rgba(54,48,78,0.55);
}
body.theme-bubble .up-identity { align-items: center; gap: 5px; }
body.theme-bubble .up-display-name { font-size: 22px; font-weight: 600; flex-direction: column; gap: 7px; }
body.theme-bubble .up-role-badge {
  font-size: 9px; color: var(--accent-deep);
  background: var(--accent-wash); border-color: color-mix(in oklab, var(--accent) 24%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
/* (.up-email / .up-joined removed — the email + "Member since" fields are gone
   from userProfile.js across all themes.) */

/* sidebar section headings → quiet wide-tracked micro-labels (were "very large") */
body.theme-bubble .up-sidebar .up-section { margin-bottom: 26px; }
body.theme-bubble .up-sidebar .up-section:last-child { margin-bottom: 4px; }
/* tighten the gap between the quickstats (contact details) block and the footer
   buttons — overrides the 26px above (which previously beat the base :has rule). */
body.theme-bubble .up-sidebar .up-section:has(.quickstats) { margin-bottom: 4px; }
body.theme-bubble .up-sidebar .section-title-block { border-bottom: none; margin-bottom: 12px; padding-bottom: 0; }
body.theme-bubble .up-sidebar .section-title {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
body.theme-bubble .up-sidebar .section-title .it { font-style: normal; }

/* trigger / content-warning callout — neutral, light glass with readable text */
body.theme-bubble .warn-callout {
  display: flex;
  width: 100%;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  color: var(--ink-soft);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.7);
  padding: 13px 16px;
  line-height: 1.55;
}
body.theme-bubble .warn-callout i { color: var(--accent-deep); }
body.theme-bubble .warn-callout strong { color: var(--ink); font-weight: 700; }
body.theme-bubble .warn-callout .v-empty { color: var(--ink-mute); font-style: italic; }
body.theme-bubble .warn-callout .v-empty { color: var(--ink-faint); font-style: italic; }
/* Compact chip — slightly tighter padding in Bubble. Must reset width:auto and
   flex:0 0 auto: the `body.theme-bubble .warn-callout{width:100%}` rule above wins
   over base's `.warn-callout--compact{width:auto}` on specificity, which would
   otherwise stretch the compact chip to the full row (#21 thread-row CW, #73 post CW). */
body.theme-bubble .warn-callout--compact {
  padding: 3px 8px;
  border-radius: var(--radius-pill, 999px);
  width: auto;
  flex: 0 0 auto;
}

/* user-profile always-open trigger-warnings block (view mode; edit mode = textarea above) */
body.theme-bubble .up-triggers {
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.7);
  padding: 13px 16px;
}
body.theme-bubble.dark-mode .up-triggers {
  background: var(--glass-fill);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.06);
}
body.theme-bubble .up-triggers-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600; margin-bottom: 4px;
}
body.theme-bubble .up-triggers-head i, body.theme-bubble .up-triggers-head .ph { color: var(--danger, #c0392b); }
body.theme-bubble .up-triggers-body {
  margin: 0; font-weight: 400; color: var(--ink-soft); white-space: pre-wrap;
  font-size: 10.5px; line-height: 1.4;
}

/* user-profile "Details" quickstats already inherit the global .quickstat skin */
body.theme-bubble .up-main .section-title { color: var(--ink); }

/* =========================================================================
   JOURNAL entry — extra TLC: ribboned eyebrow, oversized day, drop-cap,
   faintly ruled glass paper, accent margin tint.
   ========================================================================= */
/* journal head + body — flattened, no spine offset, clean flush-left handwriting
   (Cedarville Cursive) like the letter; drop-cap + ruled margin removed (#16) */
body.theme-bubble .comms-template .comms--journal-book {
  /* warm cream paper — distinguishes the journal from the letter's cool white */
  background:
    linear-gradient(180deg, rgba(255,253,248,0.93) 0%, rgba(255,250,243,0.85) 100%);
}
body.theme-bubble .comms-template .comms--journal-spine {
  background: linear-gradient(90deg, var(--accent) 0%, #d9a6e0 38%, var(--accent-soft) 72%, rgba(255,255,255,0) 100%);
  box-shadow: inset -7px 0 12px -9px rgba(150,120,190,0.45);
}
body.theme-bubble .comms-template .comms--journal-eyebrow {
  display: none;  /* #(journal): remove the eyebrow */
}
body.theme-bubble .comms-template .comms--journal-eyebrow::before { display: none; }
body.theme-bubble .comms-template .comms--journal-day {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 3px;
}
body.theme-bubble .comms-template .comms--journal-date {
  text-align: right;
}
body.theme-bubble .comms-template .comms--journal-body {
  color: var(--ink-soft);
  padding-left: 2px;
}
body.theme-bubble .comms-template .comms--journal-page {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0;
  color: var(--ink-faint);
}

/* =========================================================================
   LOGIN modal (#21) — soft candy gradient glass instead of flat grey-white
   ========================================================================= */
body.theme-bubble .modal.modal-signin {
  background: linear-gradient(165deg, rgba(255,255,255,0.93) 0%, rgba(249,236,245,0.86) 52%, rgba(238,233,251,0.84) 100%);
}

/* =========================================================================
   COMPOSE (#22) — round every field on the editor
   ========================================================================= */
body.theme-bubble .field-input,
body.theme-bubble .field-textarea,
body.theme-bubble .field-select,
body.theme-bubble .editor .field-input,
body.theme-bubble .char-picker-trigger {
  border-radius: var(--radius-field);
}
body.theme-bubble .field-textarea { border-radius: var(--radius-card); }

/* activity drawer */
body.theme-bubble .activity-drawer-header h2 { font-style: normal; }

/* ============================================================
   ACCESSIBILITY — respect reduced motion (kill the bounce)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.theme-bubble *,
  body.theme-bubble *::before,
  body.theme-bubble *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   DEVELOPMENT + GUIDEBOOK BLOCK REFINEMENTS
   §1  Text-block subheading   — Serif Kicker (development + guidebook)
   §2  Likes / dislikes        — Ruled Minimal (development + guidebook)
   §3  Playlist                — Index style (development)
   §4  Instagram               — authentic IG hairline layout (development)
   §5  Tinder                  — full-bleed photo + scrim (development)
   §6  Guidebook quote picker  — glass-chip buttons matching the dev-tab picker
   ============================================================ */

/* ── §1 · TEXT-BLOCK SUBHEADING — Serif Kicker ────────────────────────────
   Fraunces italic with a leading candy-gradient dot pearl.
   ─────────────────────────────────────────────────────────────────────────── */
body.theme-bubble .text-block .dev-block-heading,
body.theme-bubble .gb-groups-edit .dev-block-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 18px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}


/* ── §2 · LIKES / DISLIKES — Ruled Minimal ────────────────────────────────
   No bullets; hairline-divided rows; short gradient-bar underline on headings.
   ─────────────────────────────────────────────────────────────────────────── */
body.theme-bubble .likes-block .likes-bullet { display: none; }
body.theme-bubble .likes-block .dev-block-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--ink);
  position: relative;
  padding-bottom: 9px;
  margin-bottom: 6px;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}
body.theme-bubble .likes-block .dev-block-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  width: 34px;
  background: var(--bub-bar);
  border-radius: 999px;
}
body.theme-bubble .likes-block .likes-item {
  font-family: var(--font-body);
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule-soft);
  align-items: center;
}
body.theme-bubble .likes-block .likes-list .likes-item:last-child { border-bottom: none; }
body.theme-bubble .likes-block .likes-text {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ── §3 · PLAYLIST — Index style ─────────────────────────────────────────
   Outlined circle track numbers; mono uppercase artist; dashed dividers.
   ─────────────────────────────────────────────────────────────────────────── */
body.theme-bubble .playlist-block .dev-block-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--ink);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 14px;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  white-space: nowrap;
}
body.theme-bubble .playlist-block .dev-block-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  width: 40px;
  background: var(--bub-bar);
  border-radius: 999px;
}
body.theme-bubble .playlist-track { border-bottom: 1px dashed var(--rule-soft); padding: 9px 0; gap: 12px; }
body.theme-bubble .playlist-track-num {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, var(--rule));
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-deep);
  flex: 0 0 auto;
}
body.theme-bubble .playlist-track-title { font-family: var(--font-body); font-style: normal; font-weight: 500; color: var(--ink); }
body.theme-bubble .playlist-track-artist {
  font-family: var(--font-mono);
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  overflow-wrap: normal;
  word-break: keep-all;
}
/* keep artist cell on one line — base.css overflow-wrap:anywhere would break names */
body.theme-bubble .playlist-track-artist-cell { white-space: nowrap; justify-self: end; }
body.theme-bubble .playlist-dot { display: none; }

/* ── §4 · INSTAGRAM — authentic IG hairline layout ────────────────────────
   Replaces the glass-card stat boxes with flat hairline-bounded columns.
   ─────────────────────────────────────────────────────────────────────────── */
body.theme-bubble .dev-block .ig-block { max-width: 412px; margin: 0 auto; gap: 14px; }
body.theme-bubble .ig-header { gap: 16px; align-items: center; }
body.theme-bubble .ig-avatar { flex: 0 0 74px; width: 74px; height: 74px; padding: 3px; }
body.theme-bubble .ig-username { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
body.theme-bubble .ig-bio { font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
body.theme-bubble .ig-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 11px 0; margin: 0;
}
body.theme-bubble .ig-stat {
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 0; gap: 1px; position: relative;
}
body.theme-bubble .ig-stat + .ig-stat::before {
  content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px;
  background: var(--rule-soft);
}
body.theme-bubble .ig-stat-num { font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
body.theme-bubble .ig-stat-label { font-family: var(--font-body); font-weight: 500; text-transform: lowercase; letter-spacing: 0; font-size: 11.5px; color: var(--ink-mute); }
body.theme-bubble .ig-grid { gap: 3px; }
body.theme-bubble .ig-cell { aspect-ratio: 1 / 1; border-radius: 8px; box-shadow: none; }
body.theme-bubble .ig-cell:hover { transform: none; box-shadow: 0 0 0 2px var(--accent-soft); }

/* ── §5 · TINDER — full-bleed photo + gradient scrim + overlaid name ───────
   ─────────────────────────────────────────────────────────────────────────── */
body.theme-bubble .dev-block .tinder-block { max-width: 320px; margin: 0 auto; border-radius: 24px; overflow: hidden; }
body.theme-bubble .tinder-photo { aspect-ratio: 4 / 3; position: relative; background: var(--bub-grad-2); }
body.theme-bubble .tinder-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(40,28,58,0.70) 0%, rgba(40,28,58,0.30) 1%, transparent 30%);
}
.ig-avatar-empty {
    color: #ffffff;
}
body.theme-bubble .tinder-body {
  margin-top: -54px; position: relative; z-index: 1;
  padding: 0 16px 16px;
  background: linear-gradient(180deg, transparent 0, transparent 30px, #fff 50px);
}
body.theme-bubble .tinder-id-row { align-items: baseline; gap: 6px 9px; min-height: 30px; }
body.theme-bubble .tinder-name {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: #fff; text-shadow: 0 1px 8px rgba(30,16,44,0.45);
}
body.theme-bubble .tinder-name::after {
  content: "\2665"; color: var(--accent); font-size: 0.62em;
  margin-left: 6px; vertical-align: 0.12em;
  filter: drop-shadow(0 1px 3px rgba(30,16,44,0.4));
}
body.theme-bubble .tinder-distance {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 10px;
  color: #fff; background: rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 3px 9px;
}
body.theme-bubble .tinder-bio { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-top: 16px; }
body.theme-bubble .tinder-interests { margin-top: 1px; gap: 6px; padding-top: 0px; border-top: 0px;}
body.theme-bubble .tinder-pill {
  font-family: var(--font-body); font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: 11px; padding: 4px 11px;
  background: var(--accent-wash); color: var(--accent-deep);
  border: 0px solid color-mix(in oklab, var(--accent) 26%, transparent);
}

/* ── §6 · GUIDEBOOK — quote style picker buttons ─────────────────────────
   Text-label buttons (.quote-style-btn without .quote-style-preview) get
   the same glass-chip shell as the dev-tab glyph picker; each label
   previews its own style visually.
   ─────────────────────────────────────────────────────────────────────────── */
body.theme-bubble .quote-style-btn:not(.quote-style-preview) {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 11px 10px; cursor: pointer; line-height: 1;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: 14px; box-shadow: var(--shadow-soft);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
body.theme-bubble .quote-style-btn:not(.quote-style-preview):hover { border-color: var(--accent-soft); transform: translateY(-2px); }
body.theme-bubble .quote-style-btn:not(.quote-style-preview).quote-style-btn-active {
  border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash);
  box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow-soft); transform: none;
}
body.theme-bubble .quote-style-btn:not(.quote-style-preview)[data-style="classic"] { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 15.5px; }
body.theme-bubble .quote-style-btn:not(.quote-style-preview)[data-style="bold"] { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-size: 11px; }
body.theme-bubble .quote-style-btn:not(.quote-style-preview)[data-style="editorial"] { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.01em; }
body.theme-bubble .quote-style-btn:not(.quote-style-preview)[data-style="faded"] { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 16px; color: var(--ink-faint); }
body.theme-bubble .quote-style-btn:not(.quote-style-preview)[data-style="faded"].quote-style-btn-active { color: var(--accent-deep); }

/* ── Stage 5 Notebook: progress bar gradient + completion green ───────────
   Color values here (Bubble palette skin) — structure in base.css.
   Gradient: periwinkle → lilac → pink (progress); green at 100%.
   ──────────────────────────────────────────────────────────────────────── */
body.theme-bubble .notebook-goal-bar-fill {
  background: linear-gradient(90deg, #aeb8f0 0%, #d4b9ec 45%, #f6a6c8 100%);
  box-shadow: 0 0 8px -2px rgba(246,166,200,0.55);
}
body.theme-bubble .notebook-goal-bar-fill--done {
  background: linear-gradient(90deg, #86d8b0 0%, #3fc489 60%, #1f9e6e 100%);
  box-shadow: 0 0 8px -2px rgba(63,196,137,0.55);
}
/* Same gradient applied inside the goal popover mini bar */
body.theme-bubble .notebook-goal-bar-wrap .notebook-goal-bar-fill {
  background: linear-gradient(90deg, #aeb8f0 0%, #d4b9ec 45%, #f6a6c8 100%);
}
/* Fullscreen: opaque paper fill so underlying app chrome is fully hidden */
body.theme-bubble .notebook-page--fullscreen {
  background: var(--paper);
}

/* === Sidebar pending-approval badge — Bubble skin ===
   Matches the char-card pending tone: muted dot + uppercase text, no amber pill. */
body.theme-bubble .sidebar-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 9px;
  letter-spacing: 0.2em;
}
body.theme-bubble .sidebar-pending-badge::before {
  content: "";
  width: 7px; height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-mute);
  box-shadow: none;
}

/* Faceclaims — Bubble skin (C-Faceclaims). Colors come from tokens, so dark-mode
   inherits via the token remap; no per-rule dark override needed. */
body.theme-bubble .fc-row,
body.theme-bubble .fc-reserve-row { border-radius: 10px; border-bottom: none; margin-bottom: 4px; }
body.theme-bubble .fc-row:hover,
body.theme-bubble .fc-reserve-row:hover { background: var(--paper-warm); }

/* ============================================================
   PAGE TOKENS — --pg-* helpers for Faceclaims / Directory / Ad Board
   ============================================================ */
body.theme-bubble {
  --pg-grad:    var(--bub-grad);
  --pg-grad-2:  var(--bub-grad-2);
  --pg-on-candy: #43345a;
  --pg-on-candy-soft: #6a5b80;
  --pg-card:    var(--glass-fill);
  --pg-well:    rgba(255,255,255,0.62);
  --pg-rail:    rgba(255,255,255,0.40);
  --pg-foot-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 0 H100 V86 Q50 98 0 86 Z' fill='%23000'/></svg>") center / 100% 100% no-repeat;
}

/* ============================================================
   SHARED — wave header, page frame, page header
   ============================================================ */
.wave-header {
  position: relative;
  background: var(--pg-grad);
  background-size: cover;
  -webkit-mask: var(--bub-wave-mask) center / 100% 100% no-repeat;
          mask: var(--bub-wave-mask) center / 100% 100% no-repeat;
}
.wave-header::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 22% 24%, rgba(255,255,255,0.5) 0%, transparent 56%);
  pointer-events: none;
}
.pg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px,4vw,44px) 96px; }
.pg-sheet {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-card), var(--gloss);
  overflow: hidden;
}
.pg-head { max-width: 1180px; margin: 0 auto; padding: 40px clamp(18px,4vw,44px) 6px; }
.pg-head h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(34px,4.6vw,46px);
  color: var(--ink); margin: 0; letter-spacing: -0.02em; line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
}
.pg-head .scr { font-family: var(--font-display); font-style: italic; font-size: 0.5em; color: var(--accent-deep); margin-left: 10px; }
.pg-head .note { font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); margin: 10px 0 0; }

/* ============================================================
   FACECLAIMS — Bubble card styles (Variation A + Reserves/Banned)
   ============================================================ */
.fc-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding: 8px 0 40px;
}
@media (max-width: 860px) { .fc-cols { grid-template-columns: 1fr; } }
.fc-claim-card {
  display: flex; flex-direction: column;
  background: var(--pg-well);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss);
  overflow: hidden;
  transition: transform 240ms cubic-bezier(.2,.8,.3,1.1), box-shadow 240ms ease, border-color 240ms ease;
}
.fc-claim-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card), var(--gloss);
  border-color: color-mix(in oklab, var(--accent) 38%, var(--glass-stroke));
}
.fc-claim-face {
  position: relative; padding: 26px 18px 20px; text-align: center;
  background:
    linear-gradient(to bottom, transparent 65%, var(--pg-well) 100%),
    var(--pg-grad-2);
}
.fc-claim-face .fc-face-name {
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 19px;
  color: var(--pg-on-candy); letter-spacing: 0; line-height: 1.2;
}
.fc-claim-foot {
  padding: 13px 16px 15px; text-align: center;
}
.fc-claim-foot .lbl {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
}
.fc-claim-foot .who {
  display: block; margin-top: 4px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.fc-sub-head {
  display: flex; align-items: baseline; gap: 12px; padding: 0; margin: 30px 0 14px;
}
.fc-sub-head:first-child { margin-top: 8px; }
.fc-sub-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0; white-space: nowrap; }
.fc-sub-head .ct { font-family: var(--font-mono); font-size: 9px; color: var(--accent-deep); background: var(--accent-wash); border-radius: 999px; padding: 3px 10px; }
.fc-sub-head .ln { flex: 1; height: 1px; background: linear-gradient(to right, var(--accent-soft), transparent); }
.fc-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; }
@media (max-width: 760px) { .fc-twocol { grid-template-columns: 1fr; } }
.fc-twocol.last { padding-bottom: 40px; }

/* ── Alphabet filter grid (Claimed section pill popover) ── */
.fc-alpha-filter { padding-top: 2px; }
.fc-alpha-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding: 4px 0 4px;
}
.fc-alpha-btn {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  height: 30px; border-radius: 8px; border: 1px solid var(--glass-stroke);
  background: var(--pg-well); color: var(--ink-mute); cursor: pointer;
  transition: all 140ms ease;
}
.fc-alpha-btn:hover { color: var(--accent-deep); border-color: var(--accent-soft); background: var(--accent-wash); }
.fc-alpha-btn--on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border-color: transparent; }
.fc-res-card {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss);
}
.fc-res-av {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--pg-grad-2); color: var(--pg-on-candy); font-family: var(--font-display); font-style: italic; font-size: 16px;
  box-shadow: var(--gloss);
}
.fc-res-tx { flex: 1; min-width: 0; line-height: 1.2; }
.fc-res-tx .face { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 16px; color: var(--ink); display: block; }
.fc-res-tx .for { font-family: var(--font-body); font-size: 11px; color: var(--ink-mute); }
.fc-res-tx .for b { font-weight: 600; color: var(--accent-deep); }
.fc-res-time {
  flex: 0 0 auto; text-align: right; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--ink-faint);
}
.fc-res-time .big { display: block; font-size: 13px; color: var(--accent-deep); letter-spacing: 0.04em; }
.fc-ban-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.fc-ban-card i { color: var(--ink-faint); font-size: 18px; flex: 0 0 auto; }
.fc-ban-tx { flex: 1; min-width: 0; line-height: 1.3; }
.fc-ban-tx .nm { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); display: block; }
.fc-ban-tx .rs { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink-faint); }
/* button-reset for card elements that are <button>s */
body.theme-bubble .fc-claim-card,
body.theme-bubble .fc-res-card { appearance: none; font: inherit; color: inherit; text-align: inherit; width: 100%; cursor: pointer; }

/* ============================================================
   DIRECTORY — rich glass member cards
   ============================================================ */
.dir-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  max-width: 1180px; margin: 0 auto; padding: 18px clamp(18px,4vw,44px) 90px; }
@media (max-width: 1180px) { .dir-grid { grid-template-columns: 1fr; } }
.dir-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--gloss); overflow: hidden;
  transition: transform 240ms cubic-bezier(.2,.8,.3,1.1), box-shadow 240ms ease, border-color 240ms ease;
}
.dir-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card), 0 26px 50px -22px rgba(150,120,190,0.3), var(--gloss); border-color: color-mix(in oklab,var(--accent) 34%, var(--glass-stroke)); }
.dir-card-banner {
  position: relative; padding: 22px 22px 30px; background: var(--pg-grad);
  -webkit-mask: var(--pg-foot-wave); mask: var(--pg-foot-wave);
}
.dir-card-banner h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: -0.01em;
  color: var(--pg-on-candy); margin: 0; line-height: 1; position: relative; z-index: 1;
}
.dir-card-body { display: flex; gap: 16px; padding: 12px 20px 18px; margin-top: 0; }
.dir-avatar {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
  background: #fff; padding: 3px; box-shadow: var(--shadow-soft); align-self: flex-start;
}
.dir-avatar span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4); color: rgba(54,48,78,0.5);
  font-family: var(--font-display); font-style: italic; font-size: 26px;
}
.dir-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dir-field {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--pg-well); border: 1px solid var(--rule-soft); border-radius: 999px;
  padding: 5px 13px;
}
.dir-field .k { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); flex: 0 0 auto; white-space: nowrap; }
.dir-field .v { font-family: var(--font-body); font-size: 12.5px; color: var(--ink); margin-left: auto; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dir-field .v.accent { color: var(--accent-deep); }
.dir-card-foot {
  display: flex; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--rule);
}
.dir-foot-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: 999px;
  padding: 9px 10px; cursor: pointer; transition: all 160ms ease;
}
.dir-foot-btn i { font-size: 13px; }
/* light mode: --glass-stroke is near-white and invisible on the light card;
   give the pill a visible rim to match the dark-mode border. */
body.theme-bubble:not(.dark-mode) .dir-foot-btn { border-color: var(--rule); }
.dir-foot-btn:hover { color: var(--accent-deep); border-color: var(--accent-soft); transform: translateY(-1px); }
.dir-foot-btn.primary { color: #fff; background: linear-gradient(140deg,#f48bbb,#ec6ba2 55%,#e0568f); border-color: transparent; }
.dir-foot-btn.primary:hover { filter: brightness(1.03); color: #fff; }

/* ============================================================
   AD BOARD — wanted-ad glass cards
   ============================================================ */
.adb { max-width: var(--page-w-contained); margin: 0 auto; padding: 18px clamp(18px,4vw,44px) 90px; }
.adb-grid { columns: 2; column-gap: 18px; padding: 0 0 40px; }
@media (max-width: 820px) { .adb-grid { columns: 1; } }
.adb-card {
  break-inside: avoid; margin-bottom: 18px; display: flex; flex-direction: column;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss); overflow: hidden;
  transition: transform 230ms cubic-bezier(.2,.8,.3,1.1), box-shadow 230ms ease, border-color 230ms ease;
}
.adb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), var(--gloss); border-color: color-mix(in oklab,var(--accent) 34%, var(--glass-stroke)); }
.adb-card-top { display: flex; gap: 7px; flex-wrap: wrap; padding: 16px 18px 0; }
.adb-pill {
  font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px;
}
.adb-pill.cat { color: var(--accent-deep); background: var(--accent-wash); border: 1px solid color-mix(in oklab,var(--accent) 24%, transparent); }
.adb-pill.cw { color: var(--warn, #b07d2a); background: var(--warn-wash, color-mix(in oklab,#e0a93a 16%, transparent)); border: 1px solid var(--warn-border, color-mix(in oklab,#e0a93a 34%, transparent)); }
.adb-card-title {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em;
  color: var(--ink); margin: 12px 0 0; padding: 0 18px; line-height: 1.12;
}
.adb-card-tagline {
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--accent-deep);
  margin: 6px 0 0; padding: 0 18px;
}
.adb-card-desc {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 12px 0 0; padding: 0 18px;
}
.adb-card-foot {
  display: flex; align-items: center; gap: 11px; margin-top: 16px;
  padding: 13px 18px; border-top: 1px solid var(--rule); background: var(--pg-rail);
}
.adb-foot-av {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; padding: 2px; box-shadow: var(--shadow-soft);
}
.adb-foot-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4); color: rgba(54,48,78,0.55);
  font-family: var(--font-display); font-style: italic; font-size: 15px; }
.adb-foot-meta { flex: 1; min-width: 0; line-height: 1.15; }
.adb-foot-meta .by { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.adb-foot-meta .nm { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink); display: block; }
.adb-foot-go { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); color: var(--accent-deep); box-shadow: var(--shadow-soft); transition: all 160ms ease; }
.adb-card:hover .adb-foot-go { transform: translateX(2px); color: var(--accent); }
/* button-reset for the card foot which is a <button> */
body.theme-bubble .adb-card-foot { appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
/* adb-empty: flush with adb-grid (no horizontal indent in bubble) */
.adb-empty { padding-left: 0; padding-right: 0; }

/* ============================================================
   PROFILE STATS  (hero — 3 viz variations)
   ============================================================ */
.pf-wrap { max-width: 1180px; margin: 0 auto; padding: 22px clamp(18px,4vw,44px) 90px; }

/* the stats sheet */
.stats {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-modal);
  box-shadow: var(--shadow-card), var(--gloss);
  padding: 26px 28px 30px; position: relative; overflow: hidden;
}
.stats-title {
  display: flex; align-items: baseline; gap: 12px; margin: 2px 0 22px;
}
.stats-title h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0;
}
.stats-title .en { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-mute); }
.stats-title .upd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint); }

/* hero trio — big featured numbers */
.stats-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 620px) { .stats-hero { grid-template-columns: 1fr; } }
.stat-hero {
  position: relative; padding: 20px 20px 18px; border-radius: var(--radius-card);
  background: var(--pg-grad-2); overflow: hidden;
  box-shadow: var(--gloss);
}
.stat-hero::after { content: ""; position: absolute; inset: 0; background: var(--glass-aero); pointer-events: none; }
.stat-hero .ic { position: absolute; top: 14px; right: 15px; font-size: 20px; color: var(--pg-on-candy); opacity: 0.5; }
.stat-hero .num {
  font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 0.95;
  color: var(--pg-on-candy); letter-spacing: -0.02em; position: relative; z-index: 1;
  font-variation-settings: "opsz" 120, "SOFT" 60, "WONK" 0;
}
.stat-hero .lbl {
  display: block; margin-top: 7px; position: relative; z-index: 1;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pg-on-candy-soft);
}

/* section subheads inside stats */
.stats-sub {
  display: flex; align-items: center; gap: 11px; margin: 24px 0 13px;
}
.stats-sub .t { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.stats-sub .ln { flex: 1; height: 1px; background: linear-gradient(to right, var(--accent-soft), transparent); }

/* glass tiles (Var B) */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 15px 15px 14px;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss); position: relative; overflow: hidden;
  transition: transform 200ms cubic-bezier(.2,.9,.3,1.2), box-shadow 200ms ease, border-color 200ms ease;
}
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card), var(--gloss); border-color: color-mix(in oklab,var(--accent) 32%, var(--glass-stroke)); }
.stat-tile .ti { font-size: 17px; color: var(--accent); margin-bottom: 5px; }
.stat-tile .tn {
  font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1; color: var(--ink); letter-spacing: -0.01em;
  font-variation-settings: "opsz" 90, "SOFT" 50, "WONK" 0;
}
.stat-tile .tl { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

/* compact inline stat row (Var C mix) */
.stat-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 760px) { .stat-mini { grid-template-columns: repeat(2, 1fr); } }
.stat-mini .m {
  text-align: center; padding: 13px 8px 11px; border-radius: var(--radius-field);
  background: var(--pg-well); border: 1px solid var(--rule-soft);
}
.stat-mini .m .n { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); display: block; line-height: 1; }
.stat-mini .m .k { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-top: 6px; }

/* log-session affordance (notebook integration, coming later) */
.stats-log {
  display: flex; align-items: center; gap: 13px; margin-top: 24px; padding: 15px 18px;
  border-radius: var(--radius-card); border: 1px dashed color-mix(in oklab,var(--accent) 32%, var(--rule));
  background: var(--accent-wash);
}
.stats-log i { font-size: 22px; color: var(--accent-deep); }
.stats-log .tx { flex: 1; min-width: 0; }
.stats-log .tx b { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 16px; color: var(--ink); }
.stats-log .tx span { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-mute); margin-top: 1px; }
.stats-log .btn-accent { flex: 0 0 auto; }

/* ── Compose preview pane — Bubble skin ──────────────────────────────────── */
.bubble .compose-preview,
.bubble-dark .compose-preview {
  background: var(--surface-panel, var(--bg-card));
  border: 1px solid var(--rule, var(--ink-faint));
  border-radius: var(--radius-card, 8px);
  padding: 1rem;
}

.bubble .compose-preview-head,
.bubble-dark .compose-preview-head {
  font-weight: 600;
  font-size: 0.85em;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--rule, var(--ink-faint));
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ── N3: bottom-bar Bubble skin ──────────────────────────────────────────── */
body.theme-bubble .bottombar {
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--glass-stroke, rgba(255,255,255,0.75));
  box-shadow: 0 -4px 20px -8px rgba(150,120,190,0.18),
              inset 0 1px 0 rgba(255,255,255,0.6);
}
body.theme-bubble .bottombar-login,
body.theme-bubble .bottombar-logout {
  color: var(--ink-soft, #635c7e);
}
body.theme-bubble .bottombar-login:hover,
body.theme-bubble .bottombar-logout:hover {
  color: var(--accent, #ec5f9b);
  background: var(--accent-wash, #fce8f2);
}
body.theme-bubble .bottombar-search {
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--rule);
  border-radius: var(--radius-field, 13px);
  color: var(--ink);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
body.theme-bubble .bottombar-search::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
body.theme-bubble .bottombar-search:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}

/* ── Guidebook: Groups block — Bubble appearance ── */
body.theme-bubble .gb-groups .fc-cols {
  grid-template-columns: repeat(2, 1fr);
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 860px) {
  body.theme-bubble .gb-groups .fc-cols { grid-template-columns: 1fr; }
}
body.theme-bubble .gb-groups-field {
  border-radius: 0;
  background: transparent;
}
body.theme-bubble .gb-groups-field:focus {
  border-bottom-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 5%, transparent);
}
body.theme-bubble .gb-groups-textarea {
  border-radius: var(--radius-field, 13px);
  border: 1px solid var(--rule);
  padding: 8px 10px;
  background: var(--field-bg, var(--pg-well));
  transition: border-color 150ms, box-shadow 150ms;
}
body.theme-bubble .gb-groups-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}


/* ============================================================
   DARK MODE — merged from bubble-dark.css (Phase 3 retirement)
   ============================================================ */
/* Dark mode overrides for the Bubble theme (merged from bubble-dark.css, Phase 3).
   Scoped to body.theme-bubble.dark-mode — never bleeds into light mode.
   Source palette: mockups/dark-mode/bubble-dark.css
   DO NOT add display:none rules that exist in bubble.css (ghost override trap).

   Token strategy: the shared remap (css/tokens.css) lives on html.theme-* and
   maps raw --theme-* -> legacy aliases (--paper, --ink, --accent, …). A var()
   in that remap resolves against html, so overriding --theme-* on body would
   NOT recompute the legacy aliases. Therefore — matching the eclipse dark
   precedent (eclipse.css :is(.dark-mode) blocks set --paper directly) — this
   file overrides the LEGACY aliases and the Bubble design tokens directly with
   the mockup's dark values. Cascade order base.css -> bubble.css means these
   win without !important. */

body.theme-bubble.dark-mode {
  /* ---- legacy surface + ink + accent aliases (dark values) ---------------- */
  /* grounds — deep cool violet-charcoal, never pure black */
  --paper:       #100c1b;   /* page ground (theme-bg-base)      */
  --paper-soft:  #191425;   /* cards / inputs (theme-bg-surface) */
  --paper-warm:  #221b33;   /* hover / lilac highlight (theme-bg-raised) */

  /* neutral inks — cool lilac-white on violet-charcoal */
  --ink:        #ece8f8;   /* near-white lilac (theme-ink-neutral)   */
  --ink-soft:   #b7b0d2;   /* (theme-ink-mid-neutral)                */
  --ink-mute:   #8d86a6;   /* caps labels (theme-ink-muted-neutral)  */
  --ink-faint:  #615a7c;   /* placeholders (theme-ink-faint-neutral) */

  /* borders — faint violet hairlines */
  --rule:       #2c2640;   /* (theme-border-neutral)      */
  --rule-soft:  #241e34;   /* (theme-border-deep-neutral) */

  /* accent — Neon Candy ramp (Default tone dark, D-077; overridden per character) */
  /* pre-Neon-Candy dark accents (revert): --accent #f06ba6; --accent-soft #c98ab2; --accent-wash #2c1b27; --accent-deep #fba6cd; */
  --accent:       #ff86cf;   /* brand pop — hot pink-neon               */
  --accent-soft:  #a877ff;   /* violet-purple, reads on dark            */
  --accent-wash:  #2a1240;   /* deep purple-black fill                  */
  --accent-deep:  #9070ff;   /* contrast role — periwinkle (>=4.5:1 on wash) */

  /* ---- extras: shadows + success, deepened for floating glass over dark ---- */
  --shadow-soft:  0 1px 2px rgba(0,0,0,0.30), 0 10px 30px rgba(0,0,0,0.40);
  --shadow-card:  0 2px 6px rgba(0,0,0,0.35), 0 22px 48px rgba(0,0,0,0.52);
  --ok:       #43c895;   /* mint success, reads on dark */
  --ok-wash:  #16302a;

  /* ---- Bubble design tokens (dark re-skin) -------------------------------- */
  /* DARK iridescent ramp — the candy ramp rendered in shadow, for LARGE banner
     surfaces (forum categories, post headers) so they read as dark mode. */
  /* Luminous jewel ramp — periwinkle → violet → orchid → rose. Hue-distinct
     stops keep it reading as the candy gradient "at night" instead of the
     old muddy brown-violet blend. Light --pg-on-candy ink still passes. */
  --bub-grad-deep: linear-gradient(135deg, #3b4496 0%, #56399c 32%, #823c8c 66%, #9c4877 100%);
  /* ink for text that sits ON the light candy surfaces (banners, sent bubbles) */
  --ink-on-candy:      #3a2f52;
  --ink-on-candy-soft: #574b6e;
  --pink-on-candy:     #c0356f;
  /* frosted glass material — translucent violet so dark ground + glows bleed through */
  --glass-fill:   rgba(58,50,92,0.42);
  --glass-fill-2: rgba(58,50,92,0.30);
  --glass-stroke: rgba(214,206,247,0.16);
  /* extra dark-glass surface tints — former white literals route here */
  --glass-thin:   rgba(58,50,92,0.26);
  --glass-well:   rgba(40,34,64,0.55);
  --glass-shelf:  rgba(36,30,58,0.58);
  --glass-panel:  rgba(34,28,54,0.82);
  --glass-raise:  rgba(60,52,94,0.92);
  --ring-ground:  #16121f;   /* dark ring formerly #fff (separates chips/dots) */
  --track-dark:   #2a2440;   /* slider/timeline track base */
  /* the breath-fog gloss highlight — softened for dark glass (sheen, not blown-out) */
  --gloss: inset 0 1.5px 0 rgba(255,255,255,0.16), inset 1px 1px 2px rgba(255,255,255,0.07), inset -1px -1.5px 3px rgba(0,0,0,0.18);
  /* aero specular sweep — a faint diagonal gloss over dark glass (felt, not shouted) */
  --glass-aero: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 28%, rgba(255,255,255,0.01) 52%, rgba(255,255,255,0.02) 78%, rgba(150,130,200,0.06) 100%);

  /* SB-Graphs net-new tokens (Claude Design 2026-06-09) */
  --beat-exposition: #7ab6e8;
  --beat-inciting:   #b39af0;
  --beat-rising:     #f07fb0;
  --beat-climax:     #ff7b7f;
  --beat-falling:    #8a7fd6;  /* v1.44: was #f0aa5a amber → lavender (cool, no orange; owner may tweak) */
  --beat-resolution: #52c89c;
  --arc-actual:  #d2cbef;
  --arc-ideal:   #8073a8;
  --grid:        rgba(236,232,248,.08);
  --grid-strong: rgba(236,232,248,.15);
  --baseline:    #4b4468;
  --band-ink:    rgba(236,232,248,.45);
  --status-planned:  #5b5478;
  --status-written:  #f06ba6;
  --status-complete: #43c895;
  --ring: #16121f;
}

/* ─── GHOST OVERRIDE GUARD ──────────────────────────────────────────────────
   The following rules were present in bubble-dark.css mockups but MUST NOT
   be included here — they resurrect design elements deliberately removed
   from bubble.css (light theme). If you think you need these, check bubble.css first.

   EXCLUDED (already display:none in bubble.css — dark mode inherits this):
     .traits-block::before      — candy ribbon removed
     .ship-card::before         — candy ribbon removed
     .post-banner::after        — wave foot removed
     .cat-banner::after         — wave foot removed
     .comms--journal-eyebrow    — eyebrow removed
   ──────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   PORTED SAFE-OVERLAP RULES (Task 2)
   Only classes whose bubble.css rule carries a HARDCODED colour literal
   (#fff, rgba(255,255,255,…), a light gradient, or a light text-shadow) appear
   below. Every class that already paints from the alias tokens (--paper*,
   --ink*, --rule, --accent) inherits dark automatically via the token block
   above and is intentionally OMITTED. Each literal routes to a dark token
   defined in the block above — no new literals, no !important, all scoped.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Step 1 · App shell --------------------------------------------------- */
/* .app-topbar — light glass shelf + bright white inset glow -> dark glass +
   hairline border + dark drop shadow (no white glow) */
body.theme-bubble.dark-mode .app-topbar {
  background: var(--glass-shelf);
  border-bottom: 1px solid var(--glass-stroke);
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.50);
}

/* .topbar-weather — light white frosted gradient -> dark frosted glass fill */
body.theme-bubble.dark-mode .topbar-weather {
  background: var(--glass-fill);
}
/* temperature readout: --ink-faint vanishes on dark glass — lift one tier */
body.theme-bubble.dark-mode .topbar-weather-temp { color: var(--ink-mute); }
/* .np-art — bright white inset highlight + dark ink literal -> dark glass sheen + legible ink.
   Also swap the LIGHT candy ramp for the dark jewel ramp (was leaking light-mode pastels). */
body.theme-bubble.dark-mode .np-art {
  background: var(--bub-grad-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px -2px rgba(0,0,0,0.40);
  color: #cfc6e6;
}
/* .np-eq i — light lavender bottom stop (#b9a6e8) -> dark accent gradient */
body.theme-bubble.dark-mode .np-eq i {
  background: linear-gradient(var(--accent), var(--accent-soft));
}
/* .drawer — white gradient + white border/inset -> dark frosted panel */
body.theme-bubble.dark-mode .drawer {
  background:
    linear-gradient(160deg, rgba(58,50,92,0.30) 0%, rgba(58,50,92,0.0) 48%),
    var(--glass-panel);
  border-left: 1px solid var(--glass-stroke);
  box-shadow:
    -28px 0 64px -24px rgba(0,0,0,0.55),
    inset -1px 0 0 var(--glass-stroke);
}
/* .drawer-item:hover — white wash + white inset -> accent wash */
body.theme-bubble.dark-mode .drawer-item:hover {
  background: var(--accent-wash);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 10px rgba(0,0,0,0.30);
}
body.theme-bubble.dark-mode .drawer-item-danger:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* ---- Step 2 · Registry ---------------------------------------------------- */
/* .rfd-dock — white frosted footer -> dark glass shelf */
body.theme-bubble.dark-mode .rfd-dock {
  background: var(--glass-shelf);
  box-shadow: 0 -8px 30px -18px rgba(0,0,0,0.5);
}

/* ---- Step 3 · Profile / sidebar ------------------------------------------- */
/* .portrait-frame::after — bright white inner gloss -> softened sheen
   (real pseudo in light theme, NOT a ghost; only the white literal is dimmed) */
body.theme-bubble.dark-mode .portrait-frame::after {
  box-shadow: inset 0 2px 10px rgba(255,255,255,0.22), inset 0 -20px 40px -20px rgba(150,120,190,0.25);
}
/* .swatch — crisp white ring + light shadows -> dark ring + token shadows */
body.theme-bubble.dark-mode .swatch {
  border: 1.5px solid var(--glass-stroke);
  box-shadow: var(--shadow-soft);
}
body.theme-bubble.dark-mode .swatch.active {
  box-shadow: 0 0 0 2px var(--ring-ground), 0 0 0 4px var(--accent), var(--shadow-soft);
}
/* .ship-slider group — white pearl tick + white track ride */
body.theme-bubble.dark-mode .ship-slider-tick {
  background: #efe8f6;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 60%, #fff), var(--shadow-soft);
}
body.theme-bubble.dark-mode .ship-slider-pct-input {
  background: var(--glass-well);
}
/* .warn-callout — white frosted glass (#fff 0.72) + white inset glow -> dark glass fill */
body.theme-bubble.dark-mode .warn-callout {
  background: var(--glass-fill);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* v1.44: dark variant for the toast-host cards (light frosted lives in bubble.css). */
body.theme-bubble.dark-mode .toast-host .toast {
  background: rgba(40, 34, 64, 0.92);
  color: #fdf3f8;
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* .timeline-entry group — #fff dot ring + white title chip */
body.theme-bubble.dark-mode .timeline-dot {
  box-shadow: 0 0 0 4px var(--ring-ground), 0 2px 6px color-mix(in oklab, var(--accent) 40%, transparent);
}
body.theme-bubble.dark-mode .timeline-title {
  background: var(--glass-well);
}

/* ---- Step 4 · Forum / comms ----------------------------------------------- */
/* .cat-banner — light candy ramp -> dark candy ramp; per-card light tints ->
   dark tints; bright white specular highlight dimmed.
   ::after wave foot intentionally NOT added (ghost: display:none in bubble.css). */
body.theme-bubble.dark-mode .cat-banner { background: var(--bub-grad-deep); }
body.theme-bubble.dark-mode .category-list .cat-card:nth-child(4n+2) .cat-banner { background: linear-gradient(135deg, #43306a 0%, #6a3358 55%, #6e3a5a 100%); }
body.theme-bubble.dark-mode .category-list .cat-card:nth-child(4n+3) .cat-banner { background: linear-gradient(135deg, #5a2c4c 0%, #5e2f44 50%, #6e3858 100%); }
body.theme-bubble.dark-mode .category-list .cat-card:nth-child(4n+4) .cat-banner { background: linear-gradient(135deg, #2c3266 0%, #3c2d5c 50%, #4a2f54 100%); }
body.theme-bubble.dark-mode .cat-banner::before { background: radial-gradient(circle at 24% 26%, rgba(255,255,255,0.10) 0%, transparent 56%); }
/* banner text-shadows flip from white halo (legible on pastel) to dark halo (legible on dark ramp) */
body.theme-bubble.dark-mode .cat-banner-title { text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
body.theme-bubble.dark-mode .cat-banner-desc { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
/* .thread-row hover + teaser — white wash / white reveal gradient -> dark */
body.theme-bubble.dark-mode .thread-row:hover { background: rgba(255,255,255,0.05); }
body.theme-bubble.dark-mode .thread-row-teaser {
  background:
    linear-gradient(90deg, rgba(20,16,32,0.94) 0%, rgba(20,16,32,0.55) 32%, rgba(20,16,32,0.12) 60%, transparent 75%),
    var(--bub-grad-deep);
}
/* .post-banner — light candy ramp -> dark ramp; white specular dimmed.
   ::after wave foot intentionally NOT added (ghost: display:none in bubble.css). */
body.theme-bubble.dark-mode .post-banner { background: var(--bub-grad-deep); }
body.theme-bubble.dark-mode .post-banner::before { background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 60%); }
body.theme-bubble.dark-mode .banner-name { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
/* comms phone frames + letter paper — white frosted glass -> dark glass well */
body.theme-bubble.dark-mode .comms-template .comms--call-frame,
body.theme-bubble.dark-mode .comms-template .comms--message-frame {
  background: var(--glass-well);
}
body.theme-bubble.dark-mode .comms-template .comms--letter-paper {
  background: var(--glass-well);
}
/* .comms--journal-book — warm cream paper -> dark glass well.
   journal eyebrow intentionally NOT added (ghost). */
body.theme-bubble.dark-mode .comms-template .comms--journal-book {
  background: var(--glass-well);
}

/* ---- Step 5 · Primitives -------------------------------------------------- */
/* .btn-ghost — white wash -> thin dark glass */
body.theme-bubble.dark-mode .btn-ghost { background: var(--glass-thin); }
/* .field-input — white well + white focus fill -> dark wells */
body.theme-bubble.dark-mode .field-input { background: var(--glass-well); }
body.theme-bubble.dark-mode .field-input:focus-within { background: var(--glass-raise); }
/* .prose-input — white well + white focus fill -> dark wells */
body.theme-bubble.dark-mode textarea.prose-input { background: var(--glass-shelf); }
body.theme-bubble.dark-mode textarea.prose-input:focus { background: var(--glass-raise); }
/* .modal — flat white surface -> dark frosted panel */
body.theme-bubble.dark-mode .modal {
  background: var(--glass-panel);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}

/* ---- Step 6 · Admin ------------------------------------------------------- */
/* .admin-block-head — white wash header strip -> thin dark glass */
body.theme-bubble.dark-mode .admin-block-head { background: var(--glass-thin); }
/* ---- Step 7 · Network ----------------------------------------------------- */
/* .network-node frames — #fff separator rings -> dark ring ground */
body.theme-bubble.dark-mode .network-center-frame { box-shadow: 0 0 0 4px var(--ring-ground), var(--shadow-card); }
body.theme-bubble.dark-mode .network-node-frame { box-shadow: 0 0 0 3px var(--ring-ground), var(--shadow-soft); }
/* .network-line-icon — white glass chip + #fff ring -> dark glass + dark ring */
body.theme-bubble.dark-mode .network-line-icon {
  background: var(--glass-panel);
  box-shadow: 0 2px 8px rgba(0,0,0,0.30), 0 0 0 3px var(--ring-ground);
}
/* ---- Family Tree dark overrides ---- */
/* Connector and labels inherit from alias tokens — no raw literals needed. */
body.theme-bubble.dark-mode .family-tree-node-card--link:hover .network-node-frame,
body.theme-bubble.dark-mode .family-tree-node-card--edit:hover .network-node-frame {
  box-shadow: 0 0 0 3px var(--ring-ground), var(--shadow-card);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NET-NEW DARK COVERAGE FOR POST-MOCKUP FEATURES (Task 3)
   Audit result: the drawer, user directory, ad board, and first-run wizard all
   paint entirely from the alias tokens (--paper*, --ink*, --rule, --accent*),
   so they inherit dark automatically from the token block above and are
   intentionally OMITTED — no redundant rules. Only the two classes carrying a
   hardcoded light colour literal (the amber error toast) and the one class with
   NO existing rule (resolved-report muting) are added below. All scoped, no
   !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* .global-error-toast — light amber paper (#fdf0d5 / #e8c97a / #5a3e10) -> dark
   amber-tinted glass so the warning still reads warm on the violet ground. */
body.theme-bubble.dark-mode .global-error-toast {
  background: #2e2415;
  border-color: #5a4620;
  color: #f0d9a4;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
}
body.theme-bubble.dark-mode .toast-dismiss { color: #c9a766; }

/* .error-boundary-box pre — bubble.css gives the stack-trace well a hardcoded
   rgba(255,255,255,0.5) (bright on dark) -> dark glass well. */
body.theme-bubble.dark-mode .error-boundary-box pre { background: var(--glass-well); }

/* .adm-report--resolved — no rule exists in any theme; mute resolved reports in
   dark mode per plan (opacity is theme-neutral but only wanted in dark scope). */
body.theme-bubble.dark-mode .adm-report--resolved { opacity: 0.6; }

/* ─── NOTEBOOK ──────────────────────────────────────────────────────────────
   Audit: classes already painting from alias tokens (--paper*, --ink*, --rule,
   --accent, --glass-fill, --glass-stroke, --gloss, --shadow-soft) are OMITTED —
   they auto-inherit dark from the token block above.
   Rules below cover ONLY classes with hardcoded white/light literals.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Notebook design tokens (dark re-skin) ─────────────────────────────── */
/* --notebook-icon-tint: light muted purple -> brighter lilac for dark legibility.
   --notebook-sticky-tint: lilac-white bottom gradient -> dark muted violet.
   --notebook-vig: sprint vignette RGB -> slightly warmer/deeper plum for dark. */
body.theme-bubble.dark-mode {
  --notebook-icon-tint:   #9b94bf;
  --notebook-sticky-tint: #2a2345;
  --notebook-vig:         100,80,160;
}

/* ── Paper panel ────────────────────────────────────────────────────────── */
/* .notebook-panel — bright bottom-edge shadow (rgba(255,255,255,0.9)) -> dark glass */
body.theme-bubble.dark-mode .notebook-panel {
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Side panel / rail ──────────────────────────────────────────────────── */
/* .notebook-sidepanel / .notebook-side-rail — rgba(255,255,255,0.28) white frosted -> dark glass */
body.theme-bubble.dark-mode .notebook-sidepanel {
  background: var(--glass-thin);
}
body.theme-bubble.dark-mode .notebook-side-rail {
  background: var(--glass-thin);
}

/* .notebook-sp-add — rgba(255,255,255,0.6) white -> dark glass well */
body.theme-bubble.dark-mode .notebook-sp-add {
  background: var(--glass-well);
}
/* .notebook-sp-hide:hover — rgba(255,255,255,0.5) white -> subtle dark wash */
body.theme-bubble.dark-mode .notebook-sp-hide:hover {
  background: var(--glass-well);
}

/* .notebook-sticky-empty — rgba(255,255,255,0.4/0.6) white -> dark glass */
body.theme-bubble.dark-mode .notebook-sticky-empty {
  background: var(--glass-thin);
}
body.theme-bubble.dark-mode .notebook-sticky-empty:hover {
  background: var(--glass-well);
}

/* .notebook-sticky__del — rgba(255,255,255,0.7) white ghost -> dark glass well */
body.theme-bubble.dark-mode .notebook-sticky__del {
  background: var(--glass-well);
}

/* P10: tab strip + kind-toggle frosted white -> dark glass */
body.theme-bubble.dark-mode .notebook-sp-tabs { background: var(--glass-thin); }
body.theme-bubble.dark-mode .notebook-sp-tab:hover,
body.theme-bubble.dark-mode .notebook-sp-tab--active { background: var(--glass-well); }
body.theme-bubble.dark-mode .notebook-source__kindbtn:hover { background: var(--glass-well); }

/* ── Dock bar ───────────────────────────────────────────────────────────── */
/* .notebook-dockbar — rgba(255,255,255,0.5) frosted white + bright inset -> dark glass shelf */
body.theme-bubble.dark-mode .notebook-dockbar {
  background: var(--glass-shelf);
  box-shadow: 0 -8px 30px -18px rgba(0,0,0,0.5),
              inset 0 1px 0 rgba(255,255,255,0.08);
}

/* .notebook-dock-btn:hover — rgba(255,255,255,0.65) white wash -> dark glass well */
body.theme-bubble.dark-mode .notebook-dock-btn:hover:not(:disabled) {
  background: var(--glass-well);
}
/* .notebook-dock-btn--active hover: keep accent-deep fill in dark mode */
body.theme-bubble.dark-mode .notebook-dock-btn--active:hover:not(:disabled) {
  background: var(--accent-deep, #cc3b7c);
  color: var(--paper, #fff);
}

/* ── Dock menus ─────────────────────────────────────────────────────────── */
/* .notebook-dock-menu — rgba(255,255,255,0.97) opaque white (by design: parent
   backdrop-filter clips child blur, so this must be opaque) -> dark opaque panel */
body.theme-bubble.dark-mode .notebook-dock-menu {
  background: var(--glass-raise);
}
/* .notebook-dock-menu__arrow — same opaque white as the menu -> dark panel match */
body.theme-bubble.dark-mode .notebook-dock-menu__arrow {
  background: var(--glass-raise);
}
/* .dir-pill-popover__arrow — hardcoded rgba(255,255,255,0.97) white triangle -> dark panel match */
body.theme-bubble.dark-mode .dir-pill-popover__arrow { background: var(--glass-raise); }

/* .notebook-size-btn — rgba(255,255,255,0.6) white -> dark glass well */
body.theme-bubble.dark-mode .notebook-size-btn {
  background: var(--glass-well);
}

/* .notebook-focus-hint kbd — rgba(255,255,255,0.6) white pill -> dark glass well */
body.theme-bubble.dark-mode .notebook-focus-hint kbd {
  background: var(--glass-well);
}

/* ── Goal popover ───────────────────────────────────────────────────────── */
/* .notebook-goal-chip — rgba(255,255,255,0.45) white -> dark glass thin */
body.theme-bubble.dark-mode .notebook-goal-chip {
  background: var(--glass-thin);
}

/* .notebook-goal-field — rgba(255,255,255,0.5) white -> dark glass well */
body.theme-bubble.dark-mode .notebook-goal-field {
  background: var(--glass-well);
}

/* .notebook-gf-step:hover — rgba(255,255,255,0.7) white -> dark glass panel */
body.theme-bubble.dark-mode .notebook-gf-step:hover {
  background: var(--glass-panel);
}

/* .notebook-goal-btn--ghost — rgba(255,255,255,0.32) white -> dark glass thin */
body.theme-bubble.dark-mode .notebook-goal-btn--ghost {
  background: var(--glass-thin);
}

/* .notebook-goal-bar-wrap — rgba(174,184,240,0.3) hardcoded periwinkle track ->
   dark faint violet track so fill gradient still pops */
body.theme-bubble.dark-mode .notebook-goal-bar-wrap {
  background: rgba(80,70,130,0.35);
}

/* .notebook-goal-bar — hardcoded rgba gradient track -> dark faint violet */
body.theme-bubble.dark-mode .notebook-goal-bar {
  background: linear-gradient(90deg,
    rgba(80,90,160,0.30) 0%,
    rgba(100,80,150,0.30) 45%,
    rgba(140,80,120,0.30) 100%
  );
}

/* ── Toggle switch ──────────────────────────────────────────────────────── */
/* dark-mode thumb: #fff → ring-ground (near-black chip separator) */
body.theme-bubble.dark-mode .toggle-switch::after {
  background: #d6d0ee;
}
/* .notebook-switch::after — alias rule kept alongside the shared class */
body.theme-bubble.dark-mode .notebook-switch::after {
  background: #d6d0ee;
}

/* ── Sound vol thumb ────────────────────────────────────────────────────── */
/* slider thumb border is #fff -> dark ring ground */
body.theme-bubble.dark-mode .notebook-sound-vol::-webkit-slider-thumb {
  border-color: var(--ring-ground);
}
body.theme-bubble.dark-mode .notebook-sound-vol::-moz-range-thumb {
  border-color: var(--ring-ground);
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */
/* .notebook-toast — rgba(255,255,255,0.82) white frosted glass -> dark glass panel */
body.theme-bubble.dark-mode .notebook-toast {
  background: var(--glass-panel);
  box-shadow: 0 14px 40px -14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* .notebook-toast__ico default color: #6a72c8 (light periwinkle) ->
   brighter lilac so it reads against dark glass */
body.theme-bubble.dark-mode .notebook-toast__ico {
  color: #9fa6e8;
}
/* .notebook-toast__close — rgba(255,255,255,0.32) white ghost -> dark glass thin */
body.theme-bubble.dark-mode .notebook-toast__close {
  background: var(--glass-thin);
}

/* ── Sitewide toasts (.toast / ToastHost) — dark variants mirror notebook ── */
/* .toast — rgba(255,255,255,0.82) white frosted glass -> dark glass panel */
body.theme-bubble.dark-mode .toast {
  background: var(--glass-panel);
  box-shadow: 0 14px 40px -14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* .toast__ico default color: #6a72c8 -> brighter lilac on dark glass */
body.theme-bubble.dark-mode .toast__ico {
  color: #9fa6e8;
}
/* .toast__close — white ghost -> dark glass thin */
body.theme-bubble.dark-mode .toast__close {
  background: var(--glass-thin);
}

/* ── Pomo tomato button ─────────────────────────────────────────────────── */
/* .notebook-pomo-tomato — rgba(255,255,255,0.6) white -> dark glass well */
body.theme-bubble.dark-mode .notebook-pomo-tomato {
  background: var(--glass-well);
}

/* ── Dark mode toggle bubble ───────────────────────────────────────────── */
body.theme-bubble.dark-mode .dark-mode-toggle { background: var(--paper-soft); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
body.theme-bubble.dark-mode .dark-mode-toggle:hover { background: var(--paper-warm); }

/* N6: bottom-bar toggle buttons (dark variant) */
body.theme-bubble.dark-mode .bottombar-toggle-btn { color: var(--ink); }
body.theme-bubble.dark-mode .bottombar-toggle-btn:hover { background: var(--paper-soft); }

body.theme-bubble.dark-mode {
  /* luminous jewel glows — brighter, hue-separated periwinkle / rose / violet
     so the ambient field reads as candy-at-night rather than muddy brown */
  background:
    radial-gradient(1150px 760px at 8% -10%,  rgba(101,94,201,0.50), transparent 60%),
    radial-gradient(1000px 720px at 102% -4%, rgba(186,76,142,0.40), transparent 56%),
    radial-gradient(1100px 900px at 48% 118%, rgba(124,72,178,0.42), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

/* the ambient glow lives on a fixed layer so it stays put while content scrolls.
   Base layer props (position/inset/z-index/opacity) come from body.theme-bubble::before
   in bubble.css; this only re-tints the glow for dark. Mirrors the light ::before's
   two-glow layout (lilac at 78%/16%, rose at 20%/82%) in the dark violet/rose family. */
body.theme-bubble.dark-mode::before {
  background:
    radial-gradient(680px 520px at 78% 16%, rgba(118,100,205,0.36), transparent 62%),
    radial-gradient(560px 460px at 20% 82%, rgba(176,82,138,0.30), transparent 64%);
}

/* PAGE TOKENS — dark overrides for --pg-* */
body.theme-bubble.dark-mode {
  --pg-grad:    var(--bub-grad-deep);
  --pg-grad-2:  var(--bub-grad-deep);
  --pg-on-candy: #efe9fb;
  --pg-on-candy-soft: #c7bfe0;
  --pg-well:    var(--glass-well);
  --pg-rail:    var(--glass-thin);
}

/* dark override for the wave-header radial shine */
body.dark-mode .wave-header::before { background: radial-gradient(circle at 22% 24%, rgba(255,255,255,0.10) 0%, transparent 56%); }

/* Directory — dark avatar initial disc */
body.dark-mode .dir-avatar span { background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e); color: #cfc6e6; }

/* Ad Board — dark avatar initial disc */
body.dark-mode .adb-foot-av span { background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e); color: #cfc6e6; }

/* ═══════════════════════════════════════════════════════════════════════════
   TASK 9b (P2) — DARK CONTENT GRADIENTS PASS
   Four surface groups: char-cards + initials; char-card-new; global timeline;
   dir-card / stat-hero / fc-claim-face. Token literals only; no !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Item 1a · Registry + profile char-card image area ────────────────────
   .char-card-image — background-image uses --bub-grad (light pastel orange
   candy ramp) -> dark violet gradient (--bub-grad-deep). Shows through the
   wave-mask when no portrait photo is present. */
body.theme-bubble.dark-mode .char-card-image {
  background-image: var(--bub-grad-deep);
}

/* ── Item 1b · Character initials avatar (no-portrait fallback) ───────────
   .char-card-placeholder — light rule: color rgba(54,48,78,0.42) (dark violet
   ink, near-invisible on dark surface) + background consumes --char-soft-grad custom
   property (set per-card by registry.js via inline style as a full gradient string)
   falling back to var(--bub-grad-2). This dark rule wins because the inline style
   only sets --char-soft-grad (a CSS property), not background, so specificity is no
   obstacle. */
body.theme-bubble.dark-mode .char-card-placeholder {
  color: var(--ink-soft);
  /* Phase-17 tone fix: use the per-card gradient (registry sets --char-soft-grad
     from the resolved DARK tone soft) so dark cards vary by tone instead of all
     showing --bub-grad-deep. Fallback to the deep ramp when no per-card var. */
  background: var(--char-soft-grad, var(--bub-grad-deep));
}

/* ── Item 2 · "Write someone new" add-character card ─────────────────────
   .char-card-new — light rule: background rgba(255,255,255,0.32) (grey-white
   wash looks weirdly pale on dark ground) -> thin dark glass. Hover already
   falls back to var(--glass-fill) which inherits dark correctly. */
body.theme-bubble.dark-mode .char-card-new {
  background: var(--glass-thin);
}

/* ── Item 3 · Global timeline (standalone page, .tlx-*) ──────────────────
   Three literal-carrying rules in bubble.css: */

/* .tlx-thread — gradient bottom stop #ece7f6 (light lavender) -> dark.
   Keep same gradient structure; swap bottom stop to a dark token. */
body.theme-bubble.dark-mode .tlx-thread {
  background: linear-gradient(to bottom, var(--accent-soft), var(--track-dark));
}

/* .tlx-node — box-shadow 0 0 0 3px accent-soft (light halo ring) -> ring-ground.
   background var(--glass-fill) in both modes; only the box-shadow halo ring and border differ.
   .tlx-node-initial — color rgba(54,48,78,0.55) (dark ink, invisible on dark) -> ink-soft. */
body.theme-bubble.dark-mode .tlx-node {
  background: var(--glass-fill);
  box-shadow: 0 0 0 4px var(--ring-ground), var(--shadow-soft);
}
body.theme-bubble.dark-mode .tlx-node-initial {
  color: var(--ink-soft);
}

/* .tlx-title + .tlx-desc — background rgba(255,255,255,0.86) (opaque white
   bubble, glaring on dark) -> dark glass well. */
body.theme-bubble.dark-mode .tlx-title {
  background: var(--glass-well);
}
body.theme-bubble.dark-mode .tlx-desc {
  background: var(--glass-well);
}

/* ── Item 4a · Directory card banner ─────────────────────────────────────
   .dir-card-banner uses --pg-grad, which is already remapped to --bub-grad-deep
   in dark via the PAGE TOKENS block above. Token-painted — NO override needed. */

/* ── Item 4b · Profile / admin stat-hero cards ───────────────────────────
   .stat-hero — background var(--pg-grad-2), already remapped to --bub-grad-deep
   in the PAGE TOKENS block. Token-painted — NO override needed. */

/* ── Item 4c · Faceclaims — .fc-claim-face dark counterpart of P7 fix ────
   Light rule (post P7): gradient from transparent -> var(--pg-well) over
   var(--pg-grad-2). In dark, --pg-grad-2 resolves to --bub-grad-deep and
   --pg-well resolves to --glass-well (both via PAGE TOKEN block above), so
   the gradient layers already read correctly. Token-painted — NO override
   needed. Confirmed: P7 pattern mirrors correctly through the token remap. */

/* ── Item 4d · dir-avatar span ───────────────────────────────────────────
   Already covered above (body.dark-mode .dir-avatar span). Scoped correctly. */

/* ── N3: bottom-bar Bubble dark-mode override ────────────────────────────── */
body.dark-mode.theme-bubble .bottombar {
  background: rgba(30,24,48,0.80);
  border-top-color: var(--glass-stroke, rgba(255,255,255,0.10));
  box-shadow: 0 -4px 20px -8px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode.theme-bubble .bottombar-search {
  background: rgba(255,255,255,0.07);
  border-color: var(--rule);
  color: var(--ink);
}
body.dark-mode.theme-bubble .bottombar-search::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
body.dark-mode.theme-bubble .bottombar-search:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}

/* ── N7: EditDock dark glass ─────────────────────────────────────────────── */
body.dark-mode.theme-bubble .editdock {
  background: var(--glass-panel);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-card), var(--gloss);
}

/* ── v1.44 polish: kill warm leaks + dark form fields ───────────────────────
   Addresses peach/amber/orange surfaces that lack dark overrides in dark mode.
   NOTE: .global-error-toast warm amber tones are intentional (error/warning
   semantics) and are NOT changed here.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. PLACEHOLDER PEACH LEAKS — inherit light --bub-grad-2 (peach); override
      with orange-free deep gradient.
      .portrait-placeholder uses !important to match the light-mode rule
      (bubble.css: `background: var(--bub-grad-2) !important`). */
body.theme-bubble.dark-mode .portrait-placeholder { background: var(--portrait-soft-grad, var(--bub-grad-deep)) !important; }
body.theme-bubble.dark-mode .gallery-thumb.empty { background: var(--bub-grad-deep); }
body.theme-bubble.dark-mode .network-photo-placeholder { background: var(--bub-grad-deep); }
body.theme-bubble.dark-mode .ship-photo-placeholder { background: var(--bub-grad-deep); }

/* 2. CONNECTION PORTRAIT RIM — light uses --bub-rim which ends in peach #fdd9c4.
      Replace with periwinkle→violet→orchid gradient (no peach/orange).
      White ring (#fff) swapped for --paper (#100c1b, dark near-black in dark mode). */
body.theme-bubble.dark-mode .connection-portrait {
  background: linear-gradient(135deg, #5b6bd6 0%, #9a6bd6 50%, #c77fb0 100%);
  box-shadow: 0 0 0 3px var(--paper), var(--shadow-soft);
}

/* 3. DARK FORM FIELDS — bright rgba(255,255,255,0.6/0.7) fills with no dark override.
      Match the existing .field-input dark rule (glass-well).
      Classes confirmed via grep:
        - .connection-url-input: connection portrait URL field (no separate link-input
          class found; JS uses only connection-url-input for both URL and link inputs)
        - .quickstat-select: group dropdown on profile edit
        - .timeline-date-input / .timeline-title-input: timeline event editor
        - .dev-ctrl: development block controls
      Storyboard inputs (.sb-input etc.) already have dark overrides in storyboard.css.
      Plotting/wanted-ad inputs use .field-input (covered by existing dark rule). */
body.theme-bubble.dark-mode .quickstat-select { background: var(--glass-well); }
body.theme-bubble.dark-mode .connection-url-input { background: var(--glass-well); }
body.theme-bubble.dark-mode .timeline-date-input,
body.theme-bubble.dark-mode .timeline-title-input { background: var(--glass-well); }
body.theme-bubble.dark-mode .dev-ctrl { background: var(--glass-well); }

/* 4. --beat-falling recolored: see token block above (was amber #f0aa5a, now
      lavender #8a7fd6). No selector change needed here — token update suffices. */

/* ── Stage 3: Notebook tokens — migrated from base.css (I-034/Phase 3 retirement).
   Bubble theme values used directly since Bubble is the only shipped theme.
   Kept at :root so they're always available without a theme-class guard
   (notebook is Bubble-only). ─────────────────────────────────────────── */
:root {
  --notebook-icon-tint:   #635c7e; /* dock / panel icon colour */
  --notebook-sticky-tint: #efe9f9; /* default sticky gradient bottom (lilac) */
  --notebook-vig:         150,120,190; /* sprint vignette RGB (Bubble plum) */
}

/* ════════════════════════════════════════════════════════════════════════════
   SEARCH PAGE — visual restyle (Phase 14)
   Source: mockups/Page Updates/design_handoff_search_compose/css/search.redesign.css
   Sections ported: §1 (measure), §2 (hero field), §3 (result rows + avatars +
   per-type tints), §4 (section heads), §5 (prompt/empty states), §6 (rail icons
   + count badges), §7 (entrance). All sections now ported.
   Scoped under body.theme-bubble so specificity (0,2,1) beats the plain-class
   (0,1,0) pages.css rules that this supersedes — no pages.css edit needed.
   The now-superseded pages.css search block is left for the Phase-16 CSS sweep.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── §1 · Page measure ───────────────────────────────────────────────────── */
body.theme-bubble .search-sheet { max-width: 768px; }
body.theme-bubble .search-sheet .fc-banner-head { padding: 38px 44px 56px; }

/* ── §2 · Search field — hero ────────────────────────────────────────────── */
body.theme-bubble .search-input-subhead { margin: 18px 0 10px; }
body.theme-bubble .search-input-subhead h2 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
}

body.theme-bubble .search-input-wrap {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 4px 8px 4px 18px;
  border-radius: 999px;
  background: var(--pg-well, rgba(255,255,255,0.62));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-soft), var(--gloss);
  margin: 0 40px 6px;
  transition: border-color 200ms ease, box-shadow 220ms ease, background 200ms ease;
}
body.theme-bubble .search-input-wrap:focus-within {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--paper-soft) 70%, transparent);
  box-shadow: 0 0 0 4px var(--accent-wash), var(--shadow-card), var(--gloss);
}
body.theme-bubble .search-input-icon {
  font-size: 19px; flex: 0 0 auto;
  color: var(--accent-deep);
  transition: transform 220ms cubic-bezier(.2,.9,.3,1.3);
}
body.theme-bubble .search-input-wrap:focus-within .search-input-icon { transform: scale(1.08); }
body.theme-bubble .search-input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  padding: 13px 0;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
}
body.theme-bubble .search-input::placeholder { color: var(--ink-faint); font-style: italic; }
body.theme-bubble .search-input-clear {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-mute); font-size: 14px; cursor: pointer;
  transition: color 150ms ease, background 150ms ease, transform 200ms cubic-bezier(.2,.9,.3,1.3);
}
body.theme-bubble .search-input-clear:hover {
  color: var(--accent-deep);
  background: var(--accent-wash);
  transform: rotate(90deg);
}

/* ── §3 · Result rows — candy-glass, tactile, type-aware ────────────────── */
/* One shared 40px content gutter: input, heads, rows, and notes share one left edge. */
body.theme-bubble .search-results-body { padding: 6px 40px 36px; }
body.theme-bubble .search-results-body .fc-sub-head { padding-left: 0; padding-right: 0; }

body.theme-bubble .search-result-row {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px 14px 12px 16px;
  margin-bottom: 8px; border-radius: var(--radius-card);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-soft);
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer; overflow: hidden;
  transition: transform 200ms cubic-bezier(.2,.8,.3,1.1),
              box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
}
body.theme-bubble .search-result-row:hover,
body.theme-bubble .search-result-row:focus-visible {
  transform: translateY(-2px);
  outline: none;
  background: color-mix(in oklab, var(--paper-soft) 30%, var(--glass-fill));
  box-shadow: var(--shadow-card), var(--gloss);
  border-color: color-mix(in oklab, var(--accent) 36%, var(--glass-stroke));
}

/* avatar — characters & members: iridescent rim with soft inner disc */
body.theme-bubble .srr-avatar {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 50%; padding: 2.5px;
  background: var(--bub-rim);
  box-shadow: var(--shadow-soft);
  display: grid; place-items: center; overflow: visible;
  border: none;
}
body.theme-bubble .srr-avatar > img,
body.theme-bubble .srr-avatar > span {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
}
body.theme-bubble .srr-avatar > span {
  background: radial-gradient(circle at 38% 30%, #ffffff 0%, #f4ecfb 62%, #ecdff4 100%);
  color: var(--accent-deep);
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 17px;
}
body.theme-bubble.dark-mode .srr-avatar > span {
  background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e);
  color: var(--accent-deep);
}
/* avatar — icon kinds (ad / thread / post / message): frosted candy disc */
body.theme-bubble .srr-avatar.srr-avatar-icon {
  padding: 0; background: var(--accent-wash);
  color: var(--accent-deep); font-size: 18px;
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--glass-stroke));
  box-shadow: var(--gloss);
}

body.theme-bubble .srr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.theme-bubble .srr-name {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.theme-bubble .srr-meta {
  font-family: var(--font-body); font-size: 12px; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* post / message snippets wrap to two lines */
body.theme-bubble .search-result-post-snippet {
  white-space: normal; line-height: 1.45; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* affordance chip — fills with candy + drifts right on hover */
body.theme-bubble .srr-go {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pg-well); border: 1px solid var(--glass-stroke);
  color: var(--accent-deep); font-size: 13px;
  transition: transform 220ms cubic-bezier(.2,.9,.3,1.3), background 200ms ease,
              color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
body.theme-bubble .search-result-row:hover .srr-go,
body.theme-bubble .search-result-row:focus-visible .srr-go {
  transform: translateX(3px);
  background: linear-gradient(135deg, #f48bbb, var(--accent));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 14px -6px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* Per-type colour coding — activated when search.js stamps data-type on .search-result-row.
   Degrades gracefully: rows without data-type use the accent-wash disc above. */
body.theme-bubble .search-result-row[data-type="ad"]      .srr-avatar-icon { background: #e8ecfb; color: #5a6cc4; border-color: color-mix(in oklab,#5a6cc4 26%, var(--glass-stroke)); }
body.theme-bubble .search-result-row[data-type="thread"]  .srr-avatar-icon { background: #f4e7f7; color: #9a55b0; border-color: color-mix(in oklab,#9a55b0 26%, var(--glass-stroke)); }
body.theme-bubble .search-result-row[data-type="post"]    .srr-avatar-icon { background: #fbe7ef; color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 26%, var(--glass-stroke)); }
body.theme-bubble .search-result-row[data-type="message"] .srr-avatar-icon { background: #fdeede; color: #c07a32; border-color: color-mix(in oklab,#c07a32 26%, var(--glass-stroke)); }
body.theme-bubble.dark-mode .search-result-row[data-type="ad"]      .srr-avatar-icon { background: rgba(90,108,196,0.22);  color: #aab6f4; }
body.theme-bubble.dark-mode .search-result-row[data-type="thread"]  .srr-avatar-icon { background: rgba(154,85,176,0.22);  color: #e0a6f0; }
body.theme-bubble.dark-mode .search-result-row[data-type="post"]    .srr-avatar-icon { background: var(--accent-wash);     color: var(--accent-deep); }
body.theme-bubble.dark-mode .search-result-row[data-type="message"] .srr-avatar-icon { background: rgba(192,122,50,0.20);  color: #f0c089; }

/* ── §4 · Section heads ──────────────────────────────────────────────────── */
body.theme-bubble .search-results-body .fc-sub-head { margin: 26px 0 14px; }
body.theme-bubble .search-results-body > .fc-sub-head:first-child { margin-top: 10px; }

/* ── §5 · Prompt + empty states ─────────────────────────────────────────── */
/* Top-level prompt (direct child of the sheet, shown before any query) */
body.theme-bubble .search-sheet > .search-empty-note {
  position: relative;
  text-align: center;
  max-width: 42ch; margin: 14px auto 30px; padding: 30px 24px;
  font-family: var(--font-display); font-style: italic; font-size: 18px;
  color: var(--ink-mute); line-height: 1.55;
}
/* in-results "no matches" notes: compact + quiet */
body.theme-bubble .search-results-body .search-empty-note {
  font-family: var(--font-display); font-style: italic; font-size: 14.5px;
  color: var(--ink-faint); padding: 4px 2px 14px; margin: 0;
}

/* ── §6 · Category rail — icons + count badges ───────────────────────────── */
body.theme-bubble .search-gbx-layout .gbx-nav-head { margin-bottom: 2px; }
body.theme-bubble .search-gbx-layout .gbx-navitem {
  display: flex; align-items: center; gap: 10px;
}
body.theme-bubble .search-gbx-layout .gbx-navitem .gbx-ic {
  font-size: 16px; width: 18px; text-align: center;
  color: var(--ink-faint); flex: 0 0 auto;
  transition: color 150ms ease;
}
body.theme-bubble .search-gbx-layout .gbx-navitem:hover .gbx-ic { color: var(--ink-soft); }
body.theme-bubble .search-gbx-layout .gbx-navitem.active .gbx-ic { color: var(--accent); }
body.theme-bubble .search-gbx-layout .gbx-navitem .ct {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em;
  color: var(--ink-mute); background: var(--pg-well);
  border: 1px solid var(--glass-stroke); border-radius: 999px;
  padding: 2px 9px; min-width: 22px; text-align: center;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
body.theme-bubble .search-gbx-layout .gbx-navitem.active .ct {
  color: var(--accent-deep); background: var(--accent-wash);
  border-color: var(--accent-soft);
}
body.theme-bubble .search-gbx-layout .gbx-navitem .ct.is-zero { opacity: 0.45; }

/* ── §7 · Entrance — rows ease up (transform-only, never leaves a row hidden) */
@media (prefers-reduced-motion: no-preference) {
  body.theme-bubble .search-results-body .search-result-row { animation: srRowIn 440ms cubic-bezier(.2,.8,.3,1) both; }
  body.theme-bubble .search-results-body .search-result-row:nth-child(2) { animation-delay: 30ms; }
  body.theme-bubble .search-results-body .search-result-row:nth-child(3) { animation-delay: 60ms; }
  body.theme-bubble .search-results-body .search-result-row:nth-child(4) { animation-delay: 90ms; }
  body.theme-bubble .search-results-body .search-result-row:nth-child(n+5) { animation-delay: 120ms; }
}
@keyframes srRowIn {
  from { transform: translateY(9px); }
  to   { transform: translateY(0); }
}

/* ============================================================================
   PHASE 15 · THREAD COMPOSE (studio) + COMMS TEMPLATES — Bubble restyle
   Port of mockups/Page Updates/design_handoff_search_compose/css/studio.redesign.css
   (all except .studio-cw — deferred to CW slice) and comms.redesign.css §2–§3.
   All rules scoped to body.theme-bubble (or body.theme-bubble.dark-mode).
   Load order: after studio.css in index.html (these append to bubble.css which
   loads before studio.css; specificity via body.theme-bubble prefix wins).
   ============================================================================ */

/* ── §1 · Width behaviour — glide transition ─────────────────────────────── */
/* studio.css .studio = (0,1,0) → body.theme-bubble .studio = (0,2,0) wins */
body.theme-bubble .studio {
  transition: max-width 320ms cubic-bezier(.2,.8,.3,1), width 320ms cubic-bezier(.2,.8,.3,1);
}
/* studio.css .studio:not(.studio--wide) .studio-cols = (0,2,0)
   → body.theme-bubble .studio:not(.studio--wide) .studio-cols = (0,3,0) wins */
body.theme-bubble .studio:not(.studio--wide) .studio-cols .studio-editor-pane .editor {
  max-width: 640px;
}

/* ── §2 · Metadata block (top controls) ──────────────────────────────────── */
/* studio.css .studio-top-controls = (0,1,0) → (0,2,0) wins */
body.theme-bubble .studio-top-controls { padding-top: 4px; padding-bottom: 30px; }
body.theme-bubble .studio-top-controls .editor { gap: 20px; }
body.theme-bubble .studio-divider {
  height: 1px; border: none; margin: 8px 0 4px;
  background: linear-gradient(to right,
    var(--accent-soft), color-mix(in oklab, var(--accent) 12%, var(--rule)) 45%, transparent);
}
body.theme-bubble .studio-subhead {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 18px; color: var(--ink); margin: 6px 0 0;
  display: flex; align-items: center; gap: 9px;
}
/* ── §3 · Pane heads ─────────────────────────────────────────────────────── */
body.theme-bubble .studio-pane-head { margin-bottom: 20px; gap: 11px; }
body.theme-bubble .studio-pane-head .label-dot {
  width: 8px; height: 8px;
  background: var(--bub-bar); box-shadow: var(--gloss);
}
body.theme-bubble .studio-pane-label { color: var(--ink-mute); letter-spacing: 0.2em; }
body.theme-bubble .studio-pane-hint {
  font-family: var(--font-display); font-style: italic; font-size: 14px;
  color: var(--ink-faint); margin-left: 12px;
}
body.theme-bubble .studio-preview-toggle {
  margin-left: auto;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 7px 14px;
}
body.theme-bubble .studio-preview-toggle::before {
  content: "\2194"; margin-right: 7px; font-weight: 700;
  color: var(--accent-deep); opacity: 0.85;
}

/* ── §4 · Editor column — frosted fields + focus rings ───────────────────── */
/* studio.redesign selectors: .studio .editor .field-input = (0,3,0)
   → body.theme-bubble .studio .editor .field-input = (0,4,0) wins;
   bubble.css already rounds fields via body.theme-bubble .field-input (0,2,1),
   these deepen the frosted-well + focus affordance. */
body.theme-bubble .studio .editor .field-input,
body.theme-bubble .studio .editor .field-textarea,
body.theme-bubble .studio .editor .field-select,
body.theme-bubble .studio .char-picker-trigger {
  background: var(--pg-well, rgba(255,255,255,0.6));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-color: var(--glass-stroke);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 200ms ease;
}
body.theme-bubble .studio .editor .field-input:focus,
body.theme-bubble .studio .editor .field-textarea:focus,
body.theme-bubble .studio .editor .field-select:focus,
body.theme-bubble .studio .char-picker-trigger:focus-visible,
body.theme-bubble .studio .char-picker-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--paper-soft) 80%, transparent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
body.theme-bubble .studio .editor .field-textarea { min-height: 300px; line-height: 1.8; }
body.theme-bubble .studio:not(.studio--wide) .editor .field-textarea { min-height: 360px; }

/* S4: message-bubble text input is a short 2-line field, not the full prose surface */
body.theme-bubble .studio .editor .field-textarea.comms-bubble-text {        /* 0,5,1 > 0,4,1 */
  min-height: 4em;
  height: auto;
  resize: vertical;
  line-height: 1.6;
}
body.theme-bubble .studio:not(.studio--wide) .editor .field-textarea.comms-bubble-text {  /* 0,6,1 > 0,5,1 */
  min-height: 4em;
}

/* ── §5 · Live preview stage ─────────────────────────────────────────────── */
/* studio.css .studio-stage = (0,1,0) → body.theme-bubble .studio-stage = (0,2,0) wins */
body.theme-bubble .studio-stage {
  border-radius: var(--radius-card);
  padding: 28px;
  border: 1px solid var(--glass-stroke);
  background:
    repeating-linear-gradient(45deg,
      color-mix(in oklab, var(--ink) 3.5%, transparent) 0 1px,
      transparent 1px 12px),
    var(--pg-rail, rgba(255,255,255,0.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
body.theme-bubble.dark-mode .studio-stage {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.theme-bubble .studio-preview-sticky { top: 28px; }

/* empty-preview whisper */
body.theme-bubble .studio-empty {
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  color: var(--ink-faint); padding: 28px 12px; text-align: center;
}

/* preview post fills the stage cleanly */
body.theme-bubble .studio-stage .post { width: 100%; max-width: none; border-radius: var(--radius-card); }
body.theme-bubble .studio-stage .post-content { padding: 20px 24px 22px; }
body.theme-bubble .studio-stage .post-content-bar { margin-bottom: 16px; padding-bottom: 14px; }

/* comms template frame spacing in the stage */
body.theme-bubble .studio-stage .comms-template .comms--call-frame,
body.theme-bubble .studio-stage .comms-template .comms--message-frame { margin-bottom: 8px; }

/* ── §6 · Edit state — .studio-poster-locked + .studio-mode-pill ─────────── */
/* [JSX · recommended] — CSS is ready; JSX hooks are deferred (separate slice).
   These classes are styled-but-not-yet-rendered: the rules land so they're ready
   when the JSX is added. */
body.theme-bubble .studio-poster-locked {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 16px 9px 9px; border-radius: 999px;
  background: var(--pg-well); border: 1px solid var(--glass-stroke);
  box-shadow: var(--gloss); width: -moz-fit-content; width: fit-content;
}
body.theme-bubble .studio-poster-locked .picker-portrait,
body.theme-bubble .studio-poster-locked img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  background: var(--bub-rim); padding: 2px; flex: 0 0 auto;
}
body.theme-bubble .studio-poster-locked .nm {
  font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink);
}
body.theme-bubble .studio-poster-locked .lock {
  font-size: 12px; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 5px;
}

body.theme-bubble .studio-mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  color: var(--accent-deep); background: var(--accent-wash);
  border: 1px solid var(--accent-soft);
}
body.theme-bubble .studio-mode-pill.is-edit {
  color: #c07a32; background: #fdeede;
  border-color: color-mix(in oklab, #c07a32 30%, transparent);
}
body.theme-bubble .studio-mode-pill.is-reply {
  color: #5a6cc4; background: #e8ecfb;
  border-color: color-mix(in oklab, #5a6cc4 30%, transparent);
}
body.theme-bubble.dark-mode .studio-mode-pill.is-edit {
  color: #f0c089; background: rgba(192,122,50,0.18);
}
body.theme-bubble.dark-mode .studio-mode-pill.is-reply {
  color: #aab6f4; background: rgba(90,108,196,0.20);
}

/* ── §7 · Actions + crumbs ──────────────────────────────────────────────── */
body.theme-bubble .editor-actions { padding-top: 20px; border-top: 1px dashed var(--rule); }
body.theme-bubble .editor-actions .btn { min-width: 132px; }
body.theme-bubble .studio > .crumbs { margin-top: 4px; }

/* post-rate cooldown hint */
body.theme-bubble .studio .field-hint[role="alert"],
body.theme-bubble .studio .field-hint.warn {
  font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 12px;
}

/* ============================================================================
   PHASE 15 · COMMS TEMPLATES — §2 Letter + §3 Journal (comms.redesign.css port)
   CW pill (§1 / .warn-callout--compact) is EXCLUDED — deferred to CW slice.
   ============================================================================ */

/* ── §2 · LETTER — ruled stationery, rhythm locked to 34 px ─────────────── */
/* base.css .comms-template .comms--letter-body = (0,2,0)
   → body.theme-bubble .comms-template .comms--letter-body = (0,3,0) wins.
   Key geometry: --rule-pitch 34px = line-height = paragraph gap, so every line
   lands on a rule with no sub-pixel drift. */
body.theme-bubble .comms-template .comms--letter-body {
  --rule-pitch: 34px;
  --rule-color: color-mix(in oklab, var(--accent) 16%, var(--rule));
  position: relative;
  font-size: 23px;
  line-height: var(--rule-pitch);
  /* top padding 0 so line 1 sits on the first rule; left 22px for the margin rule */
  padding: 0 6px 8px 22px;
  margin-top: 10px;
  /* rules: 1.25 px line at 30.75–32 px of every 34 px band */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 30.75px,
    var(--rule-color) 30.75px 32px,
    transparent 32px var(--rule-pitch));
  background-repeat: repeat;
  background-position: 0 0;
}
/* paragraph gap = exactly one ruled line so rhythm never breaks */
body.theme-bubble .comms-template .comms--letter-body p { margin: 0 0 var(--rule-pitch); }
body.theme-bubble .comms-template .comms--letter-body p:last-child { margin-bottom: 0; }
/* left margin rule — single faint vertical line */
body.theme-bubble .comms-template .comms--letter-body::before {
  content: ""; position: absolute; left: 4px; top: -2px; bottom: 6px;
  width: 1.5px; background: color-mix(in oklab, var(--accent) 40%, transparent);
}

/* ── §3 · JOURNAL — white paper + candy bookmark tab ────────────────────── */
/* Existing bubble.css at (0,3,0): body.theme-bubble .comms-template .comms--journal-book
   → new rule using body.theme-bubble .comms-template.comms--journal .comms--journal-book
   = (0,3,0) same specificity, wins by position (appended last). */
body.theme-bubble .comms-template.comms--journal .comms--journal-book {
  background: color-mix(in oklab, var(--paper-soft) 90%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-card), var(--gloss);
  border-radius: var(--radius-card);
  overflow: visible;   /* let the bookmark tab poke above the top edge */
}
/* position:relative lives in base.css (0,2,0) — no need to repeat */
body.theme-bubble .comms-template .comms--journal-book::after {
  content: ""; position: absolute; top: -3px; right: 30px;
  width: 26px; height: 40px;
  background: linear-gradient(180deg, #f6a6c8, var(--accent));
  border-radius: 3px 3px 0 0;
  box-shadow: 0 3px 8px -3px rgba(150,120,190,0.5);
  /* notched ribbon foot */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    radial-gradient(9px at 50% 100%, #0000 98%, #000) bottom / 100% 9px no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    radial-gradient(9px at 50% 100%, #0000 98%, #000) bottom / 100% 9px no-repeat;
}
/* dark: existing body.theme-bubble.dark-mode .comms-template .comms--journal-book (0,3,0)
   at line 2893 already sets glass-well bg; appended below to preserve overflow:visible
   and border (those live in the light rule above at same specificity, appended later). */
body.theme-bubble.dark-mode .comms-template.comms--journal .comms--journal-book {
  background: var(--glass-well);
  overflow: visible;
  border: 1px solid var(--glass-stroke);
}

/* ============================================================================
   PHASE 15 · CW/TW PILL — §1 (comms.redesign.css §1 port) + .studio-cw
   Soft-pink pill for .warn-callout--compact (thread read view, thread list) and
   .studio-cw (compose live preview). Light + dark resolve via Bubble tokens.
   Specificity notes:
     base.css  .warn-callout--compact          = (0,1,0)
     bubble.css body.theme-bubble .warn-callout = (0,2,0)  ← overrides compact width:auto
     bubble.css body.theme-bubble .warn-callout--compact   = (0,2,0)  (added same phase)
     NEW below  body.theme-bubble .warn-callout--compact   = (0,2,0)  wins by position
   For full-mode .warn-callout the existing (0,2,0) glass rule stays; we only
   convert the visual label in JSX — no structural CSS change needed for full mode.
   ============================================================================ */

/* ── Compact pill (thread list + post stamp) ─────────────────────────────── */
/* comms.redesign.css §1 verbatim, scoped to body.theme-bubble.
   Specificity: (0,2,0) — same as the existing body.theme-bubble .warn-callout--compact
   at line ~1866 above; wins by position (appended last). */
body.theme-bubble .warn-callout--compact {
  gap: 7px; padding: 5px 13px 5px 11px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--accent-soft);
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em;
  box-shadow: var(--gloss);
  /* override width:100% from body.theme-bubble .warn-callout above */
  width: auto; flex: 0 0 auto;
}
body.theme-bubble .warn-callout--compact strong {
  color: var(--accent-deep); font-weight: 600; font-size: 11.5px;
}
body.theme-bubble .warn-callout--compact i.ph {
  font-size: 13px; color: var(--accent-deep);
}
/* dark: accent tokens remap automatically; only override if glass fill would conflict */
body.theme-bubble.dark-mode .warn-callout--compact {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: var(--accent-soft);
  box-shadow: var(--gloss), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* S12: category pill matches the TW pill styling (tag icon + category name; display-only) */
/* Phase 17B: .candy-pill shares the same tone-aware recipe as .adb-pill.cat */
body.theme-bubble .adb-pill.cat,
body.theme-bubble .candy-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 11px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--accent-soft);
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em; text-transform: none;
  box-shadow: var(--gloss);
}
body.theme-bubble .adb-pill.cat i.ph { font-size: 13px; color: var(--accent-deep); }

/* ── CANDY-PILL ACTIVE — glass-richer fill + lift ────────────────────────── */
/* Colors stay on --accent-* tokens so tone + dark-mode both work automatically. */
body.theme-bubble .candy-pill--active {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 28%, var(--accent-wash)),
    var(--accent-wash));
  color: var(--accent-deep);
  border: 1px solid var(--accent-soft);
  box-shadow: var(--gloss), inset 0 1px 0 rgba(255,255,255,0.55);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
}

/* ── CANDY-PILL SAVE — brand-pink gradient (tone-independent) ───────────────
   This is the one deliberately brand-fixed pill: the Save action is always
   Couplet pink regardless of the active tone. Text is white for contrast. */
body.theme-bubble .candy-pill--save {
  background: linear-gradient(135deg, #f48bbb, #e0568f);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--gloss), inset 0 1px 0 rgba(255,255,255,0.45);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
}
body.theme-bubble .candy-pill--save:hover { filter: brightness(1.05); color: #fff; }
/* Dark mode: slightly cooler/deeper gradient so the pill doesn't wash out. */
body.theme-bubble.dark-mode .candy-pill--save {
  background: linear-gradient(135deg, #c4638f, #a83a6e);
  border-color: rgba(255,255,255,0.25);
  box-shadow: var(--gloss), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ── Apply candy-pill-save skin to .dir-foot-btn.primary (Save/Submit buttons)
   Scoped to body.theme-bubble so specificity (0,3,0) beats the base (0,1,1) rule.
   Preserves existing gradient; adds the glass rim + top sheen + lift.
   Save handlers and SaveNote 3-state logic (D-076) are NOT touched. */
body.theme-bubble .dir-foot-btn.primary {
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
  transform: translateY(-1px);
}
body.theme-bubble .dir-foot-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
/* Dark mode: cooler rim so the pill doesn't look washed out */
body.theme-bubble.dark-mode .dir-foot-btn.primary {
  border-color: rgba(255,255,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ── Studio compose preview chip (.studio-cw) ────────────────────────────── */
/* studio.redesign.css §5 .studio-cw rule, scoped to body.theme-bubble.
   Specificity: studio.css .studio-cw = (0,1,0) → body.theme-bubble .studio-cw = (0,2,0) wins. */
body.theme-bubble .studio-cw {
  gap: 8px; padding: 6px 13px 6px 11px; margin-bottom: 16px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--accent-soft);
  background: var(--accent-wash); color: var(--accent-deep);
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em;
  box-shadow: var(--gloss);
}
body.theme-bubble .studio-cw i { font-size: 13px; color: var(--accent-deep); }
body.theme-bubble .studio-cw strong { color: var(--accent-deep); font-weight: 600; font-size: 11.5px; }
body.theme-bubble.dark-mode .studio-cw {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: var(--accent-soft);
  box-shadow: var(--gloss), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ============================================================================
   PHASE 15 · CLICK-TO-REVEAL — .warn-callout__btn + .warn-callout__reveal
   Button-reset on the pill trigger; inline reveal text; focus-visible ring.
   Scoped to body.theme-bubble so it wins over base.css structural rules (#7).
   Specificity notes:
     body.theme-bubble .warn-callout__btn           = (0,2,0)
     body.theme-bubble .warn-callout__reveal        = (0,2,0)
     body.theme-bubble .warn-callout--interactive   = (0,2,0)
   ============================================================================ */

/* ── Outer wrapper: allow reveal to sit adjacent to the pill ────────────────── */
body.theme-bubble .warn-callout--interactive {
  /* flex already set by .warn-callout; ensure wrap so reveal text can break */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

/* ── Button reset: strip all default button chrome from the "TW" trigger ─────── */
body.theme-bubble .warn-callout__btn {
  /* inherit pill appearance from parent .warn-callout / .warn-callout--compact */
  display: inline-flex;
  align-items: center;
  gap: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: inherit;
  letter-spacing: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Focus-visible ring: keyboard-only, uses accent token */
body.theme-bubble .warn-callout__btn:focus { outline: none; }
body.theme-bubble .warn-callout__btn:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 999px;
}

/* ── Revealed detail text ────────────────────────────────────────────────────── */
body.theme-bubble .warn-callout__reveal {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--accent-deep);
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  /* subtle separator between pill and expanded text */
  padding-left: 4px;
  border-left: 1.5px solid var(--accent-soft);
}

/* dark: tokens remap automatically; no additional overrides needed */
body.theme-bubble.dark-mode .warn-callout__reveal {
  color: var(--accent-deep);
  border-left-color: var(--accent-soft);
}
/* FIX 2: .warn-callout__reveal sets display:inline-block which defeats the native
   hidden attribute; this guard restores expected hide behaviour when closed. */
body.theme-bubble .warn-callout__reveal[hidden] { display: none; }

/* ============================================================
   T16 / S14 — font-hierarchy remap (char profile)
   section-title  -> match tracker-entry-title (21px / 500 / display)
   tracker-entry-title + plot-subtitle -> match dev-block-heading
   (22px / 600 / display, font-style: normal)
   Scoped to the char profile main so other pages' instances are untouched.
   ============================================================ */
body.theme-bubble .profile-main .section-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
body.theme-bubble .profile-main .tracker-entry-title,
body.theme-bubble .profile-main .plot-subtitle {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  font-style: normal;
}

/* N1: comms date field sizes to content, not full width */
body.theme-bubble .field-input--date { width: auto; max-width: 200px; }

/* Infinite-scroll sentinel skin (Pagination phase) */
body.theme-bubble .infinite-sentinel__more {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: var(--accent-wash);
  border-color: var(--accent-soft);
}
body.theme-bubble .infinite-sentinel__more .ph-circle-notch {
  color: var(--accent-deep);
}
body.theme-bubble .infinite-sentinel__end {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ===== Admin redesign (.adm2-*) — ported from mockups/admin-redesign/admin.redesign.css (Sub-phase A) ===== */

/* ── Page frame: lock the app to the viewport, let zones scroll internally ── */
html.adm2-locked, body.adm2-locked { height: 100%; overflow: hidden; }
body.adm2-locked { display: flex; flex-direction: column; min-height: 0; }
body.adm2-locked .app-topbar { flex: 0 0 auto; z-index: 50; }
body.adm2-locked .bottombar  { flex: 0 0 auto; }
/* #root and .app-shell sit between body and the shell; propagate the flex column
   through them so .adm2-shell gets a bounded height and .adm2-main__scroll scrolls. */
body.adm2-locked #root,
body.adm2-locked .app-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.adm2-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  position: relative;
  isolation: isolate;
}
.adm2-nav    { flex: 0 0 248px; width: 248px; }
.adm2-main   { flex: 1 1 auto; }
.adm2-shell.nav-collapsed    .adm2-nav  { flex-basis: 52px; width: 52px; }
.adm2-shell.detail-open      .adm2-main { margin-right: 384px; }
.adm2-shell.detail-collapsed .adm2-main { margin-right: 52px; }

/* ============================================================================
   NAV RAIL — the section list (replaces the top tab bar)
   ============================================================================ */
.adm2-nav {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule-soft);
  background: rgba(255,255,255,0.30);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  overflow: hidden;
}
body.dark-mode .adm2-nav { background: var(--glass-thin); }

.adm2-nav__head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  min-height: 30px;
}
.adm2-nav__crest {
  width: 30px; height: 30px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bub-grad); color: var(--pg-on-candy); font-size: 15px;
  box-shadow: var(--gloss), 0 2px 8px -3px rgba(150,120,190,0.5);
}
body.dark-mode .adm2-nav__crest { background: var(--bub-grad-deep); color: #efe8fb; }
.adm2-nav__title {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.1;
}
.adm2-nav__title b {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--ink); letter-spacing: -0.01em;
}
.adm2-nav__title span {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: 1px;
}

.adm2-nav__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 4px 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.adm2-nav__group {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
  padding: 16px 10px 6px;
}
.adm2-nav__group:first-child { padding-top: 6px; }
.adm2-nav__band {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  padding: 10px 10px 4px 18px; opacity: 0.85;
}

.adm2-navitem {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  position: relative;
}
.adm2-navitem i { font-size: 17px; flex: 0 0 auto; color: var(--ink-mute); transition: color 160ms ease; }
.adm2-navitem__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm2-navitem__count {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  background: var(--pg-well); border: 1px solid var(--rule-soft);
  border-radius: 999px; padding: 1px 7px; flex: 0 0 auto;
}
body.dark-mode .adm2-navitem__count { background: var(--glass-well); }
.adm2-navitem:hover { color: var(--ink); background: var(--accent-wash); }
.adm2-navitem:hover i { color: var(--accent-deep); }
.adm2-navitem.is-active {
  color: var(--ink); background: var(--glass-fill);
  border-color: var(--glass-stroke);
  box-shadow: var(--shadow-soft), var(--gloss);
}
body.dark-mode .adm2-navitem.is-active { background: var(--glass-well); }
.adm2-navitem.is-active i { color: var(--accent); }
.adm2-navitem.is-active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--bub-bar);
}

/* collapsed rail: icons only, labels + counts gone, name crest centered */
.nav-collapsed .adm2-nav__head { padding: 16px 0 12px; justify-content: center; }
.nav-collapsed .adm2-nav__title,
.nav-collapsed .adm2-navitem__label,
.nav-collapsed .adm2-navitem__count,
.nav-collapsed .adm2-nav__group,
.nav-collapsed .adm2-nav__band { display: none; }
.nav-collapsed .adm2-nav__scroll { padding: 6px 8px; align-items: center; }
.nav-collapsed .adm2-navitem { justify-content: center; padding: 9px 0; width: 36px; }
.nav-collapsed .adm2-navitem.is-active::before { display: none; }

/* nav foot: collapse toggle (Storyboard caret idiom) */
.adm2-nav__foot {
  flex: 0 0 auto; border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; padding: 8px 12px;
}
.nav-collapsed .adm2-nav__foot { justify-content: center; padding: 8px 0; }
.adm2-railbtn {
  display: inline-flex; align-items: center; gap: 9px;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-faint);
  padding: 6px 8px; border-radius: 9px; transition: color 160ms, background 160ms;
}
.adm2-railbtn i { font-size: 15px; }
.adm2-railbtn:hover { color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.nav-collapsed .adm2-railbtn__label { display: none; }

/* ============================================================================
   WORKSPACE — the active section
   ============================================================================ */
.adm2-main {
  min-width: 0; display: flex; flex-direction: column;
  overflow: hidden;
}
.adm2-main__head {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 24px; flex-wrap: wrap;
  padding: 22px 30px 0;
}
.adm2-main__titles { min-width: 0; }
.adm2-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep);
  margin: 0 0 7px;
}
.adm2-title {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 32px; line-height: 1.04; color: var(--ink); letter-spacing: -0.015em;
  margin: 0; font-variation-settings: "opsz" 120, "SOFT" 60, "WONK" 0;
}
.adm2-sub {
  font-family: var(--font-body); font-size: 13px; color: var(--ink-mute);
  line-height: 1.5; margin: 7px 0 0; max-width: 62ch;
}
.adm2-head-actions { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }

/* secondary (sub-tab) pills — the per-section L2 nav */
.adm2-subtabs {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  margin: 18px 30px 0;
  padding: 4px; border-radius: 999px;
  background: var(--pg-well); border: 1px solid var(--rule);
  align-self: flex-start; width: max-content; max-width: calc(100% - 60px);
}
body.dark-mode .adm2-subtabs { background: var(--glass-thin); }
.adm2-subtab {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--ink-soft); padding: 6px 15px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: color 160ms, background 200ms, box-shadow 200ms; white-space: nowrap;
}
.adm2-subtab i { font-size: 14px; }
.adm2-subtab:hover { color: var(--accent-deep); }
.adm2-subtab.is-on {
  color: var(--ink); background: var(--paper-soft);
  box-shadow: var(--shadow-soft); border-color: var(--glass-stroke);
}
body.dark-mode .adm2-subtab.is-on { background: var(--glass-well); }

.adm2-main__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 22px 30px calc(44px + 16px); /* bottom clears fixed .bottombar (min-height 44px) + gap */
}

/* a soft toolbar above tables: filters left, search/actions right */
.adm2-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.adm2-toolbar .spacer { flex: 1 1 auto; }
.adm2-chipset { display: inline-flex; align-items: center; gap: 5px; padding: 3px; background: var(--pg-well); border: 1px solid var(--rule); border-radius: 999px; }
.adm2-chip {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  color: var(--ink-soft); padding: 5px 12px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: all 150ms ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.adm2-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: 0 0 auto; }
.adm2-chip:hover { color: var(--accent-deep); }
.adm2-chip.is-on { background: var(--paper-soft); color: var(--ink); box-shadow: var(--shadow-soft); border-color: var(--glass-stroke); }
body.dark-mode .adm2-chip.is-on { background: var(--glass-well); }

.adm2-search {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pg-well); border: 1px solid var(--rule);
  border-radius: 999px; padding: 7px 14px; min-width: 200px;
  transition: border-color 160ms, box-shadow 160ms;
}
.adm2-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.adm2-search i { color: var(--ink-faint); font-size: 15px; }
.adm2-search input { flex: 1; border: none; background: transparent; outline: none; font-family: var(--font-body); font-size: 13px; color: var(--ink); }
.adm2-search input::placeholder { color: var(--ink-faint); }

/* ── tables: lift the existing .adm-table into a glass card ───────────────── */
.adm2-tablecard {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss); overflow-x: auto; overflow-y: hidden;
}
.adm2-tablecard .adm-table td { white-space: nowrap; }
.adm2-tablecard .adm-table { font-size: 13px; }
.adm2-tablecard .adm-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper-soft);
  padding: 13px 16px 11px; border-bottom: 1px solid var(--rule);
}
body.dark-mode .adm2-tablecard .adm-table thead th { background: var(--glass-well); }
.adm2-tablecard .adm-table td { padding: 12px 16px; border-bottom-color: var(--rule-soft); }
.adm2-tablecard .adm-table tbody tr { cursor: pointer; }
.adm2-tablecard .adm-table tbody tr:last-child td { border-bottom: none; }
.adm2-tablecard .adm-table tbody tr:hover { background: var(--accent-wash); }
.adm2-tablecard .adm-table tbody tr.is-selected { background: color-mix(in oklab, var(--accent-wash) 75%, var(--paper-soft)); box-shadow: inset 3px 0 0 var(--accent); }
.adm-table .t-primary { font-style: normal; font-weight: 600; font-size: 14px; }

/* identity cell: avatar orb + name/sub */
.adm2-idcell { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.adm2-orb {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 120% at 32% 26%, color-mix(in oklab, var(--orb, var(--accent)) 48%, #fff), var(--orb, var(--accent)));
  color: #fff; font-family: var(--font-display); font-style: italic; font-size: 15px; font-weight: 500;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.55), 0 2px 7px -2px color-mix(in oklab, var(--orb, var(--accent)) 55%, transparent);
}
.adm2-orb img { width: 100%; height: 100%; object-fit: cover; }
.adm2-idcell__main { min-width: 0; line-height: 1.2; }
.adm2-idcell__name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm2-idcell__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* status dot + label */
.adm2-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.adm2-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-faint); }
.adm2-dot--ok   { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 22%, transparent); }
.adm2-dot--warn { background: #e0973c; box-shadow: 0 0 0 3px color-mix(in oklab, #e0973c 22%, transparent); }
.adm2-dot--bad  { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent); }
.adm2-dot--accent { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.adm-table td .adm-row-actions { opacity: 0; transition: opacity 150ms ease; }
.adm-table tbody tr:hover .adm-row-actions,
.adm-table tbody tr.is-selected .adm-row-actions { opacity: 1; }
.adm2-iconbtn {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; border: 1px solid var(--rule);
  background: var(--pg-well); color: var(--ink-soft); cursor: pointer;
  font-size: 13px; transition: all 150ms ease;
}
body.dark-mode .adm2-iconbtn { background: var(--glass-well); }
.adm2-iconbtn:hover { color: var(--accent-deep); border-color: var(--accent-soft); transform: translateY(-1px); }
.adm2-iconbtn.danger:hover { color: var(--danger); border-color: color-mix(in oklab,var(--danger) 40%,transparent); }

/* report / registration cards (queue surfaces) */
.adm2-cards { display: flex; flex-direction: column; gap: 12px; }
.adm2-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss); padding: 16px 18px; cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.adm2-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), var(--gloss); border-color: color-mix(in oklab, var(--accent) 30%, var(--glass-stroke)); }
.adm2-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash), var(--shadow-card); }
.adm2-card.is-resolved { opacity: 0.66; }
.adm2-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm2-card__id { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.adm2-card__reason { font-family: var(--font-display); font-style: italic; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin: 10px 0 0; }
.adm2-card__meta { font-size: 12px; color: var(--ink-mute); }
.adm2-card__meta b { color: var(--ink-soft); font-weight: 600; }
.adm2-card__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

/* ============================================================================
   FIELD CONFIG — master list + detail dock
   ============================================================================ */
.adm2-fieldgroup { margin-bottom: 26px; }
.adm2-fieldgroup__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 0 4px 12px; border-bottom: 1px solid var(--rule);
}
.adm2-fieldgroup__title {
  font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--ink);
  letter-spacing: -0.01em;
}
.adm2-fieldgroup__note { font-family: var(--font-body); font-size: 12px; color: var(--ink-mute); }
.adm2-fieldgroup__head .adm2-ghostbtn { margin-left: auto; }

.adm2-fieldlist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.adm2-fieldrow {
  display: grid;
  grid-template-columns: auto 30px 1fr auto auto auto;
  align-items: center; gap: 12px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: 14px;
  box-shadow: var(--shadow-soft), var(--gloss);
  padding: 10px 14px; cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 180ms;
}
.adm2-fieldrow:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), var(--gloss); border-color: color-mix(in oklab, var(--accent) 28%, var(--glass-stroke)); }
.adm2-fieldrow.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash), var(--shadow-card); }
.adm2-fieldrow.is-hidden { opacity: 0.5; }
.adm2-fieldrow__grip { display: inline-flex; flex-direction: column; gap: 1px; }
.adm2-arrow {
  width: 22px; height: 18px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--ink-faint); cursor: pointer;
  font-size: 9px; border-radius: 5px; transition: color 140ms, background 140ms;
}
.adm2-arrow:hover:not(:disabled) { color: var(--accent-deep); background: var(--accent-wash); }
.adm2-arrow:disabled { opacity: 0.3; cursor: default; }
.adm2-fieldrow__icon {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-deep); font-size: 15px; flex: 0 0 auto;
}
.adm2-fieldrow.is-hidden .adm2-fieldrow__icon { background: var(--pg-well); color: var(--ink-faint); }
.adm2-fieldrow__main { min-width: 0; line-height: 1.25; }
.adm2-fieldrow__label { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.adm2-fieldrow__key { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 1px; }
.adm2-fieldrow__badges { display: inline-flex; align-items: center; gap: 6px; }
.adm2-metab {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink-mute);
  background: var(--pg-well); border: 1px solid var(--rule-soft); border-radius: 7px;
  padding: 3px 7px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
body.dark-mode .adm2-metab { background: var(--glass-well); }
.adm2-pilltag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
}
.adm2-pilltag--locked { color: var(--ink-mute); background: var(--pg-well); border: 1px solid var(--rule-soft); }
.adm2-pilltag--custom { color: var(--accent-deep); background: var(--accent-wash); border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); }

.adm2-ghostbtn {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; font-style: italic;
  color: var(--accent-deep); background: var(--accent-wash);
  border: 1px dashed color-mix(in oklab, var(--accent) 30%, transparent); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: all 180ms ease; margin-top: 12px;
}
.adm2-ghostbtn:hover { background: var(--accent-soft); transform: translateY(-1px); }

/* ============================================================================
   SETTINGS forms (Site / Mode / Themes)
   ============================================================================ */
.adm2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.adm2-panel {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss); overflow: hidden;
}
.adm2-panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--rule-soft);
  background: var(--pg-rail);
}
body.dark-mode .adm2-panel__head { background: var(--glass-thin); }
.adm2-panel__head i { color: var(--accent); font-size: 16px; }
.adm2-panel__head b { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.adm2-panel__body { padding: 18px; display: flex; flex-direction: column; gap: 15px; }
.adm2-panel--wide { grid-column: 1 / -1; }

.adm2-field { display: flex; flex-direction: column; gap: 6px; }
.adm2-field > label, .adm2-flabel {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
.adm2-field .field-input { font-size: 13.5px; width: 100%; }
.adm2-hint { font-family: var(--font-body); font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; font-style: italic; }
.adm2-hint code { font-family: var(--font-mono); font-size: 11px; font-style: normal; color: var(--accent-deep); background: var(--accent-wash); padding: 1px 6px; border-radius: 6px; }
.adm2-iconfield { display: flex; align-items: center; gap: 10px; }
.adm2-iconfield .field-input { flex: 1; font-family: var(--font-mono); font-size: 12px; }
.adm2-iconprev { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-deep); font-size: 20px; flex: 0 0 auto; }

.adm2-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* segmented size control */
.adm2-seg { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; background: var(--glass-thin); border: 1px solid var(--rule-soft); border-radius: 12px; }
.adm2-seg button {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  padding: 7px 6px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: all 150ms ease;
}
.adm2-seg button:hover { color: var(--accent-deep); }
.adm2-seg button.is-on { background: var(--paper-soft); color: var(--ink); box-shadow: var(--shadow-soft); border-color: var(--glass-stroke); }
body.dark-mode .adm2-seg button.is-on { background: var(--glass-well); }

/* toggle switch */
.adm2-switchrow { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.adm2-switchrow__text { min-width: 0; }
.adm2-switchrow__text b { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.adm2-switchrow__text span { font-family: var(--font-body); font-size: 12px; color: var(--ink-mute); line-height: 1.45; }
.adm2-switch {
  width: 46px; height: 27px; border-radius: 999px; flex: 0 0 auto; position: relative; cursor: pointer;
  background: var(--pg-well); border: 1px solid var(--rule); transition: background 200ms ease, border-color 200ms ease;
}
body.dark-mode .adm2-switch { background: var(--glass-well); }
.adm2-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-soft); transition: transform 220ms cubic-bezier(.2,.9,.3,1.3); }
.adm2-switch.is-on { background: linear-gradient(140deg,#f48bbb,#e0568f); border-color: transparent; }
.adm2-switch.is-on::after { transform: translateX(19px); }

/* color swatches (themes) */
.adm2-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.adm2-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; box-shadow: 0 1px 5px rgba(150,120,190,0.3), 0 0 0 1px var(--rule); transition: transform 180ms cubic-bezier(.2,.9,.3,1.3); }
.adm2-swatch:hover { transform: scale(1.12); }
.adm2-swatch.is-on { box-shadow: 0 0 0 2px var(--paper-soft), 0 0 0 4px var(--accent); }
body.dark-mode .adm2-swatch { border-color: var(--glass-stroke); }

/* theme preview cards */
.adm2-themecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.adm2-themecard { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--paper-soft); transition: border-color 160ms, box-shadow 160ms, transform 160ms; }
.adm2-themecard:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.adm2-themecard.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-soft); }
.adm2-themecard__sky { height: 64px; background: var(--tc, var(--bub-grad)); position: relative; }
.adm2-themecard__sky::after { content:""; position:absolute; inset:0; background: var(--glass-aero); }
.adm2-themecard__name { padding: 9px 13px; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }
.adm2-themecard.is-on .adm2-themecard__name { color: var(--accent-deep); }

/* ============================================================================
   DETAIL DOCK — right panel (Storyboard editor idiom)
   ============================================================================ */
.adm2-detail {
  position: absolute; top: 0; right: 0; bottom: 0; width: 384px; z-index: 5;
  transform: translateX(100%);
  min-width: 0;
  border-left: 1px solid var(--rule-soft);
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: -16px 0 40px -28px rgba(150,120,190,0.5);
}
.adm2-shell.detail-open .adm2-detail,
.adm2-shell.detail-collapsed .adm2-detail { transform: translateX(0); }
.adm2-shell.detail-collapsed .adm2-detail { width: 52px; }
body.dark-mode .adm2-detail { background: var(--glass-thin); }
.adm2-detail__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--rule-soft); min-height: 30px;
}
.adm2-detail__kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); flex: 1 1 auto; }
.adm2-detail__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 18px 26px; display: flex; flex-direction: column; gap: 16px; }
.detail-collapsed .adm2-detail__head,
.detail-collapsed .adm2-detail__scroll { display: none; }

/* detail identity header */
.adm2-detail__id { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 0 4px; }
.adm2-detail__orb {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 120% at 32% 26%, color-mix(in oklab, var(--orb, var(--accent)) 48%, #fff), var(--orb, var(--accent)));
  color: #fff; font-family: var(--font-display); font-style: italic; font-size: 30px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), var(--shadow-card);
}
.adm2-detail__orb img { width: 100%; height: 100%; object-fit: cover; }
.adm2-detail__name { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); line-height: 1.15; }
.adm2-detail__handle { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); }

.adm2-deflist { display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule-soft); }
.adm2-defrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; background: var(--pg-well); }
body.dark-mode .adm2-defrow { background: var(--glass-well); }
.adm2-defrow .k { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.adm2-defrow .v { font-family: var(--font-body); font-size: 13px; color: var(--ink); font-weight: 500; text-align: right; white-space: nowrap; }
.adm2-detail__id > div { width: 100%; }
.adm2-detail__name { text-wrap: balance; }

.adm2-detail__actions { display: flex; flex-direction: column; gap: 8px; }
.adm2-detail__actions .btn, .adm2-detail__actions .dir-foot-btn { width: 100%; justify-content: center; }

.adm2-detail__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 13px; padding: 40px 24px; }
.adm2-detail__empty i { font-size: 30px; color: var(--ink-faint); }
.adm2-detail__empty p { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink-mute); line-height: 1.5; max-width: 220px; margin: 0; }

/* ── Collapse strips — mirror Storyboard's .sb-colstrip exactly ───────────── */
.adm2-colstrip {
  position: absolute; top: 0; bottom: 0; width: 18px; z-index: 4;
  display: flex; align-items: flex-start; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 13px; padding: 16px 0 0;
  transition: color 160ms, background 160ms;
}
.adm2-colstrip:hover { color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 10%, transparent); }
body.dark-mode .adm2-colstrip:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); }
.adm2-colstrip--detail-hide { left: 0; }
/* re-open rail shown when a side is collapsed to 52px */
.adm2-reopen {
  flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px;
  border: none; background: transparent; cursor: pointer; color: var(--ink-faint);
  padding: 16px 0; transition: color 160ms;
}
.adm2-reopen:hover { color: var(--accent-deep); }
.adm2-reopen i { font-size: 15px; }
.adm2-reopen__label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.detail-collapsed .adm2-detail { background: rgba(255,255,255,0.20); }
body.dark-mode .detail-collapsed .adm2-detail { background: var(--glass-thin); }
.adm2-detail__reopenwrap { display: none; }
.detail-collapsed .adm2-detail__reopenwrap { display: flex; flex: 1; }
.detail-collapsed .adm2-colstrip { display: none; }

/* ── floating save/apply toast (demo feedback) ───────────────────────────── */
.adm2-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 14px);
  display: inline-flex; align-items: center; gap: 10px; z-index: 90;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: 999px; padding: 10px 18px;
  box-shadow: var(--shadow-card), var(--gloss);
  opacity: 0; pointer-events: none; transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.3,1.2);
}
.adm2-toast.show { opacity: 1; transform: translate(-50%, 0); }
.adm2-toast i { color: var(--ok); font-size: 16px; }

/* ── Save dock in the bottom bar (EditDock idiom) ────────────────────────── */
.adm2-editdock {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 16px; border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-card), var(--gloss);
}
.adm2-editdock__notice {
  font-family: var(--font-body); font-size: 12px; color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 8px;
}
.adm2-editdock__notice .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); transition: background 200ms; }
.adm2-editdock.is-dirty .adm2-editdock__notice { color: var(--accent-deep); }
.adm2-editdock.is-dirty .adm2-editdock__notice .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

/* responsive: drop the detail dock under a comfortable width, then collapse the nav */
@media (max-width: 1100px) {
  .adm2-shell .adm2-detail,
  .adm2-shell.detail-open .adm2-detail,
  .adm2-shell.detail-collapsed .adm2-detail { display: none; }
  .adm2-shell.detail-open .adm2-main,
  .adm2-shell.detail-collapsed .adm2-main { margin-right: 0; }
}
@media (max-width: 860px) {
  .adm2-shell .adm2-nav,
  .adm2-shell.nav-collapsed .adm2-nav { flex-basis: 52px; width: 52px; }
  .adm2-shell .adm2-nav__title,
  .adm2-shell .adm2-navitem__label,
  .adm2-shell .adm2-navitem__count,
  .adm2-shell .adm2-nav__group,
  .adm2-shell .adm2-nav__band,
  .adm2-shell .adm2-railbtn__label { display: none; }
  .adm2-main__scroll { padding: 18px 16px calc(44px + 16px); } /* bottom clears fixed .bottombar */
  .adm2-main__head { padding: 16px 16px 0; }
  .adm2-subtabs { margin: 14px 16px 0; }
}

/* Phase 18 (phone): the nav is already an icon-rail at ≤860px; here we make the
   rail items real tap targets and stop the sub-tab row from overflowing. */
@media (max-width: 600px) {
  /* icon-rail tap targets */
  .adm2-nav__scroll .adm2-navitem { min-height: 44px; }
  .adm2-railbtn { min-height: 40px; }
  /* sub-tabs: scroll horizontally inside the workspace rather than overflow it */
  .adm2-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .adm2-subtabs::-webkit-scrollbar { display: none; }
  .adm2-subtabs > * { flex: 0 0 auto; }
  /* workspace head: allow the title/actions to wrap instead of pushing width */
  .adm2-main__head { flex-wrap: wrap; row-gap: 8px; }
  /* tighten content padding so tables/cards keep breathing room on a phone */
  .adm2-main__scroll { padding: 14px 12px calc(44px + 14px); }
}

/* scrollbars — overlay style, matches Storyboard */
.adm2-nav__scroll::-webkit-scrollbar, .adm2-main__scroll::-webkit-scrollbar, .adm2-detail__scroll::-webkit-scrollbar { width: 8px; }
.adm2-nav__scroll::-webkit-scrollbar-thumb, .adm2-main__scroll::-webkit-scrollbar-thumb, .adm2-detail__scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.adm2-nav__scroll:hover::-webkit-scrollbar-thumb, .adm2-main__scroll:hover::-webkit-scrollbar-thumb, .adm2-detail__scroll:hover::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--rule) 70%, transparent); }
.adm2-nav__scroll, .adm2-main__scroll, .adm2-detail__scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.adm2-nav__scroll:hover, .adm2-main__scroll:hover, .adm2-detail__scroll:hover { scrollbar-color: color-mix(in oklab, var(--rule) 70%, transparent) transparent; }

/* page-enter for the workspace body on section switch */
@media (prefers-reduced-motion: no-preference) {
  .adm2-enter { animation: adm2In 340ms cubic-bezier(.2,.7,.3,1) both; }
  /* transform-only — never leaves the workspace body invisible if the animation is throttled or captured mid-frame */
  @keyframes adm2In { from { transform: translateY(8px); } to { transform: none; } }
}

/* explicit page controls (AdmPager) — sits under a table card; reuses the .dir-foot-btn
   pill look for prev/next and the accent-wash candy pill for the count. */
.adm2-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.adm2-pager__total {
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--accent-deep); background: var(--accent-wash);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.adm2-pager__nav { display: inline-flex; align-items: center; gap: 8px; }
.adm2-pager__nav .dir-foot-btn { flex: 0 0 auto; }
.adm2-pager__nav .dir-foot-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.adm2-pager__nav .dir-foot-btn:disabled:hover { color: var(--ink-soft); border-color: var(--glass-stroke); }
.adm2-pager__pos {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); white-space: nowrap;
}

/* E4 — count pills: numeric totals/counts get candy accent treatment (mirrors .adm2-pager__total).
   Scoped to Bubble so other themes are unaffected. Shape stays from base.css .adm-badge. */
body.theme-bubble .adm-badge.count {
  color: var(--accent-deep);
  background: var(--accent-wash);
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
  font-variant-numeric: tabular-nums;
}
/* ============================================================
   pages.css — NEW + redesigned Couplet pages, Bubble theme.
   Built entirely on Bubble design tokens (--glass-*, --bub-*,
   --ink-*, --accent-*) so light + dark resolve automatically.
   Loaded AFTER bubble.css / bubble-dark.css.
   ============================================================ */

/* ---- cross-mode helper tokens (the few things bubble-dark doesn't remap) ---- */
body.theme-bubble {
  --pg-grad:    var(--bub-grad);       /* large candy banner ramp        */
  --pg-grad-2:  var(--bub-grad-2);
  --pg-on-candy: #43345a;              /* ink that sits ON a candy ramp   */
  --pg-on-candy-soft: #6a5b80;
  --pg-card:    var(--glass-fill);
  --pg-well:    rgba(255,255,255,0.62);/* frosted input/well fill         */
  --pg-rail:    rgba(255,255,255,0.40);
  --pg-foot-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 0 H100 V86 Q50 98 0 86 Z' fill='%23000'/></svg>") center / 100% 100% no-repeat;
}
body.theme-bubble.dark-mode {
  --pg-grad:    var(--bub-grad-deep);
  --pg-grad-2:  var(--bub-grad-deep);
  --pg-on-candy: #efe9fb;
  --pg-on-candy-soft: #c7bfe0;
  --pg-well:    var(--glass-well);
  --pg-rail:    var(--glass-thin);
}

/* (Showcase shell .sc-* rules from the design handoff are mockup-only and
   intentionally not ported.) */

/* ============================================================
   SHARED — liquid wave header (the signature gradient → white)
   ============================================================ */
.wave-header {
  position: relative;
  background: var(--pg-grad);
  background-size: cover;
  -webkit-mask: var(--bub-wave-mask) center / 100% 100% no-repeat;
          mask: var(--bub-wave-mask) center / 100% 100% no-repeat;
}
.wave-header::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 22% 24%, rgba(255,255,255,0.5) 0%, transparent 56%);
  pointer-events: none;
}
body.dark-mode .wave-header::before { background: radial-gradient(circle at 22% 24%, rgba(255,255,255,0.10) 0%, transparent 56%); }

/* page frame — the floating glass sheet several pages sit inside */
.pg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px,4vw,44px) 96px; }
.pg-sheet {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-card), var(--gloss);
  overflow: hidden;
}

/* ============================================================
   FACECLAIMS  (hero — 3 variations)
   ============================================================ */
.fcx { max-width: 1100px; margin: 0 auto; padding: 36px clamp(18px,4vw,44px) 90px; }

/* — shared page intro — */
.fcx-intro { padding: 30px 40px 26px; }
.fcx-intro h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5vw, 52px);
  color: var(--pg-on-candy); margin: 0; letter-spacing: -0.02em; line-height: 0.98;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
}
.fcx-blurb {
  font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--ink-soft); max-width: 56ch; margin: 16px 0 0;
}

/* ── Variation A — candy column cards (3-up roster of claimed faces) ── */
.fc-banner-head {
  padding: 44px 44px 64px;
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
}
/* live-app banner type (the mockup carried these inline on the showcase page) */
.fc-banner-head h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5vw, 52px);
  color: var(--pg-on-candy); margin: 0; letter-spacing: -0.02em; line-height: 0.98;
  position: relative; z-index: 1;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
}
.fc-banner-head .fcx-blurb {
  font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--pg-on-candy-soft); max-width: 56ch; margin: 14px 0 0;
  position: relative; z-index: 1;
}
/* the sheet needs breathing room when the page container is flush */
.fc-sheet { margin: 10px 0 40px; }
/* When the candy sheet sits inside the gbx sidebar shell (Guidebook / Faceclaims /
   Timeline stitched layout), drop its standalone vertical margin so the sheet top
   aligns to the sidebar top. Specificity (0,3,0) > .fc-sheet (0,1,0). */
.gbx-layout .pg-sheet.fc-sheet { margin: 0; }
.fc-cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  padding: 8px 40px 40px;
}
@media (max-width: 860px) { .fc-cols { grid-template-columns: 1fr; } }

.fc-az {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 40px 26px;
}
.fc-az a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-mute); text-decoration: none;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--pg-well); border: 1px solid var(--glass-stroke);
  transition: all 160ms ease;
}
.fc-az a:hover, .fc-az a.on { color: #fff; background: linear-gradient(135deg,#f48bbb,var(--accent)); border-color: transparent; transform: translateY(-2px); }

.fc-claim-card {
  display: flex; flex-direction: column;
  background: var(--pg-well);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss);
  overflow: hidden;
  transition: transform 240ms cubic-bezier(.2,.8,.3,1.1), box-shadow 240ms ease, border-color 240ms ease;
}
.fc-claim-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card), var(--gloss);
  border-color: color-mix(in oklab, var(--accent) 38%, var(--glass-stroke));
}
.fc-claim-face {
  position: relative; padding: 26px 18px 20px; text-align: center;
  background: var(--pg-grad-2);
  -webkit-mask: var(--pg-foot-wave); mask: var(--pg-foot-wave);
}
.fc-claim-face .fc-face-name {
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 19px;
  color: var(--pg-on-candy); letter-spacing: 0; line-height: 1.2;
}
.fc-claim-foot {
  padding: 13px 16px 15px; text-align: center;
}
.fc-claim-foot .lbl {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
}
.fc-claim-foot .who {
  display: block; margin-top: 4px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink);
}

/* ── Variation B — clean table rows (claimed + reserves) ── */
.fc-tbl-section { padding: 4px 40px 34px; }
.fc-tbl-head {
  display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px;
}
.fc-tbl-head h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0;
}
.fc-tbl-head .ct {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-deep);
  background: var(--accent-wash); border-radius: 999px; padding: 3px 10px;
}
.fc-tbl-head .ln { flex: 1; height: 1px; background: linear-gradient(to right, var(--accent-soft), transparent); }

.fc-tbl {
  display: flex; flex-direction: column;
  background: var(--pg-well); border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-soft), var(--gloss);
}
.fc-tr {
  display: grid; grid-template-columns: 44px 1.1fr 1fr auto;
  align-items: center; gap: 16px;
  padding: 12px 18px; border: none; background: transparent; width: 100%;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  border-bottom: 1px solid var(--rule-soft);
  transition: background 160ms ease;
}
.fc-tr:last-child { border-bottom: none; }
.fc-tr:hover { background: var(--accent-wash); }
.fc-tr-portrait {
  width: 36px; height: 36px; border-radius: 11px; overflow: hidden; flex: 0 0 auto;
  background: var(--pg-grad-2); display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; color: var(--pg-on-candy); font-size: 15px;
  box-shadow: var(--gloss);
}
.fc-tr-portrait img { width: 100%; height: 100%; object-fit: cover; }
.fc-tr-claim { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.fc-tr-arrow { font-family: var(--font-display); font-style: italic; color: var(--ink-faint); }
.fc-tr-who { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-mute); justify-self: end; text-align: right; }
.fc-tr-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--accent-deep); justify-self: end; }

.fc-reserve-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 2px auto 0; width: fit-content;
  font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--accent-deep);
  background: var(--pg-well); border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--glass-stroke));
  border-radius: 999px; padding: 7px 18px; box-shadow: var(--shadow-soft);
}
.fc-clock {
  font-family: var(--font-mono); font-size: clamp(26px, 4vw, 40px); letter-spacing: 0.08em;
  color: var(--ink-soft); text-align: center; padding: 16px 0 4px;
}

/* banned chips */
.fc-banned-list { display: flex; flex-direction: column; gap: 1px; }
.fc-banned {
  display: flex; align-items: baseline; gap: 14px; padding: 11px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.fc-banned:last-child { border-bottom: none; }
.fc-banned .nm { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.fc-banned .rs { font-family: var(--font-display); font-style: italic; font-size: 13.5px; color: var(--ink-faint); }

/* ── Variation C — frosted tag-cloud / gallery wall ── */
.fc-wall { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 40px 40px; }
.fc-chip {
  display: flex; align-items: center; gap: 11px; padding: 9px 16px 9px 9px;
  background: var(--pg-well); border: 1px solid var(--glass-stroke);
  border-radius: 999px; box-shadow: var(--shadow-soft), var(--gloss);
  cursor: pointer; transition: transform 200ms cubic-bezier(.2,.9,.3,1.2), box-shadow 200ms ease, border-color 200ms ease;
}
.fc-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-card), var(--gloss); border-color: color-mix(in oklab,var(--accent) 40%, var(--glass-stroke)); }
.fc-chip .av {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: var(--bub-rim); padding: 2.5px; box-shadow: var(--shadow-soft);
}
.fc-chip .av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4); color: rgba(54,48,78,0.55);
  font-family: var(--font-display); font-style: italic; }
body.dark-mode .fc-chip .av span { background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e); color: #cfc6e6; }
.fc-chip .tx { display: flex; flex-direction: column; line-height: 1.15; }
.fc-chip .tx .face { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 15px; color: var(--ink); }
.fc-chip .tx .who { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }

/* ── Reserves + Banned (sit below Variation A) — two columns each ── */
.fc-sub-head {
  display: flex; align-items: baseline; gap: 12px; padding: 0 40px; margin: 30px 0 14px;
}
.fc-sub-head:first-child { margin-top: 8px; }
.fc-sub-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0; white-space: nowrap; }
.fc-sub-head .ct { font-family: var(--font-mono); font-size: 9px; color: var(--accent-deep); background: var(--accent-wash); border-radius: 999px; padding: 3px 10px; }
.fc-sub-head .ln { flex: 1; height: 1px; background: linear-gradient(to right, var(--accent-soft), transparent); }

.fc-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 40px; }
@media (max-width: 760px) { .fc-twocol { grid-template-columns: 1fr; } }
.fc-twocol.last { padding-bottom: 40px; }

/* ── Alphabet filter grid (Claimed section pill popover) ── */
.fc-alpha-filter { padding-top: 2px; }
.fc-alpha-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding: 4px 0 4px;
}
.fc-alpha-btn {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  height: 30px; border-radius: 8px; border: 1px solid var(--glass-stroke);
  background: var(--pg-well); color: var(--ink-mute); cursor: pointer;
  transition: all 140ms ease;
}
.fc-alpha-btn:hover { color: var(--accent-deep); border-color: var(--accent-soft); background: var(--accent-wash); }
.fc-alpha-btn--on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border-color: transparent; }

.fc-res-card {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss);
}
.fc-res-av {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--pg-grad-2); color: var(--pg-on-candy); font-family: var(--font-display); font-style: italic; font-size: 16px;
  box-shadow: var(--gloss);
}
.fc-res-tx { flex: 1; min-width: 0; line-height: 1.2; }
.fc-res-tx .face { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 16px; color: var(--ink); display: block; }
.fc-res-tx .for { font-family: var(--font-body); font-size: 11px; color: var(--ink-mute); }
.fc-res-tx .for b { font-weight: 600; color: var(--accent-deep); }
.fc-res-time {
  flex: 0 0 auto; text-align: right; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--ink-faint);
}
.fc-res-time .big { display: block; font-size: 13px; color: var(--accent-deep); letter-spacing: 0.04em; }

.fc-ban-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.fc-ban-card i { color: var(--ink-faint); font-size: 18px; flex: 0 0 auto; }
.fc-ban-tx { flex: 1; min-width: 0; line-height: 1.3; }
.fc-ban-tx .nm { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); display: block; }
.fc-ban-tx .rs { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink-faint); }

/* Process section admin controls */
.fc-process-section { min-height: 40px; }
.fc-process-admin-bar { display: flex; align-items: center; margin-bottom: 16px; }
.fc-process-edit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-process-editor { margin-top: 4px; }
.fc-process-blocks { margin-top: 0; }
.fc-process-empty { margin-top: 0; }

/* ============================================================
   PAGE HEADER — shared big intro used by Directory / Ad Board
   ============================================================ */
.pg-head { max-width: 1180px; margin: 0 auto; padding: 40px clamp(18px,4vw,44px) 6px; }
.pg-head h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(34px,4.6vw,46px);
  color: var(--ink); margin: 0; letter-spacing: -0.02em; line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
}
.pg-head .scr { font-family: var(--font-display); font-style: italic; font-size: 0.5em; color: var(--accent-deep); margin-left: 10px; }
.pg-head .note { font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); margin: 10px 0 0; }

/* ============================================================
   DIRECTORY HEADING — title + thin line + pill popovers
   Shared by Characters (registry) and Members (userDirectory).
   ============================================================ */
.dir-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 28px;
}
.dir-heading__title-row {
  display: flex; align-items: baseline; gap: 14px; flex: 1; min-width: 0;
}
.dir-heading__title {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--ink); margin: 0; white-space: nowrap;
}
.dir-heading__title .it { font-style: italic; }
.dir-heading__ln {
  flex: 1; height: 1px;
  background: linear-gradient(to right, var(--accent-soft), transparent);
  align-self: center; margin-top: 2px;
}
.dir-heading__pills {
  display: flex; gap: 8px; flex-shrink: 0;
}

/* Pill button — inherits .dir-foot-btn but not full-width */
.dir-pill-btn {
  flex: none; padding: 7px 14px;
}
/* #11: `.dir-foot-btn{flex:1}` is declared LATER in this file at equal specificity
   and otherwise wins, stretching the add-pill (`dir-foot-btn dir-pill-btn`,
   plus-icon + TEXT) to fill its row. The compound selector restores width-to-content
   in every context without touching plain card-footer buttons (which keep flex:1 to
   split a row — e.g. member cards #7). */
.dir-foot-btn.dir-pill-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.dir-pill-btn--active {
  color: var(--accent-deep); border-color: var(--accent-soft);
}

/* Popover opens downward — override notebook-dock-menu (which opens upward) */
.dir-pill-popover {
  position: absolute;
  bottom: auto;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  z-index: 40;
}

/* Phase 18 (phone): stack the directory heading so the title and the pill row
   each get a full line; cap the filter popover to the viewport width. */
@media (max-width: 480px) {
  .dir-heading { flex-direction: column; align-items: stretch; gap: 12px; }
  .dir-heading__title-row { flex: 0 0 auto; }
  .dir-heading__pills { flex-wrap: wrap; }
  .dir-pill-popover { max-width: calc(100vw - 32px); }
}

/* Arrow points UP (inverted vs notebook bottom-arrow) */
.dir-pill-popover__arrow {
  position: absolute;
  top: -7px;
  right: 14px;
  width: 14px; height: 14px;
  background: rgba(255,255,255,0.97);
  border-left: 1px solid var(--glass-stroke, rgba(255,255,255,0.75));
  border-top: 1px solid var(--glass-stroke, rgba(255,255,255,0.75));
  transform: rotate(45deg);
}

/* Search body inside the search popover */
.dir-pill-search-body {
  display: flex; align-items: center; gap: 6px;
  margin: 0 8px 8px; padding: 8px 12px;
  background: var(--pg-well); border: 1px solid var(--rule); border-radius: 999px;
}
.dir-pill-search-input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  outline: none;
}
.dir-pill-search-input::placeholder { color: var(--ink-faint); font-style: italic; }
.dir-pill-search-clear {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--ink-mute); flex-shrink: 0;
  transition: color 150ms;
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
/* Icon within clear button keeps a legible size */
.dir-pill-search-clear i { font-size: 11px; }
.dir-pill-search-clear:hover { color: var(--ink); }

/* Filter popover items — mirror notebook-dock-menu__item spacing */
.dir-filter-section {
  padding: 4px 8px 8px;
}
.dir-filter-label {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
  padding: 6px 4px 4px; display: block;
}

/* ============================================================
   DIRECTORY  (members) — filter rail + rich glass member cards
   ============================================================ */
.dir { max-width: 1180px; margin: 0 auto; padding: 18px clamp(18px,4vw,44px) 90px;
  display: grid; grid-template-columns: 252px 1fr; gap: 26px; align-items: start; }
/* live app: Members renders dir-heading + dir-grid directly (heading+pills replace
   the bottom-bar controls) — give both the page frame the .dir wrapper carried */
.dir-heading-wrap { max-width: 1180px; margin: 0 auto; padding: 40px clamp(18px,4vw,44px) 0; }
.dir-page .dir-grid { max-width: 1180px; margin: 0 auto; padding: 18px clamp(18px,4vw,44px) 90px; }
@media (max-width: 920px) { .dir { grid-template-columns: 1fr; } }

.dir-rail {
  position: sticky; top: 84px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--gloss);
  padding: 20px 18px; display: flex; flex-direction: column; gap: 22px;
}
.dir-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--pg-well); border: 1px solid var(--rule); border-radius: 999px;
  padding: 9px 15px; color: var(--ink-faint);
}
.dir-search i { font-size: 15px; color: var(--accent); }
.dir-search input { border: none; background: transparent; flex: 1; font-family: var(--font-body); font-size: 13px; color: var(--ink); }
.dir-search input::placeholder { color: var(--ink-faint); font-style: italic; }

.dir-group .lbl {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
  display: block; margin-bottom: 11px;
}
.dir-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-chip {
  appearance: none; cursor: pointer; font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft);
  background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: 999px;
  padding: 5px 12px; transition: all 150ms ease;
}
.dir-chip:hover { color: var(--accent-deep); border-color: var(--accent-soft); }
.dir-chip.on { color: #fff; background: linear-gradient(135deg,#f48bbb,var(--accent)); border-color: transparent; box-shadow: 0 4px 12px -6px color-mix(in oklab,var(--accent) 60%, transparent); }

.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1180px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .dir-grid { grid-template-columns: 1fr; } }

.dir-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--gloss); overflow: hidden;
  transition: transform 240ms cubic-bezier(.2,.8,.3,1.1), box-shadow 240ms ease, border-color 240ms ease;
}
.dir-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card), 0 26px 50px -22px rgba(150,120,190,0.3), var(--gloss); border-color: color-mix(in oklab,var(--accent) 34%, var(--glass-stroke)); }
.dir-card-banner {
  position: relative; padding: 22px 22px 30px; background: var(--pg-grad);
  -webkit-mask: var(--pg-foot-wave); mask: var(--pg-foot-wave);
}
.dir-card-banner h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: -0.01em;
  color: var(--pg-on-candy); margin: 0; line-height: 1; position: relative; z-index: 1;
}
.dir-card-body { display: flex; gap: 16px; padding: 10px 20px 18px; margin-top: -8px; }
.dir-avatar {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
  background: #fff; padding: 3px; box-shadow: var(--shadow-soft); align-self: flex-start;
}
.dir-avatar span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4); color: rgba(54,48,78,0.5);
  font-family: var(--font-display); font-style: italic; font-size: 26px;
}
body.dark-mode .dir-avatar span { background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e); color: #cfc6e6; }
.dir-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dir-field {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--pg-well); border: 1px solid var(--rule-soft); border-radius: 999px;
  padding: 5px 13px;
}
.dir-field .k { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); flex: 0 0 auto; white-space: nowrap; }
.dir-field .v { font-family: var(--font-body); font-size: 12.5px; color: var(--ink); margin-left: auto; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dir-field .v.accent { color: var(--accent-deep); }
.dir-card-foot {
  display: flex; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--rule);
}
.dir-foot-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: 999px;
  padding: 9px 10px; cursor: pointer; transition: all 160ms ease;
}
.dir-foot-btn i { font-size: 13px; }
.dir-foot-btn:hover { color: var(--accent-deep); border-color: var(--accent-soft); transform: translateY(-1px); }
.dir-foot-btn.primary { color: #fff; background: linear-gradient(140deg,#f48bbb,#ec6ba2 55%,#e0568f); border-color: transparent; }
.dir-foot-btn.primary:hover { filter: brightness(1.03); color: #fff; }
.dir-foot-btn.danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, var(--glass-stroke)); }
.dir-foot-btn.danger:hover { color: #fff; background: var(--danger); border-color: transparent; }

/* name link in card heading — clickable to profile */
.dir-card-name-link {
  appearance: none; background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: text-decoration 150ms ease;
}
.dir-card-name-link:hover { text-decoration: underline; }
.dir-card-name-link:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* admin pill badge in card heading */
.dir-admin-pill {
  display: inline-block; margin-left: 10px; font-family: var(--font-body);
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--accent);
  border-radius: 999px; padding: 4px 10px; vertical-align: baseline;
}

/* ============================================================
   AD BOARD  (seeking) — wanted-ad glass cards
   ============================================================ */
.adb { max-width: 1040px; margin: 0 auto; padding: 18px clamp(18px,4vw,44px) 90px; }
.adb-filter {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0 24px;
}
.adb-search {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px;
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: 999px; padding: 11px 18px; box-shadow: var(--shadow-soft), var(--gloss);
}
.adb-search i { color: var(--accent); font-size: 16px; }
.adb-search input { border: none; background: transparent; flex: 1; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); }
.adb-search input::placeholder { color: var(--ink-faint); font-style: italic; }
.adb-cat {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--glass-fill); border: 1px solid var(--glass-stroke); border-radius: 999px;
  padding: 11px 16px; box-shadow: var(--shadow-soft);
}
.adb-cat .v { color: var(--accent-deep); }
.adb-cat i { color: var(--ink-faint); }

.adb-grid { columns: 2; column-gap: 18px; padding: 0 40px 40px; }
@media (max-width: 820px) { .adb-grid { columns: 1; } }
.adb-card {
  break-inside: avoid; margin-bottom: 18px; display: flex; flex-direction: column;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss); overflow: hidden;
  transition: transform 230ms cubic-bezier(.2,.8,.3,1.1), box-shadow 230ms ease, border-color 230ms ease;
}
.adb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), var(--gloss); border-color: color-mix(in oklab,var(--accent) 34%, var(--glass-stroke)); }
.adb-card-top { display: flex; gap: 7px; flex-wrap: wrap; padding: 16px 18px 0; }
.adb-pill {
  font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px;
}
.adb-pill.cat { color: var(--accent-deep); background: var(--accent-wash); border: 1px solid color-mix(in oklab,var(--accent) 24%, transparent); }
.adb-pill.cw { color: var(--warn, #b07d2a); background: var(--warn-wash, color-mix(in oklab,#e0a93a 16%, transparent)); border: 1px solid var(--warn-border, color-mix(in oklab,#e0a93a 34%, transparent)); }
/* CW symbol in adboard card-top: .cw-symbol from base.css, placed after the category pill. */
.adb-card-top .cw-symbol { flex-shrink: 0; }
.adb-card-top:empty { display: none; }
.adb-card-title {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em;
  color: var(--ink); margin: 12px 0 0; padding: 0 18px; line-height: 1.12;
}
.adb-card-tagline {
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--accent-deep);
  margin: 6px 0 0; padding: 0 18px;
}
.adb-card-desc {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 12px 0 0; padding: 0 18px;
}
.adb-card-foot {
  display: flex; align-items: center; gap: 11px; margin-top: 16px;
  padding: 13px 18px; border-top: 1px solid var(--rule); background: var(--pg-rail);
}
.adb-foot-av {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; padding: 2px; box-shadow: var(--shadow-soft);
}
.adb-foot-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4); color: rgba(54,48,78,0.55);
  font-family: var(--font-display); font-style: italic; font-size: 15px; }
body.dark-mode .adb-foot-av span { background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e); color: #cfc6e6; }
.adb-foot-meta { flex: 1; min-width: 0; line-height: 1.15; }
.adb-foot-meta .by { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.adb-foot-meta .nm { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink); display: block; }
.adb-foot-go { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); color: var(--accent-deep); box-shadow: var(--shadow-soft); transition: all 160ms ease; }
.adb-card:hover .adb-foot-go { transform: translateX(2px); color: var(--accent); }

/* live-app shim: the app renders clickable cards as <button> (mockup used
   divs) — neutralize UA button styles so the card skins apply cleanly.
   border must be fully zeroed THEN the hairlines re-stated: the component
   rules above only set border / border-top shorthand pieces, so the UA's
   2px outset button border kept painting on the unset sides (the dark band
   around the Adboard card footer). */
button.fc-claim-card, button.fc-res-card, button.adb-card-foot {
  appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; cursor: pointer;
  border: none;
}
button.fc-claim-card { padding: 0; text-align: center; border: 1px solid var(--glass-stroke); }
button.fc-res-card   { border: 1px solid var(--glass-stroke); }
button.adb-card-foot { width: 100%; text-align: left; border-top: 1px solid var(--rule); }

/* ============================================================
   PLOTTING TAB — wanted-ad portrait placeholder + hidden label
   ============================================================ */

/* Wanted-ad portrait placeholder: mirrors .dir-avatar span treatment —
   fills the circle, applies the soft gradient, centers the initial. */
.connection-portrait .connection-portrait-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4);
}
body.dark-mode .connection-portrait .connection-portrait-fallback {
  background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e);
  color: #cfc6e6;
}

/* "Hidden from Ad Board" label — shown below tagline in view mode */
.wanted-hidden-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-style: italic;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* empty states (live-app additions; not in the handoff mockup) */
.adb-empty, .fc-empty {
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  color: var(--ink-mute); text-align: center; padding: 34px 18px;
}
.adb-empty { padding-left: 40px; padding-right: 40px; }

/* ============================================================
   PROFILE STATS  (hero — 3 viz variations)
   ============================================================ */
.pf-wrap { max-width: 1180px; margin: 0 auto; padding: 22px clamp(18px,4vw,44px) 90px; }

/* the stats sheet */
.stats {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-modal);
  box-shadow: var(--shadow-card), var(--gloss);
  padding: 26px 28px 30px; position: relative; overflow: hidden;
}
.stats-title {
  display: flex; align-items: baseline; gap: 12px; margin: 2px 0 22px;
}
.stats-title h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0;
}
.stats-title .en { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-mute); }
.stats-title .upd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint); }

/* hero trio — big featured numbers */
.stats-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 620px) { .stats-hero { grid-template-columns: 1fr; } }
.stat-hero {
  position: relative; padding: 20px 20px 18px; border-radius: var(--radius-card);
  background: var(--pg-grad-2); overflow: hidden;
  box-shadow: var(--gloss);
}
.stat-hero::after { content: ""; position: absolute; inset: 0; background: var(--glass-aero); pointer-events: none; }
.stat-hero .ic { position: absolute; top: 14px; right: 15px; font-size: 20px; color: var(--pg-on-candy); opacity: 0.5; }
.stat-hero .num {
  font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 0.95;
  color: var(--pg-on-candy); letter-spacing: -0.02em; position: relative; z-index: 1;
  font-variation-settings: "opsz" 120, "SOFT" 60, "WONK" 0;
}
.stat-hero .lbl {
  display: block; margin-top: 7px; position: relative; z-index: 1;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pg-on-candy-soft);
}

/* section subheads inside stats */
.stats-sub {
  display: flex; align-items: center; gap: 11px; margin: 24px 0 13px;
}
.stats-sub .t { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.stats-sub .ln { flex: 1; height: 1px; background: linear-gradient(to right, var(--accent-soft), transparent); }

/* candy bar breakdown (Var A) — built on the real ship-slider skin */
.stat-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 36px; }
@media (max-width: 620px) { .stat-bars { grid-template-columns: 1fr; } }
.stat-bars .ship-slider-pct::after { content: ""; }

/* glass tiles (Var B) */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 15px 15px 14px;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--gloss); position: relative; overflow: hidden;
  transition: transform 200ms cubic-bezier(.2,.9,.3,1.2), box-shadow 200ms ease, border-color 200ms ease;
}
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card), var(--gloss); border-color: color-mix(in oklab,var(--accent) 32%, var(--glass-stroke)); }
.stat-tile .ti { font-size: 17px; color: var(--accent); margin-bottom: 5px; }
.stat-tile .tn {
  font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1; color: var(--ink); letter-spacing: -0.01em;
  font-variation-settings: "opsz" 90, "SOFT" 50, "WONK" 0;
}
.stat-tile .tl { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

/* compact inline stat row (Var C mix) */
.stat-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 760px) { .stat-mini { grid-template-columns: repeat(2, 1fr); } }
.stat-mini .m {
  text-align: center; padding: 13px 8px 11px; border-radius: var(--radius-field);
  background: var(--pg-well); border: 1px solid var(--rule-soft);
}
.stat-mini .m .n { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); display: block; line-height: 1; }
.stat-mini .m .k { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-top: 6px; }

/* stats customization (edit mode) — rename / hide / reorder chrome per stat */
.stat-edit-wrap { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat-edit-wrap--hidden > :first-child { opacity: 0.35; }
.stat-edit-tools {
  display: flex; align-items: center; gap: 4px;
}
.stat-edit-btn {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-stroke); background: var(--pg-well);
  color: var(--ink-mute); cursor: pointer; font-size: 12px; padding: 0;
  transition: color 150ms ease, transform 150ms ease;
}
.stat-edit-btn:hover { color: var(--accent-deep); transform: translateY(-1px); }
.stat-edit-btn.is-off { color: var(--accent-deep); background: var(--accent-wash); }
.stat-edit-label {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--ink); background: var(--pg-well); border: 1px solid var(--rule);
  border-radius: 999px; padding: 4px 10px; outline: none;
}
.stat-edit-label:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

/* log-session affordance (notebook integration, coming later) */
.stats-log {
  display: flex; align-items: center; gap: 13px; margin-top: 24px; padding: 15px 18px;
  border-radius: var(--radius-card); border: 1px dashed color-mix(in oklab,var(--accent) 32%, var(--rule));
  background: var(--accent-wash);
}
.stats-log i { font-size: 22px; color: var(--accent-deep); }
.stats-log .tx { flex: 1; min-width: 0; }
.stats-log .tx b { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 16px; color: var(--ink); }
.stats-log .tx span { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-mute); margin-top: 1px; }

/* ============================================================
   DIRECT MESSAGES — two-pane shell + candy chat bubbles
   ============================================================ */
.dm { max-width: 1180px; margin: 0 auto; padding: 18px clamp(18px,4vw,44px) 90px; }
.dm-shell {
  display: grid; grid-template-columns: 320px 1fr;
  height: 560px; overflow: hidden;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-modal);
  box-shadow: var(--shadow-card), var(--gloss);
}
@media (max-width: 760px) { .dm-shell { grid-template-columns: 1fr; height: auto; } .dm-thread { display: none; } }

/* — left: conversation list — */
.dm-list { display: flex; flex-direction: column; border-right: 1px solid var(--rule); min-height: 0; }
.dm-list-head { padding: 15px 20px; min-height: 72px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule); }
.dm-list-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--ink); margin: 0; }
.dm-list-search {
  display: flex; align-items: center; gap: 9px; background: var(--pg-well);
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px; color: var(--ink-faint);
}
.dm-list-search i { color: var(--accent); font-size: 14px; }
.dm-list-search input { border: none; background: transparent; flex: 1; font-family: var(--font-body); font-size: 12.5px; color: var(--ink); }
.dm-convs { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.dm-conv {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; cursor: pointer;
  border-radius: 16px; border: 1px solid transparent; transition: background 150ms ease, border-color 150ms ease;
  text-align: left; background: transparent; width: 100%; font: inherit; color: inherit;
}
.dm-conv:hover { background: var(--accent-wash); }
.dm-conv.active { background: var(--pg-well); border-color: color-mix(in oklab,var(--accent) 30%, var(--glass-stroke)); box-shadow: var(--shadow-soft); }
.dm-conv-av {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background: var(--rule, #e3e0ea); padding: 2.5px; box-shadow: var(--shadow-soft); position: relative;
}
.dm-conv-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4); color: rgba(54,48,78,0.55); font-family: var(--font-display); font-style: italic; font-size: 17px; }
body.dark-mode .dm-conv-av span { background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e); color: #cfc6e6; }
.dm-conv-tx { flex: 1; min-width: 0; }
.dm-conv-top { display: flex; align-items: baseline; gap: 8px; }
.dm-conv-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-conv-time { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint); flex: 0 0 auto; }
.dm-conv-prev { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.dm-conv.unread .dm-conv-name { color: var(--ink); }
.dm-conv.unread .dm-conv-prev { color: var(--ink-soft); font-weight: 500; }
.dm-conv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; box-shadow: 0 0 6px color-mix(in oklab,var(--accent) 55%, transparent); }

/* — right: reading panel — */
.dm-thread { display: flex; flex-direction: column; min-height: 0; }
.dm-thread-head {
  display: flex; align-items: center; gap: 13px; padding: 15px 22px; border-bottom: 1px solid var(--rule);
  background: var(--pg-rail);
}
.dm-thread-av { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; background: var(--rule, #e3e0ea); padding: 2.5px; box-shadow: var(--shadow-soft); }
.dm-thread-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4); color: rgba(54,48,78,0.55); font-family: var(--font-display); font-style: italic; }
body.dark-mode .dm-thread-av span { background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e); color: #cfc6e6; }
.dm-thread-id { flex: 1; min-width: 0; }
.dm-thread-id .nm { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.dm-thread-id .st { font-family: var(--font-body); font-size: 11px; color: var(--ink-mute); display: flex; align-items: center; gap: 6px; }
.dm-thread-act { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); color: var(--ink-soft); cursor: pointer; transition: all 160ms ease; }
.dm-thread-act:hover { color: var(--accent-deep); transform: translateY(-1px); }

.dm-stream { flex: 1; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dm-daydiv { text-align: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0; }
.dm-row { display: flex; flex-direction: column; max-width: 74%; }
.dm-row.recv { align-self: flex-start; align-items: flex-start; }
.dm-row.sent { align-self: flex-end; align-items: flex-end; }
.dm-msg { padding: 11px 16px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; box-shadow: var(--shadow-soft); }
.dm-row.recv .dm-msg {
  background: rgba(255,255,255,0.86); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 19px 19px 19px 6px;
}
body.dark-mode .dm-row.recv .dm-msg { background: var(--glass-well); color: var(--ink); border-color: var(--glass-stroke); }
.dm-row.sent .dm-msg {
  background: linear-gradient(140deg, #c9d1f6 0%, #e6d2f0 50%, #f8d1e2 100%); color: #43345a;
  border: 1px solid var(--glass-stroke); border-radius: 19px 19px 6px 19px; box-shadow: var(--shadow-soft), var(--gloss);
}
.dm-time { font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint); margin: 4px 4px 0; }

.dm-sendbar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--pg-rail); }
.dm-sendwell {
  flex: 1; display: flex; align-items: center; gap: 10px; background: var(--paper-soft);
  border: 1px solid var(--rule); border-radius: 999px; padding: 9px 16px; box-shadow: inset 0 1px 3px rgba(150,120,190,0.08);
}
body.dark-mode .dm-sendwell { background: var(--glass-well); }
.dm-sendwell i { color: var(--accent-deep); font-size: 18px; }
.dm-sendwell input { border: none; background: transparent; flex: 1; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); }
.dm-sendwell input::placeholder { color: var(--ink-faint); font-style: italic; }
.dm-send {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; border: none; cursor: pointer;
  background: linear-gradient(135deg, #f56fa6, var(--accent)); color: #fff; font-size: 18px;
  box-shadow: 0 6px 16px -6px color-mix(in oklab,var(--accent) 55%, transparent); transition: transform 180ms ease;
}
.dm-send:hover { transform: translateY(-2px) scale(1.04); }

/* ============================================================
   COMPOSE — shared editor card (DM compose + forum compose)
   ============================================================ */
.cmp { max-width: 760px; margin: 0 auto; padding: 22px clamp(18px,4vw,44px) 90px; }
.cmp.wide { max-width: 880px; }
.cmp-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: var(--radius-modal);
  box-shadow: var(--shadow-card), var(--gloss); overflow: hidden;
}
.cmp-head { padding: 24px 30px 20px; background: var(--pg-rail); border-bottom: 1px solid var(--rule); }
.cmp-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.cmp-head p { font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); margin: 6px 0 0; }
.cmp-body { padding: 24px 30px 8px; display: flex; flex-direction: column; gap: 20px; }
.cmp-field { display: flex; flex-direction: column; gap: 8px; }
.cmp-field > .label, .cmp-lbl {
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
}
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .cmp-row { grid-template-columns: 1fr; } }

/* glass input wells */
.cmp-input, .cmp-select, .cmp-textarea {
  font-family: var(--font-body); color: var(--ink); width: 100%;
  background: var(--pg-well);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--rule); border-radius: var(--radius-field);
  padding: 12px 15px; font-size: 14px; outline: none;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.cmp-input::placeholder, .cmp-textarea::placeholder { color: var(--ink-faint); font-style: italic; }
.cmp-input:focus, .cmp-select:focus, .cmp-textarea:focus { border-color: var(--accent); background: var(--paper-soft); box-shadow: 0 0 0 4px var(--accent-wash); }
body.dark-mode .cmp-input:focus, body.dark-mode .cmp-select:focus, body.dark-mode .cmp-textarea:focus { background: var(--glass-raise); }
.cmp-textarea { min-height: 220px; resize: vertical; line-height: 1.6; border-radius: var(--radius-card); }
.cmp-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23938da8' stroke-width='2'><path d='M3 5l4 4 4-4'/></svg>"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; cursor: pointer; }

/* character picker */
.cmp-charpick { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-char {
  display: flex; align-items: center; gap: 10px; padding: 7px 15px 7px 7px; cursor: pointer;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); border-radius: 999px;
  transition: all 170ms cubic-bezier(.2,.9,.3,1.2);
}
.cmp-char:hover { transform: translateY(-2px); border-color: var(--accent-soft); box-shadow: var(--shadow-soft); }
.cmp-char.on { border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow-soft); }
.cmp-char .av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; background: var(--bub-rim); padding: 2px; }
.cmp-char .av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f3ecfb 70%, #ecdff4); color: rgba(54,48,78,0.55); font-family: var(--font-display); font-style: italic; font-size: 13px; }
body.dark-mode .cmp-char .av span { background: radial-gradient(circle at 38% 30%, #4a4170, #3a3158 70%, #322a4e); color: #cfc6e6; }
.cmp-char .nm { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); }
.cmp-char.on .nm { color: var(--accent-deep); }

/* ============================================================
   SEARCH PAGE
   ============================================================ */

/* gbx-layout override: search uses full available width in the content column */
.search-gbx-layout { width: 100%; }
/* Sheet sits flush like faceclaims */
.search-sheet { max-width: 700px; }
/* Sub-head for the Search input row */
.search-input-subhead { margin-bottom: 6px; }
/* Results body spacing */
.search-results-body { padding-top: 4px; }
/* Post/message body snippets wrap rather than truncate */
.search-result-post-snippet { white-space: normal; line-height: 1.4; font-weight: 400; }

/* ── Input ── */
.search-input-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--pg-well, rgba(255,255,255,0.62));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: 14px;
  box-shadow: var(--shadow-soft); margin-bottom: 8px;
  padding: 0 14px; gap: 10px;
}
.search-input-icon { font-size: 18px; color: var(--accent-deep); flex: 0 0 auto; }
.search-input {
  flex: 1; border: none; background: transparent; padding: 14px 0;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  outline: none;
}
.search-input::placeholder { color: var(--ink-faint); font-style: italic; }
.search-input-clear {
  flex: 0 0 auto; appearance: none; -webkit-appearance: none; border: none; background: none;
  cursor: pointer; padding: 4px; color: var(--ink-mute); font-size: 15px; line-height: 1;
  transition: color 140ms ease;
}
.search-input-clear:hover { color: var(--ink); }

/* ── Result rows ── */
.search-result-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; margin-bottom: 6px; border-radius: 12px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-soft);
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit; cursor: pointer;
  text-align: left; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.search-result-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), var(--gloss);
  border-color: color-mix(in oklab,var(--accent) 34%, var(--glass-stroke));
}
.srr-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  overflow: hidden; display: grid; place-items: center;
  background: var(--pg-grad, var(--accent-wash)); color: var(--accent-deep);
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  border: 1px solid var(--glass-stroke);
}
.srr-avatar-icon { font-size: 18px; }
.srr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.srr-name { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srr-meta { font-family: var(--font-body); font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srr-go { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--pg-well); border: 1px solid var(--glass-stroke); color: var(--accent-deep); font-size: 13px; transition: all 150ms ease; }
.search-result-row:hover .srr-go { transform: translateX(2px); color: var(--accent); }

/* ── Misc ── */
.search-empty-note {
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  color: var(--ink-mute); padding: 8px 2px 16px; margin: 0;
}

/* editor toolbar (forum) */
.cmp-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; background: var(--pg-rail); border: 1px solid var(--rule); border-radius: var(--radius-field) var(--radius-field) 0 0; border-bottom: none; }
.cmp-tool { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: none; color: var(--ink-mute); font-size: 15px; transition: all 150ms ease; }
.cmp-tool:hover { color: var(--accent-deep); background: var(--pg-well); }
.cmp-textarea.with-toolbar { border-radius: 0 0 var(--radius-card) var(--radius-card); margin-top: 0; }

.cmp-foot { display: flex; align-items: center; gap: 12px; padding: 18px 30px 24px; border-top: 1px solid var(--rule); margin-top: 10px; }
.cmp-foot .spacer { flex: 1; }
.cmp-counter { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }

/* ============================================================
   SITE LOCK — keyhole splash (3 variations, framed stages)
   ============================================================ */
.lock-stage {
  position: relative; max-width: 1180px; margin: 0 auto; height: 640px; overflow: hidden;
  border-radius: var(--radius-modal); display: grid; place-items: center;
  background:
    radial-gradient(900px 600px at 18% 8%,  rgba(190,201,247,0.75), transparent 60%),
    radial-gradient(820px 560px at 100% 4%, rgba(250,206,224,0.7), transparent 56%),
    radial-gradient(900px 700px at 50% 118%, rgba(253,224,206,0.65), transparent 60%),
    var(--paper);
  border: 1px solid var(--glass-stroke);
}
body.dark-mode .lock-stage {
  background:
    radial-gradient(900px 600px at 18% 8%,  rgba(90,80,150,0.5), transparent 60%),
    radial-gradient(820px 560px at 100% 4%, rgba(140,80,120,0.42), transparent 56%),
    radial-gradient(900px 700px at 50% 118%, rgba(70,60,120,0.5), transparent 60%),
    var(--paper);
}

/* the keyhole emblem (CSS-drawn negative space, candy-filled) */
.keyhole {
  position: relative; width: 56px; height: 64px; margin: 0 auto;
}
.keyhole .circle {
  width: 38px; height: 38px; border-radius: 50%; margin: 0 auto;
  background: linear-gradient(140deg, #aeb8f0, #d4b9ec 48%, #f6a6c8);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.55), 0 4px 12px -4px color-mix(in oklab,var(--accent) 50%, transparent);
}
.keyhole .stem {
  width: 8px; height: 0; margin: -5px auto 0;
  border-bottom: 28px solid #ec8bb6;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  filter: drop-shadow(0 4px 8px color-mix(in oklab,var(--accent) 40%, transparent));
}

/* Var A — diary lock card */
.lock-card {
  width: 380px; max-width: 88%; text-align: center; padding: 40px 38px 34px;
  background: linear-gradient(165deg, rgba(255,255,255,0.93) 0%, rgba(249,236,245,0.86) 52%, rgba(238,233,251,0.84) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-stroke); border-radius: 28px;
  box-shadow: var(--shadow-card), 0 50px 90px -36px rgba(150,120,190,0.5), var(--gloss);
}
body.dark-mode .lock-card { background: var(--glass-panel); }
.lock-clasp {
  width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center;
  background: var(--glass-fill); border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-soft), var(--gloss);
}
.lock-card .ttl { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.lock-card .scr { font-family: var(--font-display); font-style: italic; color: var(--accent-deep); }
.lock-card .sub { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--ink-mute); margin: 10px 0 24px; }
.lock-pwd {
  display: flex; align-items: center; gap: 10px; background: var(--paper-soft);
  border: 1px solid var(--rule); border-radius: 999px; padding: 12px 18px; margin-bottom: 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.lock-pwd:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
body.dark-mode .lock-pwd { background: var(--glass-well); }
.lock-pwd i { color: var(--accent); font-size: 17px; }
.lock-pwd input { border: none; background: transparent; flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--ink); letter-spacing: 0.2em; }
.lock-pwd input::placeholder { color: var(--ink-faint); letter-spacing: 0; font-style: italic; }
.lock-btn {
  width: 100%; border: none; cursor: pointer; border-radius: 999px; padding: 13px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  background: linear-gradient(140deg, #f48bbb 0%, #ec6ba2 55%, #e0568f 100%);
  box-shadow: 0 10px 24px -10px color-mix(in oklab,var(--accent) 52%, transparent), var(--gloss); transition: transform 200ms ease, filter 200ms ease;
}
.lock-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.lock-hint { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink-faint); margin: 16px 0 0; }

/* Var B — floating frosted lock bubble */
.lock-bubble {
  width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-card), 0 30px 60px -24px rgba(150,120,190,0.5), var(--gloss);
  position: relative;
}
.lock-bubble::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--glass-aero); pointer-events: none; }
.lock-bubble i { font-size: 64px; color: var(--accent-deep); position: relative; z-index: 1; }
.lock-b-wrap { text-align: center; width: 360px; max-width: 90%; }
.lock-b-wrap .ttl { font-family: var(--font-display); font-weight: 600; font-size: 34px; color: var(--ink); margin: 18px 0 0; letter-spacing: -0.015em; }
.lock-b-wrap .sub { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-mute); margin: 8px 0 22px; }

/* Var C — keyhole window */
.lock-window { text-align: center; width: 420px; max-width: 92%; }
.lock-keyplate {
  width: 150px; height: 168px; margin: 0 auto 22px; display: grid; place-items: center; position: relative;
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); border-radius: 90px 90px 32px 32px;
  box-shadow: var(--shadow-card), var(--gloss);
}
.lock-keyplate .keyhole { transform: scale(1.25); }
.lock-window .ttl { font-family: var(--font-display); font-weight: 600; font-size: 30px; color: var(--ink); margin: 0; }
.lock-window .sub { font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); margin: 8px 0 22px; }
.lock-window .lock-pwd { max-width: 300px; margin-left: auto; margin-right: auto; }
.lock-window .lock-btn { max-width: 300px; margin: 0 auto; }
.stats-log .btn-accent { flex: 0 0 auto; }